@charset "UTF-8";
:root {
  --breakpoint-xs: 0px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  --color-canvas: var(--theme-canvas);
  --color-surface: var(--theme-surface);
  --color-surface-elevated: var(--theme-surface-elevated);
  --color-text: var(--theme-text);
  --color-text-muted: var(--theme-text-muted);
  --color-text-subtle: var(--theme-text-subtle);
  --color-text-inverse: var(--theme-text-inverse);
  --color-text-on-error: var(--color-surface);
  --color-text-on-success: var(--color-surface);
  --color-text-on-warning: var(--color-surface);
  --color-text-on-info: var(--color-surface);
  --color-border: var(--theme-border);
  --color-border-light: color-mix(in srgb, var(--color-border) 50%, transparent);
  --color-border-dark: color-mix(in srgb, var(--color-border) 70%, var(--color-text) 30%);
  --color-primary: var(--theme-primary);
  --color-secondary: var(--theme-secondary);
  --color-primary-hover: var(--theme-primary-hover);
  --color-primary-active: var(--theme-primary-active);
  --color-primary-light: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  --color-primary-medium: color-mix(in srgb, var(--color-primary) 20%, var(--color-surface));
  --color-surface-dark: color-mix(in srgb, var(--color-surface) 90%, var(--color-text));
  --color-success: var(--theme-success);
  --color-warning: var(--theme-warning);
  --color-error: var(--theme-error);
  --color-info: var(--theme-info);
  --color-error-dark: color-mix(in srgb, var(--color-error) 80%, var(--color-text));
  --color-success-dark: color-mix(in srgb, var(--color-success) 80%, var(--color-text));
  --color-warning-dark: color-mix(in srgb, var(--color-warning) 80%, var(--color-text));
  --color-info-dark: color-mix(in srgb, var(--color-info) 80%, var(--color-text));
  --color-focus: var(--color-primary);
  --shadow-xs: var(--theme-shadow-xs);
  --shadow-sm: var(--theme-shadow-sm);
  --shadow-md: var(--theme-shadow-md);
  --shadow-lg: var(--theme-shadow-lg);
  --shadow-xl: var(--theme-shadow-xl);
  --shadow-2xl: var(--theme-shadow-2xl);
  --gradient-primary: var(--theme-gradient-primary);
  --bg-gradient-primary: var(--theme-bg-gradient-primary);
  --gradient-secondary: var(--theme-gradient-secondary);
  --bg-gradient-secondary: var(--theme-bg-gradient-secondary);
  --gradient-success: var(--theme-gradient-success);
  --bg-gradient-success: var(--theme-bg-gradient-success);
  --gradient-warning: var(--theme-gradient-warning);
  --bg-gradient-warning: var(--theme-bg-gradient-warning);
  --gradient-error: var(--theme-gradient-error);
  --bg-gradient-error: var(--theme-bg-gradient-error);
  --gradient-info: var(--theme-gradient-info);
  --bg-gradient-info: var(--theme-bg-gradient-info);
  --gradient-neutral: var(--theme-gradient-neutral);
  --gradient-subtle: var(--theme-gradient-subtle);
  --gradient-surface: var(--theme-gradient-surface);
  --φ: 1.618033988749;
  --φ-inv: 0.618033988749;
  --base-unit: 1rem;
  --space-0: 0;
  --space-px: 1px;
  --space-0-25: calc(var(--base-unit) * 0.0625);
  --space-0-5: calc(var(--base-unit) * 0.115);
  --space-1: calc(var(--base-unit) * 0.236);
  --space-1-5: calc(var(--base-unit) * 0.382);
  --space-2: calc(var(--base-unit) * 0.486);
  --space-2-5: calc(var(--base-unit) * var(--φ-inv));
  --space-3: calc(var(--base-unit) * 0.786);
  --space-4: var(--base-unit);
  --space-5: calc(var(--base-unit) * 1.272);
  --space-6: calc(var(--base-unit) * var(--φ));
  --space-7: calc(var(--base-unit) * 1.75);
  --space-8: calc(var(--base-unit) * 2.058);
  --space-9: calc(var(--base-unit) * 2.25);
  --space-10: calc(var(--base-unit) * var(--φ) * var(--φ));
  --space-xs: var(--space-1);
  --space-sm: var(--space-2);
  --space-md: var(--space-4);
  --space-lg: var(--space-8);
  --space-11: calc(var(--base-unit) * 2.75);
  --space-12: calc(var(--base-unit) * 3.33);
  --space-14: calc(var(--base-unit) * 3.5);
  --space-15: calc(var(--base-unit) * 3.75);
  --space-16: calc(var(--base-unit) * pow(var(--φ), 3));
  --space-18: calc(var(--base-unit) * 4.5);
  --space-20: calc(var(--base-unit) * 5.388);
  --space-24: calc(var(--base-unit) * 6);
  --space-25: calc(var(--base-unit) * 6.25);
  --space-28: calc(var(--base-unit) * 7);
  --space-32: calc(var(--base-unit) * 8.719);
  --space-40: calc(var(--base-unit) * 10);
  --space-48: calc(var(--base-unit) * pow(var(--φ), 5));
  --space-56: calc(var(--base-unit) * 14);
  --space-64: calc(var(--base-unit) * pow(var(--φ), 6));
  --space-96: calc(var(--base-unit) * pow(var(--φ), 7));
  --space-120: calc(var(--base-unit) * 30);
  --space-300: calc(var(--base-unit) * 75);
  --radius-none: 0;
  --radius-sm: calc(var(--base-unit) * 0.236);
  --radius-md: calc(var(--base-unit) * 0.486);
  --radius-lg: calc(var(--base-unit) * var(--φ-inv));
  --radius-xl: var(--base-unit);
  --radius-2xl: calc(var(--base-unit) * 1.272);
  --radius-full: 9999px;
  --border-1: 1px;
  --border-2: calc(1px * var(--φ));
  --border-3: calc(1px * var(--φ) * var(--φ));
  --border-4: calc(1px * pow(var(--φ), 3));
  --z-base: 1;
  --z-above: 10;
  --z-content: 50;
  --z-sidebar: 100;
  --z-header: 110;
  --z-navigation: 120;
  --z-header-popup: 130;
  --z-overlay: 200;
  --z-floating: 300;
  --z-sticky: 400;
  --z-fixed: 500;
  --z-backdrop: 600;
  --z-loading: 700;
  --z-loading-spinner: 720;
  --z-badge: 800;
  --z-loader: 850;
  --z-popup-backdrop: 890;
  --z-popup: 900;
  --z-select: 920;
  --z-dropdown: 950;
  --z-modal-backdrop: 1000;
  --z-modal-container: 1010;
  --z-modal-overlay: 1020;
  --z-modal: 1030;
  --z-modal-content: 1040;
  --z-modal-popup: 1100;
  --z-modal-select: 1120;
  --z-drawer: 1200;
  --z-popover: 1210;
  --z-tooltip: 1220;
  --z-notification: 1230;
  --z-toast: 2700;
  --z-critical: 10000;
  --z-critical-overlay: 10010;
  --z-max: 10020;
  --duration-fast: 200ms;
  --duration-normal: 350ms;
  --duration-slow: 500ms;
  --duration-very-slow: 800ms;
  --duration-extended: 1200ms;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --transition-fast: all var(--duration-fast) var(--ease-out);
  --transition-normal: all var(--duration-normal) var(--ease-out);
  --transition-colors: color var(--duration-normal) var(--ease-out);
  --transition-opacity: opacity var(--duration-normal) var(--ease-out);
  --transition-transform: transform var(--duration-fast) var(--ease-out);
  --blur-xs: calc(2px * var(--φ-inv));
  --blur-sm: calc(2px * var(--φ));
  --blur-md: calc(2px * var(--φ) * var(--φ));
  --blur-lg: calc(2px * pow(var(--φ), 3));
  --blur-xl: calc(2px * pow(var(--φ), 4));
  --blur-2xl: calc(2px * pow(var(--φ), 5));
  --blur-3xl: calc(2px * pow(var(--φ), 6));
  --icon-xs: calc(var(--base-unit) * var(--φ-inv));
  --icon-sm: var(--base-unit);
  --icon-base: calc(var(--base-unit) * 1.272);
  --icon-lg: calc(var(--base-unit) * var(--φ));
  --icon-xl: calc(var(--base-unit) * 2.058);
  --icon-2xl: calc(var(--base-unit) * var(--φ) * var(--φ));
  --icon-3xl: calc(var(--base-unit) * 3.33);
  --icon-4xl: calc(var(--base-unit) * pow(var(--φ), 3));
  --icon-5xl: calc(var(--base-unit) * 5.388);
  --opacity-0: 0;
  --opacity-5: 0.05;
  --opacity-10: 0.1;
  --opacity-20: 0.2;
  --opacity-25: 0.25;
  --opacity-30: 0.3;
  --opacity-40: 0.4;
  --opacity-50: 0.5;
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-75: 0.75;
  --opacity-80: 0.8;
  --opacity-90: 0.9;
  --opacity-95: 0.95;
  --opacity-100: 1;
  --opacity-disabled: var(--opacity-60);
  --text-shadow-sm: 0 1px 2px var(--overlay-light);
  --text-shadow-md: 0 2px 4px var(--overlay-medium);
  --text-shadow-lg: 0 4px 8px var(--overlay-heavy);
  --state-hover-bg: color-mix(in srgb, var(--color-surface-elevated) 6%, transparent);
  --state-active-bg: color-mix(in srgb, var(--color-surface-elevated) 12%, transparent);
  --state-focus-ring: 0 0 0 2px var(--color-primary);
  --overlay-light: rgba(0, 0, 0, 0.1);
  --overlay-medium: rgba(0, 0, 0, 0.25);
  --overlay-heavy: rgba(0, 0, 0, var(--backdrop-opacity));
  --glass-blur-sm: blur(var(--blur-sm));
  --glass-blur-md: blur(var(--blur-md));
  --glass-blur-lg: blur(var(--blur-lg));
  --glass-blur-xl: blur(var(--blur-xl));
  --glass-saturate-intense: saturate(130%);
  --glass-brightness-intense: brightness(1.15);
  --glass-bg-light: color-mix(in srgb, var(--color-surface-elevated) 85%, transparent);
  --glass-bg-medium: color-mix(in srgb, var(--color-surface-elevated) 75%, transparent);
  --glass-bg-heavy: color-mix(in srgb, var(--color-surface-elevated) 65%, transparent);
  --glass-bg-frost: color-mix(in srgb, var(--color-surface-elevated) 80%, transparent);
  --glass-border-light: color-mix(in srgb, var(--color-border) 50%, transparent);
  --glass-border-strong: color-mix(in srgb, var(--color-border) 80%, var(--color-surface));
  --glass-hover-bg: color-mix(in srgb, var(--color-surface-elevated) 90%, transparent);
  --glass-error-bg: var(--theme-glass-error-bg);
  --glass-success-bg: var(--theme-glass-success-bg);
  --glass-border-frost: var(--theme-glass-border-frost);
  --glass-backdrop: var(--theme-glass-backdrop);
  --touch-target-min: 44px;
  --touch-target-lg: 48px;
  --reading-width: calc(40ch * var(--φ));
  --reading-line-height: calc(1 + var(--φ-inv) * 1.13);
  --offset-1: 1px;
  --offset-2: 2px;
  --offset-3: 3px;
  --offset-4: 4px;
  --offset-5: 5px;
  --offset-6: 6px;
  --offset-8: 8px;
  --list-item-min-height: var(--space-14);
  --chart-min-height: 300px;
  --chart-mobile-min-height: 200px;
  --chart-content-min-height: 150px;
  --chart-container-min-height: 250px;
  --chart-bars-min-height: 180px;
  --shadow-button-secondary: 0 var(--offset-2) var(--offset-4) rgba(0, 0, 0, 0.08);
  --shadow-button-primary: 0 var(--offset-4) 15px color-mix(in srgb, var(--color-primary) 25%, transparent);
  --shadow-button-primary-hover: 0 var(--offset-6) 20px color-mix(in srgb, var(--color-primary) 35%, transparent), 0 var(--offset-2) var(--offset-8) color-mix(in srgb, var(--color-primary) 25%, transparent);
  --shadow-button-info: 0 var(--offset-2) var(--offset-8) color-mix(in srgb, var(--color-info) 20%, transparent);
  --shadow-button-text: 0 var(--offset-8) color-mix(in srgb, var(--color-text) 8%, transparent);
  --shadow-button-enterprise: 0 var(--offset-4) 12px color-mix(in srgb, var(--color-primary) 25%, transparent);
  --shadow-button-enterprise-active: 0 var(--offset-2) var(--offset-6) color-mix(in srgb, var(--color-primary) 20%, transparent);
  --shadow-inset-button: inset 0 var(--offset-1) 0 color-mix(in srgb, var(--color-surface) 100%, rgba(255, 255, 255, 0.5));
  --shadow-inset-button-active: inset 0 var(--offset-2) var(--offset-4) color-mix(in srgb, var(--color-text) 10%, transparent);
  --shadow-inset-avatar: inset 0 var(--offset-1) var(--offset-2) rgba(0, 0, 0, 0.05);
  --shadow-avatar-elevated: 0 var(--space-2-5) var(--offset-5) rgba(0, 0, 0, 0.2), 0 var(--offset-1) var(--offset-2) rgba(0, 0, 0, 0.1);
  --shadow-glow-sm: 0 0 var(--space-2-5) var(--color-primary);
  --shadow-glow-primary: 0 0 var(--space-2-5) var(--color-primary-light);
  --shadow-drawer: 0 var(--space-2-5) var(--space-10) var(--overlay-light);
  --radio-mark-size: var(--space-2-5);
  --radio-outer-size: var(--space-5);
  --radio-border-width: 2px;
  --border-width-thin: 1px;
  --border-width-regular: 2px;
  --border-width-thick: 3px;
  --form-element-min-height: var(--space-14);
  --shadow-inset-neon-sm: inset 0 0 10px color-mix(in srgb, var(--color-primary) 15%, transparent);
  --shadow-inset-neon-md: inset 0 0 20px color-mix(in srgb, var(--color-primary) 25%, transparent);
  --shadow-inset-neumorphism: inset var(--offset-3) var(--offset-3) var(--offset-6) color-mix(in srgb, var(--color-text) 12%, transparent), inset calc(var(--offset-3) * -1) calc(var(--offset-3) * -1) var(--offset-6) color-mix(in srgb, var(--color-surface) 100%, rgba(255, 255, 255, 0.7));
  --shadow-neon-sm: 0 0 10px color-mix(in srgb, var(--color-primary) 20%, transparent);
  --shadow-neon-md: 0 0 20px color-mix(in srgb, var(--color-primary) 40%, transparent), 0 0 40px color-mix(in srgb, var(--color-primary) 20%, transparent);
  --shadow-neon-text: 0 0 var(--offset-3) color-mix(in srgb, var(--color-primary) 30%, transparent);
  --shadow-neon-text-hover: 0 0 var(--offset-8) color-mix(in srgb, var(--color-primary) 60%, transparent), 0 0 var(--offset-3) rgba(255, 255, 255, 0.4);
  --shadow-neumorphism: var(--offset-6) var(--offset-6) 12px color-mix(in srgb, var(--color-text) 15%, transparent), calc(var(--offset-6) * -1) calc(var(--offset-6) * -1) 12px color-mix(in srgb, var(--color-surface) 100%, rgba(255, 255, 255, 0.8));
  --shadow-neumorphism-hover: var(--offset-8) var(--offset-8) 16px color-mix(in srgb, var(--color-text) 18%, transparent), calc(var(--offset-8) * -1) calc(var(--offset-8) * -1) 16px color-mix(in srgb, var(--color-surface) 100%, rgba(255, 255, 255, 0.9));
  --outline-offset-focus: var(--offset-2);
  --transform-offset-hover-y: calc(var(--offset-1) * -1);
  --color-scrollbar-track: color-mix(in srgb, var(--color-border) 50%, transparent);
  --color-scrollbar-thumb: var(--color-text-subtle);
  --color-scrollbar-thumb-hover: var(--color-text-muted);
  --backdrop-blur: 8px;
  --backdrop-opacity: 0.6;
  --portal-min-width: 200px;
  --icon-font-size: 1.5rem;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes backdropFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(var(--blur-sm));
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes scaleOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}
@keyframes slideLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slideRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0.8;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes expandDown {
  0% {
    opacity: 0;
    transform: translateY(-20px) scaleY(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}
@keyframes expandDownBounce {
  0% {
    opacity: 0;
    transform: translateY(-30px) scaleY(0.8);
  }
  40% {
    opacity: 0.7;
    transform: translateY(-10px) scaleY(0.95);
  }
  70% {
    opacity: 0.9;
    transform: translateY(5px) scaleY(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}
@keyframes collapseUp {
  0% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px) scaleY(0);
  }
}
@keyframes errorPulse {
  0% {
    border-color: var(--color-error);
    transform: scale(1);
  }
  50% {
    border-color: var(--color-error);
    transform: scale(1.02);
  }
  100% {
    border-color: var(--color-error);
    transform: scale(1);
  }
}
@keyframes errorGlow {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
    transform: scale(1.05);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
@keyframes successFadeIn {
  from {
    opacity: 0;
    transform: translateY(-50%) scale(0.8);
  }
  50% {
    opacity: 0.8;
    transform: translateY(-50%) scale(1.1);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}
@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes spinTranslateY {
  from {
    transform: translateY(-50%) rotate(0deg);
  }
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}
@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}
@keyframes skeleton-wave {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200%);
  }
}
@keyframes shimmer-progress {
  0% {
    background-position: -100% center;
  }
  100% {
    background-position: 300% center;
  }
}
@keyframes progress {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes progress-slide-right {
  0% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(200%);
  }
}
@keyframes progress-slide-left {
  0% {
    transform: translateX(200%);
  }
  100% {
    transform: translateX(-200%);
  }
}
@keyframes progress-slide-up {
  0% {
    transform: translateY(200%);
  }
  100% {
    transform: translateY(-200%);
  }
}
@keyframes progress-slide-down {
  0% {
    transform: translateY(-200%);
  }
  100% {
    transform: translateY(200%);
  }
}
@keyframes progress-stripes {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 2rem 0;
  }
}
@keyframes progress-circle-spin {
  0% {
    transform: rotate(-90deg);
  }
  100% {
    transform: rotate(270deg);
  }
}
@keyframes pulseRing {
  0% {
    box-shadow: 0 0 0 0 currentColor;
  }
  70% {
    box-shadow: 0 0 0 6px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}
@keyframes breathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 5px currentColor;
  }
  50% {
    box-shadow: 0 0 20px currentColor, 0 0 30px currentColor;
  }
}
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeOutDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}
@keyframes slideUpSmooth {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes dropdownSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes dropdownSlideInUp {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes dropdownSlideUp {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes expand-width {
  0% {
    width: 0;
    opacity: 0;
  }
  100% {
    width: 60%;
    opacity: 1;
  }
}
@keyframes hover-lift {
  0% {
    transform: translateY(-1px) scale(1);
  }
  100% {
    transform: translateY(-1px) scale(1.02);
  }
}
@keyframes scale-morph {
  0% {
    transform: scaleX(1);
    opacity: 1;
  }
  50% {
    transform: scaleX(0.8);
    opacity: 0.7;
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}
@keyframes pulse-filter {
  0%, 100% {
    transform: scale(1.1);
    box-shadow: var(--theme-shadow-sm);
  }
  50% {
    transform: scale(1.15);
    box-shadow: var(--theme-shadow-md);
  }
}
@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 var(--space-2) color-mix(in srgb, var(--color-primary) 40%, transparent), 0 0 var(--space-4) color-mix(in srgb, var(--color-primary) 20%, transparent);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 var(--space-3) color-mix(in srgb, var(--color-primary) 60%, transparent), 0 0 var(--space-6) color-mix(in srgb, var(--color-primary) 30%, transparent), 0 0 var(--space-8) color-mix(in srgb, var(--color-primary) 10%, transparent);
    opacity: var(--opacity-90);
  }
}
@keyframes blazorErrorSlideIn {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes flipIn {
  from {
    opacity: 0;
    transform: perspective(1000px) rotateY(-90deg);
  }
  to {
    opacity: 1;
    transform: perspective(1000px) rotateY(0deg);
  }
}
@keyframes swingIn {
  0% {
    opacity: 0;
    transform: rotateX(-90deg);
    transform-origin: top;
  }
  70% {
    transform: rotateX(20deg);
    transform-origin: top;
  }
  100% {
    opacity: 1;
    transform: rotateX(0deg);
    transform-origin: top;
  }
}
@keyframes lineDrawIn {
  from {
    stroke-dashoffset: 1000;
    opacity: 0;
  }
  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes scrollHint {
  0%, 100% {
    opacity: 0.6;
    transform: translateX(0);
  }
  50% {
    opacity: 1;
    transform: translateX(-2px);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes errorStateIn {
  0% {
    border-color: var(--color-border);
    background: var(--color-surface-elevated);
    box-shadow: none;
  }
  50% {
    border-color: var(--color-error);
    background: color-mix(in srgb, var(--color-error) 5%, var(--color-surface-elevated));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-error) 30%, transparent);
  }
  100% {
    border-color: var(--color-error);
    background: color-mix(in srgb, var(--color-error) 3%, var(--color-surface-elevated));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-error) 20%, transparent);
  }
}
@keyframes slideInLeftScale {
  from {
    opacity: 0;
    transform: translateX(-100%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
@keyframes slideInRightScale {
  from {
    opacity: 0;
    transform: translateX(100%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
@keyframes slideInTopScale {
  from {
    opacity: 0;
    transform: translateY(-100%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes slideInBottomScale {
  from {
    opacity: 0;
    transform: translateY(100%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes fadeSlideOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
}
@keyframes widthShrink {
  from {
    width: 100%;
  }
  to {
    width: 0;
  }
}
@keyframes pulse-drop {
  0%, 100% {
    opacity: 1;
    transform: scaleY(1);
  }
  50% {
    opacity: 0.6;
    transform: scaleY(0.8);
  }
}
@keyframes column-resize-feedback {
  0% {
    box-shadow: 0 0 0 0 var(--color-primary-medium);
  }
  100% {
    box-shadow: 0 0 0 6px transparent;
  }
}
.loading {
  position: relative;
  min-height: 3rem;
  contain: layout style;
  isolation: isolate;
  will-change: contents;
  z-index: var(--z-base);
  transition: opacity var(--duration-normal) var(--ease-out);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.loading > *:not(.loading-text):not(.loading-spinner) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1em;
  height: 1em;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-normal) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
  z-index: var(--z-base);
}
.loading-xs {
  position: relative;
  min-height: 3rem;
  contain: layout style;
  isolation: isolate;
  will-change: contents;
  z-index: var(--z-base);
  transition: opacity var(--duration-normal) var(--ease-out);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.loading-xs > *:not(.loading-text):not(.loading-spinner) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.loading-xs::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.75em;
  height: 0.75em;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-fast) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
  z-index: var(--z-base);
}
.loading-sm {
  position: relative;
  min-height: 3rem;
  contain: layout style;
  isolation: isolate;
  will-change: contents;
  z-index: var(--z-base);
  transition: opacity var(--duration-normal) var(--ease-out);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.loading-sm > *:not(.loading-text):not(.loading-spinner) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.loading-sm::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.875em;
  height: 0.875em;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-normal) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
  z-index: var(--z-base);
}
.loading-md {
  position: relative;
  min-height: 3rem;
  contain: layout style;
  isolation: isolate;
  will-change: contents;
  z-index: var(--z-base);
  transition: opacity var(--duration-normal) var(--ease-out);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.loading-md > *:not(.loading-text):not(.loading-spinner) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.loading-md::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1em;
  height: 1em;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-normal) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
  z-index: var(--z-base);
}
.loading-lg {
  position: relative;
  min-height: 3rem;
  contain: layout style;
  isolation: isolate;
  will-change: contents;
  z-index: var(--z-base);
  transition: opacity var(--duration-normal) var(--ease-out);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.loading-lg > *:not(.loading-text):not(.loading-spinner) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.loading-lg::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.125em;
  height: 1.125em;
  border: 2.5px solid var(--color-border);
  border-radius: 50%;
  border: 2.5px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-slow) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
  z-index: var(--z-base);
}
.loading-xl {
  position: relative;
  min-height: 3rem;
  contain: layout style;
  isolation: isolate;
  will-change: contents;
  z-index: var(--z-base);
  transition: opacity var(--duration-normal) var(--ease-out);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.loading-xl > *:not(.loading-text):not(.loading-spinner) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.loading-xl::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.25em;
  height: 1.25em;
  border: 3px solid var(--color-border);
  border-radius: 50%;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-very-slow) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
  z-index: var(--z-base);
}
.loading-overlay {
  position: relative;
  min-height: 3rem;
  contain: layout style;
  isolation: isolate;
  will-change: contents;
  z-index: var(--z-base);
  transition: opacity var(--duration-normal) var(--ease-out);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.loading-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-loading);
  border-radius: inherit;
  animation: fadeIn var(--duration-fast) var(--ease-out);
}
.loading-overlay::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1em;
  height: 1em;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-normal) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
  z-index: var(--z-loading-spinner);
}
.loading-overlay-xs {
  position: relative;
  min-height: 3rem;
  contain: layout style;
  isolation: isolate;
  will-change: contents;
  z-index: var(--z-base);
  transition: opacity var(--duration-normal) var(--ease-out);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.loading-overlay-xs::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-loading);
  border-radius: inherit;
  animation: fadeIn var(--duration-fast) var(--ease-out);
}
.loading-overlay-xs::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.75em;
  height: 0.75em;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-fast) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
  z-index: var(--z-loading-spinner);
}
.loading-overlay-sm {
  position: relative;
  min-height: 3rem;
  contain: layout style;
  isolation: isolate;
  will-change: contents;
  z-index: var(--z-base);
  transition: opacity var(--duration-normal) var(--ease-out);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.loading-overlay-sm::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-loading);
  border-radius: inherit;
  animation: fadeIn var(--duration-fast) var(--ease-out);
}
.loading-overlay-sm::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.875em;
  height: 0.875em;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-normal) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
  z-index: var(--z-loading-spinner);
}
.loading-overlay-md {
  position: relative;
  min-height: 3rem;
  contain: layout style;
  isolation: isolate;
  will-change: contents;
  z-index: var(--z-base);
  transition: opacity var(--duration-normal) var(--ease-out);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.loading-overlay-md::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-loading);
  border-radius: inherit;
  animation: fadeIn var(--duration-fast) var(--ease-out);
}
.loading-overlay-md::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1em;
  height: 1em;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-normal) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
  z-index: var(--z-loading-spinner);
}
.loading-overlay-lg {
  position: relative;
  min-height: 3rem;
  contain: layout style;
  isolation: isolate;
  will-change: contents;
  z-index: var(--z-base);
  transition: opacity var(--duration-normal) var(--ease-out);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.loading-overlay-lg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-loading);
  border-radius: inherit;
  animation: fadeIn var(--duration-fast) var(--ease-out);
}
.loading-overlay-lg::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.125em;
  height: 1.125em;
  border: 2.5px solid var(--color-border);
  border-radius: 50%;
  border: 2.5px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-slow) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
  z-index: var(--z-loading-spinner);
}
.loading-overlay-xl {
  position: relative;
  min-height: 3rem;
  contain: layout style;
  isolation: isolate;
  will-change: contents;
  z-index: var(--z-base);
  transition: opacity var(--duration-normal) var(--ease-out);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.loading-overlay-xl::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-loading);
  border-radius: inherit;
  animation: fadeIn var(--duration-fast) var(--ease-out);
}
.loading-overlay-xl::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.25em;
  height: 1.25em;
  border: 3px solid var(--color-border);
  border-radius: 50%;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-very-slow) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
  z-index: var(--z-loading-spinner);
}
.loading-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.loading-inline::before {
  content: "";
  display: inline-block;
  width: 0.875em;
  height: 0.875em;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-normal) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
}
.loading-inline-start {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.loading-inline-start::before {
  content: "";
  display: inline-block;
  width: 0.875em;
  height: 0.875em;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-normal) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
}
.loading-inline-end {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-direction: row-reverse;
}
.loading-inline-end::before {
  content: "";
  display: inline-block;
  width: 0.875em;
  height: 0.875em;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-normal) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
}
.loading-inline-xs {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.loading-inline-xs::before {
  content: "";
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-fast) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
}
.loading-inline-sm {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.loading-inline-sm::before {
  content: "";
  display: inline-block;
  width: 0.875em;
  height: 0.875em;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-normal) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
}
.loading-inline-md {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.loading-inline-md::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-normal) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
}
.loading-inline-lg {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.loading-inline-lg::before {
  content: "";
  display: inline-block;
  width: 1.125em;
  height: 1.125em;
  border: 2.5px solid var(--color-border);
  border-radius: 50%;
  border: 2.5px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-slow) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
}
.loading-skeleton {
  background: linear-gradient(90deg, var(--color-surface-elevated) 25%, color-mix(in srgb, var(--color-surface-elevated) 80%, white) 50%, var(--color-surface-elevated) 75%);
  background-size: 200% 100%;
  animation: shimmer var(--duration-slow) ease-in-out infinite;
  border-radius: var(--radius-sm);
  color: transparent;
  user-select: none;
}
.loading-skeleton::before, .loading-skeleton::after {
  display: none;
}
.loading-skeleton * {
  visibility: hidden;
}
.loading-skeleton-text {
  height: 1rem;
  margin-bottom: var(--space-2);
}
.loading-skeleton-text:last-child {
  width: 60%;
  margin-bottom: 0;
}
.loading-skeleton-title {
  height: 2rem;
  margin-bottom: var(--space-3);
  width: 50%;
}
.loading-skeleton-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}
.loading-skeleton-button {
  height: 2.5rem;
  width: 6rem;
}
.loading-skeleton-card {
  height: 10rem;
  border-radius: var(--radius-lg);
}
.loading-dots {
  display: inline-flex;
  gap: 0.2625em;
}
.loading-dots span {
  display: inline-block;
  width: 0.875em;
  height: 0.875em;
  background: var(--color-primary);
  border-radius: 50%;
  animation: pulse calc(var(--duration-very-slow) * 1.4) ease-in-out infinite;
}
.loading-dots span:nth-child(1) {
  animation-delay: 0s;
}
.loading-dots span:nth-child(2) {
  animation-delay: 0.2s;
}
.loading-dots span:nth-child(3) {
  animation-delay: 0.4s;
}
.loading-dots-primary {
  display: inline-flex;
  gap: 0.2625em;
}
.loading-dots-primary span {
  display: inline-block;
  width: 0.875em;
  height: 0.875em;
  background: var(--color-primary);
  border-radius: 50%;
  animation: pulse calc(var(--duration-very-slow) * 1.4) ease-in-out infinite;
}
.loading-dots-primary span:nth-child(1) {
  animation-delay: 0s;
}
.loading-dots-primary span:nth-child(2) {
  animation-delay: 0.2s;
}
.loading-dots-primary span:nth-child(3) {
  animation-delay: 0.4s;
}
.loading-dots-secondary {
  display: inline-flex;
  gap: 0.2625em;
}
.loading-dots-secondary span {
  display: inline-block;
  width: 0.875em;
  height: 0.875em;
  background: var(--color-secondary);
  border-radius: 50%;
  animation: pulse calc(var(--duration-very-slow) * 1.4) ease-in-out infinite;
}
.loading-dots-secondary span:nth-child(1) {
  animation-delay: 0s;
}
.loading-dots-secondary span:nth-child(2) {
  animation-delay: 0.2s;
}
.loading-dots-secondary span:nth-child(3) {
  animation-delay: 0.4s;
}
.loading-dots-white {
  display: inline-flex;
  gap: 0.2625em;
}
.loading-dots-white span {
  display: inline-block;
  width: 0.875em;
  height: 0.875em;
  background: var(--color-white);
  border-radius: 50%;
  animation: pulse calc(var(--duration-very-slow) * 1.4) ease-in-out infinite;
}
.loading-dots-white span:nth-child(1) {
  animation-delay: 0s;
}
.loading-dots-white span:nth-child(2) {
  animation-delay: 0.2s;
}
.loading-dots-white span:nth-child(3) {
  animation-delay: 0.4s;
}
.loading-container {
  position: relative;
  min-height: 20rem;
  contain: layout style;
  isolation: isolate;
  will-change: contents;
  z-index: var(--z-base);
  transition: opacity var(--duration-normal) var(--ease-out);
  transform: translateZ(0);
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-8);
  min-height: 20rem;
}
.loading-container > *:not(.loading-text):not(.loading-spinner) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.loading-container::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.125em;
  height: 1.125em;
  border: 2.5px solid var(--color-border);
  border-radius: 50%;
  border: 2.5px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-slow) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
  z-index: var(--z-base);
}
.loading-container-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  visibility: visible;
  opacity: 1;
}

.loading-spinner {
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
  position: relative;
}
.loading-spinner::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid var(--color-border-light);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin var(--duration-very-slow) linear infinite;
}
.loading-spinner::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid transparent;
  border-top-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
  border-radius: 50%;
  animation: spin calc(var(--duration-very-slow) * 1.5) linear infinite reverse;
}
.loading-spinner-xs {
  width: 1rem;
  height: 1rem;
}
.loading-spinner-xs::before {
  border-width: 2px;
}
.loading-spinner-xs::after {
  display: none;
}
.loading-spinner-sm {
  width: 1.5rem;
  height: 1.5rem;
}
.loading-spinner-sm::before {
  border-width: 2px;
}
.loading-spinner-sm::after {
  border-width: 1px;
  inset: -2px;
}
.loading-spinner-lg {
  width: 3rem;
  height: 3rem;
}
.loading-spinner-xl {
  width: 4rem;
  height: 4rem;
}
.loading-spinner-xl::before {
  border-width: 4px;
}
.loading-spinner-xl::after {
  border-width: 3px;
  inset: -6px;
}
.loading-spinner-primary::before {
  border-top-color: var(--color-primary);
}
.loading-spinner-primary::after {
  border-top-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.loading-spinner-secondary::before {
  border-top-color: var(--color-secondary);
}
.loading-spinner-secondary::after {
  border-top-color: color-mix(in srgb, var(--color-secondary) 30%, transparent);
}
.loading-spinner-success::before {
  border-top-color: var(--color-success);
}
.loading-spinner-success::after {
  border-top-color: color-mix(in srgb, var(--color-success) 30%, transparent);
}
.loading-spinner-warning::before {
  border-top-color: var(--color-warning);
}
.loading-spinner-warning::after {
  border-top-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
}
.loading-spinner-error::before {
  border-top-color: var(--color-error);
}
.loading-spinner-error::after {
  border-top-color: color-mix(in srgb, var(--color-error) 30%, transparent);
}
.loading-spinner-white::before {
  border-color: color-mix(in srgb, white 30%, transparent);
  border-top-color: var(--theme-text);
}
.loading-spinner-white::after {
  border-top-color: color-mix(in srgb, white 30%, transparent);
}
.loading-spinner-inline {
  width: 1em;
  height: 1em;
  margin-right: var(--space-2);
  vertical-align: middle;
}
.loading-spinner-inline::before, .loading-spinner-inline::after {
  border-width: 2px;
}

.skeleton {
  background: linear-gradient(90deg, var(--color-surface-elevated) 25%, color-mix(in srgb, var(--color-surface-elevated) 80%, white) 50%, var(--color-surface-elevated) 75%);
  background-size: 200% 100%;
  animation: shimmer var(--duration-slow) ease-in-out infinite;
  border-radius: var(--radius-sm);
  color: transparent;
  user-select: none;
}
.skeleton::before, .skeleton::after {
  display: none;
}
.skeleton * {
  visibility: hidden;
}
.skeleton-pulse {
  animation: shimmer calc(var(--duration-very-slow) * 1.5) ease-in-out infinite;
}
.skeleton-text {
  height: 1rem;
  margin-bottom: var(--space-2);
}
.skeleton-text:last-child {
  width: 60%;
  margin-bottom: 0;
}
.skeleton-title {
  height: 2rem;
  margin-bottom: var(--space-3);
  width: 50%;
}
.skeleton-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}
.skeleton-button {
  height: 2.5rem;
  width: 6rem;
}
.skeleton-card {
  height: 10rem;
  border-radius: var(--radius-lg);
}
.skeleton-badge {
  height: 1.5rem;
  width: 4rem;
  border-radius: var(--radius-full);
}

.loading-no-spinner::after {
  display: none !important;
}

.loading-no-spinner.loading-overlay::after {
  display: none !important;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}
.loading-container .loading-spinner {
  margin: 0;
}
.loading-container .loading-text {
  visibility: visible;
  opacity: 1;
  text-align: center;
  color: var(--color-text-muted);
}

.loading-overlay.loading-no-spinner .loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

:root {
  --content-padding: var(--space-6);
  --content-padding-mobile: var(--space-4);
  --content-max-width: calc(var(--base-unit) * pow(var(--φ), 11));
  --content-max-width-sm: calc(var(--base-unit) * pow(var(--φ), 7));
  --content-max-width-md: calc(var(--base-unit) * pow(var(--φ), 8.5));
  --content-max-width-lg: calc(var(--base-unit) * pow(var(--φ), 10));
  --content-max-width-xl: calc(var(--base-unit) * pow(var(--φ), 11.5));
  --content-max-width-2xl: calc(var(--base-unit) * pow(var(--φ), 12));
}

:root {
  --font-family-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-family-secondary: "Georgia", "Times New Roman", serif;
  --font-family-mono: "SF Mono", "Monaco", "Inconsolata", "Consolas", monospace;
}

:root {
  --text-3xs: calc(var(--base-unit) * var(--φ-inv) * 0.68);
  --text-2xs: calc(var(--base-unit) * var(--φ-inv) * 0.89);
  --text-xs: calc(var(--base-unit) * var(--φ-inv) * 1.21);
  --text-sm: calc(var(--base-unit) * var(--φ-inv) * 1.42);
  --text-base: var(--base-unit);
  --text-lg: calc(var(--base-unit) * var(--φ) * 0.695);
  --text-xl: calc(var(--base-unit) * var(--φ) * 0.772);
  --text-2xl: calc(var(--base-unit) * var(--φ) * 0.927);
  --text-3xl: calc(var(--base-unit) * var(--φ) * 1.159);
  --text-4xl: calc(var(--base-unit) * var(--φ) * 1.39);
  --text-5xl: calc(var(--base-unit) * var(--φ) * 1.854);
  --text-6xl: calc(var(--base-unit) * var(--φ) * 2.318);
  --text-7xl: calc(var(--base-unit) * var(--φ) * 2.781);
  --text-8xl: calc(var(--base-unit) * var(--φ) * 3.708);
}

:root {
  --font-thin: 100;
  --font-extralight: 200;
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;
}

:root {
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.618;
  --leading-loose: 2;
}

:root {
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
}

.card {
  display: flex;
  flex-direction: column;
  position: relative;
}

.file-preview-thumbnail-overlay, .file-preview-icon-container, .file-preview-status, .file-add-more-card, .file-replace-section, .filter-chips-item-remove, .rgrid-toolbar-actions, .card .rounded-lg[style*="--icon-size"], .card-notification-icon, .card-actions-center, .app-header-right, .app-logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.card-notification, .card-notification-actions, .card-header .header-content-wrapper, .card-actions, .page-header-row {
  display: flex;
  flex-direction: row;
}

.file-preview-content, .file-preview-details, .file-add-more-card label, .file-upload-progress, .card-header .header-card-body, .card-header .header-content-wrapper:not(.d-flex), .card-body, .card-actions-vertical, .page-title-subtitle {
  display: flex;
  flex-direction: column;
}

.filter-actions-row, .filter-header, .filter-header-actions, .filter-advanced-panel-header, .filter-advanced-header, .filter-column-values-header, .filter-templates-item, .rgrid-toolbar, .card-actions-between {
  display: flex;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.file-preview-name {
  word-wrap: break-word;
  word-break: break-word;
}

.choice-group-header-content .choice-group-badge, .choice-item-badge, .tabs-tab-badge, .chip-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border: var(--border-1) solid;
  white-space: nowrap;
  line-height: 1;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
  backdrop-filter: var(--glass-blur-md) var(--glass-saturate) var(--glass-brightness);
  -webkit-backdrop-filter: var(--glass-blur-md) var(--glass-saturate) var(--glass-brightness);
  transition: all var(--duration-normal) var(--ease-out);
}
.choice-group-header-content .choice-group-badge::before, .choice-item-badge::before, .tabs-tab-badge::before, .chip-badge::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--glass-border-light), transparent);
  transition: left var(--duration-slow) var(--ease-out);
  z-index: var(--z-base);
  pointer-events: none;
}
.choice-group-header-content .choice-group-badge:hover::before, .choice-item-badge:hover::before, .tabs-tab-badge:hover::before, .chip-badge:hover::before {
  left: 100%;
}

.file-preview-status i, .chip, .form-field-success, .form-field-warning, .form-success, .form-error {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  border: var(--border-1) solid transparent;
  transition: all var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}

.radio-mark, .input-group-icon, .input-group-icon-end, .icon, .icon-material,
.material-symbols-rounded {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  line-height: 1;
  flex-shrink: 0;
  transition: var(--transition-colors);
  user-select: none;
  color: inherit;
  font-size: var(--icon-base);
  width: var(--icon-base);
  height: var(--icon-base);
  transform-origin: center;
}

.icon-interactive {
  cursor: pointer;
  transition: var(--transition-colors);
  border-radius: var(--radius-sm);
}
.icon-interactive:hover {
  color: var(--color-primary-hover);
  background: var(--color-surface);
}
.icon-interactive:active {
  color: var(--color-primary-active);
  background: var(--state-active-bg);
}

.icon-material,
.material-symbols-rounded, .icon {
  font-family: "Material Symbols Rounded";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  transform-origin: center;
}

.icon {
  margin: 0;
  flex-shrink: 0;
  position: relative;
  z-index: var(--z-base);
}

.calendar, .file-preview-card, .chart, .chart-error, .chart-empty, .pie-chart, .column-chart, .line-chart, .tabs, .alert, .radio-option, .chart-elevated {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-elevated);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: var(--transition-normal);
  height: 100%;
}

.chart-elevated {
  box-shadow: var(--shadow-lg);
  border: var(--border-1) solid var(--color-border);
}
.chart-elevated:hover {
  box-shadow: var(--shadow-xl);
}

.icon-circle, .icon-container, .file-preview-icon-container i, .icon-circle-lg, .file-preview-thumbnail-overlay i, .file-add-more-card label i, .icon-circle-md, .icon-circle-sm {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-elevated) 100%);
  color: var(--color-primary);
  flex-shrink: 0;
  transition: var(--transition-normal);
}

.icon-circle-sm {
  width: var(--space-8);
  height: var(--space-8);
}

.file-preview-thumbnail-overlay i, .file-add-more-card label i, .icon-circle-md {
  width: var(--space-10);
  height: var(--space-10);
}

.file-preview-icon-container i, .icon-circle-lg {
  width: var(--space-12);
  height: var(--space-12);
}

.input-group-label, .form-header .form-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-4) 0;
  line-height: var(--leading-normal);
}

.file-replace-section label, .toast-action, .choice-buttons .choice-item, .tabs-tab, .tabs-tab-close, .alert-close, .button, #blazor-error-ui .blazor-error-actions .button, .blazor-error .blazor-error-actions .button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  font-weight: var(--font-medium);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: var(--transition-normal);
  cursor: pointer;
  border-radius: var(--radius-md);
  border: var(--border-1) solid transparent;
  outline: none;
  position: relative;
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-4);
}
.file-replace-section label .icon, .toast-action .icon, .choice-buttons .choice-item .icon, .tabs-tab .icon, .tabs-tab-close .icon, .alert-close .icon, .button .icon, #blazor-error-ui .blazor-error-actions .button .icon, .blazor-error .blazor-error-actions .button .icon,
.file-replace-section label i,
.toast-action i,
.choice-buttons .choice-item i,
.tabs-tab i,
.tabs-tab-close i,
.alert-close i,
.button i,
#blazor-error-ui .blazor-error-actions .button i,
.blazor-error .blazor-error-actions .button i {
  font-size: calc(1em * var(--φ));
  width: calc(1em * var(--φ));
  height: calc(1em * var(--φ));
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: var(--z-base);
}
.file-replace-section label span, .toast-action span, .choice-buttons .choice-item span, .tabs-tab span, .tabs-tab-close span, .alert-close span, .button span, #blazor-error-ui .blazor-error-actions .button span, .blazor-error .blazor-error-actions .button span {
  line-height: 1;
  vertical-align: baseline;
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: calc(var(--z-base) + 1);
}
.file-replace-section label:focus, .toast-action:focus, .choice-buttons .choice-item:focus, .tabs-tab:focus, .tabs-tab-close:focus, .alert-close:focus, .button:focus, #blazor-error-ui .blazor-error-actions .button:focus, .blazor-error .blazor-error-actions .button:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: var(--offset-safe);
}
.file-replace-section label:disabled, .toast-action:disabled, .choice-buttons .choice-item:disabled, .tabs-tab:disabled, .tabs-tab-close:disabled, .alert-close:disabled, .button:disabled, #blazor-error-ui .blazor-error-actions .button:disabled, .blazor-error .blazor-error-actions .button:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
@media (max-width: 767px) {
  .file-replace-section label, .toast-action, .choice-buttons .choice-item, .tabs-tab, .tabs-tab-close, .alert-close, .button, #blazor-error-ui .blazor-error-actions .button, .blazor-error .blazor-error-actions .button {
    min-height: 2.75rem;
    font-size: var(--text-base);
    gap: var(--space-2);
  }
}

.file-action-btn, .toast-close, .icon-button, .filter-advanced-panel-header-toggle, .filter-advanced-header-toggle {
  transition: var(--transition-normal);
  cursor: pointer;
  border: none;
  outline: none;
}
.file-action-btn:focus, .toast-close:focus, .icon-button:focus, .filter-advanced-panel-header-toggle:focus, .filter-advanced-header-toggle:focus {
  outline: none;
  outline-offset: var(--space-0-5);
}
.file-action-btn:disabled, .toast-close:disabled, .icon-button:disabled, .filter-advanced-panel-header-toggle:disabled, .filter-advanced-header-toggle:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

.file-action-btn, .toast-close, .icon-button, .filter-advanced-panel-header-toggle, .filter-advanced-header-toggle {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: calc(var(--base-unit) * var(--φ) * 1.55);
  height: calc(var(--base-unit) * var(--φ) * 1.55);
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--color-text);
  border: var(--border-1) solid transparent;
  margin: var(--space-1);
  position: relative;
}
.file-action-btn i, .toast-close i, .icon-button i, .filter-advanced-panel-header-toggle i, .filter-advanced-header-toggle i,
.file-action-btn .icon,
.toast-close .icon,
.icon-button .icon,
.filter-advanced-panel-header-toggle .icon,
.filter-advanced-header-toggle .icon {
  margin: 0;
  position: relative;
  z-index: var(--z-above);
}
.file-action-btn:hover, .toast-close:hover, .icon-button:hover, .filter-advanced-panel-header-toggle:hover, .filter-advanced-header-toggle:hover {
  background: var(--color-surface);
  transform: scale(1.05);
}
.file-action-btn:focus, .toast-close:focus, .icon-button:focus, .filter-advanced-panel-header-toggle:focus, .filter-advanced-header-toggle:focus {
  background: var(--color-surface);
  border-color: var(--color-primary);
  outline: 2px solid var(--color-focus);
  outline-offset: var(--offset-safe);
}

.icon-button-loading .icon {
  animation: spin calc(var(--duration-normal) * var(--φ) * 6) linear infinite;
}

.glass-gradient, .glass-gradient-success, .glass-gradient-warning, .glass-gradient-error, .glass-gradient-info, .glass-gradient-light, .glass-gradient-light-success, .glass-gradient-light-warning, .glass-gradient-light-error, .glass-gradient-light-info, .glass-gradient-heavy, .glass-gradient-heavy-success, .glass-gradient-heavy-warning, .glass-gradient-heavy-error, .glass-gradient-heavy-info, .portal-backdrop-glass, .card-glass, .card-glass-gradient, .card-glass-gradient-success, .card-glass-gradient-warning, .card-glass-gradient-error, .card-glass-gradient-info, .badge-glass-primary, .badge-glass-secondary, .badge-glass-success, .badge-glass-warning, .badge-glass-error, .badge-glass-info, .badge-glass, .badge-frosted, .glass-heavy, .glass-frost, [data-theme=dark] .app-shell .quick-actions-floating button, .calendar-day-selected, .input-glass:hover, .glass-medium, .chart-glass, .chart-glass:hover, .list-item-glass, .filter-viewport, .input-glass, .input-glass:focus, .glass-light, .glass-interactive, .glass-badge, .glass-card, [data-theme=light] .app-shell .quick-actions-floating button, .calendar, .toast-glass, .choice-tree-glass, .form-glass {
  background: var(--glass-bg-medium);
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
  border: 1px solid var(--glass-border-light);
  box-shadow: var(--theme-shadow-lg);
}

.glass-light, .glass-interactive, .glass-badge, .glass-card, [data-theme=light] .app-shell .quick-actions-floating button, .calendar, .toast-glass, .choice-tree-glass, .form-glass {
  background: var(--glass-bg-light);
  backdrop-filter: blur(8px) saturate(100%);
  -webkit-backdrop-filter: blur(8px) saturate(100%);
}

.glass-medium, .chart-glass, .chart-glass:hover, .list-item-glass, .filter-viewport, .input-glass, .input-glass:focus {
  background: var(--glass-bg-medium);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
}

.glass-heavy, .glass-frost, [data-theme=dark] .app-shell .quick-actions-floating button, .calendar-day-selected, .input-glass:hover {
  background: var(--glass-bg-heavy);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
}

.form, .form-elevated {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-surface-elevated);
  border-radius: var(--radius-lg);
  border: var(--border-1) solid var(--color-border);
}

.form-group, .radio-group, .input-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-row {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
@media (max-width: 767px) {
  .form-row {
    flex-direction: column;
    gap: var(--space-3);
  }
}

.rgrid-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--color-text-muted);
}
.rgrid-empty i {
  font-size: var(--space-16);
  margin-bottom: var(--space-4);
  color: var(--color-text-subtle);
}

.textarea {
  overflow-y: auto;
  padding-right: var(--space-2);
}
.textarea::-webkit-scrollbar {
  width: calc(var(--base-unit) * 0.375);
}
.textarea::-webkit-scrollbar-track {
  background: var(--color-surface);
  border-radius: var(--radius-full);
}
.textarea::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
}
.textarea::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-dark);
}

.form-grid, .form-grid-auto {
  display: grid;
  gap: var(--space-4);
}
@media (max-width: 767px) {
  .form-grid, .form-grid-auto {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

.form-grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
}

.file-preview-thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.select-field, .input, .textarea, .select {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-elevated);
  color: var(--color-text);
  font-family: inherit;
  font-size: inherit;
  line-height: var(--leading-normal);
  transition: var(--transition-normal);
}
.select-field:focus, .input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary);
}
.select-field::placeholder, .input::placeholder, .textarea::placeholder, .select::placeholder {
  color: var(--color-text-subtle);
  opacity: 1;
}
.select-field:disabled, .input:disabled, .textarea:disabled, .select:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.quick-actions-floating button, .calendar-day, .choice-item, .choice-trigger, .filter-trigger, .filter-item, .checkbox, .input-touch, .form-wrapper {
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
}
@media (min-width: 768px) {
  .quick-actions-floating button, .calendar-day, .choice-item, .choice-trigger, .filter-trigger, .filter-item, .checkbox, .input-touch, .form-wrapper {
    min-height: 2.5rem;
  }
}

.form-elevated {
  padding: var(--space-4);
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .form-elevated {
    padding: var(--space-6);
    gap: var(--space-6);
  }
}
@media (min-width: 1024px) {
  .form-elevated {
    padding: var(--space-8);
    gap: var(--space-8);
  }
}

.form-elevated {
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-lg);
  border: var(--border-1) solid var(--color-border);
}
.form-elevated .form-section {
  padding: var(--space-6);
  border-bottom: var(--border-1) solid var(--color-border);
}
.form-elevated .form-section:last-child {
  border-bottom: none;
}
.form-elevated .form-section-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.file-preview-card:focus-visible, .form-navigation .nav-button:focus-visible {
  outline: none;
  outline-offset: var(--space-0-5);
}
.file-preview-card:focus:not(:focus-visible), .form-navigation .nav-button:focus:not(:focus-visible) {
  outline: none;
}

.input-lg {
  margin-bottom: var(--space-6);
  gap: var(--space-2);
}
.input-lg .label {
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}
.input-lg .input,
.input-lg .textarea,
.input-lg .select {
  padding: var(--space-4) var(--space-3);
  min-height: var(--form-element-min-height);
}
.input-lg .help,
.input-lg .error {
  margin-top: var(--space-2);
}

.input-sm {
  margin-bottom: var(--space-4);
  gap: var(--space-1);
}
.input-sm .label {
  margin-bottom: var(--space-1);
  font-size: var(--text-xs);
}
.input-sm .input,
.input-sm .textarea,
.input-sm .select {
  padding: var(--space-3) var(--space-3);
  min-height: 3rem;
  font-size: var(--text-sm);
}
.input-sm .help,
.input-sm .error {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
}
.input-sm .icon-container {
  width: var(--space-10);
}
.input-sm .icon-container > i {
  font-size: var(--icon-sm);
}

.form-compact .fields {
  gap: var(--space-2);
}
.form-compact .header {
  margin-bottom: var(--space-4);
}
.form-compact .actions {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  gap: var(--space-2);
}
.form-compact .section {
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}
.form-compact .grid-2,
.form-compact .grid-3,
.form-compact .grid-4 {
  gap: var(--space-2) var(--space-4);
}

.form-comfortable .fields {
  gap: var(--space-4);
}
.form-comfortable .header {
  margin-bottom: var(--space-6);
}
.form-comfortable .actions {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  gap: var(--space-3);
}

.nav-shell-compact .nav-item-text, .nav-shell-compact .nav-group-text, .chart-accessibility-table, .chart-accessibility-summary, .form-announcements {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.shell-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.app-shell {
  display: grid;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  grid-template-areas: "header header" "sidebar main";
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--header-height) 1fr;
}
@media (max-width: 1023px) {
  .app-shell {
    grid-template-areas: "header" "main";
    grid-template-columns: 1fr;
    grid-template-rows: var(--header-height) 1fr;
  }
}

.app-header {
  grid-area: header;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  z-index: var(--z-header);
  display: flex;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background: var(--color-surface-elevated);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-border);
}
.app-header > * {
  display: flex;
  align-items: center;
  height: 100%;
}

.app-sidebar {
  grid-area: sidebar;
  position: fixed;
  top: var(--header-height);
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  z-index: var(--z-sidebar);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--color-surface-elevated);
  backdrop-filter: blur(12px);
  border-right: 1px solid var(--color-border);
  transition: all var(--duration-normal) var(--ease-out);
}
.app-sidebar-collapsed {
  width: var(--sidebar-width-collapsed);
}
@media (max-width: 1023px) {
  .app-sidebar {
    transform: translateX(-100%);
  }
  .app-sidebar-open {
    transform: translateX(0);
  }
}

.app-main {
  grid-area: main;
  position: relative;
  overflow-x: hidden;
  padding-top: var(--header-height);
  min-height: calc(100vh - var(--header-height));
}
@media (min-width: 1024px) {
  .app-main {
    padding-left: var(--sidebar-width);
    padding-right: var(--space-6);
    padding-top: calc(var(--header-height) + var(--space-6));
  }
  .app-shell.sidebar-collapsed .app-main {
    padding-left: var(--sidebar-width-collapsed);
  }
}
@media (max-width: 1023px) {
  .app-main {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    padding-top: calc(var(--header-height) + var(--space-4));
  }
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 1;
  min-width: 0;
  height: 100%;
  padding-left: var(--space-4);
}

.header-center {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex: 2;
  height: 100%;
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  justify-content: flex-end;
  height: 100%;
  padding-right: var(--space-4);
}

.app-logo {
  transition: all var(--duration-normal) var(--ease-out);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
}
.app-logo:hover {
  transform: scale(1.02);
}
.app-logo:active {
  transform: translateY(0) scale(0.98);
}
.app-logo img {
  height: var(--logo-height);
  width: auto;
  object-fit: contain;
}

@media (max-width: 1023px) {
  .mobile-backdrop {
    position: fixed;
    inset: 0;
    background: var(--overlay-medium);
    backdrop-filter: blur(4px);
    z-index: var(--z-backdrop);
    opacity: 0;
    visibility: hidden;
    transition: all var(--duration-normal) var(--ease-out);
  }
  .mobile-backdrop.active {
    opacity: 1;
    visibility: visible;
  }
}

.quick-actions-floating button, .calendar-day, .calendar-event, .calendar-more-events, .toast, .checkbox, .input-group-icon-end button {
  transition: all var(--duration-normal) var(--ease-out);
  position: relative;
}
.quick-actions-floating button:hover, .calendar-day:hover, .calendar-event:hover, .calendar-more-events:hover, .toast:hover, .checkbox:hover, .input-group-icon-end button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.quick-actions-floating button:active, .calendar-day:active, .calendar-event:active, .calendar-more-events:active, .toast:active, .checkbox:active, .input-group-icon-end button:active {
  transform: translateY(0) scale(0.98);
}
.quick-actions-floating button:focus-visible, .calendar-day:focus-visible, .calendar-event:focus-visible, .calendar-more-events:focus-visible, .toast:focus-visible, .checkbox:focus-visible, .input-group-icon-end button:focus-visible {
  outline: none;
  outline-offset: 2px;
  border-radius: var(--radius-md);
}
.quick-actions-floating button:focus:not(:focus-visible), .calendar-day:focus:not(:focus-visible), .calendar-event:focus:not(:focus-visible), .calendar-more-events:focus:not(:focus-visible), .toast:focus:not(:focus-visible), .checkbox:focus:not(:focus-visible), .input-group-icon-end button:focus:not(:focus-visible) {
  outline: none;
}
.quick-actions-floating button:disabled, .calendar-day:disabled, .calendar-event:disabled, .calendar-more-events:disabled, .toast:disabled, .checkbox:disabled, .input-group-icon-end button:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

.filter-header-title, .filter-advanced-panel-header-title, .filter-advanced-header-title, .validation-message {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}
.filter-header-title i, .filter-advanced-panel-header-title i, .filter-advanced-header-title i, .validation-message i, .filter-header-title .icon, .filter-advanced-panel-header-title .icon, .filter-advanced-header-title .icon, .validation-message .icon {
  line-height: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 var(--space-1) 0 0;
  position: relative;
  z-index: var(--z-above);
}
.card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.card-header .grow {
  flex: 1;
}
.card-header i, .card-header .icon {
  flex-shrink: 0;
  margin: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  overflow-y: auto;
}

* {
  outline: none;
}

*:focus,
*:focus-visible {
  outline: none;
}

button:active,
input:active,
select:active,
textarea:active,
[role=button]:active,
[tabindex]:active {
  outline: none;
}

button {
  font: inherit;
  border: none;
  background: none;
}

button[type=button],
button[type=submit],
button[role=button],
.btn {
  cursor: pointer;
}

input,
textarea,
select {
  font: inherit;
}

button,
[role=button],
.badge,
.chip,
nav,
.nav,
.toolbar,
.header,
.sidebar {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

*::selection {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  opacity: 0.3;
}

*::-moz-selection {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  opacity: 0.3;
}

button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [role=button]:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible {
  outline: none;
}
button:focus:not(:focus-visible), a:focus:not(:focus-visible), input:focus:not(:focus-visible), textarea:focus:not(:focus-visible), select:focus:not(:focus-visible), [role=button]:focus:not(:focus-visible), [tabindex]:not([tabindex="-1"]):focus:not(:focus-visible) {
  outline: none;
}

p::selection,
span::selection,
div::selection,
h1::selection, h2::selection, h3::selection, h4::selection, h5::selection, h6::selection,
.selectable::selection {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  opacity: 0.3;
}
p::-moz-selection,
span::-moz-selection,
div::-moz-selection,
h1::-moz-selection, h2::-moz-selection, h3::-moz-selection, h4::-moz-selection, h5::-moz-selection, h6::-moz-selection,
.selectable::-moz-selection {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  opacity: 0.3;
}

body {
  font-family: var(--font-family-primary);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  overflow-y: auto;
}

ul, ol {
  margin: 0 0 var(--space-4) 0;
  padding-left: var(--space-6);
}
ul li, ol li {
  margin-bottom: var(--space-2);
  line-height: var(--leading-relaxed);
}
ul li:last-child, ol li:last-child {
  margin-bottom: 0;
}

ul.list, ol.list,
ul[class*=list-], ol[class*=list-] {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul.list li, ol.list li,
ul[class*=list-] li, ol[class*=list-] li {
  margin: 0;
}

#blazor-error-ui, .blazor-error {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  max-width: 320px;
  background: var(--color-surface-elevated);
  color: var(--color-text);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-1) solid var(--color-error);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-max);
  font-family: var(--font-family-primary);
  display: none;
}
@media (max-width: 639px) {
  #blazor-error-ui, .blazor-error {
    bottom: var(--space-4);
    right: var(--space-4);
    left: var(--space-4);
    max-width: none;
  }
}
#blazor-error-ui .blazor-error-content, .blazor-error .blazor-error-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
#blazor-error-ui .blazor-error-title, .blazor-error .blazor-error-title {
  font-weight: var(--font-medium);
  font-size: var(--text-base);
  color: var(--color-error);
  margin: 0;
}
#blazor-error-ui .blazor-error-message, .blazor-error .blazor-error-message {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}
#blazor-error-ui .blazor-error-actions, .blazor-error .blazor-error-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-3);
}
#blazor-error-ui .blazor-error-actions .button, .blazor-error .blazor-error-actions .button {
  font-size: var(--text-sm);
}
#blazor-error-ui .blazor-error-actions .button-outlined-primary, .blazor-error .blazor-error-actions .button-outlined-primary {
  background: transparent;
  color: var(--color-primary);
  border: var(--border-1) solid var(--color-primary);
}
#blazor-error-ui .blazor-error-actions .button-outlined-primary:hover, .blazor-error .blazor-error-actions .button-outlined-primary:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
[data-theme=dark] #blazor-error-ui, [data-theme=dark] .blazor-error {
  background: var(--color-error);
  color: var(--color-text-on-error);
  box-shadow: 0 0 0 1px var(--glass-border-light), var(--shadow-2xl);
}

[data-high-contrast=true] #blazor-error-ui, [data-high-contrast=true] .blazor-error {
  border: 2px solid var(--color-text);
}
[data-high-contrast=true] #blazor-error-ui .button, [data-high-contrast=true] .blazor-error .button {
  border: 1px solid currentColor;
}

#blazor-error-ui[style*="display: block"], [style*="display: block"].blazor-error,
#blazor-error-ui[style*="display: flex"],
[style*="display: flex"].blazor-error {
  animation: blazorErrorSlideIn var(--duration-normal) var(--ease-out);
}

.modal-open #blazor-error-ui, .modal-open .blazor-error {
  z-index: calc(var(--z-modal) + 100);
}

:root {
  --header-height: var(--space-16);
  --sidebar-width: var(--space-56);
  --sidebar-width-expanded: var(--space-56);
  --sidebar-width-collapsed: var(--space-16);
  --footer-height: 0;
  --app-shell-transition: all var(--duration-normal) var(--ease-out);
  --touch-target-min: 44px;
  --touch-target-lg: 48px;
  --shell-transition-fast: 150ms;
  --shell-transition-normal: 300ms;
  --shell-transition-slow: 500ms;
}

.app-shell {
  display: flex;
  height: 100vh;
  position: relative;
  background: var(--color-canvas);
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  box-sizing: border-box;
}
@media (max-width: 1023px) {
  .app-shell {
    flex-direction: column;
  }
}
.app-shell-container {
  container-type: inline-size;
  container-name: app-shell;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}
@media (max-width: 767px) {
  .app-shell {
    flex-direction: column;
  }
  .app-shell .app-header {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
  .app-shell .app-header .app-header-left {
    gap: var(--space-2);
    flex-wrap: nowrap;
    min-width: 0;
  }
  .app-shell .app-header .app-header-right {
    gap: var(--space-3);
    flex-wrap: nowrap;
    flex-shrink: 0;
  }
}
@container app-shell (max-width: 768px) {
  .app-shell {
    --sidebar-width-expanded: 100vw;
    --sidebar-width-collapsed: 0;
  }
  .app-shell .main-content-expanded, .app-shell .main-content-collapsed {
    margin-left: 0;
  }
}

.layout {
  display: flex;
  min-height: 100vh;
  position: relative;
  background: var(--color-canvas);
}

.layout-main {
  flex: 1;
  overflow: auto;
  position: relative;
  padding-top: var(--header-height);
  min-height: calc(100vh - var(--header-height));
}

.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  height: var(--header-height);
  width: 100vw;
  max-width: 100vw;
  background: var(--color-canvas);
  border-bottom: var(--border-1) solid var(--color-border);
  box-shadow: var(--shadow-sm);
  display: flex;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-4);
  box-sizing: border-box;
  overflow: visible;
}
.app-header .d-flex {
  min-width: 0;
  flex-wrap: nowrap;
}
@media (max-width: 639px) {
  .app-header .d-flex-gap-3, .app-header .d-flex-gap-2, .app-header .d-flex-gap-1 {
    gap: var(--space-1);
  }
}
.app-header-height {
  height: var(--header-height);
}
.app-header hr {
  pointer-events: none;
}
@media (max-width: 1279px) {
  .app-header {
    width: 100vw;
    max-width: 100vw;
    left: 0;
    right: 0;
  }
}
@media (max-width: 767px) {
  .app-header {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
}
.app-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
@media (max-width: 1023px) {
  .app-header-left {
    gap: var(--space-3);
    flex-wrap: nowrap;
  }
}
@media (max-width: 767px) {
  .app-header-left {
    gap: var(--space-2-5);
    flex-wrap: nowrap;
  }
}
@media (max-width: 639px) {
  .app-header-left {
    gap: var(--space-2);
    flex-wrap: wrap;
  }
}
.app-header-right {
  gap: var(--space-2);
  flex-shrink: 0;
  overflow: visible;
}
@media (max-width: 1023px) {
  .app-header-right {
    gap: var(--space-1-5);
  }
}
@media (max-width: 767px) {
  .app-header-right {
    gap: var(--space-1);
  }
}
@media (max-width: 639px) {
  .app-header-right {
    gap: var(--space-0-5);
    flex-wrap: wrap;
  }
}
@media (max-width: -1px) {
  .app-header-right {
    gap: var(--space-px);
  }
  .app-header-right .theme-switcher,
  .app-header-right .theme-toggle {
    display: none;
  }
  .app-header-right .quick-actions > *:not(:first-child) {
    display: none;
  }
  .app-header-right .user-display-name {
    display: none;
  }
}
@media (max-width: 413px) {
  .app-header-right .app-search {
    flex-shrink: 0;
    min-width: auto;
  }
  .app-header-right .app-search .search-container.collapsed {
    width: auto;
    min-width: var(--touch-target-min, 44px);
  }
}
.modal-open .app-header-right {
  isolation: auto;
}

.app-logo {
  gap: var(--space-2);
  flex-shrink: 0;
  min-width: 0;
  height: calc(var(--header-height) - var(--space-3));
  padding: var(--space-1-5) 0;
}
.app-logo img {
  height: auto;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
  max-height: var(--space-8);
  max-width: var(--space-32);
}
.app-logo img-h-8 {
  max-height: var(--space-8);
}
.app-logo img-h-12 {
  max-height: var(--space-10);
}
.app-logo img-h-16 {
  max-height: calc(var(--base-unit) * var(--φ) * 1.73);
}
.app-logo img-h-20 {
  max-height: var(--space-12);
}
.app-logo img-h-24 {
  max-height: calc(var(--base-unit) * var(--φ) * 1.98);
}
.app-logo span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}

.page-header-content {
  min-width: 0;
  flex: 1;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}

.page-header-row {
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  flex-wrap: nowrap;
  min-width: 0;
  width: 100%;
}
@media (min-width: 1025px) {
  .page-header-row {
    gap: var(--space-2);
  }
}
@media (max-width: 1023px) {
  .page-header-row {
    gap: var(--space-1-5);
  }
}
@media (max-width: 767px) {
  .page-header-row {
    gap: var(--space-1);
  }
}
@media (max-width: 639px) {
  .page-header-row {
    flex-wrap: wrap;
    gap: var(--space-0-5);
  }
}
@media (max-width: -1px) {
  .page-header-row {
    gap: var(--space-0-25);
    flex-wrap: wrap;
  }
}

.page-title-subtitle {
  gap: var(--space-0-25);
  min-width: 0;
  flex: 1;
  align-items: flex-start;
}
@media (max-width: 767px) {
  .page-title-subtitle {
    gap: var(--space-px);
  }
}
@media (max-width: 639px) {
  .page-title-subtitle {
    gap: var(--space-px);
    min-width: 200px;
  }
}
@media (max-width: -1px) {
  .page-title-subtitle {
    min-width: 150px;
  }
}

.page-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  line-height: 1.25;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .page-title {
    font-size: var(--text-base);
  }
}

.page-subtitle {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
}
@media (max-width: 767px) {
  .page-subtitle {
    font-size: var(--text-xs);
  }
}

.app-shell-breadcrumbs {
  flex-shrink: 0;
  margin: 0;
}
@media (max-width: 1023px) {
  .app-shell-breadcrumbs {
    display: none;
  }
}
@media (min-width: 1025px) {
  .app-shell-breadcrumbs {
    display: flex;
  }
}
.app-shell-breadcrumbs-compact-spacing ol {
  gap: var(--space-0-5);
}
.app-shell-breadcrumbs-compact-spacing li {
  gap: var(--space-px);
}
.app-shell-breadcrumbs-compact-spacing .breadcrumb-sep,
.app-shell-breadcrumbs-compact-spacing [aria-hidden=true] {
  margin: 0 var(--space-px);
}

.app-sidebar {
  position: fixed;
  top: var(--header-height);
  left: 0;
  bottom: 0;
  width: var(--sidebar-width, var(--space-56));
  max-width: calc(100vw - var(--space-4));
  height: calc(100vh - var(--header-height));
  background: var(--color-surface-elevated);
  border-right: var(--border-1) solid var(--color-border);
  z-index: var(--z-sidebar);
  display: flex;
  flex-direction: column;
  transition: width var(--duration-normal) var(--ease-out);
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: visible;
}
@media (max-width: 1023px) {
  .app-sidebar {
    width: var(--sidebar-width-collapsed, var(--space-16));
  }
  .app-sidebar:not(.open) {
    width: var(--sidebar-width-collapsed, var(--space-16));
  }
}
.app-sidebar > * {
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  min-width: 0;
}
.app-sidebar .flex-1 {
  overflow-x: hidden;
  min-width: 0;
  max-width: 100%;
}
.app-sidebar .flex-1 * {
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.app-sidebar.collapsed {
  width: var(--sidebar-width-collapsed, var(--space-16));
}
@media (max-width: 767px) {
  .app-sidebar {
    transform: translateX(-100%);
    width: 85%;
    max-width: 320px;
    z-index: calc(var(--z-header) + 10);
    border-right: none;
    box-shadow: var(--shadow-xl);
    pointer-events: none;
  }
  body.modal-open .app-sidebar {
    transform: none;
    visibility: hidden;
  }
  body.modal-open .app-sidebar.open {
    visibility: visible;
  }
  .app-sidebar.open {
    transform: translateX(0);
    pointer-events: auto;
  }
  body.modal-open .app-sidebar.open {
    transform: none;
  }
}
@media (max-width: 639px) {
  .app-sidebar {
    width: 90%;
    max-width: 280px;
  }
}
@media (max-width: -1px) {
  .app-sidebar {
    width: 95%;
    max-width: 260px;
  }
}
.app-sidebar > .flex-1 {
  min-height: 0;
  overflow-y: auto;
  flex: 1 1 0%;
}
.app-sidebar > .shrink-0 {
  flex-shrink: 0;
  overflow: visible;
  max-width: 100%;
  box-sizing: border-box;
  z-index: calc(var(--z-sidebar) + 1);
}
.app-sidebar > .shrink-0 * {
  max-width: 100%;
  box-sizing: border-box;
}
.app-sidebar > .shrink-0 .choice-container,
.app-sidebar > .shrink-0 [data-choice-id] {
  position: relative;
  z-index: calc(var(--z-dropdown) + 10);
}

.app-main {
  position: relative;
  height: 100vh;
  padding-top: var(--header-height);
  margin-left: 0;
  width: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  flex: 1;
}
@media (max-width: 767px) {
  .app-main {
    margin-left: 0;
    width: 100vw;
    max-width: 100vw;
  }
}
.app-main-auto-wrap-content {
  display: flex;
  flex-direction: column;
}
.app-main-full-width-content {
  width: 100vw;
  max-width: 100vw;
  margin-left: 0;
  overflow-x: hidden;
  overflow-y: visible;
  box-sizing: border-box;
}

.mobile-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--overlay-medium);
  z-index: calc(var(--z-sidebar) - 1);
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-normal) var(--ease-out);
}
.mobile-backdrop-active {
  opacity: 1;
  visibility: visible;
}

.shell-sticky-header {
  position: sticky;
  top: var(--header-height);
  z-index: var(--z-sticky);
  background: var(--color-canvas);
  border-bottom: var(--border-1) solid var(--color-border);
  backdrop-filter: blur(var(--blur-md));
}
@media (max-width: 767px) {
  .shell-sticky-header {
    position: relative;
    backdrop-filter: none;
  }
}

.page-content {
  padding: var(--space-6);
  max-width: 100%;
}
.page-content-constrained {
  max-width: 1200px;
  margin: 0 auto;
}
.page-content-wide {
  max-width: 1400px;
  margin: 0 auto;
}
.page-content-full {
  max-width: none;
  padding: var(--space-4);
}
.page-content-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}
@media (max-width: 1023px) {
  .page-content {
    padding: var(--space-4);
  }
}
@media (max-width: 767px) {
  .page-content {
    padding: var(--space-3);
  }
}

.shell-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
@media (max-width: 1023px) {
  .shell-split {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}
@media (max-width: 1023px) {
  .shell-split-with-sidebar {
    margin-left: 0;
  }
}

.user-menu-choice .choice-trigger {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: var(--space-2) !important;
  border-radius: var(--radius-full);
  transition: all var(--duration-fast) var(--ease-out);
  overflow: visible !important;
}
.user-menu-choice .choice-trigger:hover, .user-menu-choice .choice-trigger:focus, .user-menu-choice .choice-trigger:focus-visible {
  background: var(--state-hover-bg);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.user-menu-choice .choice-trigger:active {
  transform: translateY(0);
  background: var(--state-active-bg);
}
.user-menu-choice .choice-trigger .d-flex {
  align-items: center;
  gap: var(--space-2);
  overflow: visible;
}
.user-menu-choice .choice-trigger .d-flex .avatar {
  position: relative;
}
.user-menu-choice .choice-trigger .text-sm {
  font-weight: var(--font-medium);
  color: var(--color-text);
  transition: color var(--duration-fast) var(--ease-out);
}
.user-menu-choice .choice-trigger .icon,
.user-menu-choice .choice-trigger i {
  font-size: calc(1em * var(--φ));
  width: calc(1em * var(--φ));
  height: calc(1em * var(--φ));
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  flex-shrink: 0;
  position: relative;
  z-index: var(--z-base);
}
.user-menu-choice .choice-trigger .icon,
.user-menu-choice .choice-trigger i {
  transition: transform var(--duration-fast) var(--ease-out);
  color: var(--color-text-muted);
}

.layout-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}
.layout-grid-cols-1 {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}
.layout-grid-cols-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}
.layout-grid-cols-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}
.layout-grid-cols-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}
.layout-grid-cols-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}
.layout-grid-cols-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--space-64)), 1fr));
  gap: var(--space-4);
  align-items: stretch;
}
.layout-grid-cols-auto-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--space-64)), 1fr));
  gap: var(--space-4);
  align-items: stretch;
}
.layout-grid-auto {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(var(--space-64), 1fr));
}
.layout-grid-2 {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, 1fr);
}
.layout-grid-3 {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(3, 1fr);
}
.layout-grid-4 {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1023px) {
  .layout-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .layout-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .layout-grid-4, .layout-grid-3, .layout-grid-2 {
    grid-template-columns: 1fr;
  }
}

.layout-gap-0 {
  gap: 0;
}
.layout-gap-1 {
  gap: var(--space-1);
}
.layout-gap-2 {
  gap: var(--space-2);
}
.layout-gap-3 {
  gap: var(--space-3);
}
.layout-gap-4 {
  gap: var(--space-4);
}
.layout-gap-6 {
  gap: var(--space-6);
}
.layout-gap-8 {
  gap: var(--space-8);
}

.layout-overflow-hidden {
  overflow: hidden;
}
.layout-overflow-auto {
  overflow: auto;
}
.layout-overflow-scroll {
  overflow: scroll;
}
.layout-overflow-x-auto {
  overflow-x: auto;
}
.layout-overflow-y-auto {
  overflow-y: auto;
}
.layout-overflow-x-hidden {
  overflow-x: hidden;
}
.layout-overflow-y-hidden {
  overflow-y: hidden;
}

.layout-z-0 {
  z-index: 0;
}
.layout-z-10 {
  z-index: 10;
}
.layout-z-20 {
  z-index: 20;
}
.layout-z-30 {
  z-index: 30;
}
.layout-z-40 {
  z-index: 40;
}
.layout-z-50 {
  z-index: 50;
}
.layout-z-popup {
  z-index: var(--z-popup);
}
.layout-z-modal {
  z-index: var(--z-modal);
}
.layout-z-modal-backdrop {
  z-index: var(--z-modal-backdrop);
}
.layout-z-modal-container {
  z-index: var(--z-modal-container);
}
.layout-z-modal-overlay {
  z-index: var(--z-modal-overlay);
}
.layout-z-floating {
  z-index: var(--z-floating);
}

.layout-split {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-6);
}
.layout-split-reverse {
  grid-template-columns: 320px 1fr;
}
.layout-split-equal {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 1023px) {
  .layout-split {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}
.layout-masonry {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
  align-items: start;
}
.layout-masonry-sm {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.layout-masonry-lg {
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}
@media (max-width: 767px) {
  .layout-masonry {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}
.layout-focus {
  contain: layout;
}
.layout-focus:focus-within {
  contain: none;
}

@media (max-width: 639px) {
  .layout-sm\:flex-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }
  .layout-sm\:hidden {
    display: none;
  }
  .layout-sm\:grid-cols-1 {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: stretch;
  }
  .layout-sm\:gap-sm {
    gap: var(--space-2);
  }
}
@media (max-width: 767px) {
  .layout-md\:flex-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }
  .layout-md\:hidden {
    display: none;
  }
  .layout-md\:grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: stretch;
  }
  .layout-md\:gap-md {
    gap: var(--space-3);
  }
}
@media (max-width: 1023px) {
  .layout-lg\:flex-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }
  .layout-lg\:hidden {
    display: none;
  }
  .layout-lg\:grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: stretch;
  }
  .layout-lg\:gap-lg {
    gap: var(--space-4);
  }
}
@media (max-width: 1279px) {
  .layout-xl\:flex-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }
  .layout-xl\:hidden {
    display: none;
  }
}
@media (max-width: 1535px) {
  .layout-xxl\:flex-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }
  .layout-xxl\:hidden {
    display: none;
  }
}
.layout-interactive {
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.layout-interactive:hover:not(:disabled) {
  transform: translateY(-1px);
}
.layout-interactive:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}
.layout-interactive:focus-visible {
  outline: none;
  outline-offset: 2px;
}
.layout-interactive:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}
.layout-interactive-subtle {
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.layout-interactive-subtle:hover:not(:disabled) {
  transform: translateY(-0.5px);
}
.layout-interactive-subtle:active:not(:disabled) {
  transform: scale(0.99);
}
.layout-interactive-subtle:focus-visible {
  outline: none;
  outline-offset: 2px;
}
.layout-interactive-subtle:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}
.layout-interactive-strong {
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.layout-interactive-strong:hover:not(:disabled) {
  transform: translateY(-2px);
}
.layout-interactive-strong:active:not(:disabled) {
  transform: scale(0.97);
}
.layout-interactive-strong:focus-visible {
  outline: none;
  outline-offset: 2px;
}
.layout-interactive-strong:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}
.layout-interactive-none {
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.layout-interactive-none:hover:not(:disabled) {
  transform: none;
}
.layout-interactive-none:active:not(:disabled) {
  transform: none;
}
.layout-interactive-none:focus-visible {
  outline: none;
  outline-offset: 2px;
}
.layout-interactive-none:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

.layout-backdrop {
  position: fixed;
  inset: 0;
  background: var(--overlay-medium);
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-normal) var(--ease-out);
}
.layout-backdrop-active {
  opacity: 0.6;
  visibility: visible;
}
.layout-backdrop-blur {
  position: fixed;
  inset: 0;
  background: var(--overlay-medium);
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-normal) var(--ease-out);
  backdrop-filter: blur(4px);
}
.layout-backdrop-blur-active {
  opacity: 0.6;
  visibility: visible;
}
.layout-backdrop-light {
  position: fixed;
  inset: 0;
  background: var(--overlay-medium);
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-normal) var(--ease-out);
}
.layout-backdrop-light-active {
  opacity: 0.4;
  visibility: visible;
}
.layout-backdrop-heavy {
  position: fixed;
  inset: 0;
  background: var(--overlay-medium);
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-normal) var(--ease-out);
}
.layout-backdrop-heavy-active {
  opacity: 0.8;
  visibility: visible;
}

.layout-surface {
  border-radius: var(--radius-md);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-md);
}
.layout-surface-flat {
  border-radius: var(--radius-md);
  background: var(--color-canvas);
  border: var(--border-1) solid var(--color-border);
}
.layout-surface-raised {
  border-radius: var(--radius-md);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-lg);
}
.layout-surface-floating {
  border-radius: var(--radius-md);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-xl);
}
.layout-surface-glass {
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface) 85%, transparent);
  backdrop-filter: blur(16px) saturate(120%);
  border: var(--border-1) solid color-mix(in srgb, var(--color-border) 30%, transparent);
}

.button {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  gap: var(--space-2);
  min-height: var(--space-8);
  border-radius: var(--radius-md);
  background: var(--color-surface-elevated);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  transition: all var(--duration-fast) var(--ease-out);
}
.button {
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
}
.button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: inherit;
}
.button:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px var(--shadow-overlay-medium);
}
.button:active {
  transform: scale(0.98) translateY(0);
  filter: brightness(0.95);
  box-shadow: 0 1px 2px var(--shadow-overlay-dark);
}
.button:disabled, .button[disabled] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.button:disabled:hover, .button:disabled:active, .button:disabled:focus-visible, .button[disabled]:hover, .button[disabled]:active, .button[disabled]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.button[aria-disabled=true] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.button[aria-disabled=true]:hover, .button[aria-disabled=true]:active, .button[aria-disabled=true]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.button-loading {
  pointer-events: none;
  cursor: wait;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}
.button-loading > *:not(.loading-text) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.button-loading::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid color-mix(in srgb, currentColor 20%, transparent);
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, currentColor 20%, transparent);
  border-top-color: currentColor;
  animation: spin var(--duration-normal) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
  order: -1;
  flex-shrink: 0;
}
@media (prefers-contrast: high) {
  .button {
    border: 2px solid currentColor;
  }
  .button:focus-visible {
    outline-width: 3px;
    outline-offset: 3px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
  .button:hover, .button:active {
    transform: none;
    animation: none;
  }
  .button-loading::after {
    animation: none;
    border: 2px solid currentColor;
  }
}
.button:focus-visible {
  outline: none;
  z-index: var(--z-base);
}
.button .icon,
.button i {
  font-size: inherit;
  width: 1em;
  height: 1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.button-xs {
  padding: var(--space-0-5) var(--space-1);
  font-size: var(--text-xs);
  min-height: var(--space-2);
  border-radius: var(--radius-sm);
}
.button-sm {
  padding: var(--space-1-5) var(--space-3);
  font-size: var(--text-sm);
  min-height: var(--space-6);
}
.button-lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
  min-height: var(--space-10);
  border-radius: var(--radius-lg);
}
.button-xl {
  padding: var(--space-5) var(--space-10);
  font-size: var(--text-lg);
  min-height: var(--space-12);
  border-radius: var(--radius-lg);
}
.button-primary {
  background-color: var(--color-primary);
  background-image: var(--gradient-primary);
  color: var(--color-text-inverse);
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all var(--duration-fast) var(--ease-out);
}
.button-primary:hover {
  filter: brightness(0.9) saturate(1.1);
  transform: translateY(-0.618px);
}
.button-primary:active {
  transform: scale(0.938);
}
.button-primary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.button-secondary {
  background-color: var(--color-secondary);
  background-image: var(--gradient-secondary);
  color: var(--color-text-inverse);
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all var(--duration-fast) var(--ease-out);
}
.button-secondary:hover {
  filter: brightness(0.9) saturate(1.1);
  transform: translateY(-0.618px);
}
.button-secondary:active {
  transform: scale(0.938);
}
.button-secondary:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}
.button-success {
  background-color: var(--color-success);
  background-image: var(--gradient-success);
  color: var(--color-text-inverse);
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all var(--duration-fast) var(--ease-out);
}
.button-success:hover {
  filter: brightness(0.9) saturate(1.1);
  transform: translateY(-0.618px);
}
.button-success:active {
  transform: scale(0.938);
}
.button-success:focus-visible {
  outline: 2px solid var(--color-success);
  outline-offset: 2px;
}
.button-warning {
  background-color: var(--color-warning);
  background-image: var(--gradient-warning);
  color: var(--color-text-inverse);
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all var(--duration-fast) var(--ease-out);
}
.button-warning:hover {
  filter: brightness(0.9) saturate(1.1);
  transform: translateY(-0.618px);
}
.button-warning:active {
  transform: scale(0.938);
}
.button-warning:focus-visible {
  outline: 2px solid var(--color-warning);
  outline-offset: 2px;
}
.button-error {
  background-color: var(--color-error);
  background-image: var(--gradient-error);
  color: var(--color-text-inverse);
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all var(--duration-fast) var(--ease-out);
}
.button-error:hover {
  filter: brightness(0.9) saturate(1.1);
  transform: translateY(-0.618px);
}
.button-error:active {
  transform: scale(0.938);
}
.button-error:focus-visible {
  outline: 2px solid var(--color-error);
  outline-offset: 2px;
}
.button-info {
  background-color: var(--color-info);
  background-image: var(--gradient-info);
  color: var(--color-text-inverse);
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all var(--duration-fast) var(--ease-out);
}
.button-info:hover {
  filter: brightness(0.9) saturate(1.1);
  transform: translateY(-0.618px);
}
.button-info:active {
  transform: scale(0.938);
}
.button-info:focus-visible {
  outline: 2px solid var(--color-info);
  outline-offset: 2px;
}
.button-outline.button-primary {
  background: transparent;
  color: var(--color-primary);
  border: 1.618px solid var(--color-primary);
  transition: all var(--duration-fast) var(--ease-out);
}
.button-outline.button-primary:hover {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.button-outline.button-primary:active {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  transform: scale(0.969);
}
.button-outline.button-secondary {
  background: transparent;
  color: var(--color-secondary);
  border: 1.618px solid var(--color-secondary);
  transition: all var(--duration-fast) var(--ease-out);
}
.button-outline.button-secondary:hover {
  background: color-mix(in srgb, var(--color-secondary) 10%, transparent);
}
.button-outline.button-secondary:active {
  background: color-mix(in srgb, var(--color-secondary) 15%, transparent);
  transform: scale(0.969);
}
.button-outline.button-success {
  background: transparent;
  color: var(--color-success);
  border: 1.618px solid var(--color-success);
  transition: all var(--duration-fast) var(--ease-out);
}
.button-outline.button-success:hover {
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
}
.button-outline.button-success:active {
  background: color-mix(in srgb, var(--color-success) 15%, transparent);
  transform: scale(0.969);
}
.button-outline.button-warning {
  background: transparent;
  color: var(--color-warning);
  border: 1.618px solid var(--color-warning);
  transition: all var(--duration-fast) var(--ease-out);
}
.button-outline.button-warning:hover {
  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
}
.button-outline.button-warning:active {
  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
  transform: scale(0.969);
}
.button-outline.button-error {
  background: transparent;
  color: var(--color-error);
  border: 1.618px solid var(--color-error);
  transition: all var(--duration-fast) var(--ease-out);
}
.button-outline.button-error:hover {
  background: color-mix(in srgb, var(--color-error) 10%, transparent);
}
.button-outline.button-error:active {
  background: color-mix(in srgb, var(--color-error) 15%, transparent);
  transform: scale(0.969);
}
.button-outline.button-info {
  background: transparent;
  color: var(--color-info);
  border: 1.618px solid var(--color-info);
  transition: all var(--duration-fast) var(--ease-out);
}
.button-outline.button-info:hover {
  background: color-mix(in srgb, var(--color-info) 10%, transparent);
}
.button-outline.button-info:active {
  background: color-mix(in srgb, var(--color-info) 15%, transparent);
  transform: scale(0.969);
}
.button-ghost.button-primary {
  background: color-mix(in srgb, var(--color-primary) 8 %, transparent);
  color: var(--color-primary);
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
  transition: all var(--duration-fast) var(--ease-out);
}
.button-ghost.button-primary:hover {
  background: color-mix(in srgb, var(--color-primary) 15 %, transparent);
}
.button-ghost.button-primary:active {
  background: color-mix(in srgb, var(--color-primary) 20 %, transparent);
}
.button-ghost.button-secondary {
  background: color-mix(in srgb, var(--color-secondary) 8 %, transparent);
  color: var(--color-secondary);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 20%, transparent);
  transition: all var(--duration-fast) var(--ease-out);
}
.button-ghost.button-secondary:hover {
  background: color-mix(in srgb, var(--color-secondary) 15 %, transparent);
}
.button-ghost.button-secondary:active {
  background: color-mix(in srgb, var(--color-secondary) 20 %, transparent);
}
.button-ghost.button-success {
  background: color-mix(in srgb, var(--color-success) 8 %, transparent);
  color: var(--color-success);
  border: 1px solid color-mix(in srgb, var(--color-success) 20%, transparent);
  transition: all var(--duration-fast) var(--ease-out);
}
.button-ghost.button-success:hover {
  background: color-mix(in srgb, var(--color-success) 15 %, transparent);
}
.button-ghost.button-success:active {
  background: color-mix(in srgb, var(--color-success) 20 %, transparent);
}
.button-ghost.button-warning {
  background: color-mix(in srgb, var(--color-warning) 8 %, transparent);
  color: var(--color-warning);
  border: 1px solid color-mix(in srgb, var(--color-warning) 20%, transparent);
  transition: all var(--duration-fast) var(--ease-out);
}
.button-ghost.button-warning:hover {
  background: color-mix(in srgb, var(--color-warning) 15 %, transparent);
}
.button-ghost.button-warning:active {
  background: color-mix(in srgb, var(--color-warning) 20 %, transparent);
}
.button-ghost.button-error {
  background: color-mix(in srgb, var(--color-error) 8 %, transparent);
  color: var(--color-error);
  border: 1px solid color-mix(in srgb, var(--color-error) 20%, transparent);
  transition: all var(--duration-fast) var(--ease-out);
}
.button-ghost.button-error:hover {
  background: color-mix(in srgb, var(--color-error) 15 %, transparent);
}
.button-ghost.button-error:active {
  background: color-mix(in srgb, var(--color-error) 20 %, transparent);
}
.button-ghost.button-info {
  background: color-mix(in srgb, var(--color-info) 8 %, transparent);
  color: var(--color-info);
  border: 1px solid color-mix(in srgb, var(--color-info) 20%, transparent);
  transition: all var(--duration-fast) var(--ease-out);
}
.button-ghost.button-info:hover {
  background: color-mix(in srgb, var(--color-info) 15 %, transparent);
}
.button-ghost.button-info:active {
  background: color-mix(in srgb, var(--color-info) 20 %, transparent);
}
.button-muted {
  opacity: 0.85;
  filter: saturate(0.8);
}
.button-bold {
  filter: saturate(1.2) brightness(1.05);
  font-weight: var(--font-semibold);
}
.button-subtle {
  opacity: 0.95;
  filter: contrast(0.9);
}
.button-icon {
  padding: var(--space-2);
  aspect-ratio: 1;
}
.button-icon.button-xs {
  padding: var(--space-1);
}
.button-icon.button-sm {
  padding: var(--space-1-5);
}
.button-icon.button-lg {
  padding: var(--space-3);
}
.button-icon.button-xl {
  padding: var(--space-4);
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-0-5);
  padding: var(--space-1-5) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: none;
  letter-spacing: 0.025em;
  border: 0;
  white-space: nowrap;
  line-height: 1.2;
  vertical-align: middle;
  position: relative;
  cursor: default;
  user-select: none;
  min-height: var(--space-5);
}
.badge-primary {
  background-color: var(--color-primary);
  background-image: var(--gradient-primary);
  color: var(--color-text-inverse);
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all var(--duration-fast) var(--ease-out);
}
.badge-primary:hover {
  filter: brightness(0.9) saturate(1.1);
  transform: translateY(-0.618px);
}
.badge-primary:active {
  transform: scale(0.938);
}
.badge-primary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.badge-secondary {
  background-color: var(--color-secondary);
  background-image: var(--gradient-secondary);
  color: var(--color-text-inverse);
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all var(--duration-fast) var(--ease-out);
}
.badge-secondary:hover {
  filter: brightness(0.9) saturate(1.1);
  transform: translateY(-0.618px);
}
.badge-secondary:active {
  transform: scale(0.938);
}
.badge-secondary:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}
.badge-success {
  background-color: var(--color-success);
  background-image: var(--gradient-success);
  color: var(--color-text-inverse);
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all var(--duration-fast) var(--ease-out);
}
.badge-success:hover {
  filter: brightness(0.9) saturate(1.1);
  transform: translateY(-0.618px);
}
.badge-success:active {
  transform: scale(0.938);
}
.badge-success:focus-visible {
  outline: 2px solid var(--color-success);
  outline-offset: 2px;
}
.badge-warning {
  background-color: var(--color-warning);
  background-image: var(--gradient-warning);
  color: var(--color-text-inverse);
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all var(--duration-fast) var(--ease-out);
}
.badge-warning:hover {
  filter: brightness(0.9) saturate(1.1);
  transform: translateY(-0.618px);
}
.badge-warning:active {
  transform: scale(0.938);
}
.badge-warning:focus-visible {
  outline: 2px solid var(--color-warning);
  outline-offset: 2px;
}
.badge-error {
  background-color: var(--color-error);
  background-image: var(--gradient-error);
  color: var(--color-text-inverse);
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all var(--duration-fast) var(--ease-out);
}
.badge-error:hover {
  filter: brightness(0.9) saturate(1.1);
  transform: translateY(-0.618px);
}
.badge-error:active {
  transform: scale(0.938);
}
.badge-error:focus-visible {
  outline: 2px solid var(--color-error);
  outline-offset: 2px;
}
.badge-info {
  background-color: var(--color-info);
  background-image: var(--gradient-info);
  color: var(--color-text-inverse);
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all var(--duration-fast) var(--ease-out);
}
.badge-info:hover {
  filter: brightness(0.9) saturate(1.1);
  transform: translateY(-0.618px);
}
.badge-info:active {
  transform: scale(0.938);
}
.badge-info:focus-visible {
  outline: 2px solid var(--color-info);
  outline-offset: 2px;
}
.badge-outlined-primary {
  background: transparent;
  color: var(--color-primary);
  border: 1.618px solid var(--color-primary);
  transition: all var(--duration-fast) var(--ease-out);
}
.badge-outlined-primary:hover {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.badge-outlined-primary:active {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  transform: scale(0.969);
}
.badge-ghost-primary {
  background: color-mix(in srgb, var(--color-primary) 8 %, transparent);
  color: var(--color-primary);
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
  transition: all var(--duration-fast) var(--ease-out);
}
.badge-ghost-primary:hover {
  background: color-mix(in srgb, var(--color-primary) 15 %, transparent);
}
.badge-ghost-primary:active {
  background: color-mix(in srgb, var(--color-primary) 20 %, transparent);
}
.badge-glass-primary {
  transition: all var(--duration-normal) var(--ease-out);
}
.badge-glass-primary:hover {
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
}
.badge-outlined-secondary {
  background: transparent;
  color: var(--color-secondary);
  border: 1.618px solid var(--color-secondary);
  transition: all var(--duration-fast) var(--ease-out);
}
.badge-outlined-secondary:hover {
  background: color-mix(in srgb, var(--color-secondary) 10%, transparent);
}
.badge-outlined-secondary:active {
  background: color-mix(in srgb, var(--color-secondary) 15%, transparent);
  transform: scale(0.969);
}
.badge-ghost-secondary {
  background: color-mix(in srgb, var(--color-secondary) 8 %, transparent);
  color: var(--color-secondary);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 20%, transparent);
  transition: all var(--duration-fast) var(--ease-out);
}
.badge-ghost-secondary:hover {
  background: color-mix(in srgb, var(--color-secondary) 15 %, transparent);
}
.badge-ghost-secondary:active {
  background: color-mix(in srgb, var(--color-secondary) 20 %, transparent);
}
.badge-glass-secondary {
  transition: all var(--duration-normal) var(--ease-out);
}
.badge-glass-secondary:hover {
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
}
.badge-outlined-success {
  background: transparent;
  color: var(--color-success);
  border: 1.618px solid var(--color-success);
  transition: all var(--duration-fast) var(--ease-out);
}
.badge-outlined-success:hover {
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
}
.badge-outlined-success:active {
  background: color-mix(in srgb, var(--color-success) 15%, transparent);
  transform: scale(0.969);
}
.badge-ghost-success {
  background: color-mix(in srgb, var(--color-success) 8 %, transparent);
  color: var(--color-success);
  border: 1px solid color-mix(in srgb, var(--color-success) 20%, transparent);
  transition: all var(--duration-fast) var(--ease-out);
}
.badge-ghost-success:hover {
  background: color-mix(in srgb, var(--color-success) 15 %, transparent);
}
.badge-ghost-success:active {
  background: color-mix(in srgb, var(--color-success) 20 %, transparent);
}
.badge-glass-success {
  transition: all var(--duration-normal) var(--ease-out);
}
.badge-glass-success:hover {
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
}
.badge-outlined-warning {
  background: transparent;
  color: var(--color-warning);
  border: 1.618px solid var(--color-warning);
  transition: all var(--duration-fast) var(--ease-out);
}
.badge-outlined-warning:hover {
  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
}
.badge-outlined-warning:active {
  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
  transform: scale(0.969);
}
.badge-ghost-warning {
  background: color-mix(in srgb, var(--color-warning) 8 %, transparent);
  color: var(--color-warning);
  border: 1px solid color-mix(in srgb, var(--color-warning) 20%, transparent);
  transition: all var(--duration-fast) var(--ease-out);
}
.badge-ghost-warning:hover {
  background: color-mix(in srgb, var(--color-warning) 15 %, transparent);
}
.badge-ghost-warning:active {
  background: color-mix(in srgb, var(--color-warning) 20 %, transparent);
}
.badge-glass-warning {
  transition: all var(--duration-normal) var(--ease-out);
}
.badge-glass-warning:hover {
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
}
.badge-outlined-error {
  background: transparent;
  color: var(--color-error);
  border: 1.618px solid var(--color-error);
  transition: all var(--duration-fast) var(--ease-out);
}
.badge-outlined-error:hover {
  background: color-mix(in srgb, var(--color-error) 10%, transparent);
}
.badge-outlined-error:active {
  background: color-mix(in srgb, var(--color-error) 15%, transparent);
  transform: scale(0.969);
}
.badge-ghost-error {
  background: color-mix(in srgb, var(--color-error) 8 %, transparent);
  color: var(--color-error);
  border: 1px solid color-mix(in srgb, var(--color-error) 20%, transparent);
  transition: all var(--duration-fast) var(--ease-out);
}
.badge-ghost-error:hover {
  background: color-mix(in srgb, var(--color-error) 15 %, transparent);
}
.badge-ghost-error:active {
  background: color-mix(in srgb, var(--color-error) 20 %, transparent);
}
.badge-glass-error {
  transition: all var(--duration-normal) var(--ease-out);
}
.badge-glass-error:hover {
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
}
.badge-outlined-info {
  background: transparent;
  color: var(--color-info);
  border: 1.618px solid var(--color-info);
  transition: all var(--duration-fast) var(--ease-out);
}
.badge-outlined-info:hover {
  background: color-mix(in srgb, var(--color-info) 10%, transparent);
}
.badge-outlined-info:active {
  background: color-mix(in srgb, var(--color-info) 15%, transparent);
  transform: scale(0.969);
}
.badge-ghost-info {
  background: color-mix(in srgb, var(--color-info) 8 %, transparent);
  color: var(--color-info);
  border: 1px solid color-mix(in srgb, var(--color-info) 20%, transparent);
  transition: all var(--duration-fast) var(--ease-out);
}
.badge-ghost-info:hover {
  background: color-mix(in srgb, var(--color-info) 15 %, transparent);
}
.badge-ghost-info:active {
  background: color-mix(in srgb, var(--color-info) 20 %, transparent);
}
.badge-glass-info {
  transition: all var(--duration-normal) var(--ease-out);
}
.badge-glass-info:hover {
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
}
.badge-outlined-primary {
  background: transparent;
  color: var(--color-primary);
  border: 1.618px solid var(--color-primary);
  transition: all var(--duration-fast) var(--ease-out);
}
.badge-outlined-primary:hover {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.badge-outlined-primary:active {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  transform: scale(0.969);
}
.badge-outlined-secondary {
  background: transparent;
  color: var(--color-secondary);
  border: 1.618px solid var(--color-secondary);
  transition: all var(--duration-fast) var(--ease-out);
}
.badge-outlined-secondary:hover {
  background: color-mix(in srgb, var(--color-secondary) 10%, transparent);
}
.badge-outlined-secondary:active {
  background: color-mix(in srgb, var(--color-secondary) 15%, transparent);
  transform: scale(0.969);
}
.badge-xs {
  padding: var(--space-0-5) var(--space-1-5);
  font-size: var(--text-2xs);
  gap: var(--space-0-5);
  min-height: var(--space-3);
}
.badge-sm {
  padding: var(--space-1) var(--space-2-5);
  font-size: var(--text-xs);
  gap: var(--space-0-5);
  min-height: var(--space-5);
}
.badge-lg {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  gap: var(--space-1);
  min-height: var(--space-7);
}
.badge-xl {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
  gap: var(--space-2);
  min-height: var(--space-8);
}
.badge-compact {
  padding: var(--space-0-5) var(--space-1);
  font-size: var(--text-2xs);
  gap: var(--space-0-5);
  min-height: var(--space-2);
}
.badge-dense {
  padding: var(--space-0-5) var(--space-1-5);
  font-size: var(--text-2xs);
  gap: var(--space-0-5);
  min-height: var(--space-3);
}
.badge-spacious {
  padding: var(--space-1) var(--space-2-5);
  font-size: var(--text-sm);
  gap: var(--space-1);
  min-height: var(--space-6);
}
.badge-pulse {
  animation: pulse 2s ease-in-out infinite;
}
.badge-ping::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.badge-clickable {
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
}
.badge-clickable:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: inherit;
}
.badge-clickable:hover {
  transform: scale(1.05);
  filter: brightness(0.95) saturate(1.1);
}
.badge-clickable:active {
  transform: scale(0.97);
  filter: brightness(0.9);
}
.badge-clickable:disabled, .badge-clickable[disabled] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.badge-clickable:disabled:hover, .badge-clickable:disabled:active, .badge-clickable:disabled:focus-visible, .badge-clickable[disabled]:hover, .badge-clickable[disabled]:active, .badge-clickable[disabled]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.badge-clickable[aria-disabled=true] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.badge-clickable[aria-disabled=true]:hover, .badge-clickable[aria-disabled=true]:active, .badge-clickable[aria-disabled=true]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.badge-clickable-loading {
  position: relative;
  min-height: 3rem;
  contain: layout style;
  isolation: isolate;
  will-change: contents;
  z-index: var(--z-base);
  transition: opacity var(--duration-normal) var(--ease-out);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.badge-clickable-loading > *:not(.loading-text):not(.loading-spinner) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.badge-clickable-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1em;
  height: 1em;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-normal) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
  z-index: var(--z-base);
}
.badge-clickable {
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
}
.badge-clickable:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: inherit;
}
.badge-clickable:hover {
  transform: scale(1.05);
  filter: brightness(0.95) saturate(1.1);
}
.badge-clickable:active {
  transform: scale(0.97);
  filter: brightness(0.9);
}
.badge-clickable:disabled, .badge-clickable[disabled] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.badge-clickable:disabled:hover, .badge-clickable:disabled:active, .badge-clickable:disabled:focus-visible, .badge-clickable[disabled]:hover, .badge-clickable[disabled]:active, .badge-clickable[disabled]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.badge-clickable[aria-disabled=true] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.badge-clickable[aria-disabled=true]:hover, .badge-clickable[aria-disabled=true]:active, .badge-clickable[aria-disabled=true]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.badge-clickable-loading {
  position: relative;
  min-height: 3rem;
  contain: layout style;
  isolation: isolate;
  will-change: contents;
  z-index: var(--z-base);
  transition: opacity var(--duration-normal) var(--ease-out);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.badge-clickable-loading > *:not(.loading-text):not(.loading-spinner) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.badge-clickable-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1em;
  height: 1em;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-normal) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
  z-index: var(--z-base);
}
.badge-clickable::before {
  content: "";
  position: absolute;
  top: calc(var(--touch-target-min) / -4);
  left: calc(var(--touch-target-min) / -4);
  right: calc(var(--touch-target-min) / -4);
  bottom: calc(var(--touch-target-min) / -4);
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
}
.badge-clickable:active {
  transform: scale(calc(1 - var(--φ-inv) * 0.05));
  transition-duration: calc(var(--duration-fast) * var(--φ-inv));
}
.badge-clickable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
@media (prefers-contrast: high) {
  .badge-clickable {
    border: 2px solid currentColor;
  }
  .badge-clickable:focus-visible {
    outline-width: 3px;
    outline-offset: 3px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .badge-clickable {
    transition: none;
  }
  .badge-clickable:hover, .badge-clickable:active {
    transform: none;
    animation: none;
  }
  .badge-clickable-loading::after {
    animation: none;
    border: 2px solid currentColor;
  }
}
.badge-clickable:focus-visible {
  outline: none;
  z-index: var(--z-base);
}
.badge-neutral {
  background: var(--color-surface-elevated);
  color: var(--color-text);
  border-color: var(--color-border);
}
.badge-pill {
  border-radius: var(--radius-full);
}
.badge-dot::after {
  content: "";
  width: var(--space-1);
  height: var(--space-1);
  border-radius: 50%;
  background: currentColor;
  margin-left: var(--space-0-5);
}
.badge-active {
  background-color: var(--color-success);
  background-image: var(--gradient-success);
  color: var(--color-text-inverse);
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all var(--duration-fast) var(--ease-out);
  min-height: var(--space-5);
  padding: var(--space-1-5) var(--space-3);
}
.badge-active:hover {
  filter: brightness(0.9) saturate(1.1);
  transform: translateY(-0.618px);
}
.badge-active:active {
  transform: scale(0.938);
}
.badge-active:focus-visible {
  outline: 2px solid var(--color-success);
  outline-offset: 2px;
}
.badge-inactive {
  background-color: var(--color-error);
  background-image: var(--gradient-error);
  color: var(--color-text-inverse);
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all var(--duration-fast) var(--ease-out);
  min-height: var(--space-5);
  padding: var(--space-1-5) var(--space-3);
}
.badge-inactive:hover {
  filter: brightness(0.9) saturate(1.1);
  transform: translateY(-0.618px);
}
.badge-inactive:active {
  transform: scale(0.938);
}
.badge-inactive:focus-visible {
  outline: 2px solid var(--color-error);
  outline-offset: 2px;
}
.badge-pending {
  background-color: var(--color-warning);
  background-image: var(--gradient-warning);
  color: var(--color-text-inverse);
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all var(--duration-fast) var(--ease-out);
  animation: pulse 2s ease-in-out infinite;
  min-height: var(--space-5);
  padding: var(--space-1-5) var(--space-3);
}
.badge-pending:hover {
  filter: brightness(0.9) saturate(1.1);
  transform: translateY(-0.618px);
}
.badge-pending:active {
  transform: scale(0.938);
}
.badge-pending:focus-visible {
  outline: 2px solid var(--color-warning);
  outline-offset: 2px;
}
.badge-priority-critical {
  background-color: var(--color-error);
  background-image: var(--gradient-error);
  color: var(--color-text-inverse);
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all var(--duration-fast) var(--ease-out);
  animation: pulse 1.5s ease-in-out infinite;
}
.badge-priority-critical:hover {
  filter: brightness(0.9) saturate(1.1);
  transform: translateY(-0.618px);
}
.badge-priority-critical:active {
  transform: scale(0.938);
}
.badge-priority-critical:focus-visible {
  outline: 2px solid var(--color-error);
  outline-offset: 2px;
}
.badge-priority-high {
  background-color: var(--color-warning);
  background-image: var(--gradient-warning);
  color: var(--color-text-inverse);
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all var(--duration-fast) var(--ease-out);
}
.badge-priority-high:hover {
  filter: brightness(0.9) saturate(1.1);
  transform: translateY(-0.618px);
}
.badge-priority-high:active {
  transform: scale(0.938);
}
.badge-priority-high:focus-visible {
  outline: 2px solid var(--color-warning);
  outline-offset: 2px;
}
.badge-priority-medium {
  background-color: var(--color-info);
  background-image: var(--gradient-info);
  color: var(--color-text-inverse);
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all var(--duration-fast) var(--ease-out);
}
.badge-priority-medium:hover {
  filter: brightness(0.9) saturate(1.1);
  transform: translateY(-0.618px);
}
.badge-priority-medium:active {
  transform: scale(0.938);
}
.badge-priority-medium:focus-visible {
  outline: 2px solid var(--color-info);
  outline-offset: 2px;
}
.badge-priority-low {
  background: color-mix(in srgb, var(--color-neutral) 8 %, transparent);
  color: var(--color-neutral);
  border: 1px solid color-mix(in srgb, var(--color-neutral) 20%, transparent);
  transition: all var(--duration-fast) var(--ease-out);
}
.badge-priority-low:hover {
  background: color-mix(in srgb, var(--color-neutral) 15 %, transparent);
}
.badge-priority-low:active {
  background: color-mix(in srgb, var(--color-neutral) 20 %, transparent);
}
.badge-muted {
  opacity: 0.7;
  filter: brightness(0.9) saturate(0.8);
}
.badge-bold {
  font-weight: var(--font-bold);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transform: scale(1.05);
}
.badge-subtle {
  opacity: 0.6;
  background: color-mix(in srgb, var(--color-surface) 95%, transparent);
  color: var(--color-text-secondary);
  border: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
}
.badge-glass {
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid var(--glass-border-light);
  box-shadow: var(--shadow-md);
}
.badge-neumorphism {
  background: var(--color-surface-elevated);
  border: none;
  box-shadow: var(--shadow-neumorphism);
}
.badge-elevated {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}
.badge-flat {
  box-shadow: none;
  border: none;
}
.badge-neon {
  border: 2px solid currentColor;
  box-shadow: 0 0 8px currentColor, inset 0 0 8px currentColor;
  text-shadow: 0 0 4px currentColor;
}
.badge-frosted {
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.badge span {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.button-badge {
  position: absolute;
  top: calc(var(--space-1-5) * -1);
  right: calc(var(--space-1-5) * -1);
  min-width: var(--space-5);
  height: var(--space-5);
  padding: 0 var(--space-1-5);
  background: var(--color-error);
  color: var(--color-text-on-error);
  font-size: var(--text-2xs);
  font-weight: var(--font-bold);
  line-height: 1;
  border-radius: var(--radius-full);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  z-index: var(--z-above);
  border: var(--border-2) solid var(--color-surface);
  box-shadow: var(--shadow-md);
  transition: all var(--duration-fast) var(--ease-out);
}
.button-badge:empty {
  min-width: var(--space-5);
  padding: 0;
}
.button-badge[data-count="99+"] {
  font-size: var(--text-3xs);
  padding: 0 var(--space-1);
  min-width: var(--space-6);
}
.button-sm .button-badge {
  top: calc(var(--space-1) * -1);
  right: calc(var(--space-1) * -1);
  min-width: var(--space-4);
  height: var(--space-4);
  font-size: var(--text-3xs);
  border-width: var(--border-1);
}
.button-lg .button-badge {
  top: calc(var(--space-2) * -1);
  right: calc(var(--space-2) * -1);
  min-width: var(--space-6);
  height: var(--space-6);
  font-size: var(--text-xs);
  border-width: var(--border-2);
}
.button-xs .button-badge {
  top: calc(var(--space-0-5) * -1);
  right: calc(var(--space-0-5) * -1);
  min-width: var(--space-3);
  height: var(--space-3);
  font-size: var(--text-3xs);
  border-width: var(--border-1);
}
.button-xl .button-badge {
  top: calc(var(--space-2-5) * -1);
  right: calc(var(--space-2-5) * -1);
  min-width: var(--space-6);
  height: var(--space-6);
  font-size: var(--text-sm);
  border-width: var(--border-3);
}
.button-badge-primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-md);
}
.button-badge-success {
  background: var(--color-success);
  color: var(--color-text-on-success);
  box-shadow: var(--shadow-md);
}
.button-badge-warning {
  background: var(--color-warning);
  color: var(--color-text-on-warning);
  box-shadow: var(--shadow-md);
}
.button-badge-info {
  background: var(--color-info);
  color: var(--color-text-on-info);
  box-shadow: var(--shadow-md);
}
.button-badge-pulse {
  animation: badgePulse 2s ease-in-out infinite;
}
.button-badge-dot {
  min-width: var(--space-3);
  height: var(--space-3);
  padding: 0;
  border-radius: var(--radius-full);
  top: calc(var(--space-0-5) * -1);
  right: calc(var(--space-0-5) * -1);
}
.button-sm .button-badge-dot {
  min-width: var(--space-2-5);
  height: var(--space-2-5);
  top: calc(var(--space-px) * -1);
  right: calc(var(--space-px) * -1);
}
.button-lg .button-badge-dot {
  min-width: var(--space-3);
  height: var(--space-3);
  top: calc(var(--space-0-5) * -1);
  right: calc(var(--space-0-5) * -1);
}
.button-badge-interactive {
  transition: all var(--duration-fast) var(--ease-out);
  cursor: pointer;
}
.button-badge-interactive:focus {
  outline: var(--border-2) solid var(--color-focus);
  outline-offset: var(--offset-2);
}
.button-badge-interactive:hover {
  transform: translateY(calc(var(--offset-1) * -1));
  box-shadow: var(--shadow-sm);
}
.button-badge-selected {
  border: var(--border-2) solid var(--color-primary);
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}
.button-badge-enhanced {
  position: relative;
}
.button-badge-enhanced::after {
  content: "";
  position: absolute;
  inset: calc(var(--offset-2) * -1);
  border-radius: inherit;
  background: linear-gradient(45deg, transparent, var(--color-primary), transparent);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
  z-index: -1;
}
.button-badge-enhanced:hover::after {
  opacity: var(--opacity-10);
}

.card {
  height: 100%;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: all var(--duration-normal) var(--ease-out);
}
.card {
  padding: var(--space-4);
}
.card {
  margin: var(--space-1);
}
.card {
  border-radius: var(--radius-lg);
}
.card {
  box-shadow: var(--shadow-md);
}
.card-density-compact {
  padding: var(--space-1) !important;
  gap: var(--space-0-5);
}
.card-density-compact .card-header {
  margin-bottom: var(--space-0-5);
  gap: var(--space-0-5);
  padding: 0;
}
.card-density-compact .card-body {
  padding: 0;
}
.card-density-compact .card-actions {
  padding-top: var(--space-0-5);
  gap: var(--space-0-5);
}
.card-density-compact .card-title {
  font-size: var(--text-xs);
  margin-bottom: var(--space-0-5);
}
.card-density-compact-icon {
  font-size: var(--text-xs);
}
.card-density-dense {
  padding: var(--space-2) !important;
  gap: var(--space-1);
}
.card-density-dense .card-header {
  margin-bottom: var(--space-1);
  gap: var(--space-1);
  padding: 0;
}
.card-density-dense .card-body {
  padding: 0;
}
.card-density-dense .card-actions {
  padding-top: var(--space-1);
  gap: var(--space-1);
}
.card-density-dense .card-title {
  font-size: var(--text-sm);
  margin-bottom: var(--space-1);
}
.card-density-dense-icon {
  font-size: var(--text-sm);
}
.card-density-normal {
  padding: var(--space-4) !important;
  gap: var(--space-2);
}
.card-density-normal .card-header {
  margin-bottom: var(--space-2);
  gap: var(--space-2);
  padding: 0;
}
.card-density-normal .card-body {
  padding: 0;
}
.card-density-normal .card-actions {
  padding-top: var(--space-2);
  gap: var(--space-2);
}
.card-density-normal .card-title {
  font-size: var(--text-base);
  margin-bottom: var(--space-2);
}
.card-density-normal-icon {
  font-size: var(--text-base);
}
.card-density-spacious {
  padding: var(--space-8) !important;
  gap: var(--space-4);
}
.card-density-spacious .card-header {
  margin-bottom: var(--space-4);
  gap: var(--space-4);
  padding: 0;
}
.card-density-spacious .card-body {
  padding: 0;
}
.card-density-spacious .card-actions {
  padding-top: var(--space-4);
  gap: var(--space-4);
}
.card-density-spacious .card-title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-4);
}
.card-density-spacious-icon {
  font-size: var(--text-xl);
}
.card-outlined {
  background: transparent;
  border-style: solid;
}
.card-outlined {
  box-shadow: none;
}
.card-outlined-flat {
  box-shadow: none;
}
.card-outlined-subtle {
  box-shadow: var(--shadow-sm);
}
.card-outlined-elevated {
  box-shadow: var(--shadow-lg);
}
.card-outlined-floating {
  box-shadow: var(--shadow-xl);
}
.card-outlined-dramatic {
  box-shadow: var(--shadow-2xl);
}
.card-elevated {
  box-shadow: var(--shadow-xl);
}
.card-elevated-flat {
  box-shadow: none;
}
.card-elevated-subtle {
  box-shadow: var(--shadow-sm);
}
.card-elevated-elevated {
  box-shadow: var(--shadow-lg);
}
.card-elevated-floating {
  box-shadow: var(--shadow-xl);
}
.card-elevated-dramatic {
  box-shadow: var(--shadow-2xl);
}
.card-floating {
  box-shadow: var(--shadow-2xl);
}
.card-floating-flat {
  box-shadow: none;
}
.card-floating-subtle {
  box-shadow: var(--shadow-sm);
}
.card-floating-elevated {
  box-shadow: var(--shadow-lg);
}
.card-floating-floating {
  box-shadow: var(--shadow-xl);
}
.card-floating-dramatic {
  box-shadow: var(--shadow-2xl);
}
.card-flat {
  border: none;
}
.card-flat {
  box-shadow: none;
}
.card-flat-flat {
  box-shadow: none;
}
.card-flat-subtle {
  box-shadow: var(--shadow-sm);
}
.card-flat-elevated {
  box-shadow: var(--shadow-lg);
}
.card-flat-floating {
  box-shadow: var(--shadow-xl);
}
.card-flat-dramatic {
  box-shadow: var(--shadow-2xl);
}
.card-glass {
  transition: all var(--duration-normal) var(--ease-out);
}
.card-glass:hover {
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
}
.card-gradient {
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
  border-color: transparent;
}
.card-gradient .card-title,
.card-gradient .card-subtitle,
.card-gradient .card-body,
.card-gradient .card-content {
  color: var(--color-text-inverse);
}
.card-glass-gradient {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 12%, transparent) 0%, color-mix(in srgb, var(--color-primary) 5%, transparent) 100%);
  backdrop-filter: blur(16px) saturate(130%) brightness(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(130%) brightness(1.1);
}
.card-glass-gradient {
  border: 1px solid var(--glass-border-light);
  color: var(--color-text);
  transition: all var(--duration-normal) var(--ease-out);
}
.card-glass-gradient .card-title, .card-glass-gradient h1, .card-glass-gradient h2, .card-glass-gradient h3, .card-glass-gradient h4, .card-glass-gradient h5, .card-glass-gradient h6 {
  color: var(--color-text);
  text-shadow: var(--text-shadow-sm);
}
.card-glass-gradient .card-body, .card-glass-gradient .modal-body, .card-glass-gradient .dropdown-content {
  color: var(--color-text-muted);
}
.card-glass-gradient:hover {
  backdrop-filter: blur(20px) saturate(140%) brightness(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(140%) brightness(1.15);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.3);
}
.card-glass-gradient-success {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-success) 12%, transparent) 0%, color-mix(in srgb, var(--color-success) 5%, transparent) 100%);
  backdrop-filter: blur(16px) saturate(130%) brightness(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(130%) brightness(1.1);
}
.card-glass-gradient-success {
  border: 1px solid var(--glass-border-light);
  color: var(--color-text);
  transition: all var(--duration-normal) var(--ease-out);
}
.card-glass-gradient-success .card-title, .card-glass-gradient-success h1, .card-glass-gradient-success h2, .card-glass-gradient-success h3, .card-glass-gradient-success h4, .card-glass-gradient-success h5, .card-glass-gradient-success h6 {
  color: var(--color-text);
  text-shadow: var(--text-shadow-sm);
}
.card-glass-gradient-success .card-body, .card-glass-gradient-success .modal-body, .card-glass-gradient-success .dropdown-content {
  color: var(--color-text-muted);
}
.card-glass-gradient-success:hover {
  backdrop-filter: blur(20px) saturate(140%) brightness(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(140%) brightness(1.15);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.3);
}
.card-glass-gradient-warning {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-warning) 12%, transparent) 0%, color-mix(in srgb, var(--color-warning) 5%, transparent) 100%);
  backdrop-filter: blur(16px) saturate(130%) brightness(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(130%) brightness(1.1);
}
.card-glass-gradient-warning {
  border: 1px solid var(--glass-border-light);
  color: var(--color-text);
  transition: all var(--duration-normal) var(--ease-out);
}
.card-glass-gradient-warning .card-title, .card-glass-gradient-warning h1, .card-glass-gradient-warning h2, .card-glass-gradient-warning h3, .card-glass-gradient-warning h4, .card-glass-gradient-warning h5, .card-glass-gradient-warning h6 {
  color: var(--color-text);
  text-shadow: var(--text-shadow-sm);
}
.card-glass-gradient-warning .card-body, .card-glass-gradient-warning .modal-body, .card-glass-gradient-warning .dropdown-content {
  color: var(--color-text-muted);
}
.card-glass-gradient-warning:hover {
  backdrop-filter: blur(20px) saturate(140%) brightness(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(140%) brightness(1.15);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.3);
}
.card-glass-gradient-error {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-error) 12%, transparent) 0%, color-mix(in srgb, var(--color-error) 5%, transparent) 100%);
  backdrop-filter: blur(16px) saturate(130%) brightness(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(130%) brightness(1.1);
}
.card-glass-gradient-error {
  border: 1px solid var(--glass-border-light);
  color: var(--color-text);
  transition: all var(--duration-normal) var(--ease-out);
}
.card-glass-gradient-error .card-title, .card-glass-gradient-error h1, .card-glass-gradient-error h2, .card-glass-gradient-error h3, .card-glass-gradient-error h4, .card-glass-gradient-error h5, .card-glass-gradient-error h6 {
  color: var(--color-text);
  text-shadow: var(--text-shadow-sm);
}
.card-glass-gradient-error .card-body, .card-glass-gradient-error .modal-body, .card-glass-gradient-error .dropdown-content {
  color: var(--color-text-muted);
}
.card-glass-gradient-error:hover {
  backdrop-filter: blur(20px) saturate(140%) brightness(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(140%) brightness(1.15);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.3);
}
.card-glass-gradient-info {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-info) 12%, transparent) 0%, color-mix(in srgb, var(--color-info) 5%, transparent) 100%);
  backdrop-filter: blur(16px) saturate(130%) brightness(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(130%) brightness(1.1);
}
.card-glass-gradient-info {
  border: 1px solid var(--glass-border-light);
  color: var(--color-text);
  transition: all var(--duration-normal) var(--ease-out);
}
.card-glass-gradient-info .card-title, .card-glass-gradient-info h1, .card-glass-gradient-info h2, .card-glass-gradient-info h3, .card-glass-gradient-info h4, .card-glass-gradient-info h5, .card-glass-gradient-info h6 {
  color: var(--color-text);
  text-shadow: var(--text-shadow-sm);
}
.card-glass-gradient-info .card-body, .card-glass-gradient-info .modal-body, .card-glass-gradient-info .dropdown-content {
  color: var(--color-text-muted);
}
.card-glass-gradient-info:hover {
  backdrop-filter: blur(20px) saturate(140%) brightness(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(140%) brightness(1.15);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.3);
}
.card-clickable, .card-interactive {
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
}
.card-clickable:focus-visible, .card-interactive:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: inherit;
  outline-width: 2px;
  outline-offset: 3px;
}
.card-clickable:hover, .card-interactive:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px var(--shadow-overlay-medium);
  filter: brightness(1.01);
}
.card-clickable:active, .card-interactive:active {
  transform: scale(0.99) translateY(0);
  box-shadow: 0 2px 4px var(--shadow-overlay-subtle);
}
.card-clickable:disabled, .card-clickable[disabled], .card-interactive:disabled, .card-interactive[disabled] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.card-clickable:disabled:hover, .card-clickable:disabled:active, .card-clickable:disabled:focus-visible, .card-clickable[disabled]:hover, .card-clickable[disabled]:active, .card-clickable[disabled]:focus-visible, .card-interactive:disabled:hover, .card-interactive:disabled:active, .card-interactive:disabled:focus-visible, .card-interactive[disabled]:hover, .card-interactive[disabled]:active, .card-interactive[disabled]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.card-clickable[aria-disabled=true], .card-interactive[aria-disabled=true] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.card-clickable[aria-disabled=true]:hover, .card-clickable[aria-disabled=true]:active, .card-clickable[aria-disabled=true]:focus-visible, .card-interactive[aria-disabled=true]:hover, .card-interactive[aria-disabled=true]:active, .card-interactive[aria-disabled=true]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.card-clickable-loading, .card-interactive-loading {
  position: relative;
  min-height: 8rem;
  contain: layout style;
  isolation: isolate;
  will-change: contents;
  z-index: var(--z-base);
  transition: opacity var(--duration-normal) var(--ease-out);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.card-clickable-loading::before, .card-interactive-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-loading);
  border-radius: inherit;
  animation: fadeIn var(--duration-fast) var(--ease-out);
}
.card-clickable-loading::after, .card-interactive-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1em;
  height: 1em;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-normal) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
  z-index: var(--z-loading-spinner);
}
.card-clickable, .card-interactive {
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
}
.card-clickable:focus-visible, .card-interactive:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: inherit;
  outline-width: 2px;
  outline-offset: 3px;
}
.card-clickable:hover, .card-interactive:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px var(--shadow-overlay-medium);
  filter: brightness(1.01);
}
.card-clickable:active, .card-interactive:active {
  transform: scale(0.99) translateY(0);
  box-shadow: 0 2px 4px var(--shadow-overlay-subtle);
}
.card-clickable:disabled, .card-clickable[disabled], .card-interactive:disabled, .card-interactive[disabled] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.card-clickable:disabled:hover, .card-clickable:disabled:active, .card-clickable:disabled:focus-visible, .card-clickable[disabled]:hover, .card-clickable[disabled]:active, .card-clickable[disabled]:focus-visible, .card-interactive:disabled:hover, .card-interactive:disabled:active, .card-interactive:disabled:focus-visible, .card-interactive[disabled]:hover, .card-interactive[disabled]:active, .card-interactive[disabled]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.card-clickable[aria-disabled=true], .card-interactive[aria-disabled=true] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.card-clickable[aria-disabled=true]:hover, .card-clickable[aria-disabled=true]:active, .card-clickable[aria-disabled=true]:focus-visible, .card-interactive[aria-disabled=true]:hover, .card-interactive[aria-disabled=true]:active, .card-interactive[aria-disabled=true]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.card-clickable-loading, .card-interactive-loading {
  position: relative;
  min-height: 8rem;
  contain: layout style;
  isolation: isolate;
  will-change: contents;
  z-index: var(--z-base);
  transition: opacity var(--duration-normal) var(--ease-out);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.card-clickable-loading::before, .card-interactive-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-loading);
  border-radius: inherit;
  animation: fadeIn var(--duration-fast) var(--ease-out);
}
.card-clickable-loading::after, .card-interactive-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1em;
  height: 1em;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-normal) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
  z-index: var(--z-loading-spinner);
}
.card-clickable::before, .card-interactive::before {
  content: "";
  position: absolute;
  top: calc(var(--touch-target-min) / -4);
  left: calc(var(--touch-target-min) / -4);
  right: calc(var(--touch-target-min) / -4);
  bottom: calc(var(--touch-target-min) / -4);
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
}
.card-clickable:active, .card-interactive:active {
  transform: scale(calc(1 - var(--φ-inv) * 0.05));
  transition-duration: calc(var(--duration-fast) * var(--φ-inv));
}
.card-clickable, .card-interactive {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
@media (prefers-contrast: high) {
  .card-clickable, .card-interactive {
    border: 2px solid currentColor;
  }
  .card-clickable:focus-visible, .card-interactive:focus-visible {
    outline-width: 3px;
    outline-offset: 3px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .card-clickable, .card-interactive {
    transition: none;
  }
  .card-clickable:hover, .card-clickable:active, .card-interactive:hover, .card-interactive:active {
    transform: none;
    animation: none;
  }
  .card-clickable-loading::after, .card-interactive-loading::after {
    animation: none;
    border: 2px solid currentColor;
  }
}
.card-clickable:focus-visible, .card-interactive:focus-visible {
  outline: none;
  z-index: var(--z-base);
}
.card-clickable button, .card-clickable input, .card-clickable select, .card-clickable textarea, .card-clickable a, .card-clickable [role=button], .card-interactive button, .card-interactive input, .card-interactive select, .card-interactive textarea, .card-interactive a, .card-interactive [role=button] {
  pointer-events: auto;
}
.card-background {
  pointer-events: none;
}
.card-background * {
  pointer-events: auto;
}
.card-background:hover {
  transform: none;
  box-shadow: var(--shadow-md);
  filter: none;
}
.card-urgent {
  animation: pulse var(--duration-slow) infinite alternate;
  border-color: var(--color-warning);
}
.card-outlined-primary {
  background: transparent;
  color: var(--color-primary);
  border: 1.618px solid var(--color-primary);
  transition: all var(--duration-fast) var(--ease-out);
}
.card-outlined-primary:hover {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.card-outlined-primary:active {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  transform: scale(0.969);
}
.card-ghost-primary {
  background: color-mix(in srgb, var(--color-primary) 8 %, transparent);
  color: var(--color-primary);
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
  transition: all var(--duration-fast) var(--ease-out);
}
.card-ghost-primary:hover {
  background: color-mix(in srgb, var(--color-primary) 15 %, transparent);
}
.card-ghost-primary:active {
  background: color-mix(in srgb, var(--color-primary) 20 %, transparent);
}
.card-outlined-success {
  background: transparent;
  color: var(--color-success);
  border: 1.618px solid var(--color-success);
  transition: all var(--duration-fast) var(--ease-out);
}
.card-outlined-success:hover {
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
}
.card-outlined-success:active {
  background: color-mix(in srgb, var(--color-success) 15%, transparent);
  transform: scale(0.969);
}
.card-ghost-success {
  background: color-mix(in srgb, var(--color-success) 8 %, transparent);
  color: var(--color-success);
  border: 1px solid color-mix(in srgb, var(--color-success) 20%, transparent);
  transition: all var(--duration-fast) var(--ease-out);
}
.card-ghost-success:hover {
  background: color-mix(in srgb, var(--color-success) 15 %, transparent);
}
.card-ghost-success:active {
  background: color-mix(in srgb, var(--color-success) 20 %, transparent);
}
.card-outlined-warning {
  background: transparent;
  color: var(--color-warning);
  border: 1.618px solid var(--color-warning);
  transition: all var(--duration-fast) var(--ease-out);
}
.card-outlined-warning:hover {
  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
}
.card-outlined-warning:active {
  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
  transform: scale(0.969);
}
.card-ghost-warning {
  background: color-mix(in srgb, var(--color-warning) 8 %, transparent);
  color: var(--color-warning);
  border: 1px solid color-mix(in srgb, var(--color-warning) 20%, transparent);
  transition: all var(--duration-fast) var(--ease-out);
}
.card-ghost-warning:hover {
  background: color-mix(in srgb, var(--color-warning) 15 %, transparent);
}
.card-ghost-warning:active {
  background: color-mix(in srgb, var(--color-warning) 20 %, transparent);
}
.card-outlined-error {
  background: transparent;
  color: var(--color-error);
  border: 1.618px solid var(--color-error);
  transition: all var(--duration-fast) var(--ease-out);
}
.card-outlined-error:hover {
  background: color-mix(in srgb, var(--color-error) 10%, transparent);
}
.card-outlined-error:active {
  background: color-mix(in srgb, var(--color-error) 15%, transparent);
  transform: scale(0.969);
}
.card-ghost-error {
  background: color-mix(in srgb, var(--color-error) 8 %, transparent);
  color: var(--color-error);
  border: 1px solid color-mix(in srgb, var(--color-error) 20%, transparent);
  transition: all var(--duration-fast) var(--ease-out);
}
.card-ghost-error:hover {
  background: color-mix(in srgb, var(--color-error) 15 %, transparent);
}
.card-ghost-error:active {
  background: color-mix(in srgb, var(--color-error) 20 %, transparent);
}
.card-outlined-info {
  background: transparent;
  color: var(--color-info);
  border: 1.618px solid var(--color-info);
  transition: all var(--duration-fast) var(--ease-out);
}
.card-outlined-info:hover {
  background: color-mix(in srgb, var(--color-info) 10%, transparent);
}
.card-outlined-info:active {
  background: color-mix(in srgb, var(--color-info) 15%, transparent);
  transform: scale(0.969);
}
.card-ghost-info {
  background: color-mix(in srgb, var(--color-info) 8 %, transparent);
  color: var(--color-info);
  border: 1px solid color-mix(in srgb, var(--color-info) 20%, transparent);
  transition: all var(--duration-fast) var(--ease-out);
}
.card-ghost-info:hover {
  background: color-mix(in srgb, var(--color-info) 15 %, transparent);
}
.card-ghost-info:active {
  background: color-mix(in srgb, var(--color-info) 20 %, transparent);
}
.card-primary, .card-success, .card-warning, .card-error, .card-info {
  border-left-width: var(--space-1);
}
.card-primary-outlined, .card-success-outlined, .card-warning-outlined, .card-error-outlined, .card-info-outlined {
  border-left-width: 1px;
}
.card-ghost {
  background: transparent;
  border-style: dashed;
  border-width: calc(var(--border-1) * 1.618);
}
.card-ghost {
  box-shadow: none;
}
.card-ghost-flat {
  box-shadow: none;
}
.card-ghost-subtle {
  box-shadow: var(--shadow-sm);
}
.card-ghost-elevated {
  box-shadow: var(--shadow-lg);
}
.card-ghost-floating {
  box-shadow: var(--shadow-xl);
}
.card-ghost-dramatic {
  box-shadow: var(--shadow-2xl);
}
.card-ghost:hover {
  background: var(--color-surface-elevated);
  border-style: solid;
}
.card-neutral {
  background: var(--color-surface);
  border-color: var(--color-border);
}
.card .notification-count {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: var(--z-badge);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-0-5) var(--space-1);
  font-size: var(--text-2xs);
  gap: var(--space-0-5);
  background: var(--color-error);
  color: var(--color-text-inverse);
  border-radius: var(--radius-md);
  font-weight: var(--font-semibold);
  min-width: 16px;
  z-index: var(--z-badge);
}
.card-tag {
  font-size: var(--text-2xs);
  font-weight: 500;
  padding: var(--space-0-5) var(--space-1-5);
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.card-tag-overflow {
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.card-loading {
  position: relative;
  min-height: 8rem;
  contain: layout style;
  isolation: isolate;
  will-change: contents;
  z-index: var(--z-base);
  transition: opacity var(--duration-normal) var(--ease-out);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.card-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-loading);
  border-radius: inherit;
  animation: fadeIn var(--duration-fast) var(--ease-out);
}
.card-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1em;
  height: 1em;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-normal) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
  z-index: var(--z-loading-spinner);
}
.card-loading-skeleton {
  background: linear-gradient(90deg, var(--color-surface-elevated) 25%, color-mix(in srgb, var(--color-surface-elevated) 80%, white) 50%, var(--color-surface-elevated) 75%);
  background-size: 200% 100%;
  animation: shimmer var(--duration-slow) ease-in-out infinite;
  border-radius: var(--radius-sm);
  color: transparent;
  user-select: none;
}
.card-loading-skeleton::before, .card-loading-skeleton::after {
  display: none;
}
.card-loading-skeleton * {
  visibility: hidden;
}
.card-loading-skeleton {
  height: 1.5em;
}
.card-loading-skeleton-text {
  height: 1rem;
}
.card-loading-skeleton-title {
  height: 2rem;
  width: 50%;
}
.card-loading-skeleton-button {
  height: 2.5rem;
  width: 6rem;
}
.card .rounded-lg[style*="--icon-size"] {
  width: var(--icon-size);
  height: var(--icon-size);
  background: var(--color-primary);
}
.card .rounded-lg[style*="--icon-size"] .icon,
.card .rounded-lg[style*="--icon-size"] i {
  color: var(--color-primary);
  flex-shrink: 0;
  font-size: var(--icon-base);
  margin-right: var(--space-2);
}
.card .rounded-lg[style*="--icon-size"] .icon,
.card .rounded-lg[style*="--icon-size"] i {
  color: var(--color-text-inverse);
  font-size: var(--icon-font-size);
}
.card span[style*="--value-color"] {
  color: var(--color-text);
}
.card-notification {
  gap: var(--space-4);
}
.card-notification-unread {
  border-left: 4px solid var(--color-primary);
}
.card-notification-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  background: var(--color-surface);
}
.card-notification-content {
  flex: 1;
  min-width: 0;
}
.card-notification-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}
.card-notification-message {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.card-notification-time {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}
.card-notification-actions {
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.card-header {
  margin-bottom: var(--space-4);
}
@media (max-width: 767px) {
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
}
.card-header .header-card-body {
  gap: var(--space-3);
  width: 100%;
}
.card-header .header-card-body-align-start {
  align-items: flex-start;
  text-align: left;
}
.card-header .header-card-body-align-center {
  align-items: center;
  text-align: center;
}
.card-header .header-card-body-align-end {
  align-items: flex-end;
  text-align: right;
}
.card-header .header-card-body-icon-top, .card-header .header-card-body-icon-bottom {
  align-items: inherit;
}
.card-header .header-content-wrapper {
  align-items: center;
  width: 100%;
}
.card-header .header-content-wrapper:not(.d-flex) {
  text-align: inherit;
}
.card-header .header-text-container {
  flex: 1;
  min-width: 0;
}
.card-header .header-title {
  margin: 0 0 var(--space-1) 0;
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: inherit;
}
.card-header .header-description {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  opacity: 0.8;
}
.card-header .header-card-icon {
  flex-shrink: 0;
  color: inherit;
  opacity: 0.9;
}
.card-header .header-child-content {
  width: 100%;
}
.card-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-1) 0;
  line-height: var(--leading-tight);
}
.card-body {
  flex: 1;
}
.card-actions {
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: var(--border-1) solid var(--color-border);
}
.card-actions-end {
  justify-content: flex-end;
}
@media (max-width: 767px) {
  .card-actions {
    flex-direction: column;
  }
  .card-actions-center, .card-actions-end, .card-actions-between {
    justify-content: stretch;
  }
}
.card.loading-state {
  position: relative;
  min-height: 8rem;
  contain: layout style;
  isolation: isolate;
  will-change: contents;
  z-index: var(--z-base);
  transition: opacity var(--duration-normal) var(--ease-out);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.card.loading-state::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-loading);
  border-radius: inherit;
  animation: fadeIn var(--duration-fast) var(--ease-out);
}
.card.loading-state::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1em;
  height: 1em;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-normal) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
  z-index: var(--z-loading-spinner);
}

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  pointer-events: none;
}
@media (max-width: 639px) {
  .modal {
    padding: var(--space-2);
  }
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: auto;
  transition: opacity 200ms ease-out;
  z-index: var(--z-modal-backdrop, 1029);
}
.modal-backdrop-dark {
  background: rgba(0, 0, 0, 0.7);
}
.modal-backdrop-light {
  background: rgba(255, 255, 255, 0.7);
}
.modal-content {
  position: relative;
  z-index: var(--z-modal-content, 1040);
  background: var(--color-surface-elevated);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--color-border-light);
  max-width: 60rem;
  width: 100%;
  max-height: 95vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
}
@media (max-width: 639px) {
  .modal-content {
    max-height: 100vh;
    border-radius: var(--radius-xl);
  }
}
.modal-content-xs {
  max-width: 25rem;
}
.modal-content-small {
  max-width: 35rem;
}
.modal-content-large {
  max-width: 80rem;
  width: 90%;
}
.modal-content-xlarge {
  max-width: 100rem;
  width: calc(100vw - var(--space-2));
  max-height: calc(100vh - var(--space-2));
}
@media (max-width: 767px) {
  .modal-content-xlarge {
    width: calc(100vw - var(--space-1));
    max-height: calc(100vh - var(--space-1));
    border-radius: var(--radius-lg);
  }
}
.modal-content-glass {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--blur-xl));
  border: var(--border-1) solid var(--glass-border-strong);
}
.modal-header {
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-border-light);
  background: linear-gradient(135deg, var(--color-surface-elevated) 0%, var(--color-surface) 100%);
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
@media (max-width: 639px) {
  .modal-header {
    padding: var(--space-4);
  }
}
.modal-header-content {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  align-items: flex-start;
  width: 100%;
}
.modal-header-icon {
  grid-row: 1/span 2;
  grid-column: 1;
  align-self: flex-start;
  margin-top: var(--space-1);
}
.modal-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: var(--space-4);
}
.modal-header-xs {
  padding: var(--space-2);
}
@media (max-width: 639px) {
  .modal-header-xs {
    padding: var(--space-1);
  }
}
.modal-header-sm {
  padding: var(--space-3);
}
@media (max-width: 639px) {
  .modal-header-sm {
    padding: var(--space-2);
  }
}
.modal-header-lg {
  padding: var(--space-8);
}
@media (max-width: 639px) {
  .modal-header-lg {
    padding: var(--space-6);
  }
}
.modal-header-xl {
  padding: var(--space-10);
}
@media (max-width: 639px) {
  .modal-header-xl {
    padding: var(--space-8);
  }
}
.modal-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin: 0;
  grid-column: 2;
  grid-row: 1;
  align-self: flex-start;
}
@media (max-width: 639px) {
  .modal-title {
    font-size: var(--text-lg);
  }
}
.modal-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  margin: 0;
  grid-column: 2;
  grid-row: 2;
  align-self: flex-start;
}
.modal-close {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  position: relative;
  z-index: var(--z-base);
  width: var(--space-8);
  height: var(--space-8);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  color: var(--color-text-secondary);
  transition: all var(--duration-fast) var(--ease-in-out);
  cursor: pointer;
}
.modal-close:hover:not(:disabled) {
  background: var(--state-hover-bg);
  color: var(--color-text);
  transform: scale(1.1);
}
.modal-close:active:not(:disabled) {
  transform: scale(0.95);
}
.modal-close:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.modal-close i {
  font-size: var(--text-xl);
}
.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6);
  position: relative;
  pointer-events: auto;
}
@media (max-width: 639px) {
  .modal-body {
    padding: var(--space-4);
  }
}
.modal-footer {
  padding: var(--space-6);
  border-top: 1px solid var(--color-border-light);
  background: var(--color-surface);
  flex-shrink: 0;
}
@media (max-width: 639px) {
  .modal-footer {
    padding: var(--space-4);
  }
}
.modal-footer-xs {
  padding: var(--space-2);
}
@media (max-width: 639px) {
  .modal-footer-xs {
    padding: var(--space-1);
  }
}
.modal-footer-sm {
  padding: var(--space-3);
}
@media (max-width: 639px) {
  .modal-footer-sm {
    padding: var(--space-2);
  }
}
.modal-footer-lg {
  padding: var(--space-8);
}
@media (max-width: 639px) {
  .modal-footer-lg {
    padding: var(--space-6);
  }
}
.modal-footer-xl {
  padding: var(--space-10);
}
@media (max-width: 639px) {
  .modal-footer-xl {
    padding: var(--space-8);
  }
}
.modal-footer-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  flex-direction: row;
}
@media (max-width: 639px) {
  .modal-footer-buttons {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .modal-footer-buttons .button, .modal-footer-buttons .r-button {
    width: 100%;
    justify-content: center;
  }
}
.modal-loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--color-surface-rgb), 0.96);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-critical);
  animation: fadeIn var(--duration-fast) var(--ease-out);
  border-radius: var(--radius-xl);
}
.modal-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  text-align: center;
  animation: fadeInUp var(--duration-normal) var(--ease-out);
}
.modal-loading-spinner {
  position: relative;
  width: 64px;
  height: 64px;
}
.modal-loading-spinner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid var(--color-border-subtle);
  opacity: 0.15;
}
.modal-loading-spinner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: var(--color-primary);
  border-right-color: var(--color-primary);
  animation: spin 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
  filter: drop-shadow(0 0 4px rgba(var(--color-primary-rgb), 0.3));
}
.modal-loading-message {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: var(--font-medium);
  letter-spacing: 0.01em;
  opacity: 0.9;
}
.modal-loading-progress {
  width: 240px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.modal-loading-progress .progress-bar {
  height: 3px;
  background: var(--color-border-subtle);
  border-radius: 100px;
  overflow: hidden;
  position: relative;
}
.modal-loading-progress .progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  transition: width var(--duration-normal) var(--ease-out);
  border-radius: inherit;
  box-shadow: 0 0 8px rgba(var(--color-primary-rgb), 0.4);
}
.modal-loading-progress .progress-text {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-medium);
}
.modal-processing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-background-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  max-width: 400px;
}
.modal-processing-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2) 0;
}
.modal-processing-text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: var(--font-medium);
  text-align: center;
}
.modal-processing-eta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}
.modal-processing-progress {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.modal-processing-progress .progress-bar {
  width: 100%;
  height: 8px;
  background: var(--color-background-subtle);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.modal-processing-progress .progress-bar-fill {
  height: 100%;
  background: var(--color-primary);
  transition: width var(--duration-normal) var(--ease-out);
  border-radius: var(--radius-full);
}
.modal-processing-progress .progress-text {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  font-weight: var(--font-semibold);
}
.modal-processing-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}
.modal-processing-steps .processing-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-out);
}
.modal-processing-steps .processing-step i {
  font-size: var(--text-xl);
  color: var(--color-text-muted);
}
.modal-processing-steps .processing-step .spinner-small {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-primary-light);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin var(--duration-slow) linear infinite;
}
.modal-processing-steps .processing-step span {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.modal-processing-steps .processing-step.active {
  background: var(--color-primary-light);
}
.modal-processing-steps .processing-step.active i, .modal-processing-steps .processing-step.active span {
  color: var(--color-primary);
  font-weight: var(--font-semibold);
}
.modal-processing-steps .processing-step.completed i {
  color: var(--color-success);
}
.modal-processing-steps .processing-step.completed span {
  text-decoration: line-through;
  color: var(--color-text-muted);
}
.modal-unsaved-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--color-warning) 8%, transparent);
  color: var(--color-warning);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  margin-top: var(--space-3);
}
.modal-unsaved-indicator i {
  font-size: var(--text-base);
}

.r-modal-provider {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-modal);
}
.r-modal-provider > * {
  pointer-events: auto;
}

.r-confirmation-modal-content {
  padding: var(--space-6);
  text-align: center;
}
@media (max-width: 639px) {
  .r-confirmation-modal-content {
    padding: var(--space-4);
  }
}
.r-confirmation-modal-icon {
  width: var(--space-16);
  height: var(--space-16);
  margin: 0 auto var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-primary-bg);
  color: var(--color-primary);
}
.r-confirmation-modal-icon i {
  font-size: var(--text-3xl);
}
.r-confirmation-modal-icon-destructive {
  background: var(--glass-error-bg);
  color: var(--color-error);
}
.r-confirmation-modal-icon-warning {
  background: color-mix(in srgb, var(--color-warning) 8%, transparent);
  color: var(--color-warning);
}
.r-confirmation-modal-icon-success {
  background: var(--glass-success-bg);
  color: var(--color-success);
}
.r-confirmation-modal-icon-info {
  background: color-mix(in srgb, var(--color-info) 8%, transparent);
  color: var(--color-info);
}
.r-confirmation-modal-message {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}
.r-confirmation-modal-message + .r-confirmation-modal-message {
  margin-top: var(--space-1);
}
.r-confirmation-modal-message-list {
  margin: 0;
  padding-left: var(--space-5);
  list-style: disc;
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.r-confirmation-modal-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
}
@media (max-width: 639px) {
  .r-confirmation-modal-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .r-confirmation-modal-actions .button {
    width: 100%;
    justify-content: center;
  }
}

.portal-root {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: var(--z-critical);
  pointer-events: none;
  overflow: hidden;
}
.portal-root > * {
  pointer-events: auto;
}

#modal-portal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: var(--z-critical);
  pointer-events: none;
}
#modal-portal-container > * {
  pointer-events: auto;
}

body.modal-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  width: 24rem;
  max-width: 90vw;
  background: var(--color-surface-elevated);
  border: var(--border-1) solid var(--color-border);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-drawer);
}
.drawer-left {
  left: 0;
  border-right: var(--border-1) solid var(--color-border);
  border-left: none;
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  animation: slideLeft var(--duration-slow) var(--ease-out);
}
.drawer-right {
  right: 0;
  border-left: var(--border-1) solid var(--color-border);
  border-right: none;
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  animation: slideRight var(--duration-slow) var(--ease-out);
}
.drawer-wide {
  width: 32rem;
}
.drawer-narrow {
  width: 20rem;
}
.drawer-glass {
  background: color-mix(in srgb, var(--color-surface-elevated) 85%, transparent);
  backdrop-filter: blur(var(--blur-xl));
  border-color: var(--glass-border-strong);
}

@layer components {
  .form-label {
    display: block;
    font-weight: var(--font-medium);
    font-size: var(--text-sm);
    color: var(--color-text);
    margin-bottom: var(--space-1);
  }
  .form-input, .rr-select .rr-select-input {
    display: block;
    width: 100%;
    padding: var(--space-3);
    font-size: var(--text-base);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    transition: all var(--duration-normal) var(--ease-out);
  }
  .form-input:focus, .rr-select .rr-select-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary), calc(10% / 100));
  }
  .form-input-sm {
    padding: var(--space-2);
    font-size: var(--text-sm);
  }
  .form-input-error, .form-error {
    border-color: var(--color-error);
  }
  .form-input-error:focus, .form-error:focus {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px rgba(var(--color-error), calc(10% / 100));
  }
  .form-label-floating {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    font-size: var(--text-base);
    color: var(--color-text-muted);
    transition: all var(--duration-normal) var(--ease-out);
    pointer-events: none;
  }
  .form-label-floating.active {
    top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-primary);
  }
  .form-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .form-help {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-top: var(--space-1);
  }
  .form-file {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .form-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
  }
  .form-section-icon {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: var(--space-6);
    height: var(--space-6);
    margin-right: var(--space-2);
    color: var(--color-primary);
  }
  .form-section-description {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
  }
  .form-section-toggle {
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: var(--space-1);
  }
  .form-section-toggle:hover {
    color: var(--color-primary);
  }
  .form-section-content {
    margin-top: var(--space-4);
  }
  .form-dense .form-input, .form-dense .rr-select .rr-select-input, .rr-select .form-dense .rr-select-input {
    padding: var(--space-2);
  }
  .form-dense .form-label {
    margin-bottom: var(--space-0-5);
  }
  .form-ultra-dense .form-input, .form-ultra-dense .rr-select .rr-select-input, .rr-select .form-ultra-dense .rr-select-input {
    padding: var(--space-1);
    font-size: var(--text-sm);
  }
  .form-ultra-dense .form-label {
    margin-bottom: var(--space-0-5);
    font-size: var(--text-xs);
  }
  .form-ultra-dense .input-group {
    margin-bottom: 0;
  }
  .form-ultra-dense .grid {
    gap: var(--space-1);
  }
  .form-ultra-dense > * {
    margin-bottom: 0 !important;
  }
  .form-validation-summary {
    padding: var(--space-3);
    margin-bottom: var(--space-4);
    background: color-mix(in srgb, var(--color-error) 10%, var(--color-surface));
    border: 1px solid var(--color-error);
    border-radius: var(--radius-md);
    color: var(--color-error-dark);
  }
  .rr-select {
    position: relative;
    display: block;
    width: 100%;
  }
  .rr-select .rr-select-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right var(--space-2) center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: var(--space-8);
  }
  .form-wrapper {
    position: relative;
    width: 100%;
    transition: all var(--duration-normal) var(--ease-out);
  }
  .form-wrapper:focus-within {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
  .form-glass:hover {
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    background: var(--glass-hover-bg);
  }
  .form-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  @media (max-width: 767px) {
    .form-grid-2 {
      grid-template-columns: 1fr;
    }
  }
  .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: var(--border-1) solid var(--color-border);
  }
  @media (max-width: 639px) {
    .form-actions {
      flex-direction: column;
      gap: var(--space-3);
    }
  }
  .form-header {
    margin-bottom: var(--space-6);
  }
  .form-header .form-description {
    color: var(--color-text-muted);
    margin: 0;
  }
  .form-field-help {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-top: var(--space-2);
  }
  .form-field-error {
    color: var(--color-error);
    background: color-mix(in srgb, var(--color-error) 10 %, var(--color-surface));
    border-left: 3px solid var(--color-error);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    animation: shake var(--duration-normal) var(--ease-in-out);
  }
  .form-field-success {
    background: color-mix(in srgb, var(--color-success) 10 %, var(--color-surface));
    color: var(--color-success);
    border: var(--border-1) solid var(--color-success);
    animation: fadeIn var(--duration-normal) var(--ease-out);
  }
  .form-field-warning {
    background: color-mix(in srgb, var(--color-warning) 10 %, var(--color-surface));
    color: var(--color-warning);
    border: var(--border-1) solid var(--color-warning);
  }
  .form-success {
    background: color-mix(in srgb, var(--color-success) 10 %, var(--color-surface));
    color: var(--color-success);
    border: var(--border-1) solid var(--color-success);
    margin-top: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    animation: fadeIn var(--duration-normal) var(--ease-out);
  }
  .form-error {
    background: color-mix(in srgb, var(--color-error) 10 %, var(--color-surface));
    color: var(--color-error);
    border: var(--border-1) solid var(--color-error);
    margin-top: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    animation: shake var(--duration-normal) var(--ease-in-out), fadeIn var(--duration-normal) var(--ease-out);
  }
  .form-loading {
    position: relative;
    min-height: 10rem;
    contain: layout style;
    isolation: isolate;
    will-change: contents;
    z-index: var(--z-base);
    transition: opacity var(--duration-normal) var(--ease-out);
    transform: translateZ(0);
    backface-visibility: hidden;
  }
  .form-loading::before {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--color-surface) 80%, transparent);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: var(--z-loading);
    border-radius: inherit;
    animation: fadeIn var(--duration-fast) var(--ease-out);
  }
  .form-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.125em;
    height: 1.125em;
    border: 2.5px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
    border-radius: 50%;
    border: 2.5px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
    border-top-color: var(--color-primary);
    animation: spin var(--duration-slow) linear infinite;
    will-change: transform;
    transform-origin: center;
    display: block;
    flex-shrink: 0;
    z-index: var(--z-loading-spinner);
  }
  .form-field-loading {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }
  .form-field-loading::before {
    content: "";
    display: inline-block;
    width: 0.875em;
    height: 0.875em;
    border: 2px solid var(--color-border);
    border-radius: 50%;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-text);
    animation: spin var(--duration-normal) linear infinite;
    will-change: transform;
    transform-origin: center;
    display: block;
    flex-shrink: 0;
  }
  .form-field-group:focus-within .field-label {
    color: var(--color-primary);
  }
  .form-navigation {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-4);
  }
}
.form-group {
  margin-bottom: var(--space-4);
}
.form-group .form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: 500;
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}
.form-group .form-label .text-danger {
  color: var(--danger);
}
.form-group .form-help {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}
.form-group .form-error {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  color: var(--danger);
}
.form-group.has-error input,
.form-group.has-error textarea,
.form-group.has-error select {
  border-color: var(--danger);
}
.form-group.has-error input:focus,
.form-group.has-error textarea:focus,
.form-group.has-error select:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.1);
}

.select-field {
  position: relative;
  appearance: none;
  padding-right: var(--space-12);
}
.select-field::after {
  content: "";
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border: var(--space-1) solid transparent;
  border-top-color: currentColor;
  pointer-events: none;
  opacity: 0.7;
  transition: all var(--duration-fast) var(--ease-out);
}
.select-field-compact {
  padding-right: var(--space-8);
}
.select-field-dense {
  padding-right: var(--space-9);
}
.select-field-spacious {
  padding-right: var(--space-12);
}
.select-field:hover::after {
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
}
.select-field:disabled::after {
  opacity: 0.5;
}
.select-field:focus::after {
  opacity: 1;
  color: var(--color-primary);
}

.input {
  display: flex;
  align-items: center;
  line-height: var(--leading-none);
}
.input {
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
}
.input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: inherit;
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}
.input:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.1);
}
.input:active {
  box-shadow: inset 0 1px 2px var(--shadow-overlay-light);
}
.input:disabled, .input[disabled] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.input:disabled:hover, .input:disabled:active, .input:disabled:focus-visible, .input[disabled]:hover, .input[disabled]:active, .input[disabled]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.input[aria-disabled=true] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.input[aria-disabled=true]:hover, .input[aria-disabled=true]:active, .input[aria-disabled=true]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.input-loading {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.input-loading::before {
  content: "";
  display: inline-block;
  width: 0.875em;
  height: 0.875em;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-normal) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
}
.input:focus {
  border-color: var(--color-primary);
  background: var(--color-surface-elevated);
}
.input-hoverable:hover {
  transform: translateY(-1px);
  filter: brightness(1.02) saturate(1.05);
}
.input-hoverable:focus {
  transform: none;
  filter: none;
}
.input-hoverable:disabled {
  transform: none;
  filter: none;
}
.input-interactive:hover {
  transform: translateY(-1px) scale(1.01);
  filter: brightness(1.03) saturate(1.1);
  box-shadow: 0 2px 4px var(--shadow-overlay-light);
}
.input-interactive:focus {
  transform: none;
  filter: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}
.input-interactive:disabled {
  transform: none;
  filter: none;
  box-shadow: none;
}
.input-clean {
  background: color-mix(in srgb, var(--color-surface) 0 %, transparent);
  color: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-surface) 20%, transparent);
  transition: all var(--duration-fast) var(--ease-out);
}
.input-clean:hover {
  background: color-mix(in srgb, var(--color-surface) 7 %, transparent);
}
.input-clean:active {
  background: color-mix(in srgb, var(--color-surface) 12 %, transparent);
}
.input-filled {
  background: color-mix(in srgb, var(--color-surface) 5 %, transparent);
  color: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-surface) 20%, transparent);
  transition: all var(--duration-fast) var(--ease-out);
}
.input-filled:hover {
  background: color-mix(in srgb, var(--color-surface) 12 %, transparent);
}
.input-filled:active {
  background: color-mix(in srgb, var(--color-surface) 17 %, transparent);
}
.input-outlined {
  background: transparent;
  color: var(--color-border);
  border: 1.618px solid var(--color-border);
  transition: all var(--duration-fast) var(--ease-out);
}
.input-outlined:hover {
  background: color-mix(in srgb, var(--color-border) 10%, transparent);
}
.input-outlined:active {
  background: color-mix(in srgb, var(--color-border) 15%, transparent);
  transform: scale(0.969);
}
.input-ghost {
  background: color-mix(in srgb, var(--color-surface) 8 %, transparent);
  color: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-surface) 20%, transparent);
  transition: all var(--duration-fast) var(--ease-out);
}
.input-ghost:hover {
  background: color-mix(in srgb, var(--color-surface) 15 %, transparent);
}
.input-ghost:active {
  background: color-mix(in srgb, var(--color-surface) 20 %, transparent);
}
.input-sm {
  height: var(--space-9);
  min-height: var(--space-9);
}
.input-lg {
  min-height: var(--space-16);
  font-size: var(--text-lg);
}
.input-loading {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.input-loading::before {
  content: "";
  display: inline-block;
  width: 0.875em;
  height: 0.875em;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-normal) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
}
.input-loading:hover {
  transform: none !important;
  box-shadow: none !important;
}
.input-error {
  border-color: var(--color-error);
  background: color-mix(in srgb, var(--color-error) 3%, var(--color-surface-elevated));
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.1);
  outline: 2px solid var(--color-error);
  outline-offset: 2px;
  border-radius: inherit;
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}
.input-error:focus {
  background: var(--color-surface-elevated);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 15%, transparent);
}
.input-success {
  border-color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 3%, var(--color-surface-elevated));
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.1);
  outline: 2px solid var(--color-success);
  outline-offset: 2px;
  border-radius: inherit;
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}
.input-success:focus {
  background: var(--color-surface-elevated);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 15%, transparent);
}
.input-warning {
  border-color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 3%, var(--color-surface-elevated));
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.1);
  outline: 2px solid var(--color-warning);
  outline-offset: 2px;
  border-radius: inherit;
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}
.input-warning:focus {
  background: var(--color-surface-elevated);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-warning) 15%, transparent);
}
.input-info {
  border-color: var(--color-info);
  background: color-mix(in srgb, var(--color-info) 3%, var(--color-surface-elevated));
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.1);
  outline: 2px solid var(--color-info);
  outline-offset: 2px;
  border-radius: inherit;
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}
.input-info:focus {
  background: var(--color-surface-elevated);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-info) 15%, transparent);
}
.input-disabled {
  background: color-mix(in srgb, var(--color-text) 3%, var(--color-surface-elevated));
  color: var(--color-text-muted);
  border-color: var(--color-border-light);
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}
.input-disabled::placeholder {
  color: var(--color-text-subtle);
}
.input-density-compact {
  min-height: 5;
}
.input-density-compact {
  padding: var(--space-1-5);
  gap: var(--space-1);
  font-size: var(--text-xs);
}
.input-density-dense {
  min-height: 9;
}
.input-density-dense {
  padding: var(--space-2);
  gap: var(--space-1-5);
  font-size: var(--text-sm);
}
.input-density-spacious {
  min-height: 24;
}
.input-density-spacious {
  padding: var(--space-5);
  gap: var(--space-3);
  font-size: var(--text-lg);
}
.input-modern {
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
}
.input-modern:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: inherit;
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}
.input-modern:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.1);
}
.input-modern:active {
  box-shadow: inset 0 1px 2px var(--shadow-overlay-light);
}
.input-modern:disabled, .input-modern[disabled] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.input-modern:disabled:hover, .input-modern:disabled:active, .input-modern:disabled:focus-visible, .input-modern[disabled]:hover, .input-modern[disabled]:active, .input-modern[disabled]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.input-modern[aria-disabled=true] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.input-modern[aria-disabled=true]:hover, .input-modern[aria-disabled=true]:active, .input-modern[aria-disabled=true]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.input-modern-loading {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.input-modern-loading::before {
  content: "";
  display: inline-block;
  width: 0.875em;
  height: 0.875em;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-normal) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
}
.input-modern:hover {
  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.15);
}
.input-modern:hover {
  transform: translateY(-1px);
  filter: brightness(1.02) saturate(1.05);
}
.input-modern:focus {
  transform: none;
  filter: none;
}
.input-modern:disabled {
  transform: none;
  filter: none;
}

.input-group {
  position: relative;
}
.input-group-label {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.input-group-icon {
  position: absolute;
  top: 0;
  left: var(--space-4);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: calc(var(--z-base) + 10);
  transition: all var(--duration-normal) var(--ease-out);
  color: var(--color-text-muted);
  opacity: 0.8;
}
.input:focus + .input-group-icon {
  color: var(--color-primary);
  transform: scale(1.05);
  opacity: 1;
}
.input-error:focus + .input-group-icon, .input-error + .input-group-icon {
  color: var(--color-error);
  opacity: 1;
}
.input-success:focus + .input-group-icon, .input-success + .input-group-icon {
  color: var(--color-success);
  opacity: 1;
}
.input-warning:focus + .input-group-icon, .input-warning + .input-group-icon {
  color: var(--color-warning);
  opacity: 1;
}
.input-disabled + .input-group-icon {
  color: var(--color-text-subtle);
  opacity: var(--opacity-disabled);
}
.input-group-icon-end {
  position: absolute;
  top: 0;
  right: var(--space-4);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: calc(var(--z-base) + 10);
  pointer-events: auto;
}
.input-group-icon-end button {
  padding: 0;
  border: none;
  background: transparent;
  width: 100%;
  height: 100%;
}
.input-group-icon-end button {
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
}
.input-group-icon-end button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: inherit;
}
.input-group-icon-end button:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px var(--shadow-overlay-medium);
}
.input-group-icon-end button:active {
  transform: scale(0.98) translateY(0);
  filter: brightness(0.95);
  box-shadow: 0 1px 2px var(--shadow-overlay-dark);
}
.input-group-icon-end button:disabled, .input-group-icon-end button[disabled] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.input-group-icon-end button:disabled:hover, .input-group-icon-end button:disabled:active, .input-group-icon-end button:disabled:focus-visible, .input-group-icon-end button[disabled]:hover, .input-group-icon-end button[disabled]:active, .input-group-icon-end button[disabled]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.input-group-icon-end button[aria-disabled=true] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.input-group-icon-end button[aria-disabled=true]:hover, .input-group-icon-end button[aria-disabled=true]:active, .input-group-icon-end button[aria-disabled=true]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.input-group-icon-end button-loading {
  pointer-events: none;
  cursor: wait;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}
.input-group-icon-end button-loading > *:not(.loading-text) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.input-group-icon-end button-loading::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid color-mix(in srgb, currentColor 20%, transparent);
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, currentColor 20%, transparent);
  border-top-color: currentColor;
  animation: spin var(--duration-normal) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
  order: -1;
  flex-shrink: 0;
}
.input-group-error {
  color: var(--color-error);
  font-size: var(--text-sm);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--color-error) 8 %, transparent);
  color: var(--color-error);
  border: 1px solid color-mix(in srgb, var(--color-error) 20%, transparent);
  transition: all var(--duration-fast) var(--ease-out);
  border-left: calc(var(--space-1) * 0.75) solid var(--color-error);
  animation: slideUpSmooth 0.3s ease-out;
}
.input-group-error:hover {
  background: color-mix(in srgb, var(--color-error) 15 %, transparent);
}
.input-group-error:active {
  background: color-mix(in srgb, var(--color-error) 20 %, transparent);
}
.input-group-help {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  margin-top: var(--space-1);
}
.input-group-loading {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.input-group-loading::before {
  content: "";
  display: inline-block;
  width: 0.875em;
  height: 0.875em;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-normal) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
}

.textarea {
  min-height: calc(var(--space-10) * 3);
  resize: vertical;
  line-height: 1.6;
}
.textarea {
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
}
.textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: inherit;
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}
.textarea:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.1);
}
.textarea:active {
  box-shadow: inset 0 1px 2px var(--shadow-overlay-light);
}
.textarea:disabled, .textarea[disabled] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.textarea:disabled:hover, .textarea:disabled:active, .textarea:disabled:focus-visible, .textarea[disabled]:hover, .textarea[disabled]:active, .textarea[disabled]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.textarea[aria-disabled=true] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.textarea[aria-disabled=true]:hover, .textarea[aria-disabled=true]:active, .textarea[aria-disabled=true]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.textarea-loading {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.textarea-loading::before {
  content: "";
  display: inline-block;
  width: 0.875em;
  height: 0.875em;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-normal) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
}
.textarea-auto {
  resize: none;
  overflow: hidden;
  field-sizing: content;
}
.textarea-fixed {
  resize: none;
  overflow-y: auto;
}
.textarea-sm {
  min-height: calc(var(--space-10) * 2);
  font-size: var(--text-sm);
}
.textarea-lg {
  min-height: calc(var(--space-10) * 4);
  font-size: var(--text-lg);
}

.select {
  cursor: pointer;
  appearance: none;
}
.select {
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
}
.select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: inherit;
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}
.select:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.1);
}
.select:active {
  box-shadow: inset 0 1px 2px var(--shadow-overlay-light);
}
.select:disabled, .select[disabled] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.select:disabled:hover, .select:disabled:active, .select:disabled:focus-visible, .select[disabled]:hover, .select[disabled]:active, .select[disabled]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.select[aria-disabled=true] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.select[aria-disabled=true]:hover, .select[aria-disabled=true]:active, .select[aria-disabled=true]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.select-loading {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.select-loading::before {
  content: "";
  display: inline-block;
  width: 0.875em;
  height: 0.875em;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-normal) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
}

.validation-message {
  color: var(--color-error);
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}

.input-with-start-icon, .textarea-with-start-icon, .select-with-start-icon {
  padding-left: calc(var(--space-6) + var(--space-4) + var(--space-3));
}
.input-with-start-icon-sm, .textarea-with-start-icon-sm, .select-with-start-icon-sm {
  padding-left: calc(var(--space-5) + var(--space-3) + var(--space-2));
}
.input-with-start-icon-lg, .textarea-with-start-icon-lg, .select-with-start-icon-lg {
  padding-left: calc(var(--space-7) + var(--space-5) + var(--space-4));
}
.input-with-end-icon, .textarea-with-end-icon, .select-with-end-icon {
  padding-right: calc(var(--space-6) + var(--space-4) + var(--space-3));
}
.input-with-end-icon-sm, .textarea-with-end-icon-sm, .select-with-end-icon-sm {
  padding-right: calc(var(--space-5) + var(--space-3) + var(--space-2));
}
.input-with-end-icon-lg, .textarea-with-end-icon-lg, .select-with-end-icon-lg {
  padding-right: calc(var(--space-7) + var(--space-5) + var(--space-4));
}

.input-group-icon ~ .input,
.input-group-icon ~ .textarea {
  padding-left: calc(var(--space-6) + var(--space-4) + var(--space-3));
}

.input-clean-state:hover {
  border-color: var(--color-primary-muted);
}
.input-clean-state:disabled {
  border-color: var(--color-border-light);
}

.input-floating {
  position: relative;
  width: 100%;
}
.input-floating > .input,
.input-floating > .textarea {
  width: 100%;
}
.input-floating > .input::placeholder,
.input-floating > .textarea::placeholder {
  opacity: 0;
  color: transparent;
}
.input-floating > .input:focus ~ .floating-label, .input-floating > .input:not(:placeholder-shown) ~ .floating-label, .input-floating > .input[data-has-value=true] ~ .floating-label,
.input-floating > .textarea:focus ~ .floating-label,
.input-floating > .textarea:not(:placeholder-shown) ~ .floating-label,
.input-floating > .textarea[data-has-value=true] ~ .floating-label {
  top: 0;
  transform: translateY(-50%) scale(0.75);
  color: var(--color-primary);
  font-weight: 500;
  background: var(--color-surface-elevated);
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
}
.input-floating > .input:-webkit-autofill ~ .floating-label,
.input-floating > .textarea:-webkit-autofill ~ .floating-label {
  top: 0;
  transform: translateY(-50%) scale(0.8);
  color: var(--color-primary);
  background: var(--color-surface-elevated);
  padding: 0 var(--space-2);
}
.input-floating .floating-label {
  position: absolute;
  top: 50%;
  left: var(--space-4);
  transform: translateY(-50%);
  color: var(--color-text-subtle);
  font-size: 16px;
  transition: all var(--duration-normal) var(--ease-out);
  pointer-events: none;
  z-index: calc(var(--z-base) + 11);
  white-space: nowrap;
  transform-origin: left center;
}
.input-floating .input-with-start-icon {
  padding-left: calc(var(--space-6) + var(--space-4) + var(--space-3));
}
.input-floating .input-with-start-icon ~ .floating-label {
  left: calc(var(--space-6) + var(--space-4) + var(--space-3));
}
.input-floating .input-with-start-icon-sm {
  padding-left: calc(var(--space-5) + var(--space-3) + var(--space-2));
}
.input-floating .input-with-start-icon-sm ~ .floating-label {
  left: calc(var(--space-5) + var(--space-3) + var(--space-2));
}
.input-floating .input-with-start-icon-lg {
  padding-left: calc(var(--space-7) + var(--space-5) + var(--space-4));
}
.input-floating .input-with-start-icon-lg ~ .floating-label {
  left: calc(var(--space-7) + var(--space-5) + var(--space-4));
}

.checkbox {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  cursor: pointer;
}
.checkbox {
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
}
.checkbox:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: inherit;
}
.checkbox:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px var(--shadow-overlay-medium);
}
.checkbox:active {
  transform: scale(0.98) translateY(0);
  filter: brightness(0.95);
  box-shadow: 0 1px 2px var(--shadow-overlay-dark);
}
.checkbox:disabled, .checkbox[disabled] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.checkbox:disabled:hover, .checkbox:disabled:active, .checkbox:disabled:focus-visible, .checkbox[disabled]:hover, .checkbox[disabled]:active, .checkbox[disabled]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.checkbox[aria-disabled=true] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.checkbox[aria-disabled=true]:hover, .checkbox[aria-disabled=true]:active, .checkbox[aria-disabled=true]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.checkbox-loading {
  pointer-events: none;
  cursor: wait;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}
.checkbox-loading > *:not(.loading-text) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.checkbox-loading::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid color-mix(in srgb, currentColor 20%, transparent);
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, currentColor 20%, transparent);
  border-top-color: currentColor;
  animation: spin var(--duration-normal) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
  order: -1;
  flex-shrink: 0;
}
.checkbox-disabled {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.checkbox-disabled:hover, .checkbox-disabled:active, .checkbox-disabled:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.checkbox input[type=checkbox] {
  position: absolute;
  opacity: 0;
}
.checkbox input[type=checkbox] ~ .checkbox-mark {
  background: var(--color-surface);
}
.checkbox input[type=checkbox]:checked ~ .checkbox-mark {
  background-color: var(--color-primary);
  background-image: var(--gradient-primary);
  color: var(--color-text-inverse);
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all var(--duration-fast) var(--ease-out);
  border-color: var(--color-primary);
  background: var(--color-primary);
}
.checkbox input[type=checkbox]:checked ~ .checkbox-mark:hover {
  filter: brightness(0.9) saturate(1.1);
  transform: translateY(-0.618px);
}
.checkbox input[type=checkbox]:checked ~ .checkbox-mark:active {
  transform: scale(0.938);
}
.checkbox input[type=checkbox]:checked ~ .checkbox-mark:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.checkbox input[type=checkbox]:checked ~ .checkbox-mark .checkbox-icon {
  opacity: 1;
  transform: scale(1);
  color: var(--color-surface);
}
.checkbox input[type=checkbox]:focus ~ .checkbox-mark {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: inherit;
}
.checkbox-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--duration-normal) var(--ease-out);
  width: var(--space-5);
  height: var(--space-5);
  border: 2px solid var(--color-text-muted);
  border-radius: var(--radius-sm);
  pointer-events: none;
}
.checkbox-mark-small {
  width: var(--space-4);
  height: var(--space-4);
}
.checkbox-mark-medium {
  width: var(--space-5);
  height: var(--space-5);
}
.checkbox-mark-large {
  width: var(--space-6);
  height: var(--space-6);
}
.checkbox-icon {
  color: var(--color-surface);
  opacity: 0;
  transform: scale(0.8);
  transition: all var(--duration-fast) var(--ease-out);
  font-size: var(--text-sm);
}
.checkbox-icon-small {
  font-size: var(--text-xs);
}
.checkbox-icon-large {
  font-size: var(--text-base);
}
.checkbox-label {
  color: var(--color-text);
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  cursor: pointer;
  flex: 1;
}
.checkbox-label-disabled {
  color: var(--color-text-subtle);
  cursor: not-allowed;
}
.checkbox-content {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
}
.checkbox-text {
  color: var(--color-text);
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
}
.checkbox-text-icon {
  color: var(--color-text-muted);
  font-size: var(--text-base);
}
.checkbox-description {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  margin-top: var(--space-1);
  line-height: var(--leading-relaxed);
}
.checkbox-icon {
  opacity: 0;
  transform: scale(0.5);
  transition: all var(--duration-fast) var(--ease-out);
  color: var(--color-surface);
}
.checkbox .checkbox-density-compact {
  padding: var(--space-1);
  gap: var(--space-0-5);
  font-size: var(--text-xs);
}
.checkbox .checkbox-density-compact .checkbox-mark {
  width: var(--space-3);
  height: var(--space-3);
}
.checkbox .checkbox-density-compact .checkbox-mark-small {
  width: var(--space-2);
  height: var(--space-2);
}
.checkbox .checkbox-density-compact .checkbox-mark-large {
  width: var(--space-3);
  height: var(--space-3);
}
.checkbox .checkbox-density-compact .checkbox-icon {
  font-size: var(--text-xs);
}
.checkbox .checkbox-density-compact .checkbox-icon-small {
  font-size: var(--text-xs);
}
.checkbox .checkbox-density-compact .checkbox-icon-large {
  font-size: var(--text-xs);
}
.checkbox .checkbox-density-compact .checkbox-text {
  font-size: var(--text-xs);
}
.checkbox .checkbox-density-compact .checkbox-description {
  font-size: var(--text-xs);
  margin-top: var(--space-0-5);
}
.checkbox .checkbox-density-dense {
  padding: var(--space-1-5);
  gap: var(--space-0-5);
  font-size: var(--text-sm);
}
.checkbox .checkbox-density-dense .checkbox-mark {
  width: var(--space-4);
  height: var(--space-4);
}
.checkbox .checkbox-density-dense .checkbox-mark-small {
  width: var(--space-3);
  height: var(--space-3);
}
.checkbox .checkbox-density-dense .checkbox-mark-large {
  width: var(--space-5);
  height: var(--space-5);
}
.checkbox .checkbox-density-dense .checkbox-icon {
  font-size: var(--text-sm);
}
.checkbox .checkbox-density-dense .checkbox-icon-small {
  font-size: var(--text-sm);
}
.checkbox .checkbox-density-dense .checkbox-icon-large {
  font-size: var(--text-sm);
}
.checkbox .checkbox-density-dense .checkbox-text {
  font-size: var(--text-sm);
}
.checkbox .checkbox-density-dense .checkbox-description {
  font-size: var(--text-sm);
  margin-top: var(--space-0-5);
}
.checkbox .checkbox-density-normal {
  padding: var(--space-2);
  gap: var(--space-1);
  font-size: var(--text-sm);
}
.checkbox .checkbox-density-normal .checkbox-mark {
  width: var(--space-5);
  height: var(--space-5);
}
.checkbox .checkbox-density-normal .checkbox-mark-small {
  width: var(--space-4);
  height: var(--space-4);
}
.checkbox .checkbox-density-normal .checkbox-mark-large {
  width: var(--space-6);
  height: var(--space-6);
}
.checkbox .checkbox-density-normal .checkbox-icon {
  font-size: var(--text-sm);
}
.checkbox .checkbox-density-normal .checkbox-icon-small {
  font-size: var(--text-xs);
}
.checkbox .checkbox-density-normal .checkbox-icon-large {
  font-size: var(--text-base);
}
.checkbox .checkbox-density-normal .checkbox-text {
  font-size: var(--text-sm);
}
.checkbox .checkbox-density-normal .checkbox-description {
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}
.checkbox .checkbox-density-spacious {
  padding: var(--space-3);
  gap: var(--space-1-5);
  font-size: var(--text-base);
}
.checkbox .checkbox-density-spacious .checkbox-mark {
  width: var(--space-8);
  height: var(--space-8);
}
.checkbox .checkbox-density-spacious .checkbox-mark-small {
  width: var(--space-6);
  height: var(--space-6);
}
.checkbox .checkbox-density-spacious .checkbox-mark-large {
  width: var(--space-9);
  height: var(--space-9);
}
.checkbox .checkbox-density-spacious .checkbox-icon {
  font-size: var(--text-base);
}
.checkbox .checkbox-density-spacious .checkbox-icon-small {
  font-size: var(--text-xl);
}
.checkbox .checkbox-density-spacious .checkbox-icon-large {
  font-size: var(--text-lg);
}
.checkbox .checkbox-density-spacious .checkbox-text {
  font-size: var(--text-base);
}
.checkbox .checkbox-density-spacious .checkbox-description {
  font-size: var(--text-xl);
  margin-top: var(--space-1-5);
}

.checkbox input[type=checkbox]:checked ~ .checkbox-mark-primary {
  background-color: var(--color-primary);
  background-image: var(--gradient-primary);
  color: var(--color-text-inverse);
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all var(--duration-fast) var(--ease-out);
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}
.checkbox input[type=checkbox]:checked ~ .checkbox-mark-primary:hover {
  filter: brightness(0.9) saturate(1.1);
  transform: translateY(-0.618px);
}
.checkbox input[type=checkbox]:checked ~ .checkbox-mark-primary:active {
  transform: scale(0.938);
}
.checkbox input[type=checkbox]:checked ~ .checkbox-mark-primary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.checkbox input[type=checkbox]:checked ~ .checkbox-mark-primary .checkbox-icon {
  color: var(--color-surface);
}

.checkbox input[type=checkbox]:checked ~ .checkbox-mark-success {
  background-color: var(--color-success);
  background-image: var(--gradient-success);
  color: var(--color-text-inverse);
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all var(--duration-fast) var(--ease-out);
  border-color: var(--color-success);
  background-color: var(--color-success);
}
.checkbox input[type=checkbox]:checked ~ .checkbox-mark-success:hover {
  filter: brightness(0.9) saturate(1.1);
  transform: translateY(-0.618px);
}
.checkbox input[type=checkbox]:checked ~ .checkbox-mark-success:active {
  transform: scale(0.938);
}
.checkbox input[type=checkbox]:checked ~ .checkbox-mark-success:focus-visible {
  outline: 2px solid var(--color-success);
  outline-offset: 2px;
}
.checkbox input[type=checkbox]:checked ~ .checkbox-mark-success .checkbox-icon {
  color: var(--color-surface);
}

.checkbox input[type=checkbox]:checked ~ .checkbox-mark-warning {
  background-color: var(--color-warning);
  background-image: var(--gradient-warning);
  color: var(--color-text-inverse);
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all var(--duration-fast) var(--ease-out);
  border-color: var(--color-warning);
  background-color: var(--color-warning);
}
.checkbox input[type=checkbox]:checked ~ .checkbox-mark-warning:hover {
  filter: brightness(0.9) saturate(1.1);
  transform: translateY(-0.618px);
}
.checkbox input[type=checkbox]:checked ~ .checkbox-mark-warning:active {
  transform: scale(0.938);
}
.checkbox input[type=checkbox]:checked ~ .checkbox-mark-warning:focus-visible {
  outline: 2px solid var(--color-warning);
  outline-offset: 2px;
}
.checkbox input[type=checkbox]:checked ~ .checkbox-mark-warning .checkbox-icon {
  color: var(--color-surface);
}

.checkbox input[type=checkbox]:checked ~ .checkbox-mark-error {
  background-color: var(--color-error);
  background-image: var(--gradient-error);
  color: var(--color-text-inverse);
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all var(--duration-fast) var(--ease-out);
  border-color: var(--color-error);
  background-color: var(--color-error);
}
.checkbox input[type=checkbox]:checked ~ .checkbox-mark-error:hover {
  filter: brightness(0.9) saturate(1.1);
  transform: translateY(-0.618px);
}
.checkbox input[type=checkbox]:checked ~ .checkbox-mark-error:active {
  transform: scale(0.938);
}
.checkbox input[type=checkbox]:checked ~ .checkbox-mark-error:focus-visible {
  outline: 2px solid var(--color-error);
  outline-offset: 2px;
}
.checkbox input[type=checkbox]:checked ~ .checkbox-mark-error .checkbox-icon {
  color: var(--color-surface);
}

.radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  cursor: pointer;
}
.radio-disabled {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.radio-disabled:hover, .radio-disabled:active, .radio-disabled:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.radio-group {
  gap: var(--space-3);
}
.radio input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: var(--z-base);
  margin: 0;
  top: 0;
  left: 0;
}
.radio input[type=radio]:disabled {
  cursor: not-allowed;
}
.radio input[type=radio]:checked ~ .radio-mark {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
}
.radio input[type=radio]:checked ~ .radio-mark .radio-dot {
  opacity: 1;
  transform: scale(1);
  background-color: var(--color-primary);
}
.radio input[type=radio]:checked ~ .radio-mark.radio-mark-primary {
  border-color: var(--color-primary);
}
.radio input[type=radio]:checked ~ .radio-mark.radio-mark-primary .radio-dot {
  background-color: var(--color-primary);
}
.radio input[type=radio]:checked ~ .radio-mark.radio-mark-success {
  border-color: var(--color-success);
}
.radio input[type=radio]:checked ~ .radio-mark.radio-mark-success .radio-dot {
  background-color: var(--color-success);
}
.radio input[type=radio]:checked ~ .radio-mark.radio-mark-warning {
  border-color: var(--color-warning);
}
.radio input[type=radio]:checked ~ .radio-mark.radio-mark-warning .radio-dot {
  background-color: var(--color-warning);
}
.radio input[type=radio]:checked ~ .radio-mark.radio-mark-error {
  border-color: var(--color-error);
}
.radio input[type=radio]:checked ~ .radio-mark.radio-mark-error .radio-dot {
  background-color: var(--color-error);
}
.radio input[type=radio]:checked ~ .radio-mark.radio-mark-info {
  border-color: var(--color-info);
}
.radio input[type=radio]:checked ~ .radio-mark.radio-mark-info .radio-dot {
  background-color: var(--color-info);
}
.radio input[type=radio]:focus-visible ~ .radio-mark {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: inherit;
}
.radio-mark {
  width: var(--space-5);
  height: var(--space-5);
  border: 2px solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--color-surface);
  flex-shrink: 0;
  transition: all var(--duration-normal) var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.radio-mark-small {
  width: var(--space-4);
  height: var(--space-4);
}
.radio-mark-medium {
  width: var(--space-5);
  height: var(--space-5);
}
.radio-mark-large {
  width: var(--space-6);
  height: var(--space-6);
}
.radio-mark-primary {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
}
.radio-mark-primary .radio-dot {
  background-color: var(--color-primary);
}
.radio-mark-success {
  border-color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 5%, var(--color-surface));
}
.radio-mark-success .radio-dot {
  background-color: var(--color-success);
}
.radio-mark-warning {
  border-color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 5%, var(--color-surface));
}
.radio-mark-warning .radio-dot {
  background-color: var(--color-warning);
}
.radio-mark-error {
  border-color: var(--color-error);
  background: color-mix(in srgb, var(--color-error) 5%, var(--color-surface));
}
.radio-mark-error .radio-dot {
  background-color: var(--color-error);
}
.radio-mark-info {
  border-color: var(--color-info);
  background: color-mix(in srgb, var(--color-info) 5%, var(--color-surface));
}
.radio-mark-info .radio-dot {
  background-color: var(--color-info);
}
.radio-dot {
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background-color: transparent;
  opacity: 0;
  transform: scale(0.5);
  transition: all var(--duration-fast) var(--ease-out);
}
.radio-dot-small {
  width: 40%;
  height: 40%;
}
.radio-dot-large {
  width: 60%;
  height: 60%;
}
.radio-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  cursor: pointer;
  border-radius: var(--radius-lg);
  transition: all var(--duration-normal) var(--ease-out);
}
.radio-option {
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
}
.radio-option:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: inherit;
  outline-width: 2px;
  outline-offset: 3px;
}
.radio-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px var(--shadow-overlay-medium);
  filter: brightness(1.01);
}
.radio-option:active {
  transform: scale(0.99) translateY(0);
  box-shadow: 0 2px 4px var(--shadow-overlay-subtle);
}
.radio-option:disabled, .radio-option[disabled] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.radio-option:disabled:hover, .radio-option:disabled:active, .radio-option:disabled:focus-visible, .radio-option[disabled]:hover, .radio-option[disabled]:active, .radio-option[disabled]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.radio-option[aria-disabled=true] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.radio-option[aria-disabled=true]:hover, .radio-option[aria-disabled=true]:active, .radio-option[aria-disabled=true]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.radio-option-loading {
  position: relative;
  min-height: 8rem;
  contain: layout style;
  isolation: isolate;
  will-change: contents;
  z-index: var(--z-base);
  transition: opacity var(--duration-normal) var(--ease-out);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.radio-option-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-loading);
  border-radius: inherit;
  animation: fadeIn var(--duration-fast) var(--ease-out);
}
.radio-option-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1em;
  height: 1em;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-normal) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
  z-index: var(--z-loading-spinner);
}
.radio-option:hover {
  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.15);
}
.radio-option:hover {
  background: var(--color-surface-elevated);
  border-color: var(--color-primary-light);
}
.radio-option-selected {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary-light);
}
.radio-option-disabled {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.radio-option-disabled:hover, .radio-option-disabled:active, .radio-option-disabled:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.radio-label {
  color: var(--color-text);
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  cursor: pointer;
  flex: 1;
}
.radio-label-disabled {
  color: var(--color-text-subtle);
  cursor: not-allowed;
}
.radio-content {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
}
.radio-text {
  color: var(--color-text);
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
}
.radio-text-icon {
  color: var(--color-text-muted);
  font-size: var(--text-base);
}
.radio-description {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  margin-top: var(--space-1);
  line-height: var(--leading-relaxed);
}
.radio .radio-density-compact {
  padding: var(--space-1);
  gap: var(--space-0-5);
  font-size: var(--text-xs);
}
.radio .radio-density-compact .radio-mark {
  width: var(--space-3);
  height: var(--space-3);
}
.radio .radio-density-compact .radio-mark-small {
  width: var(--space-2);
  height: var(--space-2);
}
.radio .radio-density-compact .radio-mark-large {
  width: var(--space-3);
  height: var(--space-3);
}
.radio .radio-density-compact .radio-dot {
  width: var(--space-1-5);
  height: var(--space-1-5);
}
.radio .radio-density-compact .radio-dot-small {
  width: var(--space-0-5);
  height: var(--space-0-5);
}
.radio .radio-density-compact .radio-dot-large {
  width: var(--space-1-5);
  height: var(--space-1-5);
}
.radio .radio-density-compact .radio-text {
  font-size: var(--text-xs);
}
.radio .radio-density-compact .radio-description {
  font-size: var(--text-xs);
  margin-top: var(--space-0-5);
}
.radio .radio-density-dense {
  padding: var(--space-1-5);
  gap: var(--space-0-5);
  font-size: var(--text-sm);
}
.radio .radio-density-dense .radio-mark {
  width: var(--space-4);
  height: var(--space-4);
}
.radio .radio-density-dense .radio-mark-small {
  width: var(--space-3);
  height: var(--space-3);
}
.radio .radio-density-dense .radio-mark-large {
  width: var(--space-5);
  height: var(--space-5);
}
.radio .radio-density-dense .radio-dot {
  width: var(--space-2);
  height: var(--space-2);
}
.radio .radio-density-dense .radio-dot-small {
  width: var(--space-1);
  height: var(--space-1);
}
.radio .radio-density-dense .radio-dot-large {
  width: var(--space-2);
  height: var(--space-2);
}
.radio .radio-density-dense .radio-text {
  font-size: var(--text-sm);
}
.radio .radio-density-dense .radio-description {
  font-size: var(--text-sm);
  margin-top: var(--space-0-5);
}
.radio .radio-density-normal {
  padding: var(--space-2);
  gap: var(--space-1);
  font-size: var(--text-sm);
}
.radio .radio-density-normal .radio-mark {
  width: var(--space-5);
  height: var(--space-5);
}
.radio .radio-density-normal .radio-mark-small {
  width: var(--space-4);
  height: var(--space-4);
}
.radio .radio-density-normal .radio-mark-large {
  width: var(--space-6);
  height: var(--space-6);
}
.radio .radio-density-normal .radio-dot {
  width: var(--space-3);
  height: var(--space-3);
}
.radio .radio-density-normal .radio-dot-small {
  width: var(--space-1-5);
  height: var(--space-1-5);
}
.radio .radio-density-normal .radio-dot-large {
  width: var(--space-3);
  height: var(--space-3);
}
.radio .radio-density-normal .radio-text {
  font-size: var(--text-sm);
}
.radio .radio-density-normal .radio-description {
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}
.radio .radio-density-spacious {
  padding: var(--space-3);
  gap: var(--space-1-5);
  font-size: var(--text-base);
}
.radio .radio-density-spacious .radio-mark {
  width: var(--space-8);
  height: var(--space-8);
}
.radio .radio-density-spacious .radio-mark-small {
  width: var(--space-6);
  height: var(--space-6);
}
.radio .radio-density-spacious .radio-mark-large {
  width: var(--space-9);
  height: var(--space-9);
}
.radio .radio-density-spacious .radio-dot {
  width: var(--space-4);
  height: var(--space-4);
}
.radio .radio-density-spacious .radio-dot-small {
  width: var(--space-2);
  height: var(--space-2);
}
.radio .radio-density-spacious .radio-dot-large {
  width: var(--space-5);
  height: var(--space-5);
}
.radio .radio-density-spacious .radio-text {
  font-size: var(--text-base);
}
.radio .radio-density-spacious .radio-description {
  font-size: var(--text-xl);
  margin-top: var(--space-1-5);
}

.autosuggest {
  position: relative;
  width: 100%;
}
.autosuggest-input {
  width: 100%;
  flex: 1 1 100%;
  flex-basis: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  align-self: stretch;
  gap: 0;
}
.autosuggest-input > .relative {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.autosuggest-input .autosuggest-trigger {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: var(--autosuggest-trigger-height, 100%);
  min-height: var(--autosuggest-trigger-min-height, inherit);
}
.autosuggest-viewport {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 0;
  height: 0;
  z-index: 1;
}
.autosuggest-viewport-closed {
  visibility: hidden;
  pointer-events: none;
}
.autosuggest-viewport-open {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0) scale(1);
  width: auto;
  height: auto;
}
.portal .autosuggest-viewport-open {
  display: block;
}
.autosuggest-viewport-animating-open {
  opacity: 0;
  transform: translateY(-10px) scale(0.95);
  pointer-events: auto;
  transition: all var(--duration-normal) var(--ease-out);
  width: auto;
  height: auto;
}
.portal .autosuggest-viewport-animating-open {
  display: block;
}
.autosuggest-viewport-animating-close {
  opacity: 0;
  transform: translateY(-10px) scale(0.95);
  pointer-events: none;
  transition: all var(--duration-normal) var(--ease-out);
  width: auto;
  height: auto;
}
.portal .autosuggest-viewport-animating-close {
  display: block;
}
.autosuggest-dropdown {
  background: var(--color-surface-elevated);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 20rem;
  overflow-y: auto;
}
.autosuggest-dropdown::-webkit-scrollbar {
  width: 4px;
}
.autosuggest-dropdown::-webkit-scrollbar-track {
  background: var(--color-surface);
}
.autosuggest-dropdown::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
}
.autosuggest-dropdown.size-small .autosuggest-item {
  padding: var(--space-1-5) var(--space-2);
  font-size: var(--text-xs);
}
.autosuggest-dropdown.size-medium .autosuggest-item {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}
.autosuggest-dropdown.size-large .autosuggest-item {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
}
.autosuggest-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}
.autosuggest-item:hover, .autosuggest-item.selected {
  background: var(--color-surface);
}
.autosuggest-item:active {
  background: var(--color-surface-elevated);
}
.autosuggest-item-content {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
}
.autosuggest-item-content-icon {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  flex-shrink: 0;
}
.autosuggest-item-content span {
  color: var(--color-text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.autosuggest-loading {
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.autosuggest-loading .loading-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.autosuggest-loading .loading-indicator-icon {
  color: var(--color-primary);
  font-size: var(--text-base);
}
.autosuggest-empty {
  padding: var(--space-4) var(--space-3);
  text-align: center;
}
.autosuggest-empty .empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
}
.autosuggest-empty .empty-content-icon {
  font-size: var(--text-2xl);
  opacity: 0.5;
}
.autosuggest-empty .empty-content span {
  font-size: var(--text-sm);
}
.autosuggest-loading .autosuggest-input .input-group .input-group-icon-end .icon {
  animation: spin 1s linear infinite;
  color: var(--color-primary);
}
.autosuggest-disabled {
  opacity: var(--opacity-disabled);
  pointer-events: none;
}

@media (max-width: 639px) {
  .autosuggest-dropdown {
    max-height: 15rem;
  }
  .autosuggest-item {
    min-height: var(--touch-target-min);
  }
}
@media (prefers-contrast: high) {
  .autosuggest-item:hover, .autosuggest-item.selected {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .autosuggest-item {
    transition: none;
  }
  .autosuggest-loading .icon {
    animation: none;
  }
}
.toggle-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}
.toggle-container-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.toggle-container-error .toggle-track {
  background: var(--color-error);
  color: var(--color-text-inverse);
}
.toggle-track {
  position: relative;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-text-muted);
  background: var(--color-surface-elevated);
  transition: var(--transition-normal);
  cursor: pointer;
}
.toggle-track:hover:not(.toggle-track-disabled) {
  border-color: var(--color-focus);
}
.toggle-track:focus-within {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.toggle-track-small {
  width: 2.5rem;
  height: 1.25rem;
}
.toggle-track-medium {
  width: 3rem;
  height: 1.5rem;
}
.toggle-track-large {
  width: 3.5rem;
  height: 1.75rem;
}
.toggle-track-checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.toggle-track-checked:hover:not(.toggle-track-disabled) {
  background: var(--color-primary-hover);
}
.toggle-track-primary.toggle-track-checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.toggle-track-primary.toggle-track-checked:hover:not(.toggle-track-disabled) {
  background: var(--color-primary-hover);
}
.toggle-track-success.toggle-track-checked {
  background: var(--color-success);
  border-color: var(--color-success);
}
.toggle-track-success.toggle-track-checked:hover:not(.toggle-track-disabled) {
  background: var(--color-success-dark);
}
.toggle-track-warning.toggle-track-checked {
  background: var(--color-warning);
  border-color: var(--color-warning);
}
.toggle-track-warning.toggle-track-checked:hover:not(.toggle-track-disabled) {
  background: var(--color-warning-dark);
}
.toggle-track-error.toggle-track-checked, .toggle-track-danger.toggle-track-checked {
  background: var(--color-error);
  border-color: var(--color-error);
}
.toggle-track-error.toggle-track-checked:hover:not(.toggle-track-disabled), .toggle-track-danger.toggle-track-checked:hover:not(.toggle-track-disabled) {
  background: var(--color-error-dark);
}
.toggle-track-info.toggle-track-checked {
  background: var(--color-info);
  border-color: var(--color-info);
}
.toggle-track-info.toggle-track-checked:hover:not(.toggle-track-disabled) {
  background: var(--color-info-dark);
}
.toggle-track-ghost {
  background: transparent;
  border-color: var(--color-border);
}
.toggle-track-ghost-checked {
  background: var(--color-surface-elevated);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-light);
}
.toggle-track-ghost:hover {
  background: var(--color-surface-elevated);
  border-color: var(--color-primary);
}
.toggle-track-ghost.toggle-track-ghost-checked:hover {
  background: var(--color-primary-light);
}
.toggle-track-ghost.toggle-track-disabled:hover {
  background: inherit;
  border-color: inherit;
}
.toggle-track-neutral-checked {
  background: var(--color-text-muted);
  border-color: var(--color-text-muted);
}
.toggle-track-neutral-checked:hover {
  background: var(--color-text);
}
.toggle-track-neutral-checked.toggle-track-disabled:hover {
  background: var(--color-text-muted);
}
.toggle-track-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.toggle-track-disabled:hover {
  background: inherit;
  border-color: inherit;
}
.toggle-thumb {
  position: absolute;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-normal);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.toggle-thumb-small {
  width: 0.875rem;
  height: 0.875rem;
  top: 1px;
  left: 1px;
}
.toggle-thumb-medium {
  width: 1rem;
  height: 1rem;
  top: 2px;
  left: 2px;
}
.toggle-thumb-large {
  width: 1.125rem;
  height: 1.125rem;
  top: 3px;
  left: 2px;
}
.toggle-track-checked .toggle-thumb-small {
  transform: translateX(1.25rem);
}
.toggle-track-checked .toggle-thumb-medium {
  transform: translateX(1.5rem);
}
.toggle-track-checked .toggle-thumb-large {
  transform: translateX(1.75rem);
}
.toggle-thumb-with-icon {
  color: var(--color-text-muted);
}
.toggle-track-checked .toggle-thumb-with-icon {
  color: var(--color-text-inverse);
}
.toggle .toggle-density-compact {
  padding: var(--space-1);
  gap: var(--space-0-5);
  font-size: var(--text-xs);
}
.toggle .toggle-density-compact .toggle-track-small {
  width: var(--space-5);
  height: var(--space-3);
}
.toggle .toggle-density-compact .toggle-track-medium {
  width: var(--space-6);
  height: var(--space-3);
}
.toggle .toggle-density-compact .toggle-track-large {
  width: var(--space-7);
  height: var(--space-4);
}
.toggle .toggle-density-compact .toggle-thumb-small {
  width: var(--space-2);
  height: var(--space-2);
}
.toggle .toggle-density-compact .toggle-thumb-medium {
  width: var(--space-2);
  height: var(--space-2);
}
.toggle .toggle-density-compact .toggle-thumb-large {
  width: var(--space-2);
  height: var(--space-2);
}
.toggle .toggle-density-dense {
  padding: var(--space-1-5);
  gap: var(--space-0-5);
  font-size: var(--text-sm);
}
.toggle .toggle-density-dense .toggle-track-small {
  width: var(--space-8);
  height: var(--space-4);
}
.toggle .toggle-density-dense .toggle-track-medium {
  width: var(--space-9);
  height: var(--space-5);
}
.toggle .toggle-density-dense .toggle-track-large {
  width: var(--space-11);
  height: var(--space-5);
}
.toggle .toggle-density-dense .toggle-thumb-small {
  width: var(--space-3);
  height: var(--space-3);
}
.toggle .toggle-density-dense .toggle-thumb-medium {
  width: var(--space-3);
  height: var(--space-3);
}
.toggle .toggle-density-dense .toggle-thumb-large {
  width: var(--space-3);
  height: var(--space-3);
}
.toggle .toggle-density-normal {
  padding: var(--space-2);
  gap: var(--space-1);
  font-size: var(--text-sm);
}
.toggle .toggle-density-normal .toggle-track-small {
  width: var(--space-10);
  height: var(--space-5);
}
.toggle .toggle-density-normal .toggle-track-medium {
  width: var(--space-12);
  height: var(--space-6);
}
.toggle .toggle-density-normal .toggle-track-large {
  width: var(--space-14);
  height: var(--space-7);
}
.toggle .toggle-density-normal .toggle-thumb-small {
  width: var(--space-4);
  height: var(--space-4);
}
.toggle .toggle-density-normal .toggle-thumb-medium {
  width: var(--space-4);
  height: var(--space-4);
}
.toggle .toggle-density-normal .toggle-thumb-large {
  width: var(--space-5);
  height: var(--space-5);
}
.toggle .toggle-density-spacious {
  padding: var(--space-3);
  gap: var(--space-1-5);
  font-size: var(--text-base);
}
.toggle .toggle-density-spacious .toggle-track-small {
  width: var(--space-15);
  height: var(--space-8);
}
.toggle .toggle-density-spacious .toggle-track-medium {
  width: var(--space-18);
  height: var(--space-9);
}
.toggle .toggle-density-spacious .toggle-track-large {
  width: var(--space-21);
  height: var(--space-11);
}
.toggle .toggle-density-spacious .toggle-thumb-small {
  width: var(--space-5);
  height: var(--space-5);
}
.toggle .toggle-density-spacious .toggle-thumb-medium {
  width: var(--space-6);
  height: var(--space-6);
}
.toggle .toggle-density-spacious .toggle-thumb-large {
  width: var(--space-7);
  height: var(--space-7);
}

@media (prefers-reduced-motion: reduce) {
  .toggle-track,
  .toggle-thumb {
    transition: none;
  }
}
@media (prefers-contrast: high) {
  .toggle-track {
    border-width: 3px;
  }
  .toggle-track-checked {
    background: var(--color-text-inverse);
    border-color: var(--color-text);
  }
  .toggle-thumb {
    border: 2px solid var(--color-text);
  }
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-feature-settings: "tnum";
  background: transparent;
  position: relative;
  table-layout: auto;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout style paint;
}
.table-has-hover tbody tr:hover {
  background: var(--state-hover-bg);
  cursor: pointer;
}
.table-striped tbody tr:nth-child(odd) {
  background: var(--color-surface-elevated);
}
.table-bordered {
  border: var(--border-1) solid var(--color-border);
}
.table-bordered th, .table-bordered td {
  border: var(--border-1) solid var(--color-border-light);
}

.table-header-cell {
  text-align: left;
  font-weight: var(--font-semibold);
  color: var(--color-text);
  border-bottom: var(--border-1) solid var(--color-border);
  background: var(--color-surface-elevated);
  position: relative;
}
.table-header-cell-sortable {
  cursor: pointer;
  user-select: none;
  transition: var(--transition-colors);
}
.table-header-cell-sortable:hover {
  background: var(--state-hover-bg);
  color: var(--color-primary);
}
.table-cell {
  padding: var(--space-3) var(--space-4);
  vertical-align: middle;
  transition: var(--transition-colors);
  border-bottom: var(--border-1) solid var(--color-border-light);
  position: relative;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  contain: layout style paint;
}
.table-row {
  transition: var(--transition-colors);
  will-change: transform, box-shadow;
  contain: layout style paint;
  transform: translateZ(0);
}
.table-row:hover {
  background: var(--state-hover-bg);
}
.table-row-selected {
  background: var(--color-primary-light);
}

.table-container {
  position: relative;
  display: block;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: var(--border-1) solid var(--color-border-light);
  transition: var(--transition-colors);
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
}
.table-container .table th, .table-container .table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.table-container .table th[style*=width], .table-container .table td[style*=width] {
  width: var(--column-width);
  min-width: var(--column-min-width, auto);
  max-width: var(--column-max-width, none);
}
.table-container.overflow-x-auto .table {
  width: max-content;
  min-width: 100%;
}
.table-container.overflow-x-auto .table th[width], .table-container.overflow-x-auto .table td[width] {
  min-width: attr(width);
}

.overflow-x-auto[style*="--table-height"] {
  height: var(--table-height);
}

th[style*="--column-width"], td[style*="--column-width"] {
  width: var(--column-width);
}

th[style*="--column-min-width"], td[style*="--column-min-width"] {
  min-width: var(--column-min-width);
}

th[style*="--column-max-width"], td[style*="--column-max-width"] {
  max-width: var(--column-max-width);
}

th[style*="--sticky-left"], td[style*="--sticky-left"] {
  left: var(--sticky-left);
  z-index: var(--z-sticky);
}

.table-container.variant-standard {
  background: var(--color-surface);
  border: var(--border-1) solid var(--color-border);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-lg);
}
.table-container.variant-standard .table-header-cell {
  background: var(--color-surface-elevated);
  border-bottom: var(--border-1) solid var(--color-border);
}
.table-container.variant-standard tbody tr:hover {
  background: var(--color-surface-elevated);
}
.table-container.variant-standard tbody tr-table-row-selected-enhanced {
  background: var(--color-primary-light);
  border-left: var(--border-3) solid var(--color-primary);
}

.table-container.variant-elevated {
  background: var(--color-surface);
  border: none;
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-lg);
}
.table-container.variant-elevated .table-header-cell {
  background: var(--color-surface-elevated);
  border-bottom: none;
}
.table-container.variant-elevated tbody tr:hover {
  background: var(--color-surface-elevated);
  transform: translateY(calc(var(--space-1) * -0.25));
  box-shadow: var(--shadow-md);
}
.table-container.variant-elevated tbody tr-table-row-selected-enhanced {
  background: var(--color-primary-light);
  border-left: var(--border-3) solid var(--color-primary);
}

.table-container.variant-glass {
  background: var(--glass-bg-light);
  border: var(--border-1) solid var(--glass-border-light);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-lg);
  backdrop-filter: var(--glass-blur-md) var(--glass-saturate) var(--glass-brightness);
}
.table-container.variant-glass .table-header-cell {
  background: var(--glass-bg-medium);
  border-bottom: var(--border-1) solid var(--color-border);
}
.table-container.variant-glass tbody tr:hover {
  background: var(--glass-hover-bg);
  transform: translateY(calc(var(--space-1) * -0.25));
  box-shadow: var(--shadow-md);
}
.table-container.variant-glass tbody tr-table-row-selected-enhanced {
  background: var(--color-primary-light);
  border-left: var(--border-3) solid var(--color-primary);
}

.table-container.variant-minimal {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: var(--radius-md);
}
.table-container.variant-minimal .table-header-cell {
  background: color-mix(in srgb, var(--color-surface-elevated) 20%, transparent);
  border-bottom: var(--border-1) solid var(--color-border);
}
.table-container.variant-minimal tbody tr:hover {
  background: color-mix(in srgb, var(--color-surface-elevated) 30%, transparent);
}
.table-container.variant-minimal tbody tr-table-row-selected-enhanced {
  background: var(--color-primary-light);
  border-left: var(--border-3) solid var(--color-primary);
}

.table-container.variant-outlined {
  background: var(--color-surface);
  border: var(--border-2) solid var(--color-border);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
}
.table-container.variant-outlined .table-header-cell {
  background: var(--color-surface-elevated);
  border-bottom: var(--border-2) solid var(--color-border);
}
.table-container.variant-outlined tbody tr:hover {
  background: var(--color-surface-elevated);
}
.table-container.variant-outlined tbody tr-table-row-selected-enhanced {
  background: var(--color-primary-light);
  border-left: var(--border-3) solid var(--color-primary);
}

.table-container.variant-striped {
  background: var(--color-surface);
  border: var(--border-1) solid var(--color-border);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
}
.table-container.variant-striped .table-header-cell {
  background: var(--color-surface-elevated);
  border-bottom: var(--border-1) solid var(--color-border);
}
.table-container.variant-striped tbody tr:hover {
  background: var(--color-surface-elevated);
}
.table-container.variant-striped tbody tr-table-row-selected-enhanced {
  background: var(--color-primary-light);
  border-left: var(--border-3) solid var(--color-primary);
}
.table-container.variant-striped tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--color-surface-elevated) 30%, transparent);
}

.table-container.variant-bordered {
  background: var(--color-surface);
  border: var(--border-1) solid var(--color-border);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-lg);
}
.table-container.variant-bordered .table-header-cell {
  background: var(--color-surface-elevated);
  border-bottom: var(--border-1) solid var(--color-border);
}
.table-container.variant-bordered tbody tr:hover {
  background: var(--color-surface-elevated);
}
.table-container.variant-bordered tbody tr-table-row-selected-enhanced {
  background: var(--color-primary-light);
  border-left: var(--border-3) solid var(--color-primary);
}
.table-container.variant-bordered .table-cell {
  border-right: var(--border-1) solid color-mix(in srgb, var(--color-border) 50%, transparent);
}
.table-container.variant-bordered .table-cell:last-child {
  border-right: none;
}

.table-container.variant-professional {
  background: var(--color-surface);
  border: var(--border-1) solid color-mix(in srgb, var(--color-primary) 10%, transparent);
  box-shadow: var(--shadow-xl);
  border-radius: var(--radius-xl);
}
.table-container.variant-professional .table-header-cell {
  background: linear-gradient(135deg, var(--color-surface-elevated), color-mix(in srgb, var(--color-primary) 5%, transparent));
  border-bottom: var(--border-1) solid color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.table-container.variant-professional tbody tr:hover {
  background: var(--color-surface-elevated);
  transform: translateY(calc(var(--space-1) * -0.25));
  box-shadow: var(--shadow-md);
}
.table-container.variant-professional tbody tr-table-row-selected-enhanced {
  background: var(--color-primary-light);
  border-left: var(--border-3) solid var(--color-primary);
}

.table-ultra-compact {
  font-size: var(--text-xs);
}
.table-ultra-compact .table-header-cell {
  padding: var(--space-1) var(--space-2);
  line-height: 1.2;
  height: 32px;
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  letter-spacing: 0.025em;
  color: var(--color-text);
}
.table-ultra-compact tr {
  height: 32px;
  transition: var(--transition-colors);
}
.table-ultra-compact .table-cell {
  padding: var(--space-1) var(--space-2);
  line-height: 1.2;
  vertical-align: middle;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 5%, transparent);
  transition: var(--transition-colors);
}
.table-ultra-compact .table-cell .icon,
.table-ultra-compact .table-cell i {
  color: currentColor;
  flex-shrink: 0;
  font-size: var(--icon-sm);
  opacity: 0.8;
  transition: var(--transition-colors);
}
.table-ultra-compact .table-cell .icon,
.table-ultra-compact .table-cell i {
  font-size: 14px;
  width: 14px;
  height: 14px;
  transition: var(--transition-transform);
}
.table-ultra-compact .table-cell .avatar {
  width: 20px;
  height: 20px;
  font-size: calc(20px * 0.4);
  transition: var(--transition-transform);
}
.table-ultra-compact .table-cell .badge {
  transform: scale(0.8);
  transform-origin: center left;
  transition: var(--transition-transform);
}
.table-ultra-compact .table-column-actions,
.table-ultra-compact .table-actions-container {
  gap: var(--space-1);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.table-ultra-compact .table-column-actions .button,
.table-ultra-compact .table-column-actions .btn,
.table-ultra-compact .table-actions-container .button,
.table-ultra-compact .table-actions-container .btn {
  height: 24px;
  min-width: 24px;
  padding: 0 var(--space-2);
  transition: var(--transition-transform);
}
.table-ultra-compact .table-column-actions .button:hover:not(:disabled),
.table-ultra-compact .table-column-actions .btn:hover:not(:disabled),
.table-ultra-compact .table-actions-container .button:hover:not(:disabled),
.table-ultra-compact .table-actions-container .btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.table-compact {
  font-size: var(--text-xs);
}
.table-compact .table-header-cell {
  padding: var(--space-2) var(--space-3);
  line-height: 1.2;
  height: 36px;
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  letter-spacing: 0.025em;
  color: var(--color-text);
}
.table-compact tr {
  height: 36px;
  transition: var(--transition-colors);
}
.table-compact .table-cell {
  padding: var(--space-1-5) var(--space-2-5);
  line-height: 1.2;
  vertical-align: middle;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 5%, transparent);
  transition: var(--transition-colors);
}
.table-compact .table-cell .icon,
.table-compact .table-cell i {
  color: currentColor;
  flex-shrink: 0;
  font-size: var(--icon-sm);
  opacity: 0.8;
  transition: var(--transition-colors);
}
.table-compact .table-cell .icon,
.table-compact .table-cell i {
  font-size: 16px;
  width: 16px;
  height: 16px;
  transition: var(--transition-transform);
}
.table-compact .table-cell .avatar {
  width: 24px;
  height: 24px;
  font-size: calc(24px * 0.4);
  transition: var(--transition-transform);
}
.table-compact .table-cell .badge {
  transform: scale(0.85);
  transform-origin: center left;
  transition: var(--transition-transform);
}
.table-compact .table-column-actions,
.table-compact .table-actions-container {
  gap: var(--space-1);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.table-compact .table-column-actions .button,
.table-compact .table-column-actions .btn,
.table-compact .table-actions-container .button,
.table-compact .table-actions-container .btn {
  height: 28px;
  min-width: 28px;
  padding: 0 var(--space-2);
  transition: var(--transition-transform);
}
.table-compact .table-column-actions .button:hover:not(:disabled),
.table-compact .table-column-actions .btn:hover:not(:disabled),
.table-compact .table-actions-container .button:hover:not(:disabled),
.table-compact .table-actions-container .btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.table-dense {
  font-size: calc(var(--text-sm) * 0.9);
}
.table-dense .table-header-cell {
  padding: var(--space-2) var(--space-3);
  line-height: 1.25;
  height: calc(var(--space-9));
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  letter-spacing: 0.025em;
  color: var(--color-text);
}
.table-dense tr {
  height: calc(var(--space-9));
  transition: var(--transition-colors);
}
.table-dense .table-cell {
  padding: var(--space-1-5) var(--space-2-5);
  line-height: 1.25;
  vertical-align: middle;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 5%, transparent);
  transition: var(--transition-colors);
}
.table-dense .table-cell .icon,
.table-dense .table-cell i {
  color: currentColor;
  flex-shrink: 0;
  font-size: var(--icon-sm);
  opacity: 0.8;
  transition: var(--transition-colors);
}
.table-dense .table-cell .icon,
.table-dense .table-cell i {
  font-size: var(--space-4);
  width: var(--space-4);
  height: var(--space-4);
  transition: var(--transition-transform);
}
.table-dense .table-cell .avatar {
  width: calc(var(--space-7));
  height: calc(var(--space-7));
  font-size: calc(calc(var(--space-7)) * 0.4);
  transition: var(--transition-transform);
}
.table-dense .table-cell .badge {
  transform: scale(0.85);
  transform-origin: center left;
  transition: var(--transition-transform);
}
.table-dense .table-cell .flex {
  gap: var(--space-1) !important;
}
.table-dense .table-cell .text-sm {
  font-size: var(--text-xs);
}
.table-dense .table-cell .text-xs {
  font-size: calc(var(--text-xs) * 0.9);
}
.table-dense .table-cell .py-2 {
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
}
.table-dense .table-cell .chip, .table-dense .table-cell .badge {
  padding: 0 var(--space-1-5);
  height: calc(var(--space-5) - var(--space-1));
  line-height: calc(var(--space-5) - var(--space-1));
  font-size: calc(var(--text-xs) * 0.9);
}
.table-dense .table-column-actions,
.table-dense .table-actions-container {
  gap: var(--space-1);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.table-dense .table-column-actions .button,
.table-dense .table-column-actions .btn,
.table-dense .table-actions-container .button,
.table-dense .table-actions-container .btn {
  height: calc(var(--space-7));
  min-width: calc(var(--space-7));
  padding: 0 var(--space-2);
  transition: var(--transition-transform);
}
.table-dense .table-column-actions .button:hover:not(:disabled),
.table-dense .table-column-actions .btn:hover:not(:disabled),
.table-dense .table-actions-container .button:hover:not(:disabled),
.table-dense .table-actions-container .btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.table-normal {
  font-size: var(--text-sm);
}
.table-normal .table-header-cell {
  padding: var(--space-4) var(--space-4);
  line-height: 1.5;
  height: 48px;
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  letter-spacing: 0.025em;
  color: var(--color-text);
}
.table-normal tr {
  height: 48px;
  transition: var(--transition-colors);
}
.table-normal .table-cell {
  padding: var(--space-3) var(--space-4);
  line-height: 1.5;
  vertical-align: middle;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 5%, transparent);
  transition: var(--transition-colors);
}
.table-normal .table-cell .icon,
.table-normal .table-cell i {
  color: currentColor;
  flex-shrink: 0;
  font-size: var(--icon-sm);
  opacity: 0.8;
  transition: var(--transition-colors);
}
.table-normal .table-cell .icon,
.table-normal .table-cell i {
  font-size: 20px;
  width: 20px;
  height: 20px;
  transition: var(--transition-transform);
}
.table-normal .table-cell .avatar {
  width: 40px;
  height: 40px;
  font-size: calc(40px * 0.4);
  transition: var(--transition-transform);
}
.table-normal .table-cell .badge {
  transform: scale(1);
  transform-origin: center left;
  transition: var(--transition-transform);
}
.table-normal .table-column-actions,
.table-normal .table-actions-container {
  gap: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.table-normal .table-column-actions .button,
.table-normal .table-column-actions .btn,
.table-normal .table-actions-container .button,
.table-normal .table-actions-container .btn {
  height: 36px;
  min-width: 36px;
  padding: 0 var(--space-2);
  transition: var(--transition-transform);
}
.table-normal .table-column-actions .button:hover:not(:disabled),
.table-normal .table-column-actions .btn:hover:not(:disabled),
.table-normal .table-actions-container .button:hover:not(:disabled),
.table-normal .table-actions-container .btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.table-comfortable {
  font-size: var(--text-sm);
}
.table-comfortable .table-header-cell {
  padding: var(--space-4) var(--space-5);
  line-height: 1.5;
  height: 52px;
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  letter-spacing: 0.025em;
  color: var(--color-text);
}
.table-comfortable tr {
  height: 52px;
  transition: var(--transition-colors);
}
.table-comfortable .table-cell {
  padding: calc(var(--space-3) + var(--space-1)) var(--space-4);
  line-height: 1.5;
  vertical-align: middle;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 5%, transparent);
  transition: var(--transition-colors);
}
.table-comfortable .table-cell .icon,
.table-comfortable .table-cell i {
  color: currentColor;
  flex-shrink: 0;
  font-size: var(--icon-sm);
  opacity: 0.8;
  transition: var(--transition-colors);
}
.table-comfortable .table-cell .icon,
.table-comfortable .table-cell i {
  font-size: 20px;
  width: 20px;
  height: 20px;
  transition: var(--transition-transform);
}
.table-comfortable .table-cell .avatar {
  width: 44px;
  height: 44px;
  font-size: calc(44px * 0.4);
  transition: var(--transition-transform);
}
.table-comfortable .table-cell .badge {
  transform: scale(1);
  transform-origin: center left;
  transition: var(--transition-transform);
}
.table-comfortable .table-column-actions,
.table-comfortable .table-actions-container {
  gap: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.table-comfortable .table-column-actions .button,
.table-comfortable .table-column-actions .btn,
.table-comfortable .table-actions-container .button,
.table-comfortable .table-actions-container .btn {
  height: 38px;
  min-width: 38px;
  padding: 0 var(--space-2);
  transition: var(--transition-transform);
}
.table-comfortable .table-column-actions .button:hover:not(:disabled),
.table-comfortable .table-column-actions .btn:hover:not(:disabled),
.table-comfortable .table-actions-container .button:hover:not(:disabled),
.table-comfortable .table-actions-container .btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.table-spacious {
  font-size: var(--text-base);
}
.table-spacious .table-header-cell {
  padding: var(--space-5) var(--space-6);
  line-height: 1.6;
  height: 56px;
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  letter-spacing: 0.025em;
  color: var(--color-text);
}
.table-spacious tr {
  height: 56px;
  transition: var(--transition-colors);
}
.table-spacious .table-cell {
  padding: var(--space-4) var(--space-5);
  line-height: 1.6;
  vertical-align: middle;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 5%, transparent);
  transition: var(--transition-colors);
}
.table-spacious .table-cell .icon,
.table-spacious .table-cell i {
  color: currentColor;
  flex-shrink: 0;
  font-size: var(--icon-sm);
  opacity: 0.8;
  transition: var(--transition-colors);
}
.table-spacious .table-cell .icon,
.table-spacious .table-cell i {
  font-size: 24px;
  width: 24px;
  height: 24px;
  transition: var(--transition-transform);
}
.table-spacious .table-cell .avatar {
  width: 48px;
  height: 48px;
  font-size: calc(48px * 0.4);
  transition: var(--transition-transform);
}
.table-spacious .table-cell .badge {
  transform: scale(1.1);
  transform-origin: center left;
  transition: var(--transition-transform);
}
.table-spacious .table-column-actions,
.table-spacious .table-actions-container {
  gap: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.table-spacious .table-column-actions .button,
.table-spacious .table-column-actions .btn,
.table-spacious .table-actions-container .button,
.table-spacious .table-actions-container .btn {
  height: 40px;
  min-width: 40px;
  padding: 0 var(--space-2);
  transition: var(--transition-transform);
}
.table-spacious .table-column-actions .button:hover:not(:disabled),
.table-spacious .table-column-actions .btn:hover:not(:disabled),
.table-spacious .table-actions-container .button:hover:not(:disabled),
.table-spacious .table-actions-container .btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.table-extra-spacious {
  font-size: var(--text-base);
}
.table-extra-spacious .table-header-cell {
  padding: var(--space-6) var(--space-8);
  line-height: 1.6;
  height: 64px;
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  letter-spacing: 0.025em;
  color: var(--color-text);
}
.table-extra-spacious tr {
  height: 64px;
  transition: var(--transition-colors);
}
.table-extra-spacious .table-cell {
  padding: var(--space-5) var(--space-6);
  line-height: 1.6;
  vertical-align: middle;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 5%, transparent);
  transition: var(--transition-colors);
}
.table-extra-spacious .table-cell .icon,
.table-extra-spacious .table-cell i {
  color: currentColor;
  flex-shrink: 0;
  font-size: var(--icon-sm);
  opacity: 0.8;
  transition: var(--transition-colors);
}
.table-extra-spacious .table-cell .icon,
.table-extra-spacious .table-cell i {
  font-size: 28px;
  width: 28px;
  height: 28px;
  transition: var(--transition-transform);
}
.table-extra-spacious .table-cell .avatar {
  width: 56px;
  height: 56px;
  font-size: calc(56px * 0.4);
  transition: var(--transition-transform);
}
.table-extra-spacious .table-cell .badge {
  transform: scale(1.2);
  transform-origin: center left;
  transition: var(--transition-transform);
}
.table-extra-spacious .table-column-actions,
.table-extra-spacious .table-actions-container {
  gap: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.table-extra-spacious .table-column-actions .button,
.table-extra-spacious .table-column-actions .btn,
.table-extra-spacious .table-actions-container .button,
.table-extra-spacious .table-actions-container .btn {
  height: 44px;
  min-width: 44px;
  padding: 0 var(--space-2);
  transition: var(--transition-transform);
}
.table-extra-spacious .table-column-actions .button:hover:not(:disabled),
.table-extra-spacious .table-column-actions .btn:hover:not(:disabled),
.table-extra-spacious .table-actions-container .button:hover:not(:disabled),
.table-extra-spacious .table-actions-container .btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.table-ultra-compact .table-header-cell {
  padding: var(--space-1) var(--space-2);
  height: 32px;
}
.table-ultra-compact .table-cell {
  padding: var(--space-1) var(--space-2);
  height: 32px;
}

.table-compact .table-header-cell {
  padding: var(--space-2) var(--space-3);
  height: 36px;
}
.table-compact .table-cell {
  padding: var(--space-1-5) var(--space-2-5);
  height: 36px;
}

.table-dense .table-header-cell {
  padding: var(--space-2) var(--space-3);
  height: calc(var(--space-9));
}
.table-dense .table-cell {
  padding: var(--space-1-5) var(--space-2-5);
  height: calc(var(--space-9));
}

.table-normal .table-header-cell {
  padding: var(--space-4) var(--space-4);
  height: 48px;
}
.table-normal .table-cell {
  padding: var(--space-3) var(--space-4);
  height: 48px;
}

.table-comfortable .table-header-cell {
  padding: var(--space-4) var(--space-5);
  height: 52px;
}
.table-comfortable .table-cell {
  padding: calc(var(--space-3) + var(--space-1)) var(--space-4);
  height: 52px;
}

.table-spacious .table-header-cell {
  padding: var(--space-5) var(--space-6);
  height: 56px;
}
.table-spacious .table-cell {
  padding: var(--space-4) var(--space-5);
  height: 56px;
}

.table-extra-spacious .table-header-cell {
  padding: var(--space-6) var(--space-8);
  height: 64px;
}
.table-extra-spacious .table-cell {
  padding: var(--space-5) var(--space-6);
  height: 64px;
}

.table-loading-skeleton .skeleton-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
}
.table-loading-skeleton .skeleton-row .skeleton-cell {
  background: linear-gradient(90deg, var(--color-surface-elevated) 25%, color-mix(in srgb, var(--color-surface-elevated) 80%, white) 50%, var(--color-surface-elevated) 75%);
  background-size: 200% 100%;
  animation: shimmer var(--duration-slow) ease-in-out infinite;
  border-radius: var(--radius-sm);
  color: transparent;
  user-select: none;
}
.table-loading-skeleton .skeleton-row .skeleton-cell::before, .table-loading-skeleton .skeleton-row .skeleton-cell::after {
  display: none;
}
.table-loading-skeleton .skeleton-row .skeleton-cell * {
  visibility: hidden;
}
.table-loading-skeleton .skeleton-row .skeleton-cell:nth-child(1) {
  flex: 0 0 120px;
}
.table-loading-skeleton .skeleton-row .skeleton-cell:nth-child(2) {
  flex: 0 0 200px;
}
.table-loading-skeleton .skeleton-row .skeleton-cell:nth-child(3) {
  flex: 0 0 80px;
}
.table-loading-skeleton .skeleton-row .skeleton-cell:nth-child(4) {
  flex: 0 0 150px;
}
.table-loading-skeleton .skeleton-row .skeleton-cell:nth-child(5) {
  flex: 0 0 100px;
}
.table-loading-skeleton .skeleton-row .skeleton-cell:nth-child(n+6) {
  flex: 0 0 120px;
}
.table-loading-skeleton .skeleton-row .skeleton-checkbox {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-sm);
  flex: 0 0 16px;
}
.table-loading-skeleton .skeleton-row .skeleton-actions {
  display: flex;
  gap: var(--space-2);
  flex: 0 0 auto;
}
.table-loading-skeleton .skeleton-row .skeleton-actions .skeleton-action {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--surface-elevated);
  animation: pulse 1.5s ease-in-out infinite;
}

.table-row-inactive {
  opacity: var(--opacity-60);
}
.table-row-inactive:hover {
  opacity: var(--opacity-80);
}
.table.row-selected {
  background: var(--color-primary-light);
}
.table-row {
  transition: background-color 0.15s ease;
}
.table-row:hover {
  background-color: rgba(var(--primary-rgb), 0.02) !important;
}
.table-row-selected {
  background-color: rgba(var(--primary-rgb), 0.04) !important;
}
.table-row-selected:hover {
  background-color: rgba(var(--primary-rgb), 0.06) !important;
}
.table-row-clickable {
  cursor: pointer;
}
.table-row-highlighted {
  background: var(--warning-10);
}
.table-row-striped:nth-child(even) {
  background: var(--surface-elevated-50);
}
.table-row-selected-enhanced {
  background: var(--color-primary-light);
  position: relative;
}
.table-row-selected-enhanced:hover {
  background: var(--color-primary-light);
}
.table-row-selected-enhanced .table-cell {
  background: transparent;
}
.table-row-selected-enhanced-multi-selected {
  background: var(--color-primary-light);
}
.table-row-selected-enhanced-multi-selected::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: var(--color-primary);
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6 10l4-4" stroke="currentColor" stroke-width="2"/></svg>');
  opacity: 0.8;
}
.table-hover-enhanced tbody tr {
  transition: all var(--transition-normal);
  position: relative;
}
.table-hover-enhanced tbody tr:hover {
  background: var(--state-hover-bg);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(var(--shadow-color), 0.08), 0 1px 3px rgba(var(--shadow-color), 0.12);
  z-index: var(--z-base);
}
.table-hover-enhanced tbody tr:hover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.03), transparent);
  pointer-events: none;
  animation: shimmer 2s ease-in-out infinite;
}
.table-hover-enhanced tbody tr.is-selected:hover {
  background: var(--color-primary-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.15), 0 2px 6px rgba(var(--primary-rgb), 0.1);
}
.table-hover-enhanced tbody tr:active {
  transform: translateY(0);
  transition: transform 0.1s var(--ease-out);
}
.table-checkbox-enhanced input[type=checkbox] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  position: relative;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.table-checkbox-enhanced input[type=checkbox]:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}
.table-checkbox-enhanced input[type=checkbox]:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2);
}
.table-checkbox-enhanced input[type=checkbox]:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.table-checkbox-enhanced input[type=checkbox]:checked::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 4px;
  width: 6px;
  height: 10px;
  border: 2px solid var(--white);
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
  animation: scaleIn 0.2s var(--ease-out) forwards;
}
.table-checkbox-enhanced input[type=checkbox]:indeterminate {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.table-checkbox-enhanced input[type=checkbox]:indeterminate::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 3px;
  width: 10px;
  height: 2px;
  background: var(--white);
  border-radius: var(--radius-xs);
  animation: scaleIn 0.2s var(--ease-out) forwards;
}
.table-checkbox-enhanced input[type=checkbox]:disabled {
  opacity: var(--opacity-40);
  cursor: not-allowed;
}
.table-checkbox-enhanced input[type=checkbox]:disabled:hover {
  border-color: var(--color-border);
  box-shadow: none;
}
.table-keyboard-navigation tbody tr:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  background: var(--color-primary-light);
}
.table-keyboard-navigation tbody tr.keyboard-selected {
  background: var(--color-primary-light);
}
.table-keyboard-navigation tbody tr.keyboard-selected::before {
  content: "";
  position: absolute;
  left: -2px;
  top: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-sm);
  pointer-events: none;
  animation: fadeIn 0.3s var(--ease-out);
}
.table-header-sortable {
  position: relative;
  background: transparent;
  border: none;
  padding: var(--space-3) var(--space-4);
  width: 100%;
  height: 100%;
  display: flex;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: var(--transition-colors);
}
.table-header-sortable:hover {
  background: var(--state-hover-bg);
  color: var(--color-primary);
}
.table-header-sortable .table-sort-icon {
  margin-left: var(--space-2);
  font-size: var(--text-sm);
  opacity: 0.7;
  transition: all var(--transition-normal);
}
.table-header-sortable.active-sort {
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: var(--font-semibold);
}
.table-header-sortable.active-sort .table-sort-icon {
  opacity: 1;
  transform: scale(1.1);
  color: var(--color-primary);
}
.table-header-sortable-sort-desc .table-sort-icon {
  transform: rotate(180deg);
}
.table-header-sortable-sort-asc .table-sort-icon {
  transform: rotate(0deg);
}
.table-sort-priority-badge {
  display: inline-flex;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-1);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: 1;
  margin-left: var(--space-1);
  animation: scaleIn var(--duration-fast) var(--ease-out);
}
.table-cell:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: calc(var(--border-2) * -1);
  box-shadow: 0 0 0 var(--border-4) var(--color-primary-light);
  position: relative;
  z-index: var(--z-base);
}
.table-cell.is-editing {
  background: var(--warning-5);
  box-shadow: inset 0 0 0 2px var(--warning);
}
.table-cell.is-editing input, .table-cell.is-editing textarea, .table-cell.is-editing select {
  border: none;
  background: transparent;
  outline: none;
  width: 100%;
  padding: var(--space-1);
}
.table-cell-has-error {
  background: var(--error-5);
}
.table-cell-has-error::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  background: var(--error);
  border-radius: var(--radius-full);
  animation: errorPulse 2s ease-in-out infinite;
}
.table-cell-is-loading {
  position: relative;
}
.table-cell-is-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(var(--primary-rgb), 0.1) 50%, transparent 100%);
  animation: progress 1.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .table-row-selected-enhanced, .table-hover-enhanced tbody tr, .table-checkbox-enhanced input[type=checkbox], .table-keyboard-navigation tbody tr {
    animation: none;
    transition: none;
    transform: none;
  }
  .table-hover-enhanced tbody tr:hover {
    transform: none;
  }
}
.table-column-primary {
  font-weight: var(--font-semibold);
  color: var(--color-text);
  font-size: var(--text-base);
}
.table-column-primary-cell {
  background: var(--surface-50);
}
.table-column-secondary {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.table-column-actions {
  width: 120px;
  text-align: center;
  white-space: nowrap;
}
.table-column-actions .btn, .table-column-actions .button {
  min-width: auto;
  padding: var(--space-2) var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  position: relative;
}
.table-column-actions .btn:not(:disabled), .table-column-actions .button:not(:disabled) {
  background: var(--surface-elevated);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
.table-column-actions .btn:not(:disabled):hover, .table-column-actions .button:not(:disabled):hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
  transform: translateY(-1px);
}
.table-column-actions .btn .icon,
.table-column-actions .btn i, .table-column-actions .button .icon,
.table-column-actions .button i {
  font-size: calc(1em * var(--φ));
  width: calc(1em * var(--φ));
  height: calc(1em * var(--φ));
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  flex-shrink: 0;
  position: relative;
  z-index: var(--z-base);
}

.table-cell-actions {
  text-align: center;
  width: var(--space-32);
}
.table-cell-currency {
  text-align: right;
  font-weight: var(--font-semibold);
  font-family: var(--font-family-mono);
}
.table-cell-date {
  font-size: var(--text-sm);
}
.table-cell-number {
  text-align: right;
  font-family: var(--font-family-mono);
}
.table-cell-status {
  text-align: center;
}

.table-cell-primary-title {
  font-weight: var(--font-semibold);
  color: var(--color-text);
}
.table-cell-primary-subtitle {
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.table-cell-badge .badge {
  display: inline-flex;
}
.table-cell-compact {
  padding: var(--space-2) var(--space-3);
}
.table-cell-content {
  padding: var(--space-4) var(--space-6);
}
.table-cell-flex {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.table-cell-icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: var(--space-10);
  height: var(--space-10);
}
.table-cell-muted {
  color: var(--color-text-muted);
}
.table-date-primary {
  font-weight: var(--font-medium);
}
.table-date-secondary {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.table-amount-currency {
  font-weight: var(--font-semibold);
  font-family: var(--font-family-mono);
}
.table-amount-value {
  text-align: right;
}
.table-actions-container {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  position: relative;
}
.table-actions-flex {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  position: relative;
}
.table-action-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  position: relative;
}
.table-action-button .icon,
.table-action-button i {
  font-size: calc(1em * var(--φ));
  width: calc(1em * var(--φ));
  height: calc(1em * var(--φ));
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  flex-shrink: 0;
  position: relative;
  z-index: var(--z-base);
}
.table-action-dense {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
}
.table-action-group {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.table-auto-columns {
  table-layout: auto;
}
.table-checkbox-column {
  text-align: center;
  vertical-align: middle;
}

.table-checkbox-column {
  text-align: center;
}

.table-cell-checkbox,
.table-header-cell-checkbox {
  padding: 0;
  text-align: center;
}
.table-cell-checkbox.table-header-cell,
.table-header-cell-checkbox.table-header-cell {
  padding: 0;
}
.table-cell-checkbox.table-cell,
.table-header-cell-checkbox.table-cell {
  padding: 0;
}

.table-sort-indicator {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-2);
  font-size: var(--text-xs);
}

.table-content {
  position: relative;
  z-index: var(--z-base);
}
.table-content-scroll-container-x {
  position: relative;
}
.table-content-scroll-container-x .table {
  min-width: max-content;
  width: auto;
  table-layout: auto;
}
.table-content-scroll-container-x .table .table-header-cell,
.table-content-scroll-container-x .table .table-cell {
  white-space: nowrap;
  min-width: fit-content;
}
.table-content-scroll-container-x .table .table-header-cell-content, .table-content-scroll-container-x .table .table-header-cell-description,
.table-content-scroll-container-x .table .table-cell-content,
.table-content-scroll-container-x .table .table-cell-description {
  white-space: normal;
  min-width: 200px;
  max-width: 400px;
}
.table-content-scroll-container-x::before, .table-content-scroll-container-x::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  pointer-events: none;
  z-index: var(--z-floating);
  transition: opacity var(--duration-normal) var(--ease-out);
}
.table-content-scroll-container-x::before {
  left: 0;
  background: linear-gradient(to right, var(--surface-elevated), transparent);
  opacity: 0;
}
.table-content-scroll-container-x::after {
  right: 0;
  background: linear-gradient(to left, var(--surface-elevated), transparent);
  opacity: 1;
}
.table-content-scroll-container-x-table-content-scroll-container-x-scrolled-left::before {
  opacity: 1;
}
.table-content-scroll-container-x-table-content-scroll-container-x-scrolled-right::after {
  opacity: 0;
}
.table-content-scroll-container-x-table-content-scroll-container-x-scrolled-both::before {
  opacity: 1;
}
.table-content-scroll-container-x-table-content-scroll-container-x-scrolled-both::after {
  opacity: 1;
}
.table-content-height-custom {
  overflow: hidden;
}
.table-content-height-custom-table-content-scroll-container-x {
  overflow-x: auto;
  overflow-y: hidden;
}
.table-content-height-custom-table-content-scroll-container-x[style*=height] {
  overflow-y: auto;
}

thead {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}
thead .table-header-cell {
  position: relative;
  background: var(--surface-elevated);
}
thead .table-header-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  z-index: -1;
  box-shadow: 0 2px 4px var(--shadow-color-10);
}

.table-container.professional-spacing .table-header-cell {
  padding: var(--space-5) var(--space-3);
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--surface-elevated);
  border-bottom: 2px solid color-mix(in srgb, var(--color-border) 10%, transparent);
}
.table-container.professional-spacing .table-cell {
  padding: var(--space-4) var(--space-3);
  min-height: 60px;
  vertical-align: middle;
  line-height: 1.5;
}

.table-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 300px;
}
.table-search i {
  position: absolute;
  left: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--icon-base);
  pointer-events: none;
  z-index: var(--z-base);
  top: 50%;
  transform: translateY(-50%);
}
.table-search .table-search-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  padding-left: calc(var(--space-3) + var(--icon-base) + var(--space-2));
  background: var(--color-surface-elevated);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
  transition: var(--transition-normal);
}
.table-search .table-search-input::placeholder {
  color: var(--color-text-muted);
}
.table-search .table-search-input:hover {
  border-color: var(--color-primary);
  background: var(--color-surface);
}
.table-search .table-search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
  background: var(--color-surface);
}

.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-elevated);
  border-bottom: var(--border-1) solid var(--color-border-light);
}
.table-toolbar:empty {
  display: none;
}
.table-toolbar-left, .table-toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.table-toolbar-left {
  flex: 1;
}
.table-toolbar-right {
  flex: 0 0 auto;
}

.table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: var(--border-1) solid var(--color-border-light);
}
.table-header .table-header-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.table-header .table-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0;
}
.table-header .table-title i {
  font-size: var(--icon-lg);
  color: var(--color-primary);
  flex-shrink: 0;
  position: relative;
  z-index: var(--z-base);
}
.table-header .table-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}
.table-header .table-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.table-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-10) var(--space-4);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.table-loading::before {
  content: "";
  display: inline-block;
  width: 1.125em;
  height: 1.125em;
  border: 2.5px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
  border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
  border-top-color: var(--color-primary);
  animation: spin var(--duration-slow) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
}
.table-loading p {
  font-size: var(--text-sm);
  margin: 0;
}

.table-sort-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1);
  margin-left: var(--space-1);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: var(--transition-colors);
}
.table-sort-button i {
  font-size: var(--icon-sm);
}
.table-sort-button:hover {
  background: var(--state-hover-bg);
  color: var(--color-primary);
}
.table-sort-button-sorted-asc, .table-sort-button-sorted-desc {
  color: var(--color-primary);
}

.table-header-content {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}

.table-header-content-group {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  position: relative;
}

.table-header-filter-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  margin: 0;
  margin-left: 2px;
  background: transparent;
  border: none;
  border-radius: var(--radius-xs);
  color: var(--color-text-lighter);
  cursor: pointer;
  transition: var(--transition-colors);
  font-size: 14px;
  line-height: 1;
  opacity: 0.6;
}
.table-header-filter-icon:hover {
  background: var(--state-hover-bg);
  color: var(--color-primary);
  opacity: 1;
}
.table-header-filter-icon.active {
  color: var(--color-primary);
  opacity: 1;
  background: var(--color-primary-lighter);
}

.table-column-filter-portal {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: var(--z-critical);
  pointer-events: none;
}
.table-column-filter-portal .table-column-filter-backdrop {
  display: none;
}

.table-column-filter-dropdown {
  background: var(--color-surface-elevated);
  background-color: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 280px;
  max-width: 320px;
  max-height: 400px;
  overflow: hidden;
  pointer-events: auto;
  opacity: 1;
  backdrop-filter: none;
}
.table-column-filter-dropdown .filter-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  background-color: var(--color-surface);
}
.table-column-filter-dropdown .filter-dropdown-header .filter-dropdown-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}
.table-column-filter-dropdown .filter-dropdown-header .filter-dropdown-close {
  background: transparent;
  border: none;
  padding: var(--space-1);
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: color var(--duration-fast);
}
.table-column-filter-dropdown .filter-dropdown-header .filter-dropdown-close:hover {
  color: var(--color-text-primary);
}
.table-column-filter-dropdown .filter-dropdown-header .filter-dropdown-close .icon {
  font-size: var(--text-lg);
}
.table-column-filter-dropdown .filter-dropdown-body {
  padding: var(--space-3);
  max-height: 280px;
  overflow-y: auto;
  background: var(--color-surface-elevated);
  background-color: var(--color-surface-elevated);
}
.table-column-filter-dropdown .filter-dropdown-body .filter-dropdown-search {
  margin-bottom: var(--space-2);
}
.table-column-filter-dropdown .filter-dropdown-body .filter-dropdown-search .filter-search-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  background: var(--color-surface);
}
.table-column-filter-dropdown .filter-dropdown-body .filter-dropdown-search .filter-search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-lighter);
}
.table-column-filter-dropdown .filter-dropdown-body .filter-dropdown-values {
  max-height: 200px;
  overflow-y: auto;
}
.table-column-filter-dropdown .filter-dropdown-body .filter-dropdown-values .filter-value-item {
  display: flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
}
.table-column-filter-dropdown .filter-dropdown-body .filter-dropdown-values .filter-value-item:hover {
  background: var(--state-hover-bg);
}
.table-column-filter-dropdown .filter-dropdown-body .filter-dropdown-values .filter-value-item input[type=checkbox] {
  margin-right: var(--space-2);
}
.table-column-filter-dropdown .filter-dropdown-body .filter-input-group {
  margin-bottom: var(--space-3);
}
.table-column-filter-dropdown .filter-dropdown-body .filter-input-group label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}
.table-column-filter-dropdown .filter-dropdown-body .filter-input-group input, .table-column-filter-dropdown .filter-dropdown-body .filter-input-group select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  background: var(--color-surface);
}
.table-column-filter-dropdown .filter-dropdown-body .filter-input-group input:focus, .table-column-filter-dropdown .filter-dropdown-body .filter-input-group select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-lighter);
}
.table-column-filter-dropdown .filter-dropdown-body .filter-actions {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.table-column-filter-dropdown .filter-dropdown-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  background-color: var(--color-surface);
}

.table-scroll-container {
  position: relative;
  width: 100%;
  overflow: auto;
}
.table-scroll-container-fixed-header {
  max-height: 600px;
  overflow-y: auto;
}

.table-content-scroll-container-x-scrollbar-custom {
  scrollbar-width: thin;
  scrollbar-color: var(--border) var(--surface-elevated);
}
.table-content-scroll-container-x-scrollbar-custom::-webkit-scrollbar {
  height: 12px;
  width: 12px;
}
.table-content-scroll-container-x-scrollbar-custom::-webkit-scrollbar-track {
  background: var(--surface-elevated);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.table-content-scroll-container-x-scrollbar-custom::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius-sm);
  border: 2px solid var(--surface-elevated);
}
.table-content-scroll-container-x-scrollbar-custom::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}
.table-content-scroll-container-x-scrollbar-custom::-webkit-scrollbar-thumb:active {
  background: var(--primary-active);
}
.table-content-scroll-container-x-scrollbar-custom::-webkit-scrollbar-corner {
  background: var(--surface-elevated);
}
@media (max-width: 768px) {
  .table-content-scroll-container-x {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
  }
  .table-content-scroll-container-x::before, .table-content-scroll-container-x::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: var(--z-floating);
    transition: opacity var(--duration-normal) var(--ease-out);
    top: 0;
    bottom: 0;
    width: 20px;
  }
  .table-content-scroll-container-x::before {
    left: 0;
    background: linear-gradient(to right, var(--color-surface-elevated), transparent);
    opacity: 0;
  }
  .table-content-scroll-container-x::after {
    right: 0;
    background: linear-gradient(to left, var(--color-surface-elevated), transparent);
    opacity: 1;
  }
  .table-content-scroll-container-x-scrolled-left::before {
    opacity: 1;
  }
  .table-content-scroll-container-x-scrolled-right::after {
    opacity: 0;
  }
  .table-content-scroll-container-x-scrollbar-custom::-webkit-scrollbar {
    height: 8px;
  }
  .table-content-scroll-container-x-scrollbar-custom::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border: 1px solid var(--surface-elevated);
  }
}

.table-scroll-container[data-height] {
  height: var(--scroll-height);
}
.table-scroll-container[data-max-height] {
  max-height: var(--scroll-max-height);
}

.table-header-cell[data-width], .table-cell[data-width], .virtual-table-cell[data-width] {
  width: var(--cell-width);
}
.table-header-cell[data-min-width], .table-cell[data-min-width], .virtual-table-cell[data-min-width] {
  min-width: var(--cell-min-width);
}
.table-header-cell[data-max-width], .table-cell[data-max-width], .virtual-table-cell[data-max-width] {
  max-width: var(--cell-max-width);
}

.table-header-cell.sticky, .table-header-cell[data-sticky], .table-header-cell.table-column-sticky-left, .table-header-cell.table-column-sticky-right {
  background-color: var(--table-header-background, var(--surface)) !important;
  box-shadow: inset 0 -1px 0 var(--table-header-border, var(--border));
  z-index: calc(var(--z-base) + 2);
}

.area-chart-container[data-height], .column-chart-container[data-height] {
  height: var(--chart-height);
}

.virtual-table-viewport[data-height] {
  height: var(--viewport-height);
}

.rvirtual-scroll[data-height] {
  height: var(--container-height);
}

.bulk-operations-toolbar {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-primary-light);
  background: var(--glass-bg-light);
  backdrop-filter: blur(12px);
}
.bulk-operations-toolbar-animate-slide-down {
  animation: slideDown 0.3s ease-out;
}
.bulk-operations-toolbar .bulk-operations-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-light);
  border-radius: var(--radius-full);
}
.bulk-operations-toolbar .bulk-actions-container .bulk-action-button {
  transition: var(--transition-normal);
}
.bulk-operations-toolbar .bulk-actions-container .bulk-action-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--shadow-color-20);
}
.bulk-operations-toolbar .progress-bar-container .progress-bar {
  background: color-mix(in srgb, var(--color-border) 20%, transparent);
}
.bulk-operations-toolbar .progress-bar-container .progress-bar .progress-fill {
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
  box-shadow: var(--shadow-glow-primary);
}

@media (prefers-color-scheme: dark) {
  .bulk-operations-toolbar {
    background: var(--glass-bg-heavy);
    border-color: var(--color-primary-medium);
  }
}
@media (pointer: coarse) {
  .table-container .table-header-cell {
    text-align: left;
    font-weight: var(--font-semibold);
    color: var(--color-text);
    border-bottom: var(--border-1) solid var(--color-border);
    background: var(--color-surface-elevated);
    position: relative;
    padding: var(--space-3) var(--space-4);
    min-height: var(--touch-target-min);
  }
  .table-container .table-cell {
    padding: var(--space-3) var(--space-4);
    vertical-align: middle;
    transition: var(--transition-colors);
    border-bottom: var(--border-1) solid var(--color-border-light);
    padding: var(--space-3) var(--space-4);
    min-height: var(--touch-target-min);
  }
  .table-container input[type=checkbox],
  .table-container input[type=radio] {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    transform: scale(1.2);
  }
  .table-container .button,
  .table-container .btn {
    min-height: var(--touch-target-lg);
    padding: var(--space-3) var(--space-4);
  }
}

@media (max-width: 640px) {
  .table-container {
    margin: var(--space-2);
    border-radius: var(--radius-md);
  }
  .table-container:not(.table-mobile-scroll) .table-column-optional,
  .table-container:not(.table-mobile-scroll) .table-column-secondary,
  .table-container:not(.table-mobile-scroll) .table-column-mobile-hidden,
  .table-container:not(.table-mobile-scroll) .table-column-priority-low,
  .table-container:not(.table-mobile-scroll) .table-column-priority-medium {
    display: none;
  }
  .table-container:not(.table-mobile-scroll) .table-column-priority-high {
    display: table-cell;
  }
  .table-container-mobile-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }
  .table-container-mobile-scroll .table-content {
    min-width: 100%;
    width: max-content;
  }
  .table-container-mobile-scroll .table {
    min-width: 600px;
    width: auto;
  }
  .table-container-mobile-scroll .table-column-optional,
  .table-container-mobile-scroll .table-column-secondary,
  .table-container-mobile-scroll .table-column-mobile-hidden,
  .table-container-mobile-scroll .table-column-priority-low,
  .table-container-mobile-scroll .table-column-priority-medium,
  .table-container-mobile-scroll .table-column-priority-high {
    display: table-cell;
  }
  .table-container .table:not(.table-density-custom) {
    font-size: var(--text-xs);
  }
  .table-container .table:not(.table-density-custom) .table-header-cell {
    padding: var(--space-2) var(--space-3);
    height: 36px;
    font-size: var(--text-xs);
  }
  .table-container .table:not(.table-density-custom) .table-cell {
    padding: var(--space-2) var(--space-3);
    height: 36px;
    line-height: 1.2;
  }
  .table-container .table:not(.table-density-custom) tr {
    height: 36px;
  }
  .table-container .table-header-cell:first-child,
  .table-container .table-cell:first-child {
    width: auto;
    min-width: 120px;
  }
  .table-container .table-header-cell:last-child,
  .table-container .table-cell:last-child {
    width: 80px;
    text-align: right;
  }
  .table-container .table-column-actions {
    width: 60px;
  }
  .table-container .table-column-actions .flex {
    flex-direction: column;
    gap: var(--space-1);
  }
  .table-container .table-column-actions .flex .button {
    min-width: 32px;
    height: 32px;
    padding: 0;
  }
  .table-container .table-column-actions .flex .button .button-text {
    display: none;
  }
  .table-container .table-pagination {
    flex-direction: column;
    gap: var(--space-3);
  }
  .table-container .table-pagination .d-flex.items-center.gap-4:first-child {
    order: 2;
    justify-content: center;
  }
  .table-container .table-pagination .d-flex.items-center.gap-4:last-child {
    order: 1;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .table-mobile-cards .table {
    display: none;
  }
}

.table-mobile-card {
  background: var(--surface-elevated);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
  border: var(--border-1) solid color-mix(in srgb, var(--color-border) 10%, transparent);
  transition: var(--transition-normal);
}
.table-mobile-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.table-mobile-card-selected {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}
.table-mobile-card-inactive {
  opacity: var(--opacity-60);
}

.table-mobile-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.table-mobile-card-header .table-mobile-card-header-title {
  font-weight: var(--font-semibold);
  color: var(--color-text);
}
.table-mobile-card-header .table-mobile-card-header-status {
  flex-shrink: 0;
}

.table-mobile-card-body > * + * {
  margin-top: var(--space-2);
}

.table-mobile-card-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.table-mobile-card-field .table-mobile-card-field-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
}
.table-mobile-card-field .table-mobile-card-field-value {
  font-size: var(--text-sm);
}

.table-mobile-card-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--border-1) solid color-mix(in srgb, var(--color-border) 10%, transparent);
}

@media (min-width: 641px) and (max-width: 1024px) {
  .table-container .table-column-priority-low {
    display: none;
  }
  .table-container .table-spacious .table-header-cell, .table-container .table-density-extra-spacious .table-header-cell {
    padding: var(--space-3) var(--space-4);
    height: 44px;
  }
  .table-container .table-spacious .table-cell, .table-container .table-density-extra-spacious .table-cell {
    padding: var(--space-3) var(--space-4);
    height: 44px;
  }
}

@media (min-width: 1440px) {
  .table-container-variant-glass {
    backdrop-filter: var(--glass-blur-lg) var(--glass-saturate-intense) var(--glass-brightness-intense);
  }
  .table-container-variant-glass .table-header-cell {
    backdrop-filter: var(--glass-blur-md);
  }
  .table-container-hover-enhanced tbody tr:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--shadow-color-15);
  }
}

@media (max-width: 768px) {
  .table-normal, .table-spacious {
    font-size: var(--text-sm);
  }
  .table-normal .table-header-cell, .table-spacious .table-header-cell {
    padding: var(--space-3) var(--space-4);
    line-height: 1.3;
  }
  .table-normal .table-cell, .table-spacious .table-cell {
    padding: var(--space-2) var(--space-3);
    height: 40px;
    line-height: 1.3;
  }
  .table-normal .table-cell .icon,
  .table-normal .table-cell i, .table-spacious .table-cell .icon,
  .table-spacious .table-cell i {
    color: currentColor;
    flex-shrink: 0;
    font-size: var(--icon-sm);
    opacity: 0.8;
    transition: var(--transition-colors);
  }
  .table-normal .table-cell .icon,
  .table-normal .table-cell i, .table-spacious .table-cell .icon,
  .table-spacious .table-cell i {
    font-size: 18px;
    width: 18px;
    height: 18px;
  }
  .table-normal tr, .table-spacious tr {
    height: 40px;
  }
}
.table .table-compact .table-column-optional {
  display: none;
}

@layer components {
  @media (prefers-contrast: high) {
    .table {
      --table-border: var(--color-text);
      --table-header-border: var(--color-text);
      --table-cell-border: var(--color-text);
      --table-row-selected-border: var(--color-text);
    }
    .table-header-cell {
      border: var(--border-width-regular) solid var(--color-text);
      background: var(--color-canvas);
      color: var(--color-text);
    }
    .table-cell {
      border: var(--border-width-thin) solid var(--color-text);
    }
    .table tbody tr:hover {
      background: var(--color-text);
      color: var(--color-canvas);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .table-container .skeleton-cell::after {
      animation: none;
    }
    .table-container .empty-icon {
      animation: none;
    }
  }
  @layer overrides {
    @media (prefers-reduced-motion: reduce) {
      * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }
    .table-header-cell:focus-visible {
      outline: var(--border-width-thick) solid var(--color-primary);
      outline-offset: 2px;
      z-index: var(--z-floating);
      position: relative;
    }
    .table-header-cell[aria-sort=ascending]::after {
      content: " (sorted ascending)";
      position: absolute;
      left: -10000px;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }
    .table-header-cell[aria-sort=descending]::after {
      content: " (sorted descending)";
      position: absolute;
      left: -10000px;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }
    .table-cell:focus-visible {
      outline: var(--border-width-regular) solid var(--color-primary);
      outline-offset: -2px;
      box-shadow: 0 0 0 4px var(--color-primary-light);
      z-index: var(--z-floating);
      position: relative;
    }
    .table-cell[title]:hover::after {
      content: attr(title);
      position: absolute;
      background: var(--surface-elevated);
      color: var(--color-text);
      padding: var(--space-2) var(--space-3);
      border-radius: var(--radius-sm);
      box-shadow: var(--shadow-xl);
      z-index: var(--z-tooltip);
      white-space: normal;
      max-width: 300px;
      word-wrap: break-word;
      border: 1px solid var(--border);
      font-size: var(--text-sm);
      margin-top: var(--space-2);
    }
    .table-cell:focus-visible {
      outline: var(--border-width-regular) solid var(--color-primary);
      outline-offset: -2px;
      box-shadow: 0 0 0 4px var(--color-primary-light);
      z-index: var(--z-floating);
      position: relative;
    }
    .table-header-cell.table-header-resizable:focus-within {
      overflow: visible;
      z-index: var(--z-floating);
      position: relative;
    }
    .table-header-cell.table-header-resizable:focus-within::after {
      content: attr(title);
      position: absolute;
      top: 100%;
      left: 0;
      background: var(--surface-elevated);
      color: var(--color-text);
      padding: var(--space-2) var(--space-3);
      border-radius: var(--radius-sm);
      box-shadow: var(--shadow-lg);
      white-space: normal;
      max-width: 300px;
      z-index: var(--z-tooltip);
      border: 1px solid var(--border);
    }
    .table-loading-skeleton[aria-live=polite] .skeleton-row:first-child::before {
      content: "Loading table data";
      position: absolute;
      left: -10000px;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }
    tbody tr:focus-visible {
      outline: var(--border-width-thick) solid var(--color-primary);
      outline-offset: 2px;
      z-index: var(--z-floating);
      position: relative;
    }
    tbody tr[aria-selected=true] {
      background: var(--color-primary-light);
      border-left: calc(var(--border-width-regular) * 2) solid var(--color-primary);
    }
    tbody tr[aria-selected=true] .table-cell,
    tbody tr[aria-selected=true] .table-cell {
      background: transparent;
    }
    input[type=checkbox]:focus-visible,
    input[type=radio]:focus-visible {
      outline: var(--border-width-thick) solid var(--color-primary);
      outline-offset: 2px;
    }
    @media (prefers-contrast: high) {
      input[type=checkbox],
      input[type=radio] {
        border: var(--border-width-regular) solid var(--color-text);
      }
      input[type=checkbox]:checked,
      input[type=radio]:checked {
        background: var(--color-text);
        border-color: var(--color-text);
      }
    }
  }
}
.table-header-resizable {
  position: relative;
}
.table-header-resizable .column-resize-handle {
  position: absolute;
  right: -2px;
  top: 0;
  bottom: 0;
  width: 4px;
  cursor: col-resize;
  user-select: none;
  opacity: 0;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-light);
  border-radius: var(--radius-xs);
  z-index: var(--z-content);
}
.table-header-resizable .column-resize-handle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 16px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  opacity: 0.7;
}
.table-header-resizable .column-resize-handle:hover, .table-header-resizable .column-resize-handle:active {
  opacity: 1 !important;
  background: var(--color-primary-medium);
  box-shadow: var(--shadow-sm);
  transform: scaleX(1.2);
}
.table-header-resizable .column-resize-handle:hover::before, .table-header-resizable .column-resize-handle:active::before {
  opacity: 1;
  background: var(--color-primary-active);
}
.table-header-resizable .column-resize-handle.is-resizing {
  opacity: 1 !important;
  background: var(--color-primary);
  transform: scaleX(1.5);
  box-shadow: var(--shadow-md);
}
.table-header-resizable .column-resize-handle.is-resizing::before {
  opacity: 1;
  background: var(--white);
}
.table-header-resizable:hover .column-resize-handle {
  opacity: 0.8;
}
@media (pointer: coarse) {
  .table-header-resizable .column-resize-handle {
    width: 8px;
    right: -4px;
  }
}

.table-column-sticky {
  position: sticky;
  z-index: var(--z-sticky, 15);
  background: var(--color-surface);
  transition: all var(--transition-normal);
}
.table-column-sticky-left {
  left: var(--sticky-left-position, 0);
  border-right: var(--border-1) solid var(--color-border);
}
.table-column-sticky-left-show-shadow {
  box-shadow: 2px 0 4px -2px rgba(var(--shadow-color), 0.1), 2px 0 8px -4px rgba(var(--shadow-color), 0.05);
}
.table-column-sticky-left-has-scroll-shadow {
  box-shadow: 4px 0 8px -2px rgba(var(--shadow-color), 0.15), 4px 0 16px -4px rgba(var(--shadow-color), 0.08);
}
.table-column-sticky-right {
  right: var(--sticky-right-position, 0);
  border-left: var(--border-1) solid var(--color-border);
}
.table-column-sticky-right-show-shadow {
  box-shadow: -2px 0 4px -2px rgba(var(--shadow-color), 0.1), -2px 0 8px -4px rgba(var(--shadow-color), 0.05);
}
.table-column-sticky-right-has-scroll-shadow {
  box-shadow: -4px 0 8px -2px rgba(var(--shadow-color), 0.15), -4px 0 16px -4px rgba(var(--shadow-color), 0.08);
}
.table-column-sticky-header-sticky {
  top: 0;
  background: var(--color-surface);
  backdrop-filter: blur(8px);
}
.table-column-sticky-header-sticky::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-border);
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.table-column-sticky-header-sticky-has-scroll-shadow::after {
  opacity: 1;
}

.table-header-reorderable {
  cursor: move;
  transition: var(--transition-normal);
  position: relative;
}
.table-header-reorderable:hover {
  background: var(--state-hover-bg);
}
.table-header-reorderable:hover::before {
  content: "⋮⋮";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: var(--color-text-secondary);
  letter-spacing: -2px;
  opacity: 0.6;
}
.table-header-reorderable.dragging {
  opacity: var(--opacity-70);
  transform: rotate(2deg) scale(1.02);
  z-index: var(--z-modal);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-sm);
}
.table-header-reorderable.drag-over {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-light), var(--shadow-md);
}
.table-header-reorderable.drag-over::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: var(--color-primary);
  opacity: 0.1;
  border-radius: var(--radius-sm);
  pointer-events: none;
}
.table-header-reorderable.drop-left::before, .table-header-reorderable.drop-right::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-primary);
  z-index: var(--z-content);
  animation: pulse-drop 1s ease-in-out infinite;
}
.table-header-reorderable.drop-left::before {
  left: -1px;
}
.table-header-reorderable.drop-right::after {
  right: -1px;
}

.column-resize-indicator {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-primary);
  z-index: var(--z-max);
  pointer-events: none;
  box-shadow: 0 0 4px var(--color-primary-medium), 0 0 8px var(--color-primary-light);
  opacity: 0.9;
}
.column-resize-indicator::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -2px;
  width: 6px;
  height: 8px;
  background: var(--color-primary);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-sm);
}
.column-resize-indicator::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: -2px;
  width: 6px;
  height: 8px;
  background: var(--color-primary);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-sm);
}

.column-resize-preview {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--color-primary-light);
  border: 1px dashed var(--color-primary);
  pointer-events: none;
  z-index: var(--z-above);
  opacity: 0.7;
  transition: all var(--transition-fast);
}

@media (pointer: coarse) {
  .column-resize-handle {
    width: 8px;
    right: -4px;
  }
  .column-resize-handle::before {
    width: 3px;
    height: 20px;
  }
  .table-header-reorderable:hover::before {
    font-size: 12px;
    left: 6px;
  }
}
@media (max-width: 768px) {
  .table-column-sticky-left.show-shadow {
    box-shadow: 2px 0 6px -2px rgba(var(--shadow-color), 0.12), 2px 0 12px -4px rgba(var(--shadow-color), 0.06);
  }
  .table-column-sticky-right.show-shadow {
    box-shadow: -2px 0 6px -2px rgba(var(--shadow-color), 0.12), -2px 0 12px -4px rgba(var(--shadow-color), 0.06);
  }
  .column-resize-handle {
    width: 6px;
    right: -3px;
  }
  .table-header-reorderable {
    cursor: default;
  }
  .table-header-reorderable:hover::before {
    display: none;
  }
}
@media (prefers-contrast: high) {
  .table-column-sticky-left {
    border-right-color: var(--color-text);
    border-right-width: 2px;
  }
  .table-column-sticky-right {
    border-left-color: var(--color-text);
    border-left-width: 2px;
  }
  .table-column-sticky-show-shadow {
    box-shadow: none;
    border-color: var(--color-text) !important;
  }
  .column-resize-handle {
    background: var(--color-text);
    opacity: var(--opacity-40);
  }
  .column-resize-handle::before {
    background: var(--color-surface);
    opacity: 1;
  }
  .column-resize-handle:hover {
    opacity: var(--opacity-80);
  }
  .column-resize-handle.is-resizing {
    opacity: 1;
  }
  .column-resize-indicator {
    background: var(--color-text);
    box-shadow: none;
  }
  .column-resize-indicator::before, .column-resize-indicator::after {
    background: var(--color-text);
    box-shadow: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .column-resize-handle,
  .table-header-reorderable,
  .table-column-sticky,
  .column-resize-preview {
    transition: none;
  }
  .column-drag-preview,
  .table-header-reorderable.dragging {
    animation: none;
    transform: none;
  }
}
.grid-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.grid-container.disabled {
  opacity: 0.6;
  pointer-events: none;
}
.grid-container.fixed-height {
  height: var(--grid-height);
}
.grid-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.grid-header-content {
  flex: 1;
  min-width: 0;
}
.grid-header-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.grid-subtitle {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.grid-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-elevated);
  gap: var(--space-3);
}
.grid-toolbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}
.grid-toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.grid-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  min-width: 240px;
}
.grid-search:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-light);
}
.grid-search-icon {
  color: var(--color-text-muted);
  font-size: 20px;
}
.grid-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-text);
  font-size: var(--text-sm);
}
.grid-search-input::placeholder {
  color: var(--color-text-muted);
}
.grid-search-input:disabled {
  cursor: not-allowed;
}
.grid-filters {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.grid-filter-panel {
  padding: var(--space-4);
  background: var(--color-surface-elevated);
  border-bottom: 1px solid var(--color-border);
}
.grid-content-container {
  flex: 1;
  overflow: visible;
  padding: var(--space-4);
  background: var(--color-background);
  min-height: 300px;
  position: relative;
}
.grid-content-container:not([style*=height]) {
  height: auto;
}
.grid-content-container.virtualized {
  overflow-y: auto;
  overflow-x: hidden;
}
.grid-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  gap: var(--space-3);
  min-height: 300px;
}
.grid-loading p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  text-align: center;
  min-height: 300px;
}
.empty-state-icon {
  font-size: 64px;
  color: var(--color-text-muted);
  opacity: 0.3;
  margin-bottom: var(--space-4);
}
.empty-state-description {
  color: var(--color-text-muted);
  font-size: var(--text-base);
}

.rgrid {
  --rgrid-gap: var(--space-4);
  display: grid;
  gap: var(--rgrid-gap);
  width: 100%;
  align-items: stretch;
  min-height: 200px;
  will-change: transform, opacity;
  contain: layout style;
  grid-template-columns: repeat(var(--grid-columns-xs, 1), 1fr);
}
.rgrid > * {
  will-change: transform;
  backface-visibility: hidden;
}
@media (min-width: 640px) {
  .rgrid {
    grid-template-columns: repeat(var(--grid-columns-sm, 2), 1fr);
  }
}
@media (min-width: 768px) {
  .rgrid {
    grid-template-columns: repeat(var(--grid-columns-md, 3), 1fr);
  }
}
@media (min-width: 1024px) {
  .rgrid {
    grid-template-columns: repeat(var(--grid-columns-lg, 4), 1fr);
  }
}
@media (min-width: 1280px) {
  .rgrid {
    grid-template-columns: repeat(var(--grid-columns-xl, 6), 1fr);
  }
}
.rgrid-cards > * {
  min-height: 150px;
  height: 100%;
}
.rgrid-cards .card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.rgrid-list {
  grid-template-columns: 1fr !important;
}
.rgrid-gallery {
  grid-auto-flow: row dense;
}
.rgrid-gallery .card {
  overflow: hidden;
}
.rgrid-gallery .card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform var(--duration-normal) var(--ease-out);
}
.rgrid-gallery .card img:hover {
  transform: scale(1.05);
}
.rgrid-masonry {
  grid-template-rows: masonry;
  grid-auto-flow: column;
}
.rgrid-tiles {
  grid-auto-rows: minmax(200px, auto);
  align-items: stretch;
}
.rgrid-tiles .rtile {
  height: 100%;
  min-height: 200px;
  display: flex;
  flex-direction: column;
}
.rgrid-tiles .rtile-media {
  flex-shrink: 0;
  height: 150px;
  padding-bottom: 0;
}
.rgrid-tiles .rtile-image {
  object-fit: contain;
  background: var(--color-surface-elevated);
}
.rgrid-tiles .rtile-content {
  padding: var(--space-3);
  flex: 1;
}
.rgrid-compact {
  --rgrid-gap: var(--space-2);
  font-size: var(--text-sm);
}
.rgrid-dense {
  --rgrid-gap: var(--space-3);
}
.rgrid-spacious {
  --rgrid-gap: var(--space-6);
}
@media (max-width: 639px) {
  .rgrid-xs-list {
    grid-template-columns: 1fr;
  }
  .rgrid-xs-cards {
    --rgrid-columns: 1;
  }
}
@media (min-width: 640px) {
  .rgrid-sm-list {
    grid-template-columns: 1fr;
  }
  .rgrid-sm-cards {
    --rgrid-columns: 2;
  }
}
@media (min-width: 768px) {
  .rgrid-md-list {
    grid-template-columns: 1fr;
  }
  .rgrid-md-cards {
    --rgrid-columns: 3;
  }
}
@media (min-width: 1024px) {
  .rgrid-lg-cards {
    --rgrid-columns: 4;
  }
}
@media (min-width: 1280px) {
  .rgrid-xl-cards {
    --rgrid-columns: 6;
  }
}
.rgrid-toolbar {
  padding: var(--space-4) 0;
  margin-bottom: var(--space-4);
}
.rgrid-toolbar-title {
  flex: 1;
}
.rgrid-toolbar-actions {
  gap: var(--space-2);
}
.rgrid-title {
  margin: 0 0 var(--space-1) 0;
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}
.rgrid-subtitle {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.rgrid-quick-search {
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.rgrid-quick-search:hover {
  background: var(--color-surface-elevated);
  border-color: var(--color-border-hover);
}
.rgrid-filter-btn {
  font-size: var(--text-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-weight: var(--font-medium);
  text-align: center;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
  position: relative;
  outline: none;
  user-select: none;
  font-size: var(--text-sm);
  line-height: 1.4;
  text-decoration: none;
  min-height: calc(var(--base-unit) * var(--φ) * var(--φ));
  min-width: calc(var(--base-unit) * var(--φ) * var(--φ));
  padding: var(--space-2) var(--space-4);
}
@media (min-width: 768px) {
  .rgrid-filter-btn {
    min-height: calc(var(--base-unit) * var(--φ) * 1.5);
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-3);
  }
}
.rgrid-filter-btn *, .rgrid-filter-btn i, .rgrid-filter-btn span {
  color: inherit;
}
.rgrid-filter-btn [class*=icon],
.rgrid-filter-btn [class*=material],
.rgrid-filter-btn [class*=fa],
.rgrid-filter-btn [class*=feather],
.rgrid-filter-btn .icon {
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
}
.rgrid-filter-btn span {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  line-height: 1.5;
}
@media (hover: none) and (pointer: coarse) {
  .rgrid-filter-btn {
    min-height: var(--touch-target-lg);
    min-width: var(--touch-target-lg);
    font-size: var(--text-base);
    padding: var(--space-3) var(--space-4);
  }
  .rgrid-filter-btn:hover {
    transform: none;
  }
}
.rgrid-filter-btn:disabled, .rgrid-filter-btn[disabled] {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.rgrid-filter-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus);
  outline-offset: 2px;
}
.rgrid-filter-btn {
  background: var(--color-secondary);
  color: var(--color-on-secondary);
  border-color: transparent;
}
.rgrid-filter-btn:hover {
  background: var(--color-secondary-hover);
}
.rgrid-filter-btn:active {
  background: var(--color-secondary-active);
}
.rgrid-empty {
  grid-column: 1/-1;
  padding: var(--space-12) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
}
.rgrid-empty-icon {
  font-size: 48px;
  margin-bottom: var(--space-4);
  opacity: 0.5;
}
.rgrid-not-implemented {
  grid-column: 1/-1;
  padding: var(--space-4);
  background: var(--color-warning-light);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-md);
  color: var(--color-warning-dark);
  font-size: var(--text-sm);
  text-align: center;
}
.rgrid-list-item {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-out);
}
.rgrid-list-item:hover {
  background: var(--color-surface-elevated);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

@media print {
  .rgrid {
    grid-template-columns: 1fr !important;
    --rgrid-columns: 1;
    gap: var(--space-2);
  }
  .rgrid-toolbar {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rgrid * {
    transition: none !important;
    animation: none !important;
  }
}
@media (prefers-contrast: high) {
  .rgrid-list-item,
  .rgrid .card {
    border-width: 2px;
  }
}
.rimage {
  display: block;
  max-width: 100%;
  height: auto;
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}
.rimage-container {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 100%;
}
.rimage-container-density-compact {
  --rimage-padding: var(--spacing-xs);
}
.rimage-container-density-normal {
  --rimage-padding: var(--spacing-sm);
}
.rimage-container-density-comfortable {
  --rimage-padding: var(--spacing-md);
}
.rimage-container.full-width {
  display: block;
  width: 100%;
}
.rimage-container.full-width .rimage {
  width: 100%;
  height: 100%;
}
.rimage-container.has-aspect-ratio .rimage {
  width: 100%;
  height: auto;
  object-fit: var(--rimage-object-fit, cover);
}
.rimage-container-loading .rimage {
  opacity: 0;
  transition: opacity var(--transition-normal);
}
.rimage-container-loading .rimage.rimage-loaded {
  opacity: 1;
}
.rimage-container-error .rimage {
  filter: grayscale(1) opacity(0.5);
}
.rimage-container-clickable {
  cursor: pointer;
}
.rimage-container-clickable:hover .rimage {
  transform: scale(1.02);
  transition: transform var(--transition-normal);
}
.rimage-container-clickable:hover .rimage-overlay {
  opacity: 1;
}
.rimage-container-clickable:active .rimage {
  transform: scale(0.98);
}
.rimage-container-overlay:hover .rimage-overlay {
  opacity: 1;
}
.rimage.rimage-fit-cover {
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.rimage.rimage-fit-contain {
  object-fit: contain;
  height: 100%;
  width: 100%;
}
.rimage.rimage-fit-fill {
  object-fit: fill;
  height: 100%;
  width: 100%;
}
.rimage.rimage-fit-scaledown {
  object-fit: scale-down;
  height: 100%;
  width: 100%;
}
.rimage.rimage-fit-none {
  object-fit: none;
  height: 100%;
  width: 100%;
}
.rimage.rimage-fit-inherit {
  object-fit: inherit;
  height: 100%;
  width: 100%;
}
.rimage-loading {
  opacity: 0;
  filter: blur(5px);
}
.rimage-loaded {
  opacity: 1;
  filter: blur(0);
  animation: fadeIn 0.3s ease-out;
}
.rimage-error {
  opacity: 0.5;
  filter: grayscale(1);
}
.rimage-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
  z-index: 1;
}
.rimage-overlay-position-top {
  align-items: flex-start;
  padding-top: var(--spacing-md);
}
.rimage-overlay-position-bottom {
  align-items: flex-end;
  padding-bottom: var(--spacing-md);
}
.rimage-overlay .overlay-text {
  color: white;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  text-align: center;
  padding: var(--spacing-sm) var(--spacing-md);
}
.rimage-container-variant-circle {
  border-radius: 50%;
  overflow: hidden;
}
.rimage-container-variant-circle .rimage {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rimage-container-variant-circle .rimage-skeleton {
  border-radius: 50%;
}
.rimage-container-variant-rounded {
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.rimage-container-variant-rounded .rimage {
  border-radius: var(--radius-lg);
  width: 100%;
  height: 100%;
}
.rimage-container-variant-rounded .rimage-skeleton {
  border-radius: var(--radius-lg);
}
.rimage-container-variant-square {
  border-radius: 0;
  overflow: hidden;
}
.rimage-container-variant-square .rimage {
  border-radius: 0;
  width: 100%;
  height: 100%;
}
.rimage-container-variant-thumbnail {
  padding: var(--spacing-xs);
  background: var(--surface-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.rimage-container-variant-thumbnail .rimage {
  border-radius: var(--radius-sm);
  width: 100%;
  height: 100%;
}
.rimage-container-variant-thumbnail:hover {
  box-shadow: var(--shadow-md);
}
.rimage-skeleton {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 200px;
  background: linear-gradient(90deg, var(--skeleton-base) 0%, var(--skeleton-highlight) 50%, var(--skeleton-base) 100%);
  background-size: 200% 100%;
  animation: skeleton-wave 1.5s ease-in-out infinite;
}
.rimage-skeleton-circle {
  border-radius: 50%;
}
.rimage-skeleton-rounded {
  border-radius: var(--radius-lg);
}
.rimage-skeleton-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  text-align: center;
}
.rimage-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 200px;
  background: var(--surface-secondary);
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-md);
}
.rimage-placeholder-aspect-ratio {
  height: auto;
}
.rimage-placeholder-full-width {
  width: 100%;
}
.rimage-placeholder-circle {
  border-radius: 50%;
}
.rimage-placeholder-rounded {
  border-radius: var(--radius-lg);
}
.rimage-placeholder-text {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  text-align: center;
}

[data-theme=dark] .rimage-container-error .rimage {
  filter: grayscale(1) opacity(0.3);
}
[data-theme=dark] .rimage-overlay {
  background: rgba(0, 0, 0, 0.7);
}
[data-theme=dark] .rimage-container-variant-thumbnail {
  background: var(--surface-secondary);
  border-color: var(--border-color-dark);
}
[data-theme=dark] .rimage-skeleton {
  background: linear-gradient(90deg, var(--skeleton-base-dark) 0%, var(--skeleton-highlight-dark) 50%, var(--skeleton-base-dark) 100%);
}
[data-theme=dark] .rimage-placeholder {
  background: var(--surface-tertiary);
  border-color: var(--border-color-dark);
}

@media (max-width: 768px) {
  .rimage-container-clickable:hover .rimage {
    transform: none;
  }
  .rimage-container-clickable:active .rimage {
    transform: scale(0.98);
  }
}
@media print {
  .rimage {
    filter: none;
    opacity: 1;
  }
  .rimage-skeleton, .rimage-placeholder, .rimage-overlay {
    display: none;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes skeleton-wave {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
.filter-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-md);
}
.filter-container.density-compact {
  gap: var(--space-1);
}
.filter-container.density-compact {
  padding: var(--space-3);
  gap: var(--space-2);
  font-size: var(--text-base);
}
.filter-container.density-normal {
  gap: var(--space-2);
}
.filter-container.density-normal {
  padding: var(--space-3);
  gap: var(--space-2);
  font-size: var(--text-base);
}
.filter-container.density-spacious {
  gap: var(--space-4);
}
.filter-container.density-spacious {
  padding: var(--space-3);
  gap: var(--space-2);
  font-size: var(--text-base);
}

.filter {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.filter-search {
  width: 100%;
}
.filter-search-input {
  width: 100%;
}
.filter-search-input input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  transition: all var(--transition-fast);
}
.filter-search-input input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--state-focus-ring);
}
.filter-quick-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.filter-actions-row {
  gap: var(--space-2);
  width: 100%;
}
.filter-date-range .flex {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.filter-date-range .flex .flex-1 {
  flex: 1;
}
.filter-conditions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.filter-header {
  padding: var(--space-3) var(--space-4);
  background: var(--surface-elevated);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.filter-header-title {
  font-weight: var(--font-semibold);
  color: var(--color-text);
}
.filter-header-title .icon {
  font-size: 20px;
  color: var(--color-primary);
}
.filter-header-actions {
  gap: var(--space-2);
  padding-top: var(--space-2);
}
.filter-search {
  position: relative;
}
.filter-search-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  padding-left: var(--space-10);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
  transition: all var(--transition-fast);
}
.filter-search-input::placeholder {
  color: var(--color-text-muted);
}
.filter-search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--surface-elevated);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.filter-search-icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}
.filter-search-icon .icon {
  font-size: 20px;
}
.filter-search-clear {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
}
.filter-search-clear {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  transition: var(--transition-normal);
}
.filter-search-clear:hover {
  background: var(--color-surface);
  color: var(--color-text);
}
.filter-search-clear:focus {
  outline: none;
  outline-offset: 2px;
}
.filter-search-clear i {
  font-size: var(--text-base);
}
.filter-quick {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.filter-quick-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.filter-quick-chip {
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
}
.filter-quick-chip:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: inherit;
}
.filter-quick-chip:hover {
  transform: scale(1.05);
  filter: brightness(0.95) saturate(1.1);
}
.filter-quick-chip:active {
  transform: scale(0.97);
  filter: brightness(0.9);
}
.filter-quick-chip:disabled, .filter-quick-chip[disabled] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.filter-quick-chip:disabled:hover, .filter-quick-chip:disabled:active, .filter-quick-chip:disabled:focus-visible, .filter-quick-chip[disabled]:hover, .filter-quick-chip[disabled]:active, .filter-quick-chip[disabled]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.filter-quick-chip[aria-disabled=true] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.filter-quick-chip[aria-disabled=true]:hover, .filter-quick-chip[aria-disabled=true]:active, .filter-quick-chip[aria-disabled=true]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.filter-quick-chip-loading {
  position: relative;
  min-height: 3rem;
  contain: layout style;
  isolation: isolate;
  will-change: contents;
  z-index: var(--z-base);
  transition: opacity var(--duration-normal) var(--ease-out);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.filter-quick-chip-loading > *:not(.loading-text):not(.loading-spinner) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.filter-quick-chip-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1em;
  height: 1em;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-normal) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
  z-index: var(--z-base);
}
.filter-quick-chip-active {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.filter-quick-chip-active:hover {
  background: var(--color-primary-light);
}
.filter-quick-chip .icon {
  font-size: 16px;
}
.filter-quick-chip-count {
  padding: 0 var(--space-1);
  background: var(--color-primary-light);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}
.filter-advanced-panel, .filter-advanced {
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  position: relative;
}
.filter-advanced-panel-header, .filter-advanced-header {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.filter-advanced-panel-header-title, .filter-advanced-header-title {
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  color: var(--color-text);
}
.filter-advanced-panel-header-title .icon, .filter-advanced-header-title .icon {
  font-size: 18px;
  color: var(--color-primary);
}
.filter-advanced-panel-header-toggle, .filter-advanced-header-toggle {
  width: 24px;
  height: 24px;
  color: var(--color-text-muted);
}
.filter-advanced-panel-header-toggle, .filter-advanced-header-toggle {
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
}
.filter-advanced-panel-header-toggle:focus-visible, .filter-advanced-header-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: inherit;
}
.filter-advanced-panel-header-toggle:hover, .filter-advanced-header-toggle:hover {
  transform: scale(1.1);
  filter: brightness(1.1);
}
.filter-advanced-panel-header-toggle:active, .filter-advanced-header-toggle:active {
  transform: scale(0.9);
  filter: brightness(0.9);
}
.filter-advanced-panel-header-toggle:disabled, .filter-advanced-panel-header-toggle[disabled], .filter-advanced-header-toggle:disabled, .filter-advanced-header-toggle[disabled] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.filter-advanced-panel-header-toggle:disabled:hover, .filter-advanced-panel-header-toggle:disabled:active, .filter-advanced-panel-header-toggle:disabled:focus-visible, .filter-advanced-panel-header-toggle[disabled]:hover, .filter-advanced-panel-header-toggle[disabled]:active, .filter-advanced-panel-header-toggle[disabled]:focus-visible, .filter-advanced-header-toggle:disabled:hover, .filter-advanced-header-toggle:disabled:active, .filter-advanced-header-toggle:disabled:focus-visible, .filter-advanced-header-toggle[disabled]:hover, .filter-advanced-header-toggle[disabled]:active, .filter-advanced-header-toggle[disabled]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.filter-advanced-panel-header-toggle[aria-disabled=true], .filter-advanced-header-toggle[aria-disabled=true] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.filter-advanced-panel-header-toggle[aria-disabled=true]:hover, .filter-advanced-panel-header-toggle[aria-disabled=true]:active, .filter-advanced-panel-header-toggle[aria-disabled=true]:focus-visible, .filter-advanced-header-toggle[aria-disabled=true]:hover, .filter-advanced-header-toggle[aria-disabled=true]:active, .filter-advanced-header-toggle[aria-disabled=true]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.filter-advanced-panel-header-toggle-loading, .filter-advanced-header-toggle-loading {
  position: relative;
  min-height: 3rem;
  contain: layout style;
  isolation: isolate;
  will-change: contents;
  z-index: var(--z-base);
  transition: opacity var(--duration-normal) var(--ease-out);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.filter-advanced-panel-header-toggle-loading > *:not(.loading-text):not(.loading-spinner), .filter-advanced-header-toggle-loading > *:not(.loading-text):not(.loading-spinner) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.filter-advanced-panel-header-toggle-loading::after, .filter-advanced-header-toggle-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1em;
  height: 1em;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-normal) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
  z-index: var(--z-base);
}
.filter-advanced-panel-header-toggle .icon, .filter-advanced-header-toggle .icon {
  font-size: 18px;
}
.filter-advanced-panel-content, .filter-advanced-content {
  display: grid;
  gap: var(--space-3);
}
.filter-advanced-panel-content-collapsed, .filter-advanced-content-collapsed {
  display: none;
}
.filter-advanced-panel-group, .filter-advanced-group {
  display: grid;
  gap: var(--space-2);
}
.filter-advanced-panel-group-label, .filter-advanced-group-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
}
.filter-condition {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(150px, 0.8fr) minmax(250px, 1.5fr) 40px;
  gap: var(--space-2);
  align-items: end;
  padding: var(--space-2);
  background: var(--surface-elevated);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}
.filter-condition-field {
  flex: 1;
}
.filter-condition-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.filter-condition-operator {
  padding: var(--space-1) var(--space-2);
  background: var(--surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text);
}
.filter-condition-value {
  flex: 2;
  display: flex;
  flex-direction: column;
}
.filter-condition-value input,
.filter-condition-value select {
  width: 100%;
}
.filter-condition-remove {
  align-self: end;
  margin-bottom: 2px;
  padding: var(--space-1);
  background: transparent;
  border: none;
  color: var(--error);
  border-radius: var(--radius-sm);
}
.filter-condition-remove {
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
}
.filter-condition-remove:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: inherit;
}
.filter-condition-remove:hover {
  transform: scale(1.1);
  filter: brightness(1.1);
}
.filter-condition-remove:active {
  transform: scale(0.9);
  filter: brightness(0.9);
}
.filter-condition-remove:disabled, .filter-condition-remove[disabled] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.filter-condition-remove:disabled:hover, .filter-condition-remove:disabled:active, .filter-condition-remove:disabled:focus-visible, .filter-condition-remove[disabled]:hover, .filter-condition-remove[disabled]:active, .filter-condition-remove[disabled]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.filter-condition-remove[aria-disabled=true] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.filter-condition-remove[aria-disabled=true]:hover, .filter-condition-remove[aria-disabled=true]:active, .filter-condition-remove[aria-disabled=true]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.filter-condition-remove-loading {
  position: relative;
  min-height: 3rem;
  contain: layout style;
  isolation: isolate;
  will-change: contents;
  z-index: var(--z-base);
  transition: opacity var(--duration-normal) var(--ease-out);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.filter-condition-remove-loading > *:not(.loading-text):not(.loading-spinner) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.filter-condition-remove-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1em;
  height: 1em;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-normal) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
  z-index: var(--z-base);
}
.filter-condition-remove:hover {
  background: var(--error-10);
}
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.filter-chips-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-medium);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--color-primary);
}
.filter-chips-item-field {
  font-weight: var(--font-semibold);
}
.filter-chips-item-operator {
  opacity: 0.7;
}
.filter-chips-item-value {
  font-weight: var(--font-medium);
}
.filter-chips-item-remove {
  width: 16px;
  height: 16px;
  margin-left: var(--space-1);
  background: var(--color-primary-light);
  border-radius: var(--radius-full);
}
.filter-chips-item-remove {
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
}
.filter-chips-item-remove:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: inherit;
}
.filter-chips-item-remove:hover {
  transform: scale(1.1);
  filter: brightness(1.1);
}
.filter-chips-item-remove:active {
  transform: scale(0.9);
  filter: brightness(0.9);
}
.filter-chips-item-remove:disabled, .filter-chips-item-remove[disabled] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.filter-chips-item-remove:disabled:hover, .filter-chips-item-remove:disabled:active, .filter-chips-item-remove:disabled:focus-visible, .filter-chips-item-remove[disabled]:hover, .filter-chips-item-remove[disabled]:active, .filter-chips-item-remove[disabled]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.filter-chips-item-remove[aria-disabled=true] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.filter-chips-item-remove[aria-disabled=true]:hover, .filter-chips-item-remove[aria-disabled=true]:active, .filter-chips-item-remove[aria-disabled=true]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.filter-chips-item-remove-loading {
  position: relative;
  min-height: 3rem;
  contain: layout style;
  isolation: isolate;
  will-change: contents;
  z-index: var(--z-base);
  transition: opacity var(--duration-normal) var(--ease-out);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.filter-chips-item-remove-loading > *:not(.loading-text):not(.loading-spinner) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.filter-chips-item-remove-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1em;
  height: 1em;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-normal) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
  z-index: var(--z-base);
}
.filter-chips-item-remove:hover {
  background: var(--color-primary-medium);
}
.filter-chips-item-remove .icon {
  font-size: 12px;
}
.filter-fade-out {
  animation: fadeOut 150ms ease-out forwards;
}
.filter-slide-up {
  animation: slideUpSmooth 200ms ease-out;
}
.filter-entering {
  animation: fadeInUp 200ms ease-out;
  animation-delay: calc(var(--item-index, 0) * 30ms);
}
.filter-highlight {
  animation: glow-pulse 300ms ease-out;
}
.filter .dropdown-entering {
  animation: dropdownSlideIn 200ms ease-out;
}
.filter .dropdown-exiting {
  animation: fadeSlideOut 150ms ease-in forwards;
}
.filter-column-menu {
  position: relative;
  display: inline-block;
}
.filter-column-menu-mode .filter {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
.filter-column-toggle {
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
}
.filter-column-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: inherit;
}
.filter-column-toggle:hover {
  transform: scale(1.1);
  filter: brightness(1.1);
}
.filter-column-toggle:active {
  transform: scale(0.9);
  filter: brightness(0.9);
}
.filter-column-toggle:disabled, .filter-column-toggle[disabled] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.filter-column-toggle:disabled:hover, .filter-column-toggle:disabled:active, .filter-column-toggle:disabled:focus-visible, .filter-column-toggle[disabled]:hover, .filter-column-toggle[disabled]:active, .filter-column-toggle[disabled]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.filter-column-toggle[aria-disabled=true] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.filter-column-toggle[aria-disabled=true]:hover, .filter-column-toggle[aria-disabled=true]:active, .filter-column-toggle[aria-disabled=true]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.filter-column-toggle-loading {
  position: relative;
  min-height: 3rem;
  contain: layout style;
  isolation: isolate;
  will-change: contents;
  z-index: var(--z-base);
  transition: opacity var(--duration-normal) var(--ease-out);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.filter-column-toggle-loading > *:not(.loading-text):not(.loading-spinner) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.filter-column-toggle-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1em;
  height: 1em;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-normal) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
  z-index: var(--z-base);
}
.filter-column-toggle.active .icon, .filter-column-toggle:hover .icon {
  color: var(--color-primary);
}
.filter-column-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 280px;
  background: var(--surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--dropdown-z-index, var(--z-dropdown, 1000));
  margin-top: var(--space-1);
}
.filter-column-dropdown-content {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.filter-column-values-header {
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-2);
}
.filter-column-values-list {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.filter-column-value-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-sm);
}
.filter-column-value-item {
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
}
.filter-column-value-item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: inherit;
  outline-width: 2px;
  outline-offset: 3px;
}
.filter-column-value-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px var(--shadow-overlay-medium);
  filter: brightness(1.01);
}
.filter-column-value-item:active {
  transform: scale(0.99) translateY(0);
  box-shadow: 0 2px 4px var(--shadow-overlay-subtle);
}
.filter-column-value-item:disabled, .filter-column-value-item[disabled] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.filter-column-value-item:disabled:hover, .filter-column-value-item:disabled:active, .filter-column-value-item:disabled:focus-visible, .filter-column-value-item[disabled]:hover, .filter-column-value-item[disabled]:active, .filter-column-value-item[disabled]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.filter-column-value-item[aria-disabled=true] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.filter-column-value-item[aria-disabled=true]:hover, .filter-column-value-item[aria-disabled=true]:active, .filter-column-value-item[aria-disabled=true]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.filter-column-value-item-loading {
  position: relative;
  min-height: 8rem;
  contain: layout style;
  isolation: isolate;
  will-change: contents;
  z-index: var(--z-base);
  transition: opacity var(--duration-normal) var(--ease-out);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.filter-column-value-item-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-loading);
  border-radius: inherit;
  animation: fadeIn var(--duration-fast) var(--ease-out);
}
.filter-column-value-item-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1em;
  height: 1em;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-normal) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
  z-index: var(--z-loading-spinner);
}
.filter-column-value-item:hover {
  background: var(--surface-hover);
}
.filter-column-value-item input[type=checkbox] {
  margin: 0;
  cursor: pointer;
}
.filter-column-value-item span {
  flex: 1;
  user-select: none;
}
.filter-column-more {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-1);
  padding-top: var(--space-2);
}
.filter-column-actions {
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
}
.filter-virtual {
  position: relative;
  overflow: auto;
}
.filter-virtual-viewport {
  position: relative;
  min-height: 100%;
}
.filter-virtual-spacer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}
.filter-virtual-item {
  position: absolute;
  width: 100%;
}
.filter-templates-list {
  display: grid;
  gap: var(--space-2);
  max-height: 200px;
  overflow-y: auto;
}
.filter-templates-item {
  padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.filter-templates-item {
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
}
.filter-templates-item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: inherit;
  outline-width: 2px;
  outline-offset: 3px;
}
.filter-templates-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px var(--shadow-overlay-medium);
  filter: brightness(1.01);
}
.filter-templates-item:active {
  transform: scale(0.99) translateY(0);
  box-shadow: 0 2px 4px var(--shadow-overlay-subtle);
}
.filter-templates-item:disabled, .filter-templates-item[disabled] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.filter-templates-item:disabled:hover, .filter-templates-item:disabled:active, .filter-templates-item:disabled:focus-visible, .filter-templates-item[disabled]:hover, .filter-templates-item[disabled]:active, .filter-templates-item[disabled]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.filter-templates-item[aria-disabled=true] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.filter-templates-item[aria-disabled=true]:hover, .filter-templates-item[aria-disabled=true]:active, .filter-templates-item[aria-disabled=true]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.filter-templates-item-loading {
  position: relative;
  min-height: 8rem;
  contain: layout style;
  isolation: isolate;
  will-change: contents;
  z-index: var(--z-base);
  transition: opacity var(--duration-normal) var(--ease-out);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.filter-templates-item-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-loading);
  border-radius: inherit;
  animation: fadeIn var(--duration-fast) var(--ease-out);
}
.filter-templates-item-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1em;
  height: 1em;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-normal) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
  z-index: var(--z-loading-spinner);
}
.filter-templates-item:hover {
  background: var(--surface-hover);
  border-color: var(--color-primary-medium);
}
.filter-templates-item-name {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
}
.filter-templates-item-date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.filter-templates-item-actions {
  display: flex;
  gap: var(--space-1);
}
.filter-loading {
  position: relative;
  min-height: 3rem;
  contain: layout style;
  isolation: isolate;
  will-change: contents;
  z-index: var(--z-base);
  transition: opacity var(--duration-normal) var(--ease-out);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.filter-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: var(--z-loading);
  border-radius: inherit;
  animation: fadeIn var(--duration-fast) var(--ease-out);
}
.filter-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1em;
  height: 1em;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-normal) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
  z-index: var(--z-loading-spinner);
}
.filter-empty {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
}
.filter-empty-icon {
  font-size: 48px;
  color: var(--color-primary-medium);
  margin-bottom: var(--space-2);
}
.filter-empty-text {
  font-size: var(--text-sm);
}
.filter-viewport {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: var(--z-modal);
  position: absolute;
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
  transform: translateY(-4px);
  background: var(--glass-bg-medium);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-1);
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
.filter-viewport::-webkit-scrollbar {
  width: 4px;
}
.filter-viewport::-webkit-scrollbar-track {
  background: transparent;
}
.filter-viewport::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
}
.filter-viewport-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  animation: dropdownSlideIn var(--duration-normal) var(--ease-out);
}
.filter-viewport-closed {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
}
.filter-content {
  background: var(--color-surface-elevated);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(var(--blur-md));
  width: 100%;
  min-width: 180px;
  max-width: 360px;
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-1) 0;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) var(--color-surface);
}
.filter-content::-webkit-scrollbar {
  width: 6px;
}
.filter-content::-webkit-scrollbar-track {
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  margin: var(--space-1) 0;
}
.filter-content::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
  transition: all var(--duration-fast);
}
.filter-content::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
  transform: scaleY(1.1);
}
.filter-trigger {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  background: var(--color-surface-elevated);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-weight: var(--font-medium);
  text-align: left;
  position: relative;
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  transition: var(--transition-fast);
  position: relative;
  outline: none;
}
.filter-trigger:hover {
  background: color-mix(in srgb, var(--color-surface-elevated) 80%, transparent);
}
.filter-trigger:active {
  background: color-mix(in srgb, var(--color-surface-elevated) 60%, transparent);
}
.filter-trigger:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
@media (hover: none) and (pointer: coarse) {
  .filter-trigger {
    min-height: var(--touch-target-lg);
    min-width: var(--touch-target-lg);
  }
  .filter-trigger:hover {
    transform: none;
  }
}
.filter-trigger {
  padding: var(--space-3);
  gap: var(--space-2);
  font-size: var(--text-base);
}
.filter-trigger::after {
  content: "";
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 3px solid currentColor;
  transition: transform var(--duration-fast) var(--ease-out);
  opacity: 0.6;
}
.filter-trigger:focus-visible {
  outline: none;
  outline-offset: var(--border-1);
  border-color: var(--color-primary);
  box-shadow: none !important;
}
.filter-trigger:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}
.filter-trigger:disabled::after {
  opacity: 0.3;
}
.filter-item {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  border-radius: var(--radius-sm);
  width: 100%;
  text-align: left;
  background: transparent;
  border: var(--border-1) solid transparent;
  color: var(--color-text-muted);
  font-weight: var(--font-medium);
  user-select: none;
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  transition: var(--transition-fast);
  position: relative;
  outline: none;
}
.filter-item .icon,
.filter-item i {
  color: currentColor;
  flex-shrink: 0;
  font-size: var(--icon-base);
  transition: var(--transition-colors);
}
.filter-item:hover {
  background: color-mix(in srgb, var(--color-surface-elevated) 80%, transparent);
}
.filter-item:active {
  background: color-mix(in srgb, var(--color-surface-elevated) 60%, transparent);
}
.filter-item:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
@media (hover: none) and (pointer: coarse) {
  .filter-item {
    min-height: var(--touch-target-lg);
    min-width: var(--touch-target-lg);
  }
  .filter-item:hover {
    transform: none;
  }
}
.filter-item {
  padding: var(--space-3);
  gap: var(--space-2);
  font-size: var(--text-base);
}
.filter-item {
  margin: 0 var(--space-1);
  font-size: var(--text-sm);
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  cursor: pointer;
  position: relative;
  width: auto;
  max-width: calc(100% - var(--space-1) * 2);
  box-sizing: border-box;
  min-width: 0;
}
.filter-item:focus-visible {
  outline: none;
  outline-offset: var(--border-2);
}
.filter-item:hover, .filter-item-highlighted {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--color-text);
}
.filter-item:active {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  transform: scale(0.98);
}
.filter-item.active {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
  font-weight: var(--font-semibold);
}
.filter-item.active:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  transform: none;
}
.filter-item.disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.filter-item.loading {
  cursor: wait;
  opacity: var(--opacity-50);
}
.filter-item .icon,
.filter-item i {
  color: currentColor;
  flex-shrink: 0;
  font-size: var(--icon-sm);
  opacity: 0.8;
  transition: var(--transition-colors);
}
.filter-item .filter-text,
.filter-item .filter-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
}
.filter-item .filter-avatar {
  flex-shrink: 0;
}
.filter-dropdown-open .filter-trigger {
  border-color: var(--color-primary);
}
.filter-dropdown-open .filter-trigger::after {
  transform: translateY(-50%) rotate(180deg);
}

@media (max-width: 767px) {
  .filter-condition {
    grid-template-columns: 1fr;
  }
  .filter-condition-field, .filter-condition-operator, .filter-condition-value {
    width: 100%;
  }
  .filter-advanced-content {
    grid-template-columns: 1fr;
  }
}
@media (prefers-color-scheme: dark) {
  .filter-search-input {
    background: var(--surface-dark);
  }
  .filter-search-input:focus {
    background: var(--surface-elevated-dark);
  }
  .filter-quick-chip {
    background: var(--surface-dark);
  }
  .filter-quick-chip-active {
    background: var(--color-primary-light);
  }
}
@media (prefers-contrast: high) {
  .filter-search-input, .filter-condition {
    border-width: 2px;
  }
  .filter-chips-item {
    border-width: 2px;
    font-weight: var(--font-semibold);
  }
}
@media (prefers-reduced-motion: reduce) {
  .filter-fade-out, .filter-slide-up, .filter-entering, .filter-highlight,
  .filter .dropdown-entering,
  .filter .dropdown-exiting {
    animation: none !important;
  }
}
.filter-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}
.filter-bar-search {
  flex: 1;
  min-width: 200px;
  max-width: 400px;
}
.filter-bar-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.filter-bar-custom {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  margin-left: auto;
}
@media (max-width: 639px) {
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .filter-bar-search {
    max-width: 100%;
  }
  .filter-bar-custom {
    margin-left: 0;
    width: 100%;
  }
}

.chip {
  background: var(--color-surface-elevated);
  color: var(--color-text);
  border: var(--border-1) solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  min-height: var(--space-6);
  gap: var(--space-1);
}
.chip {
  border-radius: var(--radius-full);
}
.chip-sharp {
  border-radius: 0;
}
.chip-subtle {
  border-radius: calc(var(--radius-full) * 0.618);
}
.chip-soft {
  border-radius: calc(var(--radius-full) * 1.618);
}
.chip-round {
  border-radius: calc(var(--radius-full) * 2.618);
}
.chip-pill {
  border-radius: 9999px;
}
.chip-density-compact {
  padding: var(--space-1) var(--space-1-5);
  min-height: var(--space-3);
  gap: var(--space-0-5);
  font-size: var(--text-xs);
}
.chip-density-compact .chip-icon {
  font-size: var(--text-xs);
}
.chip-density-compact .chip-close {
  width: var(--space-2);
  height: var(--space-2);
}
.chip-density-compact .chip-close i {
  font-size: var(--text-xs);
}
.chip-density-dense {
  padding: var(--space-1-5) var(--space-2);
  min-height: var(--space-5);
  gap: var(--space-0-5);
  font-size: var(--text-sm);
}
.chip-density-dense .chip-icon {
  font-size: var(--text-sm);
}
.chip-density-dense .chip-close {
  width: var(--space-3);
  height: var(--space-3);
}
.chip-density-dense .chip-close i {
  font-size: var(--text-sm);
}
.chip-density-normal {
  padding: var(--space-2) var(--space-3);
  min-height: var(--space-6);
  gap: var(--space-1);
  font-size: var(--text-sm);
}
.chip-density-normal .chip-icon {
  font-size: var(--text-base);
}
.chip-density-normal .chip-close {
  width: var(--space-4);
  height: var(--space-4);
}
.chip-density-normal .chip-close i {
  font-size: var(--text-xs);
}
.chip-density-spacious {
  padding: var(--space-3) var(--space-5);
  min-height: var(--space-9);
  gap: var(--space-1-5);
  font-size: var(--text-base);
}
.chip-density-spacious .chip-icon {
  font-size: var(--text-lg);
}
.chip-density-spacious .chip-close {
  width: var(--space-6);
  height: var(--space-6);
}
.chip-density-spacious .chip-close i {
  font-size: var(--text-xl);
}
.chip-small {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  min-height: var(--space-5);
}
.chip-small .chip-icon {
  font-size: var(--icon-xs);
}
.chip-small .chip-close {
  width: var(--space-3);
  height: var(--space-3);
}
.chip-small .chip-close i {
  font-size: calc(var(--icon-xs) * 0.85);
}
.chip-large {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-base);
  min-height: var(--space-8);
}
.chip-large .chip-icon {
  font-size: var(--icon-base);
}
.chip-large .chip-close {
  width: var(--space-5);
  height: var(--space-5);
}
.chip-large .chip-close i {
  font-size: var(--icon-sm);
}
.chip-badge {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: var(--font-bold);
}
.chip-badge {
  border-radius: var(--radius-full);
}
.chip-badge-sharp {
  border-radius: 0;
}
.chip-badge-subtle {
  border-radius: calc(var(--radius-full) * 0.618);
}
.chip-badge-soft {
  border-radius: calc(var(--radius-full) * 1.618);
}
.chip-badge-round {
  border-radius: calc(var(--radius-full) * 2.618);
}
.chip-badge-pill {
  border-radius: 9999px;
}
.chip-status {
  font-weight: var(--font-medium);
  text-transform: none;
}
.chip-status {
  border-radius: var(--radius-sm);
}
.chip-status-sharp {
  border-radius: 0;
}
.chip-status-subtle {
  border-radius: calc(var(--radius-sm) * 0.618);
}
.chip-status-soft {
  border-radius: calc(var(--radius-sm) * 1.618);
}
.chip-status-round {
  border-radius: calc(var(--radius-sm) * 2.618);
}
.chip-status-pill {
  border-radius: 9999px;
}
.chip-rounded {
  aspect-ratio: 1;
  padding: var(--space-1);
  min-width: var(--space-6);
  min-height: var(--space-6);
}
.chip-rounded {
  border-radius: var(--radius-full);
}
.chip-rounded-sharp {
  border-radius: 0;
}
.chip-rounded-subtle {
  border-radius: calc(var(--radius-full) * 0.618);
}
.chip-rounded-soft {
  border-radius: calc(var(--radius-full) * 1.618);
}
.chip-rounded-round {
  border-radius: calc(var(--radius-full) * 2.618);
}
.chip-rounded-pill {
  border-radius: 9999px;
}
.chip-minimal {
  background: transparent;
  border: none;
  padding: 0;
  min-height: auto;
  gap: var(--space-0-5);
}
.chip-primary {
  background-color: var(--color-primary);
  background-image: var(--gradient-primary);
  color: var(--color-text-inverse);
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all var(--duration-fast) var(--ease-out);
}
.chip-primary:hover {
  filter: brightness(0.9) saturate(1.1);
  transform: translateY(-0.618px);
}
.chip-primary:active {
  transform: scale(0.938);
}
.chip-primary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.chip-secondary {
  background-color: var(--color-secondary);
  background-image: var(--gradient-secondary);
  color: var(--color-text-inverse);
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all var(--duration-fast) var(--ease-out);
}
.chip-secondary:hover {
  filter: brightness(0.9) saturate(1.1);
  transform: translateY(-0.618px);
}
.chip-secondary:active {
  transform: scale(0.938);
}
.chip-secondary:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}
.chip-success {
  background-color: var(--color-success);
  background-image: var(--gradient-success);
  color: var(--color-text-inverse);
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all var(--duration-fast) var(--ease-out);
}
.chip-success:hover {
  filter: brightness(0.9) saturate(1.1);
  transform: translateY(-0.618px);
}
.chip-success:active {
  transform: scale(0.938);
}
.chip-success:focus-visible {
  outline: 2px solid var(--color-success);
  outline-offset: 2px;
}
.chip-warning {
  background-color: var(--color-warning);
  background-image: var(--gradient-warning);
  color: var(--color-text-inverse);
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all var(--duration-fast) var(--ease-out);
}
.chip-warning:hover {
  filter: brightness(0.9) saturate(1.1);
  transform: translateY(-0.618px);
}
.chip-warning:active {
  transform: scale(0.938);
}
.chip-warning:focus-visible {
  outline: 2px solid var(--color-warning);
  outline-offset: 2px;
}
.chip-error {
  background-color: var(--color-error);
  background-image: var(--gradient-error);
  color: var(--color-text-inverse);
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all var(--duration-fast) var(--ease-out);
}
.chip-error:hover {
  filter: brightness(0.9) saturate(1.1);
  transform: translateY(-0.618px);
}
.chip-error:active {
  transform: scale(0.938);
}
.chip-error:focus-visible {
  outline: 2px solid var(--color-error);
  outline-offset: 2px;
}
.chip-info {
  background-color: var(--color-info);
  background-image: var(--gradient-info);
  color: var(--color-text-inverse);
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all var(--duration-fast) var(--ease-out);
}
.chip-info:hover {
  filter: brightness(0.9) saturate(1.1);
  transform: translateY(-0.618px);
}
.chip-info:active {
  transform: scale(0.938);
}
.chip-info:focus-visible {
  outline: 2px solid var(--color-info);
  outline-offset: 2px;
}
.chip-active {
  background: var(--color-success);
  color: var(--color-text-inverse);
  border: none;
}
.chip-active:hover {
  filter: brightness(0.9);
}
.chip-active .chip-icon {
  color: var(--color-text-inverse);
}
.chip-inactive {
  background: var(--color-error);
  color: var(--color-text-inverse);
  border: none;
}
.chip-inactive:hover {
  filter: brightness(0.9);
}
.chip-inactive .chip-icon {
  color: var(--color-text-inverse);
}
.chip-leave, .chip-on-leave {
  background: var(--color-warning);
  color: var(--color-text-inverse);
  border: none;
}
.chip-leave:hover, .chip-on-leave:hover {
  filter: brightness(0.9);
}
.chip-leave .chip-icon, .chip-on-leave .chip-icon {
  color: var(--color-text-inverse);
}
.chip-pending {
  background: var(--color-surface-elevated);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.chip-pending .chip-icon {
  color: var(--color-text-muted);
}
.chip-processing {
  background: var(--color-info);
  color: var(--color-text-inverse);
  border: none;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.chip-processing .chip-icon {
  color: var(--color-text-inverse);
}
.chip-success {
  background: var(--color-success);
  color: var(--color-text-inverse);
  border: none;
}
.chip-success:hover {
  filter: brightness(0.9);
}
.chip-success .chip-icon {
  color: var(--color-text-inverse);
}
.chip-compact {
  padding: var(--space-0-5) var(--space-1);
  font-size: var(--text-2xs);
  gap: var(--space-0-5);
}
.chip-dense {
  padding: var(--space-1) var(--space-1-5);
  font-size: var(--text-xs);
  gap: var(--space-0-5);
}
.chip-spacious {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-lg);
  gap: var(--space-3);
}
.chip-clickable {
  cursor: pointer;
}
.chip-clickable {
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
}
.chip-clickable:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: inherit;
}
.chip-clickable:hover {
  filter: brightness(1.02);
  transform: translateY(-0.5px);
}
.chip-clickable:active {
  transform: scale(0.98);
  filter: brightness(0.95);
}
.chip-clickable:disabled, .chip-clickable[disabled] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.chip-clickable:disabled:hover, .chip-clickable:disabled:active, .chip-clickable:disabled:focus-visible, .chip-clickable[disabled]:hover, .chip-clickable[disabled]:active, .chip-clickable[disabled]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.chip-clickable[aria-disabled=true] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.chip-clickable[aria-disabled=true]:hover, .chip-clickable[aria-disabled=true]:active, .chip-clickable[aria-disabled=true]:focus-visible {
  transform: none;
  filter: grayscale(0.3);
  box-shadow: none;
  outline: none;
}
.chip-clickable-loading {
  position: relative;
  min-height: 3rem;
  contain: layout style;
  isolation: isolate;
  will-change: contents;
  z-index: var(--z-base);
  transition: opacity var(--duration-normal) var(--ease-out);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.chip-clickable-loading > *:not(.loading-text):not(.loading-spinner) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.chip-clickable-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1em;
  height: 1em;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text);
  animation: spin var(--duration-normal) linear infinite;
  will-change: transform;
  transform-origin: center;
  display: block;
  flex-shrink: 0;
  z-index: var(--z-base);
}
.chip-selected {
  border-width: 2px;
}
.chip-selected {
  box-shadow: var(--shadow-md);
}
.chip-selected-flat {
  box-shadow: none;
}
.chip-selected-subtle {
  box-shadow: var(--shadow-sm);
}
.chip-selected-elevated {
  box-shadow: var(--shadow-lg);
}
.chip-selected-floating {
  box-shadow: var(--shadow-xl);
}
.chip-selected-dramatic {
  box-shadow: var(--shadow-2xl);
}
.chip-disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  color: inherit;
  flex-shrink: 0;
  width: auto;
  height: auto;
  font-size: inherit;
  line-height: 1;
  margin-right: var(--space-0-5);
}
.chip-icon:last-child {
  margin-right: 0;
}
.chip-text {
  line-height: 1;
  flex-shrink: 0;
}
.chip-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: var(--space-0-5);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  border: none;
  padding: 0;
}
.chip-close {
  width: var(--space-4);
}
.chip-close-xs {
  width: calc(var(--space-4) * 0.382);
}
.chip-close-sm {
  width: calc(var(--space-4) * 0.618);
}
.chip-close-lg {
  width: calc(var(--space-4) * 1.618);
}
.chip-close-xl {
  width: calc(var(--space-4) * 2.618);
}
.chip-close {
  height: var(--space-4);
}
.chip-close-xs {
  height: calc(var(--space-4) * 0.382);
}
.chip-close-sm {
  height: calc(var(--space-4) * 0.618);
}
.chip-close-lg {
  height: calc(var(--space-4) * 1.618);
}
.chip-close-xl {
  height: calc(var(--space-4) * 2.618);
}
.chip-close {
  border-radius: var(--radius-full);
}
.chip-close-sharp {
  border-radius: 0;
}
.chip-close-subtle {
  border-radius: calc(var(--radius-full) * 0.618);
}
.chip-close-soft {
  border-radius: calc(var(--radius-full) * 1.618);
}
.chip-close-round {
  border-radius: calc(var(--radius-full) * 2.618);
}
.chip-close-pill {
  border-radius: 9999px;
}
.chip-close:hover {
  background: var(--color-surface);
}
.chip-close i {
  font-size: var(--icon-xs);
  line-height: 1;
}
.chip-closeable {
  position: relative;
}
.chip-muted {
  opacity: 0.7;
  font-weight: var(--font-normal);
}
.chip-bold {
  font-weight: var(--font-bold);
  border-width: 2px;
}
.chip-subtle {
  background: color-mix(in srgb, var(--color-surface-elevated) 92%, transparent);
  color: color-mix(in srgb, currentColor 55%, var(--color-text));
  border-style: dashed;
  border-color: color-mix(in srgb, var(--color-border) 70%, transparent);
  box-shadow: none;
  filter: saturate(0.85);
}
.chip-primary.chip-subtle {
  background: color-mix(in srgb, var(--color-primary) 18%, var(--color-surface));
  color: color-mix(in srgb, var(--color-primary) 65%, var(--color-text));
  border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
  background-image: none;
}
.chip-secondary.chip-subtle {
  background: color-mix(in srgb, var(--color-secondary) 18%, var(--color-surface));
  color: color-mix(in srgb, var(--color-secondary) 65%, var(--color-text));
  border-color: color-mix(in srgb, var(--color-secondary) 28%, var(--color-border));
  background-image: none;
}
.chip-success.chip-subtle {
  background: color-mix(in srgb, var(--color-success) 18%, var(--color-surface));
  color: color-mix(in srgb, var(--color-success) 65%, var(--color-text));
  border-color: color-mix(in srgb, var(--color-success) 28%, var(--color-border));
  background-image: none;
}
.chip-warning.chip-subtle {
  background: color-mix(in srgb, var(--color-warning) 18%, var(--color-surface));
  color: color-mix(in srgb, var(--color-warning) 65%, var(--color-text));
  border-color: color-mix(in srgb, var(--color-warning) 28%, var(--color-border));
  background-image: none;
}
.chip-error.chip-subtle {
  background: color-mix(in srgb, var(--color-error) 18%, var(--color-surface));
  color: color-mix(in srgb, var(--color-error) 65%, var(--color-text));
  border-color: color-mix(in srgb, var(--color-error) 28%, var(--color-border));
  background-image: none;
}
.chip-info.chip-subtle {
  background: color-mix(in srgb, var(--color-info) 18%, var(--color-surface));
  color: color-mix(in srgb, var(--color-info) 65%, var(--color-text));
  border-color: color-mix(in srgb, var(--color-info) 28%, var(--color-border));
  background-image: none;
}
.chip-glass {
  backdrop-filter: blur(8px);
  background: rgba(var(--color-surface-rgb), 0.7);
  border: 1px solid rgba(var(--color-border-rgb), 0.3);
}
.chip-neumorphism {
  background: var(--color-surface);
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1), inset -2px -2px 5px rgba(255, 255, 255, 0.7);
}
.chip-elevated {
  box-shadow: var(--shadow-lg);
}
.chip-elevated-flat {
  box-shadow: none;
}
.chip-elevated-subtle {
  box-shadow: var(--shadow-sm);
}
.chip-elevated-elevated {
  box-shadow: var(--shadow-lg);
}
.chip-elevated-floating {
  box-shadow: var(--shadow-xl);
}
.chip-elevated-dramatic {
  box-shadow: var(--shadow-2xl);
}
.chip-flat {
  box-shadow: none;
  border: none;
}
.chip-neon {
  border: 2px solid currentColor;
  box-shadow: 0 0 5px currentColor, 0 0 10px currentColor, inset 0 0 5px currentColor;
}
.chip-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  background: rgba(var(--color-surface-rgb), 0.85);
  border: 1px solid rgba(var(--color-border-rgb), 0.5);
}

.icon {
  vertical-align: middle;
}
.icon-xs {
  font-size: var(--icon-xs);
  width: var(--icon-xs);
  height: var(--icon-xs);
}
.icon-sm {
  font-size: var(--icon-sm);
  width: var(--icon-sm);
  height: var(--icon-sm);
}
.icon-base {
  font-size: var(--icon-base);
  width: var(--icon-base);
  height: var(--icon-base);
}
.icon-lg {
  font-size: var(--icon-lg);
  width: var(--icon-lg);
  height: var(--icon-lg);
}
.icon-xl {
  font-size: var(--icon-xl);
  width: var(--icon-xl);
  height: var(--icon-xl);
}
.icon-2xl {
  font-size: var(--icon-2xl);
  width: var(--icon-2xl);
  height: var(--icon-2xl);
}
.icon-3xl {
  font-size: var(--icon-3xl);
  width: var(--icon-3xl);
  height: var(--icon-3xl);
}
.icon-4xl {
  font-size: var(--icon-4xl);
  width: var(--icon-4xl);
  height: var(--icon-4xl);
}
.icon-5xl {
  font-size: var(--icon-5xl);
  width: var(--icon-5xl);
  height: var(--icon-5xl);
}
.icon-primary {
  color: var(--color-primary);
}
.icon-secondary {
  color: var(--color-text-muted);
}
.icon-tertiary {
  color: var(--color-text-subtle);
}
.icon-success {
  color: var(--color-success);
}
.icon-warning {
  color: var(--color-warning);
}
.icon-error {
  color: var(--color-error);
}
.icon-danger {
  color: var(--color-error);
}
.icon-info {
  color: var(--color-info);
}
.icon-muted {
  color: var(--color-text-muted);
}
.icon-inverse {
  color: var(--color-text-inverse);
}
.icon-interactive:hover {
  transform: scale(calc(1 + var(--φ-inv) * 0.1));
}
.icon-interactive:active {
  transform: scale(var(--φ-inv));
}
.icon-status-pending {
  color: var(--color-warning);
  animation: pulse 2s ease-in-out infinite;
}
.icon-status-active {
  color: var(--color-success);
}
.icon-status-inactive {
  color: var(--color-text-muted);
}
.icon-circle {
  border-radius: var(--radius-full);
}
.icon-circle-sm {
  padding: var(--space-1);
}
.icon-circle-md {
  padding: var(--space-2);
}
.icon-circle-lg {
  padding: var(--space-3);
}
.icon-muted {
  opacity: 0.7;
}
.icon-button:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.icon-button:focus-visible {
  outline: var(--state-focus-ring);
  outline-offset: 2px;
}
.icon-button-loading {
  pointer-events: none;
}
.icon-loading {
  animation: spin calc(var(--duration-normal) * var(--φ) * 6) linear infinite;
}
.icon-disabled {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
}
.icon-focus {
  outline: var(--state-focus-ring);
  outline-offset: 2px;
}
.icon-inherit {
  color: inherit;
}
.icon-current {
  color: currentColor;
}
.icon-container-xl {
  width: var(--space-12);
  height: var(--space-12);
}
.icon[aria-hidden=true] {
  pointer-events: none;
}
.icon[aria-label]:focus-visible, .icon[role=img]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
@media (prefers-reduced-motion: reduce) {
  .icon-loading, .icon-interactive {
    animation: none;
    transition: none;
    transform: none;
  }
  .icon-loading:hover, .icon-loading:active, .icon-interactive:hover, .icon-interactive:active {
    transform: none;
  }
}
.icon-interactive, .icon-button {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
}

.icon-material,
.material-symbols-rounded {
  margin: 0;
  position: relative;
  z-index: var(--z-base);
}
.icon-material.thin,
.material-symbols-rounded.thin {
  font-variation-settings: "FILL" 0, "wght" 100, "GRAD" 0, "opsz" 24;
}
.icon-material.light,
.material-symbols-rounded.light {
  font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 24;
}
.icon-material.regular,
.material-symbols-rounded.regular {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}
.icon-material.medium,
.material-symbols-rounded.medium {
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}
.icon-material.bold,
.material-symbols-rounded.bold {
  font-variation-settings: "FILL" 0, "wght" 700, "GRAD" 0, "opsz" 24;
}
.icon-material.outlined,
.material-symbols-rounded.outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}
.icon-material.filled,
.material-symbols-rounded.filled {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}
.icon-material.low-emphasis,
.material-symbols-rounded.low-emphasis {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" -25, "opsz" 24;
}
.icon-material.high-emphasis,
.material-symbols-rounded.high-emphasis {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 200, "opsz" 24;
}
[data-theme=dark] .icon-material,
[data-theme=dark] .material-symbols-rounded {
  opacity: 0.95;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 25, "opsz" 24;
}
@media (prefers-contrast: high) {
  .icon-material,
  .material-symbols-rounded {
    font-variation-settings: "FILL" 1, "wght" 700, "GRAD" 200, "opsz" 24;
  }
}

.icon-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
  position: relative;
}
.icon-text-xs {
  gap: var(--space-1);
}
.icon-text-sm {
  gap: var(--space-1-5);
}
.icon-text-base {
  gap: var(--space-2-5);
}
.icon-text-lg {
  gap: var(--space-4);
}
.icon-text-xl {
  gap: var(--space-6);
}
.icon-text .icon,
.icon-text i {
  flex-shrink: 0;
  position: relative;
  z-index: var(--z-base);
}
.icon-text span, .icon-text .text {
  position: relative;
  z-index: var(--z-base);
  line-height: 1.2;
}

.divider, .hr {
  display: flex;
  align-items: center;
  position: relative;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}
.divider::before, .hr::before, .divider::after, .hr::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border-dark);
  transition: background var(--duration-normal) var(--ease-out);
}
.divider .divider-content, .hr .divider-content {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  background: transparent;
  white-space: nowrap;
  position: relative;
  z-index: var(--z-base);
  width: auto;
  flex: 0 0 auto;
}
.divider .divider-content .icon, .hr .divider-content .icon,
.divider .divider-content i,
.hr .divider-content i {
  color: currentColor;
  flex-shrink: 0;
}
.divider .divider-content-stacked, .hr .divider-content-stacked {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  text-align: center;
}
.divider .divider-content-stacked .divider-text-group, .hr .divider-content-stacked .divider-text-group {
  align-items: center;
  text-align: center;
  width: 100%;
}
.divider .divider-content-stacked i.icon, .hr .divider-content-stacked i.icon {
  margin-bottom: var(--space-1);
}
.divider .divider-content .divider-text-group, .hr .divider-content .divider-text-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-0);
  line-height: 1.2;
}
.divider .divider-content .divider-subtitle, .hr .divider-content .divider-subtitle {
  color: var(--color-text-muted);
  opacity: 0.8;
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
  margin-top: var(--space-0-5);
}
.divider .divider-content i.icon, .hr .divider-content i.icon {
  line-height: 1;
  vertical-align: middle;
  flex-shrink: 0;
}
.divider .divider-content i.icon.icon-xs, .hr .divider-content i.icon.icon-xs {
  font-size: var(--text-xs);
  width: 0.75rem;
  height: 0.75rem;
}
.divider .divider-content i.icon.icon-sm, .hr .divider-content i.icon.icon-sm {
  font-size: var(--text-sm);
  width: 1rem;
  height: 1rem;
}
.divider .divider-content i.icon.icon-base, .hr .divider-content i.icon.icon-base {
  font-size: var(--text-base);
  width: 1.25rem;
  height: 1.25rem;
}
.divider .divider-content i.icon.icon-lg, .hr .divider-content i.icon.icon-lg {
  font-size: var(--text-lg);
  width: 1.5rem;
  height: 1.5rem;
}
.divider .divider-content i.icon.icon-xl, .hr .divider-content i.icon.icon-xl {
  font-size: var(--text-xl);
  width: 2rem;
  height: 2rem;
}
.divider .divider-content i.icon.icon-2xl, .hr .divider-content i.icon.icon-2xl {
  font-size: var(--text-2xl);
  width: 2.5rem;
  height: 2.5rem;
}
.divider .divider-content .font-semibold, .hr .divider-content .font-semibold {
  font-weight: var(--font-semibold);
}
.divider .divider-content .text-muted, .hr .divider-content .text-muted {
  color: var(--color-text-muted);
  opacity: 0.8;
}
.divider-dashed::before, .divider-dashed::after {
  background: transparent;
  height: 0;
  border-top: 2px dashed var(--color-border-dark);
}
.divider-dotted::before, .divider-dotted::after {
  background: transparent;
  height: 0;
  border-top: 2px dotted var(--color-border-dark);
}
.divider-primary .divider-content {
  color: var(--color-primary);
}
.divider-primary.divider-solid::before, .divider-primary.divider-solid::after, .divider-primary::before, .divider-primary::after {
  background: var(--color-primary);
}
.divider-primary.divider-dashed::before, .divider-primary.divider-dashed::after, .divider-primary.divider-dotted::before, .divider-primary.divider-dotted::after {
  background: transparent;
}
.divider-dashed-primary::before, .divider-dashed-primary::after {
  background: transparent;
  height: 0;
  border-top: 2px dashed var(--color-primary);
}
.divider-dotted-primary::before, .divider-dotted-primary::after {
  background: transparent;
  height: 0;
  border-top: 2px dotted var(--color-primary);
}
.divider-success .divider-content {
  color: var(--color-success);
}
.divider-success.divider-solid::before, .divider-success.divider-solid::after, .divider-success::before, .divider-success::after {
  background: var(--color-success);
}
.divider-success.divider-dashed::before, .divider-success.divider-dashed::after, .divider-success.divider-dotted::before, .divider-success.divider-dotted::after {
  background: transparent;
}
.divider-dashed-success::before, .divider-dashed-success::after {
  background: transparent;
  height: 0;
  border-top: 2px dashed var(--color-success);
}
.divider-dotted-success::before, .divider-dotted-success::after {
  background: transparent;
  height: 0;
  border-top: 2px dotted var(--color-success);
}
.divider-warning .divider-content {
  color: var(--color-warning);
}
.divider-warning.divider-solid::before, .divider-warning.divider-solid::after, .divider-warning::before, .divider-warning::after {
  background: var(--color-warning);
}
.divider-warning.divider-dashed::before, .divider-warning.divider-dashed::after, .divider-warning.divider-dotted::before, .divider-warning.divider-dotted::after {
  background: transparent;
}
.divider-dashed-warning::before, .divider-dashed-warning::after {
  background: transparent;
  height: 0;
  border-top: 2px dashed var(--color-warning);
}
.divider-dotted-warning::before, .divider-dotted-warning::after {
  background: transparent;
  height: 0;
  border-top: 2px dotted var(--color-warning);
}
.divider-error .divider-content {
  color: var(--color-error);
}
.divider-error.divider-solid::before, .divider-error.divider-solid::after, .divider-error::before, .divider-error::after {
  background: var(--color-error);
}
.divider-error.divider-dashed::before, .divider-error.divider-dashed::after, .divider-error.divider-dotted::before, .divider-error.divider-dotted::after {
  background: transparent;
}
.divider-dashed-error::before, .divider-dashed-error::after {
  background: transparent;
  height: 0;
  border-top: 2px dashed var(--color-error);
}
.divider-dotted-error::before, .divider-dotted-error::after {
  background: transparent;
  height: 0;
  border-top: 2px dotted var(--color-error);
}
.divider-info .divider-content {
  color: var(--color-info);
}
.divider-info.divider-solid::before, .divider-info.divider-solid::after, .divider-info::before, .divider-info::after {
  background: var(--color-info);
}
.divider-info.divider-dashed::before, .divider-info.divider-dashed::after, .divider-info.divider-dotted::before, .divider-info.divider-dotted::after {
  background: transparent;
}
.divider-dashed-info::before, .divider-dashed-info::after {
  background: transparent;
  height: 0;
  border-top: 2px dashed var(--color-info);
}
.divider-dotted-info::before, .divider-dotted-info::after {
  background: transparent;
  height: 0;
  border-top: 2px dotted var(--color-info);
}
.divider-vertical {
  display: inline-flex;
  flex-direction: column;
  height: 100%;
  min-height: var(--space-6);
  width: auto;
  margin: 0 var(--space-2);
  align-items: center;
  align-self: stretch;
}
.divider-vertical::before, .divider-vertical::after {
  width: var(--divider-width, 1px);
  height: var(--divider-height, auto);
  flex: 1;
  background: var(--color-border);
  border-left: var(--divider-border-left, none);
  border-top: var(--divider-border-top, none);
  min-height: var(--space-2);
}
.divider-vertical .divider-content {
  padding: var(--space-2) 0;
  writing-mode: vertical-lr;
  text-orientation: mixed;
  flex-shrink: 0;
}
.divider-vertical .divider-content .icon,
.divider-vertical .divider-content .icon-filled {
  writing-mode: initial;
  text-orientation: initial;
}
.divider-vertical-compact {
  height: var(--space-4);
  margin: 0 var(--space-1);
}
.divider-vertical-compact .divider-content {
  padding: var(--space-1) 0;
}
.divider-vertical-spacious {
  height: var(--space-8);
  margin: 0 var(--space-3);
}
.divider-vertical-spacious .divider-content {
  padding: var(--space-3) 0;
}
.divider-vertical-empty::before {
  flex: 1;
  margin: 0;
}
.divider-vertical-empty::after {
  display: none;
}
.divider-vertical.divider-dashed::before, .divider-vertical.divider-dashed::after {
  background: transparent;
  width: 0;
  border-top: none;
  border-left: 2px dashed var(--color-border-dark);
}
.divider-vertical.divider-dotted::before, .divider-vertical.divider-dotted::after {
  background: transparent;
  width: 0;
  border-top: none;
  border-left: 2px dotted var(--color-border-dark);
}
.divider-vertical-dashed-primary::before, .divider-vertical-dashed-primary::after {
  background: transparent;
  width: 0;
  border-top: none;
  border-left: 2px dashed var(--color-primary);
}
.divider-vertical-dotted-primary::before, .divider-vertical-dotted-primary::after {
  background: transparent;
  width: 0;
  border-top: none;
  border-left: 2px dotted var(--color-primary);
}
.divider-vertical-dashed-success::before, .divider-vertical-dashed-success::after {
  background: transparent;
  width: 0;
  border-top: none;
  border-left: 2px dashed var(--color-success);
}
.divider-vertical-dotted-success::before, .divider-vertical-dotted-success::after {
  background: transparent;
  width: 0;
  border-top: none;
  border-left: 2px dotted var(--color-success);
}
.divider-vertical-dashed-warning::before, .divider-vertical-dashed-warning::after {
  background: transparent;
  width: 0;
  border-top: none;
  border-left: 2px dashed var(--color-warning);
}
.divider-vertical-dotted-warning::before, .divider-vertical-dotted-warning::after {
  background: transparent;
  width: 0;
  border-top: none;
  border-left: 2px dotted var(--color-warning);
}
.divider-vertical-dashed-error::before, .divider-vertical-dashed-error::after {
  background: transparent;
  width: 0;
  border-top: none;
  border-left: 2px dashed var(--color-error);
}
.divider-vertical-dotted-error::before, .divider-vertical-dotted-error::after {
  background: transparent;
  width: 0;
  border-top: none;
  border-left: 2px dotted var(--color-error);
}
.divider-vertical-dashed-info::before, .divider-vertical-dashed-info::after {
  background: transparent;
  width: 0;
  border-top: none;
  border-left: 2px dashed var(--color-info);
}
.divider-vertical-dotted-info::before, .divider-vertical-dotted-info::after {
  background: transparent;
  width: 0;
  border-top: none;
  border-left: 2px dotted var(--color-info);
}
.divider-text-center::before, .divider-text-center::after {
  flex: 1;
}
.divider-text-center .divider-content {
  padding: 0 var(--space-4);
  flex-shrink: 0;
  text-align: center;
  align-items: center;
  justify-content: center;
}
.divider-text-center .divider-content .divider-text-group {
  align-items: center;
  text-align: center;
}
.divider-text-left::before {
  display: none;
}
.divider-text-left::after {
  flex: 1;
  margin-left: var(--space-4);
}
.divider-text-left .divider-content {
  padding-left: 0;
  padding-right: var(--space-4);
  flex-shrink: 0;
  flex-grow: 0;
}
.divider-text-right::before {
  flex: 1;
  margin-right: var(--space-4);
}
.divider-text-right::after {
  display: none;
}
.divider-text-right .divider-content {
  padding-right: 0;
  padding-left: var(--space-4);
  flex-shrink: 0;
  flex-grow: 0;
}
.divider-empty::before, .hr::before {
  margin: 0;
}
.divider-empty::after, .hr::after {
  display: none;
}
.divider-normal, .hr {
  margin: var(--space-4) 0;
}
.divider-compact {
  margin: var(--space-2) 0;
  font-size: var(--text-xs);
}
.divider-compact .divider-content {
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
  gap: var(--space-1);
}
.divider-compact .divider-content i.icon.icon-xs {
  font-size: calc(0.625rem * 0.8);
  width: calc(0.625rem * 0.8);
  height: calc(0.625rem * 0.8);
}
.divider-compact .divider-content i.icon.icon-sm {
  font-size: calc(0.75rem * 0.8);
  width: calc(0.75rem * 0.8);
  height: calc(0.75rem * 0.8);
}
.divider-compact .divider-content i.icon.icon-base {
  font-size: calc(0.875rem * 0.8);
  width: calc(0.875rem * 0.8);
  height: calc(0.875rem * 0.8);
}
.divider-compact .divider-content i.icon.icon-lg {
  font-size: calc(1rem * 0.8);
  width: calc(1rem * 0.8);
  height: calc(1rem * 0.8);
}
.divider-compact .divider-content i.icon.icon-xl {
  font-size: calc(1.25rem * 0.8);
  width: calc(1.25rem * 0.8);
  height: calc(1.25rem * 0.8);
}
.divider-compact .divider-content i.icon.icon-2xl {
  font-size: calc(1.5rem * 0.8);
  width: calc(1.5rem * 0.8);
  height: calc(1.5rem * 0.8);
}
.divider-spacious {
  margin: var(--space-8) 0;
  font-size: var(--text-base);
}
.divider-spacious .divider-content {
  padding: 0 var(--space-5);
  font-size: var(--text-base);
  gap: var(--space-3);
}
.divider-spacious .divider-content i.icon.icon-xs {
  font-size: calc(0.625rem * 1.6);
  width: calc(0.625rem * 1.6);
  height: calc(0.625rem * 1.6);
}
.divider-spacious .divider-content i.icon.icon-sm {
  font-size: calc(0.75rem * 1.6);
  width: calc(0.75rem * 1.6);
  height: calc(0.75rem * 1.6);
}
.divider-spacious .divider-content i.icon.icon-base {
  font-size: calc(0.875rem * 1.6);
  width: calc(0.875rem * 1.6);
  height: calc(0.875rem * 1.6);
}
.divider-spacious .divider-content i.icon.icon-lg {
  font-size: calc(1rem * 1.6);
  width: calc(1rem * 1.6);
  height: calc(1rem * 1.6);
}
.divider-spacious .divider-content i.icon.icon-xl {
  font-size: calc(1.25rem * 1.6);
  width: calc(1.25rem * 1.6);
  height: calc(1.25rem * 1.6);
}
.divider-spacious .divider-content i.icon.icon-2xl {
  font-size: calc(1.5rem * 1.6);
  width: calc(1.5rem * 1.6);
  height: calc(1.5rem * 1.6);
}
.divider-no-line::before, .divider-no-line::after {
  display: none;
}
.divider-no-line .divider-content {
  padding: 0;
}

.menu-list-divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-1) var(--space-3);
  border: none;
}

.alert {
  position: relative;
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-out);
}
.alert-icon {
  flex-shrink: 0;
  font-size: var(--text-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.alert-title {
  font-weight: var(--font-semibold);
  margin: 0;
  display: inline;
}
.alert-message, .alert-text {
  font-size: var(--text-sm);
  margin-top: var(--space-1);
  line-height: var(--leading-relaxed);
  color: inherit;
}
.alert-content-custom {
  margin-top: var(--space-2);
  line-height: var(--leading-relaxed);
}
.alert-actions {
  margin-top: var(--space-3);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.alert-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: var(--space-8);
  height: var(--space-8);
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  opacity: 0.7;
  z-index: var(--z-above);
  transition: all var(--duration-fast) var(--ease-out);
}
.alert-close-icon {
  font-size: var(--text-lg);
  line-height: 1;
}
.alert-close:hover {
  opacity: 1;
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.alert-close:active {
  transform: scale(0.95);
}
.alert-close:focus-visible {
  opacity: 1;
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.alert-sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}
.alert-sm .alert-icon {
  font-size: var(--text-base);
}
.alert-sm .alert-close {
  top: var(--space-2);
  right: var(--space-2);
  width: var(--space-6);
  height: var(--space-6);
}
.alert-sm .alert-close-icon {
  font-size: var(--text-base);
}
.alert-lg {
  padding: var(--space-6);
}
.alert-lg .alert-icon {
  font-size: var(--text-2xl);
}
.alert-lg .alert-title {
  font-size: var(--text-lg);
}
.alert-lg .alert-close {
  top: var(--space-4);
  right: var(--space-4);
  width: var(--space-10);
  height: var(--space-10);
}
.alert-lg .alert-close-icon {
  font-size: var(--text-xl);
}
.alert-dismissible {
  padding-right: var(--space-12);
}
.alert-dismissible.alert-sm {
  padding-right: var(--space-10);
}
.alert-dismissible.alert-lg {
  padding-right: var(--space-16);
}
.alert-dismissible .alert-close {
  display: flex;
}
.alert-animated {
  animation: fadeInUp var(--duration-fast) var(--ease-out);
}
.alert .alert-density-compact {
  padding: var(--space-1-5);
  gap: var(--space-1);
  font-size: var(--text-xs);
}
.alert .alert-density-compact .alert-close {
  top: var(--space-1);
  right: var(--space-1);
  padding: var(--space-0-5);
}
.alert .alert-density-compact .alert-icon {
  font-size: var(--text-sm);
}
.alert .alert-density-compact .alert-title {
  font-size: var(--text-xs);
  margin-bottom: var(--space-0-5);
}
.alert .alert-density-compact .alert-message,
.alert .alert-density-compact .alert-text {
  font-size: var(--text-xs);
  margin-top: var(--space-0-5);
}
.alert .alert-density-compact .alert-actions {
  margin-top: var(--space-1-5);
  gap: var(--space-1);
}
.alert .alert-density-dense {
  padding: var(--space-2);
  gap: var(--space-1-5);
  font-size: var(--text-sm);
}
.alert .alert-density-dense .alert-close {
  top: var(--space-1-5);
  right: var(--space-1-5);
  padding: var(--space-0-5);
}
.alert .alert-density-dense .alert-icon {
  font-size: var(--text-base);
}
.alert .alert-density-dense .alert-title {
  font-size: var(--text-sm);
  margin-bottom: var(--space-0-5);
}
.alert .alert-density-dense .alert-message,
.alert .alert-density-dense .alert-text {
  font-size: var(--text-sm);
  margin-top: var(--space-0-5);
}
.alert .alert-density-dense .alert-actions {
  margin-top: var(--space-2);
  gap: var(--space-1-5);
}
.alert .alert-density-normal {
  padding: var(--space-3);
  gap: var(--space-2);
  font-size: var(--text-base);
}
.alert .alert-density-normal .alert-close {
  top: var(--space-2);
  right: var(--space-2);
  padding: var(--space-1);
}
.alert .alert-density-normal .alert-icon {
  font-size: var(--text-lg);
}
.alert .alert-density-normal .alert-title {
  font-size: var(--text-base);
  margin-bottom: var(--space-1);
}
.alert .alert-density-normal .alert-message,
.alert .alert-density-normal .alert-text {
  font-size: var(--text-sm);
  margin-top: var(--space-1);
}
.alert .alert-density-normal .alert-actions {
  margin-top: var(--space-3);
  gap: var(--space-2);
}
.alert .alert-density-spacious {
  padding: var(--space-5);
  gap: var(--space-3);
  font-size: var(--text-lg);
}
.alert .alert-density-spacious .alert-close {
  top: var(--space-3);
  right: var(--space-3);
  padding: var(--space-1-5);
}
.alert .alert-density-spacious .alert-icon {
  font-size: var(--text-xl);
}
.alert .alert-density-spacious .alert-title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-1-5);
}
.alert .alert-density-spacious .alert-message,
.alert .alert-density-spacious .alert-text {
  font-size: var(--text-base);
  margin-top: var(--space-1-5);
}
.alert .alert-density-spacious .alert-actions {
  margin-top: var(--space-5);
  gap: var(--space-3);
}

.alert-info {
  background: radial-gradient(ellipse at top left, color-mix(in srgb, var(--color-info) 12%, transparent) 0%, transparent 50%), color-mix(in srgb, var(--color-info) 6%, var(--color-surface));
  color: var(--color-text);
  border-left: var(--border-4) solid var(--color-info);
}
.alert-info .alert-icon {
  color: var(--color-info);
}

.alert-success {
  background: radial-gradient(ellipse at top left, color-mix(in srgb, var(--color-success) 12%, transparent) 0%, transparent 50%), color-mix(in srgb, var(--color-success) 6%, var(--color-surface));
  color: var(--color-text);
  border-left: var(--border-4) solid var(--color-success);
}
.alert-success .alert-icon {
  color: var(--color-success);
}

.alert-warning {
  background: radial-gradient(ellipse at top left, color-mix(in srgb, var(--color-warning) 12%, transparent) 0%, transparent 50%), color-mix(in srgb, var(--color-warning) 6%, var(--color-surface));
  color: var(--color-text);
  border-left: var(--border-4) solid var(--color-warning);
}
.alert-warning .alert-icon {
  color: var(--color-warning);
}

.alert-error {
  background: radial-gradient(ellipse at top left, color-mix(in srgb, var(--color-error) 12%, transparent) 0%, transparent 50%), color-mix(in srgb, var(--color-error) 6%, var(--color-surface));
  color: var(--color-text);
  border-left: var(--border-4) solid var(--color-error);
}
.alert-error .alert-icon {
  color: var(--color-error);
}

.alert.bg-error, .alert.bg-success, .alert.bg-warning, .alert.bg-info {
  border-left-width: 0;
}
.alert.bg-error .alert-title,
.alert.bg-error .alert-message,
.alert.bg-error .alert-text,
.alert.bg-error .alert-content-custom, .alert.bg-success .alert-title,
.alert.bg-success .alert-message,
.alert.bg-success .alert-text,
.alert.bg-success .alert-content-custom, .alert.bg-warning .alert-title,
.alert.bg-warning .alert-message,
.alert.bg-warning .alert-text,
.alert.bg-warning .alert-content-custom, .alert.bg-info .alert-title,
.alert.bg-info .alert-message,
.alert.bg-info .alert-text,
.alert.bg-info .alert-content-custom {
  color: inherit;
}
.alert.bg-error .alert-icon, .alert.bg-success .alert-icon, .alert.bg-warning .alert-icon, .alert.bg-info .alert-icon {
  color: currentColor;
  opacity: 0.9;
}
.alert.bg-error .alert-close:hover, .alert.bg-success .alert-close:hover, .alert.bg-warning .alert-close:hover, .alert.bg-info .alert-close:hover {
  background: color-mix(in srgb, var(--color-text-inverse) 15%, transparent);
}

.alert-outline {
  background: transparent;
  border: var(--border-2) solid;
  border-left-width: var(--border-4);
}
.alert-outline.alert-info {
  color: var(--color-info);
  border-color: var(--color-info);
}
.alert-outline.alert-info .alert-icon {
  color: var(--color-info);
}
.alert-outline.alert-success {
  color: var(--color-success);
  border-color: var(--color-success);
}
.alert-outline.alert-success .alert-icon {
  color: var(--color-success);
}
.alert-outline.alert-warning {
  color: var(--color-warning);
  border-color: var(--color-warning);
}
.alert-outline.alert-warning .alert-icon {
  color: var(--color-warning);
}
.alert-outline.alert-error {
  color: var(--color-error);
  border-color: var(--color-error);
}
.alert-outline.alert-error .alert-icon {
  color: var(--color-error);
}

.banner {
  width: 100%;
  padding: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-top: 4px solid;
  background: var(--color-surface-elevated);
}
.banner-info {
  border-top-color: var(--color-info);
}
.banner-info .banner-icon {
  color: var(--color-info);
}
.banner-success {
  border-top-color: var(--color-success);
}
.banner-success .banner-icon {
  color: var(--color-success);
}
.banner-warning {
  border-top-color: var(--color-warning);
}
.banner-warning .banner-icon {
  color: var(--color-warning);
}
.banner-error {
  border-top-color: var(--color-error);
}
.banner-error .banner-icon {
  color: var(--color-error);
}
.banner-sticky {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  box-shadow: var(--shadow-md);
}
.banner-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.banner-content {
  flex: 1;
}
.banner-message {
  font-size: var(--text-sm);
  color: var(--color-text);
}
.banner-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.tabs {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  container-type: inline-size;
  container-name: tabs-container;
  contain: layout style paint;
  will-change: auto;
  min-height: 0;
  flex-shrink: 1;
}
.tabs::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--border-1);
  background: linear-gradient(90deg, transparent 0%, var(--color-primary) 50%, transparent 100%);
  opacity: var(--opacity-60);
  z-index: var(--z-base);
}
.tabs-nav {
  position: relative;
  display: flex;
  padding: var(--space-2) var(--space-3);
  backdrop-filter: var(--glass-medium-blur);
  flex-shrink: 0;
  max-width: 100%;
  overflow: hidden;
  min-height: 44px;
}
@media (max-width: 375px) {
  .tabs-nav {
    padding: var(--space-1) var(--space-2);
    min-height: 40px;
  }
}
@media (max-width: 640px) and (orientation: portrait) {
  .tabs-nav {
    padding: var(--space-1) var(--space-2);
  }
}
@media (max-width: 896px) and (orientation: landscape) {
  .tabs-nav {
    padding: var(--space-1) var(--space-2);
    min-height: 36px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .tabs-nav {
    padding: var(--space-2) var(--space-3);
  }
}
@media (min-width: 2560px) {
  .tabs-nav {
    padding: var(--space-3) var(--space-4);
  }
}
.tabs-nav-container {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-width: 0;
  max-width: 100%;
}
.tabs-nav-wrapper {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  height: fit-content;
  width: auto;
  max-width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  box-sizing: border-box;
  scroll-snap-type: x mandatory;
  scroll-padding: var(--space-2);
}
.tabs-nav-wrapper::-webkit-scrollbar {
  display: none;
}
@media (max-width: 375px) {
  .tabs-nav-wrapper {
    gap: var(--space-0-5);
  }
}
@media (max-width: 640px) {
  .tabs-nav-wrapper {
    gap: var(--space-1);
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  .tabs-nav-wrapper {
    gap: var(--space-1);
  }
}
@media (hover: none) and (pointer: coarse) {
  .tabs-nav-wrapper {
    gap: var(--space-2);
    scroll-padding: var(--space-3);
  }
}
.tabs-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: var(--radius-md);
  z-index: var(--z-above);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-normal) var(--ease-out);
  background: color-mix(in srgb, var(--color-surface-elevated) 40%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid color-mix(in srgb, var(--color-border) 20%, transparent);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--color-text) 8%, transparent);
}
@media (max-width: 767px) {
  .tabs-nav-arrow {
    width: 1.75rem;
    height: 1.75rem;
  }
}
.tabs-nav-arrow:hover {
  background: color-mix(in srgb, var(--color-surface-elevated) 70%, transparent);
  border-color: color-mix(in srgb, var(--color-border) 40%, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-text) 12%, transparent);
  transform: translateY(-50%) scale(1.02);
}
.tabs-nav-arrow:hover i {
  color: var(--color-primary);
}
.tabs-nav-arrow:active {
  transform: translateY(-50%) scale(0.95);
}
.tabs-nav-arrow-visible {
  opacity: 0.5;
  pointer-events: auto;
}
.tabs-nav-arrow-visible:hover {
  opacity: 0.9;
}
.tabs-nav-arrow-left {
  left: var(--space-2);
}
.tabs-nav-arrow-right {
  right: var(--space-2);
}
.tabs-nav-arrow i {
  font-size: 1rem;
  color: var(--color-text-muted);
  transition: color var(--duration-normal) var(--ease-out);
  line-height: 1;
}
@media (max-width: 767px) {
  .tabs-nav-arrow i {
    font-size: 0.875rem;
  }
}
.tabs-nav::before, .tabs-nav::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--space-12);
  pointer-events: none;
  z-index: var(--z-above);
  transition: opacity var(--duration-fast);
  opacity: 0;
}
.tabs-nav::before {
  left: 0;
  background: linear-gradient(90deg, var(--color-surface-elevated) 0%, var(--color-surface-elevated) 30%, transparent 100%);
}
.tabs-nav::after {
  right: 0;
  background: linear-gradient(-90deg, var(--color-surface-elevated) 0%, var(--color-surface-elevated) 30%, transparent 100%);
}
.tabs-nav-scrollable::before, .tabs-nav-scrollable::after {
  opacity: 0.95;
}
.tabs-indicator {
  position: absolute;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--color-primary) 15%, var(--color-primary) 85%, transparent 100%);
  border-radius: var(--radius-full);
  z-index: var(--z-above);
  opacity: 1;
  display: none;
  box-shadow: 0 0 12px var(--color-primary), 0 0 24px color-mix(in srgb, var(--color-primary) 30%, transparent);
  left: var(--indicator-left, 0);
  width: var(--indicator-width, 0);
  transition: left var(--duration-normal) var(--ease-out), width var(--duration-normal) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
  will-change: left, width;
}
.tabs-indicator::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -4px;
  right: -4px;
  bottom: -2px;
  background: linear-gradient(90deg, transparent 0%, var(--color-primary) 20%, var(--color-primary) 80%, transparent 100%);
  border-radius: inherit;
  opacity: 0.4;
  filter: blur(8px);
  z-index: -1;
  animation: breathe var(--duration-extended) ease-in-out infinite;
}
@media (max-width: 767px) {
  .tabs-indicator {
    height: 2px;
    box-shadow: 0 0 8px var(--color-primary), 0 0 16px color-mix(in srgb, var(--color-primary) 20%, transparent);
  }
  .tabs-indicator::before {
    top: -1px;
    bottom: -1px;
    filter: blur(6px);
    opacity: 0.3;
  }
}
.tabs-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-2xl);
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out), transform var(--duration-fast) var(--ease-spring), box-shadow var(--duration-normal) var(--ease-out);
  white-space: nowrap;
  position: relative;
  flex: 0 0 auto;
  min-width: fit-content;
  max-width: none;
  overflow: visible;
  text-overflow: ellipsis;
  text-align: center;
  scroll-snap-align: start;
  height: 2.5rem;
  padding: var(--space-3) var(--space-4);
  gap: var(--space-2);
  font-size: var(--text-base);
}
@media (max-width: 320px) {
  .tabs-tab {
    height: 2.25rem;
    padding: var(--space-1) var(--space-1-5);
    font-size: var(--text-3xs);
    gap: var(--space-0-5);
    min-width: 60px;
  }
}
@media (min-width: 321px) and (max-width: 375px) {
  .tabs-tab {
    height: 2.5rem;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-2xs);
    gap: var(--space-1);
  }
}
@media (min-width: 376px) and (max-width: 640px) {
  .tabs-tab {
    height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }
}
@media (max-width: 896px) and (orientation: landscape) {
  .tabs-tab {
    height: 2.25rem;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-2xs);
  }
}
@media (min-width: 641px) and (max-width: 1024px) and (orientation: portrait) {
  .tabs-tab {
    height: 3rem;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
  }
}
@media (min-width: 641px) and (max-width: 1024px) and (orientation: landscape) {
  .tabs-tab {
    height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .tabs-tab {
    height: 3rem;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
  }
}
@media (min-width: 1441px) and (max-width: 1920px) {
  .tabs-tab {
    height: 3.25rem;
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-base);
  }
}
@media (min-width: 1921px) {
  .tabs-tab {
    height: 3.5rem;
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
  }
}
@media (aspect-ratio > 21/9) {
  .tabs-tab {
    min-width: 120px;
  }
}
@media (aspect-ratio < 4/3) {
  .tabs-tab {
    min-width: 80px;
  }
}
@media (hover: none) and (pointer: coarse) {
  .tabs-tab {
    min-height: 44px;
  }
}
@media (hover: none) and (pointer: coarse) and (max-width: 767px) {
  .tabs-tab {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    padding: var(--space-3) var(--space-4);
  }
}
@container tabs-container (max-width: 400px) {
  .tabs-tab {
    height: 2.5rem;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-2xs);
    min-width: 60px;
  }
}
@container tabs-container (min-width: 401px) and (max-width: 600px) {
  .tabs-tab {
    height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    min-width: 80px;
  }
}
@container tabs-container (min-width: 601px) and (max-width: 900px) {
  .tabs-tab {
    height: 3rem;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    min-width: 100px;
  }
}
@container tabs-container (min-width: 901px) {
  .tabs-tab {
    height: 3.25rem;
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-base);
    min-width: 120px;
  }
}
.tabs-tab .icon {
  font-size: inherit;
  line-height: 1;
}
.tabs-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-surface-elevated) 10%, transparent) 0%, transparent 50%, color-mix(in srgb, var(--color-surface-elevated) 5%, transparent) 100%);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
  border-radius: inherit;
  z-index: 0;
}
.tabs-tab > * {
  position: relative;
  z-index: var(--z-base);
}
.tabs-tab > span {
  display: flex;
  align-items: center;
  line-height: 1;
}
.tabs-tab-icon {
  font-size: var(--icon-base);
  line-height: 1;
  flex-shrink: 0;
  color: inherit;
  transition: color var(--duration-fast) var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 375px) {
  .tabs-tab-icon {
    font-size: var(--icon-xs);
  }
}
@media (max-width: 640px) {
  .tabs-tab-icon {
    font-size: var(--icon-sm);
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  .tabs-tab-icon {
    font-size: var(--icon-xs);
  }
}
.tabs-tab-icon-start {
  margin-right: var(--space-1);
}
@media (max-width: 375px) {
  .tabs-tab-icon-start {
    margin-right: var(--space-0-5);
  }
}
.tabs-tab-icon-end {
  margin-left: var(--space-1);
}
@media (max-width: 375px) {
  .tabs-tab-icon-end {
    margin-left: var(--space-0-5);
  }
}
@media (max-width: 320px) {
  .tabs-tab-icon ~ span {
    display: none;
  }
}
.tabs-tab-close {
  margin-left: var(--space-1);
  padding: var(--space-0-5);
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  min-height: 1.5rem;
}
.tabs-tab-close:hover {
  background: var(--color-surface);
  color: var(--color-error);
  transform: scale(1.1);
}
.tabs-tab-close:active {
  transform: scale(0.95);
}
.tabs-tab-close i {
  font-size: var(--text-xs);
}
.tabs-tab.tab-active, .tabs-tab.tabs-tab-active {
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
  position: relative;
  font-weight: var(--font-semibold);
  text-shadow: 0 0 8px color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.tabs-tab.tab-active::before, .tabs-tab.tabs-tab-active::before {
  opacity: 1;
}
.tabs-tab-disabled, .tabs-tab:disabled, .tabs-tab[disabled] {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.tabs-tab-has-loading {
  position: relative;
}
.tabs-tab-icon-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tabs-tab-icon-dimmed {
  opacity: 0.3;
}
.tabs-tab .loading-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
}
.tabs-tab .loading-spinner-inline {
  width: 1em;
  height: 1em;
  margin-right: var(--space-1-5);
}
.tabs-tab .loading-spinner-inline::before {
  border-width: 1.5px;
}
.tabs-tab .loading-spinner-inline::after {
  display: none;
}
.tabs-tab-loading-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-base);
}
.tabs-tab-badge {
  margin-left: var(--space-1-5);
  padding: 0 var(--space-1-5);
  font-size: var(--text-3xs);
  font-weight: var(--font-semibold);
  background: var(--color-surface-elevated);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  line-height: 1.2;
  min-width: 1.25rem;
  height: 1.25rem;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: center;
  z-index: var(--z-base);
  position: relative;
}
.tabs-tab-badge-danger {
  background: var(--color-error);
  color: var(--color-text-inverse);
  border-color: var(--color-error);
}
.tabs-tab-badge-warning {
  background: var(--color-warning);
  color: var(--color-text-inverse);
  border-color: var(--color-warning);
}
.tabs-tab-badge-success {
  background: var(--color-success);
  color: var(--color-text-inverse);
  border-color: var(--color-success);
}
.tabs-tab-add-button {
  min-width: 2.75rem;
  justify-content: center;
  color: var(--color-text-muted);
}
.tabs-content {
  flex: 1;
  padding: var(--space-6);
  background: var(--color-surface-elevated);
  color: var(--color-text);
  position: relative;
  overflow: visible;
  min-height: 200px;
  container-type: inline-size;
  container-name: tab-content;
  contain: layout style;
}
@media (max-width: 375px) {
  .tabs-content {
    padding: var(--space-2);
    min-height: 100px;
  }
}
@media (min-width: 376px) and (max-width: 640px) {
  .tabs-content {
    padding: var(--space-3);
    min-height: 150px;
  }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .tabs-content {
    padding: var(--space-4);
    min-height: 200px;
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .tabs-content {
    padding: var(--space-5);
    min-height: 250px;
  }
}
@media (min-width: 1441px) {
  .tabs-content {
    padding: var(--space-6);
    min-height: 300px;
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  .tabs-content {
    padding: var(--space-2) var(--space-4);
    min-height: calc(100vh - 120px);
  }
}
@container tab-content (max-width: 400px) {
  .tabs-content {
    padding: var(--space-2);
  }
}
@container tab-content (min-width: 401px) and (max-width: 800px) {
  .tabs-content {
    padding: var(--space-3);
  }
}
@container tab-content (min-width: 801px) {
  .tabs-content {
    padding: var(--space-4);
  }
}
.tabs-content-no-padding {
  padding: 0;
}
.tabs-content-no-padding .tabs-panel {
  padding: 0;
  margin: 0;
}
.tabs-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(8px);
  transition: all var(--duration-normal) var(--ease-out);
  height: auto;
  overflow: visible;
  box-sizing: border-box;
  pointer-events: none;
  visibility: hidden;
}
.tabs-panel:active, .tabs-panel:focus {
  transform: translateY(8px);
  outline: none;
  box-shadow: none;
}
@media (max-width: 767px) {
  .tabs-panel {
    transform: translateY(4px);
    transition: all var(--duration-fast) var(--ease-out);
  }
}
.tabs-panel.tabs-panel-active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}
.tabs-panel.tabs-panel-active:active, .tabs-panel.tabs-panel-active:focus {
  transform: translateY(0);
  outline: none;
  box-shadow: none;
}
.tabs-panel-fade-only {
  transform: none;
}
.tabs-panel-fade-only.tabs-panel-active {
  transform: none;
}
.tabs-default .tabs-nav {
  background: linear-gradient(135deg, var(--theme-glass-light-bg) 0%, var(--theme-glass-medium-bg) 50%, var(--theme-glass-light-bg) 100%);
  border-bottom: var(--theme-glass-border);
}
.tabs-default .tabs-content {
  background: var(--color-surface-elevated);
}
.tabs-default .tabs-indicator {
  display: none;
}
.tabs-pills .tabs-nav {
  background: var(--color-surface);
  border-radius: var(--radius-full);
  padding: var(--space-1);
  margin: var(--space-2);
  border: none;
}
.tabs-pills .tabs-tab {
  border-radius: var(--radius-full);
}
.tabs-pills .tabs-tab.tab-active {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-md);
  font-weight: var(--font-medium);
}
.tabs-pills .tabs-content {
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.tabs-pills .tabs-nav {
  background: var(--color-surface);
  border-bottom: none;
}
.tabs-pills .tabs-content {
  background: var(--color-surface-elevated);
}
.tabs-pills .tabs-indicator {
  display: none;
}
.tabs-underline {
  background: transparent;
  box-shadow: none;
  border: none;
}
.tabs-underline .tabs-nav {
  background: transparent;
  border-bottom: var(--border-2) solid var(--color-border);
  border-radius: 0;
  padding: 0;
  gap: var(--space-6);
}
.tabs-underline .tabs-nav .tabs-tab.tab-active {
  color: var(--color-primary);
  background: transparent;
  font-weight: var(--font-semibold);
}
.tabs-underline .tabs-content {
  background: transparent;
  padding-top: var(--space-6);
}
.tabs-underline .tabs-indicator {
  display: block;
  bottom: -1px;
  height: 2px;
  border-radius: 0;
  background: var(--color-primary);
  box-shadow: none;
}
.tabs-glass {
  background: var(--glass-bg-medium);
  backdrop-filter: blur(var(--blur-lg));
  border: var(--border-1) solid var(--glass-border-light);
}
.tabs-glass .tabs-tab.tab-active {
  color: var(--color-primary);
  background: var(--glass-bg-light);
  backdrop-filter: blur(var(--blur-md));
  border: var(--border-1) solid var(--color-border);
  font-weight: var(--font-semibold);
}
.tabs-glass .tabs-nav {
  background: color-mix(in srgb, var(--color-surface-elevated) 5%, transparent);
  border-bottom: var(--glass-light-border);
}
.tabs-glass .tabs-content {
  background: transparent;
}
.tabs-glass .tabs-indicator {
  display: none;
}
.tabs-elevated {
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-lg);
  border: none;
}
.tabs-elevated .tabs-nav {
  background: var(--color-surface-elevated);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border: none;
}
.tabs-elevated .tabs-tab.tab-active {
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  font-weight: var(--font-semibold);
}
.tabs-elevated .tabs-nav {
  background: var(--color-surface-elevated);
  border-bottom: none;
}
.tabs-elevated .tabs-content {
  background: var(--color-surface-elevated);
}
.tabs-elevated .tabs-indicator {
  display: none;
}
.tabs-segment .tabs-nav {
  background: var(--color-surface);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-1);
  gap: 0;
}
.tabs-segment .tabs-tab {
  border-radius: var(--radius-md);
  margin: 0;
}
.tabs-segment .tabs-tab.tab-active {
  background: var(--color-surface-elevated);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  font-weight: var(--font-medium);
}
.tabs-segment .tabs-nav {
  background: var(--color-surface);
  border-bottom: var(--border-1) solid var(--color-border);
}
.tabs-segment .tabs-content {
  background: var(--color-surface-elevated);
}
.tabs-segment .tabs-indicator {
  display: none;
}
.tabs-card {
  background: transparent;
  box-shadow: none;
}
.tabs-card .tabs-nav {
  background: transparent;
  border: none;
  padding: 0;
  gap: var(--space-1);
}
.tabs-card .tabs-tab {
  background: var(--color-surface-elevated);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  position: relative;
}
.tabs-card .tabs-tab.tab-active, .tabs-card .tabs-tab.tabs-tab-active {
  background: var(--color-surface-elevated);
  color: var(--color-primary);
  border-bottom-color: var(--color-surface-elevated);
  font-weight: var(--font-semibold);
  z-index: var(--z-above);
  margin-bottom: -1px;
}
.tabs-card .tabs-tab.tab-active::after, .tabs-card .tabs-tab.tabs-tab-active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-surface-elevated);
  z-index: var(--z-above);
}
.tabs-card .tabs-content {
  border: var(--border-1) solid var(--color-border);
  border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
  margin-top: 0;
  position: relative;
  z-index: var(--z-base);
}
.tabs-card .tabs-nav {
  background: var(--color-surface-elevated);
  border-bottom: var(--border-1) solid var(--color-border);
}
.tabs-card .tabs-content {
  background: var(--color-surface-elevated);
}
.tabs-card .tabs-indicator {
  display: none;
}
.tabs-vertical {
  flex-direction: row;
  align-items: stretch;
  min-height: 400px;
}
.tabs-vertical .tabs-nav {
  display: flex;
  flex-direction: column;
  border-bottom: none;
  border-right: var(--border-1) solid var(--color-border);
  min-width: 12rem;
  max-width: 20rem;
  width: auto;
  padding: var(--space-2);
  height: auto;
  flex-shrink: 0;
}
.tabs-vertical .tabs-nav-container {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 100%;
  height: 100%;
}
.tabs-vertical .tabs-nav-wrapper {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  height: 100%;
  gap: var(--space-1);
}
.tabs-vertical .tabs-nav-arrow {
  display: none;
}
.tabs-vertical .tabs-indicator {
  left: auto;
  right: 0;
  top: var(--indicator-top, 0);
  bottom: auto;
  width: 3px;
  height: var(--indicator-height, 0);
  transition: top var(--duration-normal) var(--ease-out), height var(--duration-normal) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}
.tabs-vertical .tabs-tab {
  justify-content: flex-start;
  width: 100%;
  text-align: left;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}
.tabs-vertical .tabs-tab.tab-active, .tabs-vertical .tabs-tab.tabs-tab-active {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.tabs-vertical .tabs-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow: auto;
  height: 100%;
}
.tabs-vertical.tabs-card .tabs-nav {
  border-right: none;
  padding: 0;
  gap: 0;
}
.tabs-vertical.tabs-card .tabs-tab {
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  margin-bottom: var(--space-1);
}
.tabs-vertical.tabs-card .tabs-tab:last-child {
  margin-bottom: 0;
}
.tabs-vertical.tabs-card .tabs-tab.tab-active, .tabs-vertical.tabs-card .tabs-tab.tabs-tab-active {
  border-right-color: var(--color-surface-elevated);
  margin-right: -1px;
  z-index: var(--z-above);
}
.tabs-vertical.tabs-card .tabs-content {
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  margin-left: -1px;
}
.tabs-vertical.tabs-pills .tabs-nav {
  border-right: none;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  margin-right: var(--space-2);
}
.tabs-vertical.tabs-pills .tabs-tab {
  border-radius: var(--radius-full);
}
.tabs-vertical.tabs-underline .tabs-nav {
  border-right: var(--border-2) solid var(--color-border);
  padding-right: 0;
}
.tabs-vertical.tabs-underline .tabs-indicator {
  width: 2px;
}
.tabs-scrollable-content .tabs-content {
  overflow-y: auto;
  max-height: 95vh;
  scrollbar-width: thin;
  -ms-overflow-style: auto;
}
@media (max-width: 767px) {
  .tabs-scrollable-content .tabs-content {
    max-height: 90vh;
  }
}
@media (max-width: 639px) {
  .tabs-scrollable-content .tabs-content {
    max-height: 85vh;
  }
}
.tabs-scrollable-content .tabs-content::-webkit-scrollbar {
  width: 6px;
}
.tabs-scrollable-content .tabs-content::-webkit-scrollbar-track {
  background: var(--color-surface);
  border-radius: var(--radius-sm);
}
.tabs-scrollable-content .tabs-content::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-sm);
}

.tab-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
@media (max-width: 767px) {
  .tab-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
  }
}
.tab-header-content {
  flex: 1;
  min-width: 0;
}
.tab-header-title {
  margin: 0 0 var(--space-1) 0;
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
@media (max-width: 767px) {
  .tab-header-title {
    font-size: var(--text-xl);
  }
}
.tab-header-subtitle {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}
.tab-header-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
@media (max-width: 767px) {
  .tab-header-actions {
    width: 100%;
    justify-content: stretch;
  }
  .tab-header-actions > .button {
    flex: 1;
  }
}

.tab-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
@media (max-width: 767px) {
  .tab-content {
    gap: var(--space-4);
  }
}
.tab-content-loading {
  position: relative;
  min-height: 20rem;
}
.tab-content-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-light);
  backdrop-filter: var(--glass-light-blur);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
}

.tabs-xs .tabs-tab {
  height: 2rem;
  font-size: var(--text-xs);
}
.tabs-xs .tabs-tab .icon {
  font-size: var(--text-sm);
}
.tabs-xs .tabs-indicator {
  height: 2px;
}

.tabs-sm .tabs-tab {
  height: 2.25rem;
  font-size: var(--text-sm);
}
.tabs-sm .tabs-tab .icon {
  font-size: var(--text-base);
}
.tabs-sm .tabs-indicator {
  height: 2px;
}

.tabs-md .tabs-tab {
  height: 2.5rem;
  font-size: var(--text-base);
}
.tabs-md .tabs-tab .icon {
  font-size: var(--text-lg);
}
.tabs-md .tabs-indicator {
  height: 3px;
}

.tabs-lg .tabs-tab {
  height: 2.75rem;
  font-size: var(--text-lg);
}
.tabs-lg .tabs-tab .icon {
  font-size: var(--text-xl);
}
.tabs-lg .tabs-indicator {
  height: 3px;
}

.tabs-xl .tabs-tab {
  height: 3rem;
  font-size: var(--text-xl);
}
.tabs-xl .tabs-tab .icon {
  font-size: var(--text-2xl);
}
.tabs-xl .tabs-indicator {
  height: 4px;
}

.tabs-density-compact .tabs-nav {
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
}
.tabs-density-compact .tabs-tab {
  padding-left: var(--space-2);
  padding-right: var(--space-2);
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
  gap: var(--space-1);
}
.tabs-density-compact .tabs-content {
  padding: var(--space-3);
}

.tabs-density-dense .tabs-nav {
  gap: var(--space-1);
  padding: var(--space-1-5) var(--space-3);
  margin-bottom: -1px;
}
.tabs-density-dense .tabs-tab {
  padding-left: var(--space-3);
  padding-right: var(--space-3);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  gap: var(--space-1);
}
.tabs-density-dense .tabs-content {
  padding: var(--space-4);
}

.tabs-density-normal .tabs-nav {
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
}
.tabs-density-normal .tabs-tab {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  gap: var(--space-2);
}
.tabs-density-normal .tabs-content {
  padding: var(--space-6);
}

.tabs-density-spacious .tabs-nav {
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}
.tabs-density-spacious .tabs-tab {
  padding-left: var(--space-6);
  padding-right: var(--space-6);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  gap: var(--space-3);
}
.tabs-density-spacious .tabs-content {
  padding: var(--space-8);
}

.accordion {
  display: flex;
  flex-direction: column;
}
.accordion-item {
  background: var(--color-surface-elevated);
}
.accordion-item:first-child .accordion-header {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}
.accordion-item:last-child .accordion-header {
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}
.accordion-item:last-child.expanded .accordion-collapse {
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}
.accordion-item.expanded .accordion-header {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.accordion-item.disabled {
  opacity: var(--opacity-disabled);
}
.accordion-item.disabled .accordion-header {
  cursor: not-allowed;
}
.accordion-item-primary {
  border-left: 4px solid var(--color-primary);
  background: var(--color-primary-light);
}
.accordion-item-primary .accordion-header {
  color: var(--color-primary);
}
.accordion-item-success {
  border-left: 4px solid var(--color-success);
  background: color-mix(in srgb, var(--color-success) 10 %, var(--color-surface));
}
.accordion-item-success .accordion-header {
  color: var(--color-success);
}
.accordion-item-warning {
  border-left: 4px solid var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 10 %, var(--color-surface));
}
.accordion-item-warning .accordion-header {
  color: var(--color-warning);
}
.accordion-item-error {
  border-left: 4px solid var(--color-error);
  background: color-mix(in srgb, var(--color-error) 10 %, var(--color-surface));
}
.accordion-item-error .accordion-header {
  color: var(--color-error);
}
.accordion-item-info {
  border-left: 4px solid var(--color-info);
  background: color-mix(in srgb, var(--color-info) 10 %, var(--color-surface));
}
.accordion-item-info .accordion-header {
  color: var(--color-info);
}
.accordion-item-ghost {
  background: transparent;
  border: var(--border-1) dashed var(--color-border);
}
.accordion-item-ghost .accordion-header {
  color: var(--color-text-muted);
}
.accordion-item-neutral {
  background: var(--color-surface);
  border-left: 4px solid var(--color-text-muted);
}
.accordion-item-neutral .accordion-header {
  color: var(--color-text-muted);
}
.accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-fast) ease-out;
}
.accordion-header:hover:not(.disabled) {
  background: var(--state-hover-bg);
}
.accordion-header:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  z-index: var(--z-base);
}
.accordion-header.disabled {
  cursor: not-allowed;
}
.accordion-header.disabled:hover {
  background: transparent;
}
.accordion-header-content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  pointer-events: none;
}
.accordion-header-icon {
  font-size: 1.25rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
  pointer-events: none;
}
.accordion-title {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--color-text);
  line-height: 1.5;
  pointer-events: none;
}
.accordion-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-left: auto;
  pointer-events: none;
}
.accordion-icon {
  font-size: 1.25rem;
  color: var(--color-text-muted);
  transition: transform 200ms ease-out;
  flex-shrink: 0;
  pointer-events: none;
}
.accordion-collapse {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 200ms ease-out;
}
.accordion-collapse.expanded {
  grid-template-rows: 1fr;
}
.accordion-body {
  min-height: 0;
  padding: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
  opacity: 0;
  transition: opacity 150ms ease-out;
}
.accordion-bordered {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.accordion-bordered .accordion-item:not(:last-child) {
  border-bottom: 1px solid var(--color-border);
}
.accordion-separated {
  gap: var(--space-2);
}
.accordion-separated .accordion-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.accordion-separated .accordion-item:not(:last-child) {
  border-bottom: 1px solid var(--color-border);
}
.accordion-flush .accordion-item {
  background: transparent;
}
.accordion-flush .accordion-item:first-child .accordion-header {
  border-radius: 0;
}
.accordion-flush .accordion-item:last-child .accordion-header {
  border-radius: 0;
}
.accordion-flush .accordion-header {
  padding-left: 0;
  padding-right: 0;
}
.accordion-flush .accordion-body {
  padding-left: 0;
  padding-right: 0;
}
.accordion-filled .accordion-item-expanded .accordion-header {
  background: var(--color-surface);
}
.accordion-icon-left .accordion-icon {
  order: -1;
}

.accordion-item-expanded .accordion-body {
  opacity: 1;
}

.accordion-item-primary .accordion-header:hover:not(.accordion-header-disabled) {
  background: var(--color-primary-medium);
}

.accordion-item-success .accordion-header:hover:not(.accordion-header-disabled) {
  background: color-mix(in srgb, var(--color-success) 20%, var(--color-surface));
}

.accordion-item-warning .accordion-header:hover:not(.accordion-header-disabled) {
  background: color-mix(in srgb, var(--color-warning) 20%, var(--color-surface));
}

.accordion-item-error .accordion-header:hover:not(.accordion-header-disabled) {
  background: color-mix(in srgb, var(--color-error) 20%, var(--color-surface));
}

.accordion-item-info .accordion-header:hover:not(.accordion-header-disabled) {
  background: color-mix(in srgb, var(--color-info) 20%, var(--color-surface));
}

.accordion-item-ghost .accordion-header:hover:not(.accordion-header-disabled) {
  background: var(--color-surface-elevated);
  color: var(--color-text);
}

.accordion-item-neutral .accordion-header:hover:not(.accordion-header-disabled) {
  background: var(--color-surface-elevated);
}

[data-theme=dark] .accordion-header:hover:not(.accordion-header-disabled) {
  background: var(--state-hover-bg);
}

.choice-viewport {
  display: none;
  position: fixed;
  z-index: var(--dropdown-z-index, 1050);
  width: var(--choice-width, auto);
  max-height: var(--choice-max-height, 480px);
  background: var(--color-surface-elevated);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-2);
  overflow-y: auto;
  overflow-x: hidden;
  transition: opacity 0.15s ease-out;
  scrollbar-width: auto;
  scrollbar-color: var(--color-primary) rgba(0, 0, 0, 0.05);
}
.choice-viewport::-webkit-scrollbar {
  width: 16px;
  background: rgba(0, 0, 0, 0.03);
}
.choice-viewport::-webkit-scrollbar-track {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.05) 100%);
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}
.choice-viewport::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 85%, black) 100%);
  border: 3px solid var(--color-surface-elevated);
  border-radius: var(--radius-md);
  background-clip: padding-box;
  min-height: 60px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.choice-viewport::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--color-primary-hover) 0%, color-mix(in srgb, var(--color-primary-hover) 85%, black) 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.choice-viewport::-webkit-scrollbar-thumb:active {
  background: var(--color-primary-active);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.2);
}
.choice-viewport::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: linear-gradient(to top, var(--color-surface-elevated) 0%, var(--color-surface-elevated) 20%, rgba(244, 245, 247, 0.95) 40%, rgba(244, 245, 247, 0.8) 60%, transparent 100%);
  pointer-events: none;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.choice-viewport.has-scroll::after {
  opacity: 1;
}
@media (max-width: 768px) {
  .choice-viewport {
    min-width: var(--space-48);
  }
}
@media (max-width: 480px) {
  .choice-viewport {
    min-width: var(--space-40);
  }
}
.choice-viewport-opened, .choice-viewport-positioned {
  display: block;
}

.choice {
  position: relative;
  width: 100%;
}
.choice-trigger-wrapper {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 0 !important;
  margin: 0;
  background: transparent;
  border: none;
}
.choice-trigger-wrapper button {
  padding: 0 !important;
  margin: 0 !important;
}
.choice-trigger-wrapper:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.choice-header {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-bottom: var(--border-1) solid var(--color-border);
  background: var(--color-surface);
  margin: 0 var(--space-1);
  margin-bottom: var(--space-1);
  border-radius: var(--radius-sm);
}
.choice-footer {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  border-top: var(--border-1) solid var(--color-border);
  background: var(--color-surface);
  margin: var(--space-1);
  margin-top: var(--space-1);
  border-radius: var(--radius-sm);
}
.choice-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.choice-loading::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-right: var(--space-2);
  border: 2px solid var(--color-border-light);
  border-top: 2px solid var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.choice-auto {
  width: auto;
  min-width: max-content;
}
.choice-inline {
  display: inline-flex;
  width: auto;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}
.choice-inline .choice-item {
  flex: 0 0 auto;
  white-space: nowrap;
  min-width: fit-content;
  padding: var(--space-2) var(--space-3);
}
.choice-inline .choice-item .choice-text,
.choice-inline .choice-item .choice-label {
  display: inline-block;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.choice-compact, .choice-avatar-only {
  width: auto;
  min-width: auto;
}
.choice-compact .choice-trigger, .choice-avatar-only .choice-trigger {
  padding: var(--space-2);
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  border-radius: var(--radius-full);
  gap: 0;
  position: relative;
}
.choice-compact .choice-trigger .choice-text, .choice-avatar-only .choice-trigger .choice-text,
.choice-compact .choice-trigger .choice-label,
.choice-avatar-only .choice-trigger .choice-label {
  display: none;
}
.choice-compact .choice-trigger .choice-avatar, .choice-avatar-only .choice-trigger .choice-avatar,
.choice-compact .choice-trigger .choice-icon,
.choice-avatar-only .choice-trigger .choice-icon {
  display: flex;
  flex-shrink: 0;
  position: relative;
  z-index: var(--z-base);
}
.choice-compact .choice-trigger .icon, .choice-avatar-only .choice-trigger .icon,
.choice-compact .choice-trigger i,
.choice-avatar-only .choice-trigger i {
  color: currentColor;
  flex-shrink: 0;
  font-size: var(--icon-base);
  transition: var(--transition-colors);
}
.choice-compact .choice-trigger::after, .choice-avatar-only .choice-trigger::after {
  display: none;
}
.choice-compact .choice-viewport, .choice-avatar-only .choice-viewport {
  width: auto;
}
.choice-compact .choice-content .choice-item .choice-text, .choice-avatar-only .choice-content .choice-item .choice-text,
.choice-compact .choice-content .choice-item .choice-label,
.choice-avatar-only .choice-content .choice-item .choice-label {
  display: block;
}
.choice-avatar-only .choice-trigger {
  padding: var(--space-1);
  width: var(--touch-target-min);
  height: var(--touch-target-min, 44px);
  border-radius: var(--radius-full);
}
.choice-avatar-only .choice-trigger .choice-avatar {
  width: 100%;
  height: 100%;
}
.choice-avatar-only .choice-trigger .choice-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.app-sidebar.collapsed .choice:not(.choice-force-full), .sidebar-collapsed .choice:not(.choice-force-full) {
  width: auto;
  min-width: auto;
}
.app-sidebar.collapsed .choice:not(.choice-force-full) .choice-trigger, .sidebar-collapsed .choice:not(.choice-force-full) .choice-trigger {
  padding: var(--space-2);
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  border-radius: var(--radius-full);
  gap: 0;
  position: relative;
}
.app-sidebar.collapsed .choice:not(.choice-force-full) .choice-trigger .choice-text,
.app-sidebar.collapsed .choice:not(.choice-force-full) .choice-trigger .choice-label, .sidebar-collapsed .choice:not(.choice-force-full) .choice-trigger .choice-text,
.sidebar-collapsed .choice:not(.choice-force-full) .choice-trigger .choice-label {
  display: none;
}
.app-sidebar.collapsed .choice:not(.choice-force-full) .choice-trigger .choice-avatar,
.app-sidebar.collapsed .choice:not(.choice-force-full) .choice-trigger .choice-icon, .sidebar-collapsed .choice:not(.choice-force-full) .choice-trigger .choice-avatar,
.sidebar-collapsed .choice:not(.choice-force-full) .choice-trigger .choice-icon {
  display: flex;
  flex-shrink: 0;
  position: relative;
  z-index: var(--z-base);
}
.app-sidebar.collapsed .choice:not(.choice-force-full) .choice-trigger .icon,
.app-sidebar.collapsed .choice:not(.choice-force-full) .choice-trigger i, .sidebar-collapsed .choice:not(.choice-force-full) .choice-trigger .icon,
.sidebar-collapsed .choice:not(.choice-force-full) .choice-trigger i {
  color: currentColor;
  flex-shrink: 0;
  font-size: var(--icon-base);
  transition: var(--transition-colors);
}
.app-sidebar.collapsed .choice:not(.choice-force-full) .choice-trigger::after, .sidebar-collapsed .choice:not(.choice-force-full) .choice-trigger::after {
  display: none;
}
.app-sidebar.collapsed .choice:not(.choice-force-full) .choice-viewport, .sidebar-collapsed .choice:not(.choice-force-full) .choice-viewport {
  width: auto;
}
.app-sidebar.collapsed .choice:not(.choice-force-full) .choice-content .choice-item .choice-text,
.app-sidebar.collapsed .choice:not(.choice-force-full) .choice-content .choice-item .choice-label, .sidebar-collapsed .choice:not(.choice-force-full) .choice-content .choice-item .choice-text,
.sidebar-collapsed .choice:not(.choice-force-full) .choice-content .choice-item .choice-label {
  display: block;
}
@container (max-width: 200px) {
  .choice:not(.choice-force-full) {
    width: auto;
    min-width: auto;
  }
  .choice:not(.choice-force-full) .choice-trigger {
    padding: var(--space-2);
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    border-radius: var(--radius-full);
    gap: 0;
    position: relative;
  }
  .choice:not(.choice-force-full) .choice-trigger .choice-text,
  .choice:not(.choice-force-full) .choice-trigger .choice-label {
    display: none;
  }
  .choice:not(.choice-force-full) .choice-trigger .choice-avatar,
  .choice:not(.choice-force-full) .choice-trigger .choice-icon {
    display: flex;
    flex-shrink: 0;
    position: relative;
    z-index: var(--z-base);
  }
  .choice:not(.choice-force-full) .choice-trigger .icon,
  .choice:not(.choice-force-full) .choice-trigger i {
    color: currentColor;
    flex-shrink: 0;
    font-size: var(--icon-base);
    transition: var(--transition-colors);
  }
  .choice:not(.choice-force-full) .choice-trigger::after {
    display: none;
  }
  .choice:not(.choice-force-full) .choice-viewport {
    width: auto;
  }
  .choice:not(.choice-force-full) .choice-content .choice-item .choice-text,
  .choice:not(.choice-force-full) .choice-content .choice-item .choice-label {
    display: block;
  }
}
@container (max-width: 100px) {
  .choice:not(.choice-force-full) .choice-trigger {
    padding: var(--space-1);
    width: var(--touch-target-min);
    height: var(--touch-target-min, 44px);
    border-radius: var(--radius-full);
  }
  .choice:not(.choice-force-full) .choice-trigger .choice-avatar {
    width: 100%;
    height: 100%;
  }
  .choice:not(.choice-force-full) .choice-trigger .choice-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
@media (max-width: 767px) {
  .app-sidebar .choice:not(.choice-force-full) {
    width: auto;
    min-width: auto;
  }
  .app-sidebar .choice:not(.choice-force-full) .choice-trigger {
    padding: var(--space-2);
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    border-radius: var(--radius-full);
    gap: 0;
    position: relative;
  }
  .app-sidebar .choice:not(.choice-force-full) .choice-trigger .choice-text,
  .app-sidebar .choice:not(.choice-force-full) .choice-trigger .choice-label {
    display: none;
  }
  .app-sidebar .choice:not(.choice-force-full) .choice-trigger .choice-avatar,
  .app-sidebar .choice:not(.choice-force-full) .choice-trigger .choice-icon {
    display: flex;
    flex-shrink: 0;
    position: relative;
    z-index: var(--z-base);
  }
  .app-sidebar .choice:not(.choice-force-full) .choice-trigger .icon,
  .app-sidebar .choice:not(.choice-force-full) .choice-trigger i {
    color: currentColor;
    flex-shrink: 0;
    font-size: var(--icon-base);
    transition: var(--transition-colors);
  }
  .app-sidebar .choice:not(.choice-force-full) .choice-trigger::after {
    display: none;
  }
  .app-sidebar .choice:not(.choice-force-full) .choice-viewport {
    width: auto;
  }
  .app-sidebar .choice:not(.choice-force-full) .choice-content .choice-item .choice-text,
  .app-sidebar .choice:not(.choice-force-full) .choice-content .choice-item .choice-label {
    display: block;
  }
}
@media (max-width: 639px) {
  .app-sidebar .choice:not(.choice-force-full), .nav-menu .choice:not(.choice-force-full), .sidebar-footer .choice:not(.choice-force-full) {
    width: auto;
    min-width: auto;
  }
  .app-sidebar .choice:not(.choice-force-full) .choice-trigger, .nav-menu .choice:not(.choice-force-full) .choice-trigger, .sidebar-footer .choice:not(.choice-force-full) .choice-trigger {
    padding: var(--space-2);
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    border-radius: var(--radius-full);
    gap: 0;
    position: relative;
  }
  .app-sidebar .choice:not(.choice-force-full) .choice-trigger .choice-text,
  .app-sidebar .choice:not(.choice-force-full) .choice-trigger .choice-label, .nav-menu .choice:not(.choice-force-full) .choice-trigger .choice-text,
  .nav-menu .choice:not(.choice-force-full) .choice-trigger .choice-label, .sidebar-footer .choice:not(.choice-force-full) .choice-trigger .choice-text,
  .sidebar-footer .choice:not(.choice-force-full) .choice-trigger .choice-label {
    display: none;
  }
  .app-sidebar .choice:not(.choice-force-full) .choice-trigger .choice-avatar,
  .app-sidebar .choice:not(.choice-force-full) .choice-trigger .choice-icon, .nav-menu .choice:not(.choice-force-full) .choice-trigger .choice-avatar,
  .nav-menu .choice:not(.choice-force-full) .choice-trigger .choice-icon, .sidebar-footer .choice:not(.choice-force-full) .choice-trigger .choice-avatar,
  .sidebar-footer .choice:not(.choice-force-full) .choice-trigger .choice-icon {
    display: flex;
    flex-shrink: 0;
    position: relative;
    z-index: var(--z-base);
  }
  .app-sidebar .choice:not(.choice-force-full) .choice-trigger .icon,
  .app-sidebar .choice:not(.choice-force-full) .choice-trigger i, .nav-menu .choice:not(.choice-force-full) .choice-trigger .icon,
  .nav-menu .choice:not(.choice-force-full) .choice-trigger i, .sidebar-footer .choice:not(.choice-force-full) .choice-trigger .icon,
  .sidebar-footer .choice:not(.choice-force-full) .choice-trigger i {
    color: currentColor;
    flex-shrink: 0;
    font-size: var(--icon-base);
    transition: var(--transition-colors);
  }
  .app-sidebar .choice:not(.choice-force-full) .choice-trigger::after, .nav-menu .choice:not(.choice-force-full) .choice-trigger::after, .sidebar-footer .choice:not(.choice-force-full) .choice-trigger::after {
    display: none;
  }
  .app-sidebar .choice:not(.choice-force-full) .choice-viewport, .nav-menu .choice:not(.choice-force-full) .choice-viewport, .sidebar-footer .choice:not(.choice-force-full) .choice-viewport {
    width: auto;
  }
  .app-sidebar .choice:not(.choice-force-full) .choice-content .choice-item .choice-text,
  .app-sidebar .choice:not(.choice-force-full) .choice-content .choice-item .choice-label, .nav-menu .choice:not(.choice-force-full) .choice-content .choice-item .choice-text,
  .nav-menu .choice:not(.choice-force-full) .choice-content .choice-item .choice-label, .sidebar-footer .choice:not(.choice-force-full) .choice-content .choice-item .choice-text,
  .sidebar-footer .choice:not(.choice-force-full) .choice-content .choice-item .choice-label {
    display: block;
  }
}
.choice-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  margin-bottom: var(--space-1);
  display: block;
}
.choice-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: 12px;
  margin-left: auto;
  opacity: 0;
  transform: scale(0.8);
  transition: all var(--duration-fast);
}
.choice-check::before {
  content: "✓";
}
.choice-item-active .choice-check {
  opacity: 1;
  transform: scale(1);
}
.choice-item {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  border-radius: var(--radius-md);
  width: 100%;
  text-align: left;
  background: transparent;
  border: var(--border-1) solid transparent;
  color: var(--color-text-muted);
  font-weight: var(--font-medium);
  user-select: none;
  padding: var(--space-2) var(--space-3);
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  transition: var(--transition-fast);
  position: relative;
  outline: none;
}
.choice-item .icon,
.choice-item i {
  color: currentColor;
  flex-shrink: 0;
  font-size: var(--icon-base);
  transition: var(--transition-colors);
}
.choice-item:hover {
  background: color-mix(in srgb, var(--color-surface-elevated) 80%, transparent);
}
.choice-item:active {
  background: color-mix(in srgb, var(--color-surface-elevated) 60%, transparent);
}
.choice-item:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
@media (hover: none) and (pointer: coarse) {
  .choice-item {
    min-height: var(--touch-target-lg);
    min-width: var(--touch-target-lg);
  }
  .choice-item:hover {
    transform: none;
  }
}
.choice-item:focus-visible {
  outline: none;
  outline-offset: var(--border-2);
}
.choice-item-active {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
  font-weight: var(--font-semibold);
}
.choice-item-active:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  transform: none;
}
.choice-item-disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.choice-item-loading {
  cursor: wait;
  opacity: var(--opacity-50);
}
.choice-item-success, .choice-item[data-severity=low], .choice-item[data-variant=success] {
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  color: var(--color-success);
  border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
}
.choice-item-success:hover, .choice-item[data-severity=low]:hover, .choice-item[data-variant=success]:hover {
  background: color-mix(in srgb, var(--color-success) 20%, transparent);
  border-color: var(--color-success);
}
.choice-item-success.choice-item-active, .choice-item[data-severity=low].choice-item-active, .choice-item[data-variant=success].choice-item-active {
  background: var(--color-success);
  color: var(--color-text-inverse);
  border-color: var(--color-success);
}
.choice-item-warning, .choice-item[data-severity=medium], .choice-item[data-variant=warning] {
  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
  color: var(--color-warning);
  border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
}
.choice-item-warning:hover, .choice-item[data-severity=medium]:hover, .choice-item[data-variant=warning]:hover {
  background: color-mix(in srgb, var(--color-warning) 20%, transparent);
  border-color: var(--color-warning);
}
.choice-item-warning.choice-item-active, .choice-item[data-severity=medium].choice-item-active, .choice-item[data-variant=warning].choice-item-active {
  background: var(--color-warning);
  color: var(--color-text-inverse);
  border-color: var(--color-warning);
}
.choice-item-error, .choice-item[data-severity=high], .choice-item[data-variant=error] {
  background: color-mix(in srgb, var(--color-error) 12%, transparent);
  color: var(--color-error);
  border-color: color-mix(in srgb, var(--color-error) 30%, transparent);
}
.choice-item-error:hover, .choice-item[data-severity=high]:hover, .choice-item[data-variant=error]:hover {
  background: color-mix(in srgb, var(--color-error) 20%, transparent);
  border-color: var(--color-error);
}
.choice-item-error.choice-item-active, .choice-item[data-severity=high].choice-item-active, .choice-item[data-variant=error].choice-item-active {
  background: var(--color-error);
  color: var(--color-text-inverse);
  border-color: var(--color-error);
}
.choice-item-primary, .choice-item[data-severity=critical], .choice-item[data-variant=primary] {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
  border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.choice-item-primary:hover, .choice-item[data-severity=critical]:hover, .choice-item[data-variant=primary]:hover {
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
  border-color: var(--color-primary);
}
.choice-item-primary.choice-item-active, .choice-item[data-severity=critical].choice-item-active, .choice-item[data-variant=primary].choice-item-active {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}
.choice-item-info, .choice-item[data-variant=info] {
  background: color-mix(in srgb, var(--color-info) 12%, transparent);
  color: var(--color-info);
  border-color: color-mix(in srgb, var(--color-info) 30%, transparent);
}
.choice-item-info:hover, .choice-item[data-variant=info]:hover {
  background: color-mix(in srgb, var(--color-info) 20%, transparent);
  border-color: var(--color-info);
}
.choice-item-info.choice-item-active, .choice-item[data-variant=info].choice-item-active {
  background: var(--color-info);
  color: var(--color-text-inverse);
  border-color: var(--color-info);
}
.choice-item-ghost {
  background: transparent;
  color: var(--color-text-muted);
  border-color: var(--color-border);
}
.choice-item-ghost:hover {
  background: var(--color-surface-elevated);
  color: var(--color-text);
  border-color: var(--color-primary);
}
.choice-item-ghost-active {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.choice-item-neutral {
  background: var(--color-surface-elevated);
  color: var(--color-text);
  border-color: var(--color-border);
}
.choice-item-neutral:hover {
  background: var(--color-surface);
  border-color: var(--color-primary);
}
.choice-item-neutral-active {
  background: var(--color-surface);
  border-color: var(--color-primary);
}
.choice-trigger {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  padding-right: var(--space-10);
  background: var(--color-surface-elevated);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  font-weight: var(--font-medium);
  text-align: left;
  position: relative;
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  transition: var(--transition-fast);
  position: relative;
  outline: none;
}
.choice-trigger:hover {
  background: color-mix(in srgb, var(--color-surface-elevated) 80%, transparent);
}
.choice-trigger:active {
  background: color-mix(in srgb, var(--color-surface-elevated) 60%, transparent);
}
.choice-trigger:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
@media (hover: none) and (pointer: coarse) {
  .choice-trigger {
    min-height: var(--touch-target-lg);
    min-width: var(--touch-target-lg);
  }
  .choice-trigger:hover {
    transform: none;
  }
}
.choice-trigger::after {
  content: "";
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  transition: transform var(--duration-fast) var(--ease-out);
  opacity: 0.6;
}
.choice-trigger:focus-visible {
  outline: none;
  outline-offset: var(--border-1);
  border-color: var(--color-primary);
  box-shadow: none;
}
.choice-trigger:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}
.choice-trigger:disabled::after {
  opacity: 0.3;
}
.choice-trigger-error {
  border-color: var(--color-error);
}
.choice-trigger-error:focus-visible {
  border-color: var(--color-error);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-error) 20%, transparent);
}
.choice-dropdown {
  position: relative;
}
.choice-dropdown-ghost-primary {
  background: color-mix(in srgb, var(--color-primary) 8 %, transparent);
  color: var(--color-primary);
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
  transition: all var(--duration-fast) var(--ease-out);
}
.choice-dropdown-ghost-primary:hover {
  background: color-mix(in srgb, var(--color-primary) 15 %, transparent);
}
.choice-dropdown-ghost-primary:active {
  background: color-mix(in srgb, var(--color-primary) 20 %, transparent);
}
.choice-dropdown-ghost-success {
  background: color-mix(in srgb, var(--color-success) 8 %, transparent);
  color: var(--color-success);
  border: 1px solid color-mix(in srgb, var(--color-success) 20%, transparent);
  transition: all var(--duration-fast) var(--ease-out);
}
.choice-dropdown-ghost-success:hover {
  background: color-mix(in srgb, var(--color-success) 15 %, transparent);
}
.choice-dropdown-ghost-success:active {
  background: color-mix(in srgb, var(--color-success) 20 %, transparent);
}
.choice-dropdown-ghost-warning {
  background: color-mix(in srgb, var(--color-warning) 8 %, transparent);
  color: var(--color-warning);
  border: 1px solid color-mix(in srgb, var(--color-warning) 20%, transparent);
  transition: all var(--duration-fast) var(--ease-out);
}
.choice-dropdown-ghost-warning:hover {
  background: color-mix(in srgb, var(--color-warning) 15 %, transparent);
}
.choice-dropdown-ghost-warning:active {
  background: color-mix(in srgb, var(--color-warning) 20 %, transparent);
}
.choice-dropdown-ghost-error {
  background: color-mix(in srgb, var(--color-error) 8 %, transparent);
  color: var(--color-error);
  border: 1px solid color-mix(in srgb, var(--color-error) 20%, transparent);
  transition: all var(--duration-fast) var(--ease-out);
}
.choice-dropdown-ghost-error:hover {
  background: color-mix(in srgb, var(--color-error) 15 %, transparent);
}
.choice-dropdown-ghost-error:active {
  background: color-mix(in srgb, var(--color-error) 20 %, transparent);
}
.choice-dropdown-ghost-info {
  background: color-mix(in srgb, var(--color-info) 8 %, transparent);
  color: var(--color-info);
  border: 1px solid color-mix(in srgb, var(--color-info) 20%, transparent);
  transition: all var(--duration-fast) var(--ease-out);
}
.choice-dropdown-ghost-info:hover {
  background: color-mix(in srgb, var(--color-info) 15 %, transparent);
}
.choice-dropdown-ghost-info:active {
  background: color-mix(in srgb, var(--color-info) 20 %, transparent);
}
.choice .choice-content {
  width: 100%;
  max-height: 100%;
  overflow: visible;
  padding: var(--space-1) 0;
  box-sizing: border-box;
}
.choice .choice-content .choice-item {
  border: none;
  background: transparent;
  margin: var(--space-0-5) var(--space-1);
  justify-content: flex-start;
  text-align: left;
  padding: var(--space-2-5) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  color: var(--color-text);
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  cursor: pointer;
  border-radius: var(--radius-md);
  position: relative;
  width: calc(100% - var(--space-1) * 2);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  min-width: 0;
  min-height: var(--space-10);
}
.choice .choice-content .choice-item:nth-child(even) {
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
}
.choice .choice-content .choice-item:nth-child(odd) {
  background: var(--color-surface);
}
.choice .choice-content .choice-item:hover, .choice .choice-content .choice-item.choice-item-highlighted {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-text);
}
.choice .choice-content .choice-item:active {
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
  transform: scale(0.98);
}
.choice .choice-content .choice-item.choice-item-active {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: var(--font-semibold);
  position: relative;
  z-index: 101;
}
.choice .choice-content .choice-item.choice-item-active .icon,
.choice .choice-content .choice-item.choice-item-active i {
  color: var(--color-text-inverse);
  opacity: 1;
}
.choice .choice-content .choice-item.choice-item-active:hover {
  background: var(--color-primary-hover);
  color: var(--color-text-inverse);
}
.choice .choice-content .choice-item .icon,
.choice .choice-content .choice-item i {
  color: currentColor;
  flex-shrink: 0;
  font-size: var(--icon-sm);
  opacity: 0.8;
  transition: var(--transition-colors);
}
.choice .choice-content .choice-item .choice-text,
.choice .choice-content .choice-item .choice-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  display: block;
  line-height: 1.4;
}
.choice .choice-content .choice-item .choice-avatar {
  flex-shrink: 0;
}
.choice.choice-open .choice-trigger {
  border-color: var(--color-primary);
}
.choice.choice-open .choice-trigger::after {
  transform: translateY(-50%) rotate(180deg);
}
.choice.choice-open .choice-viewport {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  animation: dropdownSlideIn var(--duration-normal) var(--ease-out);
}
.choice-switcher {
  display: flex;
  background: var(--color-surface);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-1);
  gap: var(--space-1);
}
.choice-switcher .choice-item {
  flex: 1;
  border: none;
  background: transparent;
  position: relative;
  transition: all var(--duration-fast) var(--ease-out);
}
.choice-switcher .choice-item::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 80%;
  height: 2px;
  background: var(--color-primary);
  transition: transform var(--duration-fast) var(--ease-out);
}
.choice-switcher .choice-item-active {
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-sm);
  color: var(--color-primary);
  font-weight: var(--font-semibold);
}
.choice-switcher .choice-item-active::before {
  transform: translateX(-50%) scaleX(1);
}
.choice-pills {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.choice-pills .choice-item {
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface-elevated);
  border: var(--border-1) solid var(--color-border);
  color: var(--color-text);
  transition: all var(--duration-fast) var(--ease-out);
}
.choice-pills .choice-item:hover {
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.choice-pills .choice-item-active {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}
.choice-pills .choice-item-active:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}
.choice-pills .choice-item[data-severity=low], .choice-pills .choice-item[data-variant=success] {
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  color: var(--color-success);
  border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
}
.choice-pills .choice-item[data-severity=low]:hover, .choice-pills .choice-item[data-variant=success]:hover {
  background: color-mix(in srgb, var(--color-success) 20%, transparent);
  border-color: var(--color-success);
}
.choice-pills .choice-item[data-severity=low].choice-item-active, .choice-pills .choice-item[data-variant=success].choice-item-active {
  background: var(--color-success);
  color: var(--color-text-inverse);
  border-color: var(--color-success);
}
.choice-pills .choice-item[data-severity=medium], .choice-pills .choice-item[data-variant=warning] {
  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
  color: var(--color-warning);
  border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
}
.choice-pills .choice-item[data-severity=medium]:hover, .choice-pills .choice-item[data-variant=warning]:hover {
  background: color-mix(in srgb, var(--color-warning) 20%, transparent);
  border-color: var(--color-warning);
}
.choice-pills .choice-item[data-severity=medium].choice-item-active, .choice-pills .choice-item[data-variant=warning].choice-item-active {
  background: var(--color-warning);
  color: var(--color-text-inverse);
  border-color: var(--color-warning);
}
.choice-pills .choice-item[data-severity=high], .choice-pills .choice-item[data-variant=error] {
  background: color-mix(in srgb, var(--color-error) 12%, transparent);
  color: var(--color-error);
  border-color: color-mix(in srgb, var(--color-error) 30%, transparent);
}
.choice-pills .choice-item[data-severity=high]:hover, .choice-pills .choice-item[data-variant=error]:hover {
  background: color-mix(in srgb, var(--color-error) 20%, transparent);
  border-color: var(--color-error);
}
.choice-pills .choice-item[data-severity=high].choice-item-active, .choice-pills .choice-item[data-variant=error].choice-item-active {
  background: var(--color-error);
  color: var(--color-text-inverse);
  border-color: var(--color-error);
}
.choice-pills .choice-item[data-severity=critical], .choice-pills .choice-item[data-variant=primary] {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
  border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.choice-pills .choice-item[data-severity=critical]:hover, .choice-pills .choice-item[data-variant=primary]:hover {
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
  border-color: var(--color-primary);
}
.choice-pills .choice-item[data-severity=critical].choice-item-active, .choice-pills .choice-item[data-variant=primary].choice-item-active {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}
.choice-pills .choice-item[data-variant=info] {
  background: color-mix(in srgb, var(--color-info) 12%, transparent);
  color: var(--color-info);
  border-color: color-mix(in srgb, var(--color-info) 30%, transparent);
}
.choice-pills .choice-item[data-variant=info]:hover {
  background: color-mix(in srgb, var(--color-info) 20%, transparent);
  border-color: var(--color-info);
}
.choice-pills .choice-item[data-variant=info].choice-item-active {
  background: var(--color-info);
  color: var(--color-text-inverse);
  border-color: var(--color-info);
}
.choice-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: var(--border-2) solid var(--color-border);
}
.choice-tabs .choice-item {
  border: none;
  background: transparent;
  border-bottom: var(--border-2) solid transparent;
  margin-bottom: calc(var(--border-2) * -1);
  padding: var(--space-3) var(--space-4);
  transition: all var(--duration-fast) var(--ease-out);
}
.choice-tabs .choice-item:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary-light);
}
.choice-tabs .choice-item-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: var(--font-semibold);
}
.choice-tabs .choice-item-active:hover {
  border-bottom-color: var(--color-primary);
}
.choice-buttons {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.choice-buttons .choice-item {
  background: var(--color-surface-elevated);
  border: var(--border-1) solid var(--color-border);
}
.choice-buttons .choice-item:hover {
  background: var(--color-surface);
  border-color: var(--color-primary);
}
.choice-buttons .choice-item-active {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}
.choice-buttons .choice-item-active:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}
.choice-xs .choice-item, .choice-xs .choice-trigger {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
}
.choice-sm .choice-item, .choice-sm .choice-trigger {
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
}
.choice-md .choice-item, .choice-md .choice-trigger {
  font-size: var(--text-sm);
  padding: var(--space-2-5) var(--space-3);
}
.choice-lg .choice-item, .choice-lg .choice-trigger {
  font-size: var(--text-base);
  padding: var(--space-3) var(--space-4);
}
.choice-xl .choice-item, .choice-xl .choice-trigger {
  font-size: var(--text-lg);
  padding: var(--space-4) var(--space-5);
}
.choice-density-compact {
  padding: var(--space-1-5);
  gap: var(--space-1);
  font-size: var(--text-xs);
}
.choice-density-compact .form-section {
  margin: var(--space-1-5) var(--space-0-5);
}
.choice-density-compact .form-group {
  gap: var(--space-1);
}
.choice-density-compact .choice-item, .choice-density-compact .choice-trigger {
  padding: var(--space-1) var(--space-2);
}
.choice-density-dense {
  padding: var(--space-2);
  gap: var(--space-1-5);
  font-size: var(--text-sm);
}
.choice-density-dense .form-section {
  margin: var(--space-2) var(--space-0-5);
}
.choice-density-dense .form-group {
  gap: var(--space-1-5);
}
.choice-density-dense .choice-item, .choice-density-dense .choice-trigger {
  padding: var(--space-2) var(--space-3);
}
.choice-density-spacious {
  padding: var(--space-5);
  gap: var(--space-3);
  font-size: var(--text-lg);
}
.choice-density-spacious .form-section {
  margin: var(--space-5) var(--space-0-5);
}
.choice-density-spacious .form-group {
  gap: var(--space-3);
}
.choice-density-spacious .choice-item, .choice-density-spacious .choice-trigger {
  padding: var(--space-4) var(--space-5);
}
@media (hover: none) and (pointer: coarse) {
  .choice .choice-item, .choice .choice-trigger {
    min-height: 44px;
    padding-top: max(var(--space-2), 8px);
    padding-bottom: max(var(--space-2), 8px);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.choice-groups-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.choice-groups-container .choice-group {
  width: 100%;
  max-width: none;
}

.choice-group {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  margin-bottom: var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  transition: all var(--duration-normal) var(--ease-out);
}
.choice-group .choice-group {
  margin-left: var(--space-4);
  margin-bottom: var(--space-2);
  border-left: var(--border-2) solid var(--color-border-light);
}
.choice-group .choice-group .choice-group-header {
  background: color-mix(in srgb, var(--color-surface) 90%, var(--color-primary) 10%);
}
.choice-group-expanded .choice-group-header {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}
.choice-group-expanded .choice-group-header .choice-group-title {
  color: var(--color-primary);
  font-weight: var(--font-semibold);
}
.choice-group-collapsible .choice-group-header {
  cursor: pointer;
  user-select: none;
}
.choice-group-collapsible .choice-group-content {
  overflow: hidden;
  transition: max-height var(--duration-normal) cubic-bezier(0.4, 0, 0.2, 1), opacity var(--duration-fast) var(--ease-out), transform var(--duration-normal) cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: top;
  will-change: max-height, opacity, transform;
}
.choice-group-collapsible:not(.choice-group-expanded) .choice-group-content {
  max-height: 0 !important;
  opacity: 0;
  transform: translateY(-20px) scaleY(0);
  visibility: hidden;
  pointer-events: none;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
}
.choice-group-collapsible.choice-group-expanded .choice-group-content {
  max-height: 3000px;
  opacity: 1;
  transform: translateY(0) scaleY(1);
  visibility: visible;
  pointer-events: auto;
  animation: expandDownBounce var(--duration-normal) var(--easing-smooth);
}
.choice-group-disabled {
  opacity: var(--opacity-disabled);
  pointer-events: none;
}
.choice-group-disabled .choice-group-header {
  background: color-mix(in srgb, var(--color-surface) 60%, transparent);
  cursor: not-allowed;
}

.choice-group-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-elevated);
  border-radius: var(--radius-lg);
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
  min-height: var(--space-12);
}
.choice-group-header-clickable:hover {
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface-elevated));
}
.choice-group-header-clickable:hover .choice-group-expand {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  transform: scale(1.1);
}
.choice-group-header-clickable:hover .choice-group-title {
  color: var(--color-primary);
}
.choice-group-header-clickable:active {
  transform: scale(0.99);
}
.choice-group-header-card {
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(135deg, var(--color-surface-elevated), color-mix(in srgb, var(--color-surface-elevated) 95%, var(--color-primary) 5%));
  box-shadow: var(--shadow-sm);
  border-bottom: var(--border-2) solid var(--color-border);
}
.choice-group-header-badge {
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border-bottom: var(--border-1) dashed var(--color-border-light);
}

.choice-group-header-content {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}
.choice-group-header-content .choice-group-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out);
}
.choice-group-header-content .choice-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-6);
  height: var(--space-6);
  padding: 0 var(--space-2);
  background: var(--color-surface);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
}
.choice-group-header-content .choice-group-badge {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.choice-group-expand {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: var(--border-1) solid var(--color-border);
  color: var(--color-text-muted);
  transition: all var(--duration-fast) var(--ease-out);
  flex-shrink: 0;
}
.choice-group-expand:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: scale(1.05);
}
.choice-group-expand:active {
  transform: scale(0.95);
}
.choice-group-expand .choice-expand-icon {
  font-size: var(--text-lg);
  transition: transform var(--duration-fast) var(--ease-out);
}
.choice-group-expanded .choice-group-expand .choice-expand-icon {
  transform: rotate(180deg);
}

.choice-group-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
  flex-shrink: 0;
}
.choice-group-icon.icon {
  font-size: var(--text-lg);
}

.choice-group-select-all {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-10);
  height: var(--space-8);
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: var(--border-1) solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  transition: all var(--duration-fast) var(--ease-out);
  margin-left: auto;
  gap: var(--space-1);
}
.choice-group-select-all:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.choice-group-select-all:active {
  transform: translateY(0);
  box-shadow: none;
}
.choice-group-select-all .choice-select-all-icon {
  font-size: var(--text-sm);
}

.choice-group-content {
  display: flex;
  flex-direction: column;
  padding: var(--space-2);
  background: var(--color-surface);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  animation: slideDown var(--duration-normal) var(--ease-out);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-dark) var(--color-surface);
}
.choice-group-content::-webkit-scrollbar {
  width: 8px;
}
.choice-group-content::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--color-border) 20%, transparent);
  border-radius: var(--radius-sm);
  margin: var(--space-1) 0;
}
.choice-group-content::-webkit-scrollbar-thumb {
  background: var(--color-border-dark);
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: all var(--duration-fast);
}
.choice-group-content::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
  background-clip: padding-box;
  width: 10px;
}
.choice-group-content-card {
  background: var(--color-surface-elevated);
  padding: var(--space-3);
  margin-top: 0;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}
.choice-group-content-striped .choice-item-wrapper:nth-child(even) {
  background: color-mix(in srgb, var(--color-surface) 50%, var(--color-surface-elevated) 50%);
}
.choice-group-content-striped .choice-item-wrapper:nth-child(odd) {
  background: var(--color-surface);
}

.choice-item-wrapper {
  display: flex;
  width: 100%;
  padding: 0 var(--space-2);
  border-radius: var(--radius-md);
  transition: background var(--duration-fast) var(--ease-out);
}
.choice-item-wrapper:hover {
  background: color-mix(in srgb, var(--color-primary) 5%, transparent);
}
.choice-item-wrapper-alt {
  background: color-mix(in srgb, var(--color-surface-elevated) 30%, transparent);
}

.choice-group-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  min-height: var(--space-12);
  border-radius: var(--radius-md);
  background: transparent;
  border: var(--border-1) solid transparent;
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-align: left;
  cursor: pointer;
  user-select: none;
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
}
.choice-group-item-success {
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  color: var(--color-success);
  border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
}
.choice-group-item-success:hover {
  background: color-mix(in srgb, var(--color-success) 20%, transparent);
  border-color: var(--color-success);
}
.choice-group-item-success.choice-item-active, .choice-group-item-success-active {
  background: var(--color-success);
  color: var(--color-text-inverse);
  border-color: var(--color-success);
}
.choice-group-item-success.choice-item-active:hover, .choice-group-item-success-active:hover {
  background: var(--color-success-hover);
  border-color: var(--color-success-hover);
}
.choice-group-item-warning {
  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
  color: var(--color-warning);
  border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
}
.choice-group-item-warning:hover {
  background: color-mix(in srgb, var(--color-warning) 20%, transparent);
  border-color: var(--color-warning);
}
.choice-group-item-warning.choice-item-active, .choice-group-item-warning-active {
  background: var(--color-warning);
  color: var(--color-text-inverse);
  border-color: var(--color-warning);
}
.choice-group-item-warning.choice-item-active:hover, .choice-group-item-warning-active:hover {
  background: var(--color-warning-hover);
  border-color: var(--color-warning-hover);
}
.choice-group-item-error {
  background: color-mix(in srgb, var(--color-error) 12%, transparent);
  color: var(--color-error);
  border-color: color-mix(in srgb, var(--color-error) 30%, transparent);
}
.choice-group-item-error:hover {
  background: color-mix(in srgb, var(--color-error) 20%, transparent);
  border-color: var(--color-error);
}
.choice-group-item-error.choice-item-active, .choice-group-item-error-active {
  background: var(--color-error);
  color: var(--color-text-inverse);
  border-color: var(--color-error);
}
.choice-group-item-error.choice-item-active:hover, .choice-group-item-error-active:hover {
  background: var(--color-error-hover);
  border-color: var(--color-error-hover);
}
.choice-group-item[data-severity=low], .choice-group-item[data-variant=success] {
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  color: var(--color-success);
  border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
}
.choice-group-item[data-severity=low]:hover, .choice-group-item[data-variant=success]:hover {
  background: color-mix(in srgb, var(--color-success) 20%, transparent);
  border-color: var(--color-success);
}
.choice-group-item[data-severity=medium], .choice-group-item[data-variant=warning] {
  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
  color: var(--color-warning);
  border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
}
.choice-group-item[data-severity=medium]:hover, .choice-group-item[data-variant=warning]:hover {
  background: color-mix(in srgb, var(--color-warning) 20%, transparent);
  border-color: var(--color-warning);
}
.choice-group-item[data-severity=high], .choice-group-item[data-variant=error] {
  background: color-mix(in srgb, var(--color-error) 12%, transparent);
  color: var(--color-error);
  border-color: color-mix(in srgb, var(--color-error) 30%, transparent);
}
.choice-group-item[data-severity=high]:hover, .choice-group-item[data-variant=error]:hover {
  background: color-mix(in srgb, var(--color-error) 20%, transparent);
  border-color: var(--color-error);
}
.choice-group-item-primary {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
  border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.choice-group-item-primary:hover {
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
  border-color: var(--color-primary);
}
.choice-group-item-primary.choice-item-active, .choice-group-item-primary-active {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}
.choice-group-item-primary.choice-item-active:hover, .choice-group-item-primary-active:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}
.choice-group-item-info {
  background: color-mix(in srgb, var(--color-info) 12%, transparent);
  color: var(--color-info);
  border-color: color-mix(in srgb, var(--color-info) 30%, transparent);
}
.choice-group-item-info:hover {
  background: color-mix(in srgb, var(--color-info) 20%, transparent);
  border-color: var(--color-info);
}
.choice-group-item-info.choice-item-active, .choice-group-item-info-active {
  background: var(--color-info);
  color: var(--color-text-inverse);
  border-color: var(--color-info);
}
.choice-group-item-info.choice-item-active:hover, .choice-group-item-info-active:hover {
  background: var(--color-info-hover);
  border-color: var(--color-info-hover);
}
.choice-group-item[data-severity=critical], .choice-group-item[data-variant=primary] {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
  border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.choice-group-item[data-severity=critical]:hover, .choice-group-item[data-variant=primary]:hover {
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
  border-color: var(--color-primary);
}
.choice-group-item[data-variant=info] {
  background: color-mix(in srgb, var(--color-info) 12%, transparent);
  color: var(--color-info);
  border-color: color-mix(in srgb, var(--color-info) 30%, transparent);
}
.choice-group-item[data-variant=info]:hover {
  background: color-mix(in srgb, var(--color-info) 20%, transparent);
  border-color: var(--color-info);
}
.choice-group-item:hover {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-color: var(--color-primary-light);
  transform: translateX(var(--space-1));
}
.choice-group-item:hover .choice-item-label {
  color: var(--color-primary);
}
.choice-group-item:active {
  transform: translateX(0) scale(0.98);
}
.choice-group-item.choice-item-selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
  box-shadow: var(--shadow-sm);
}
.choice-group-item.choice-item-selected::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 70%;
  background: var(--color-primary-active);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  z-index: 1;
}
.choice-group-item.choice-item-selected .choice-item-label,
.choice-group-item.choice-item-selected .choice-item-description {
  color: white;
}
.choice-group-item.choice-item-selected .choice-item-icon,
.choice-group-item.choice-item-selected .choice-checkbox-icon {
  color: var(--color-text-inverse);
}
.choice-group-item.choice-item-selected:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  transform: translateX(0);
}
.choice-group-item.choice-item-disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
  background: color-mix(in srgb, var(--color-surface) 60%, transparent);
}
.choice-group-item.choice-item-disabled:hover {
  transform: none;
}
.choice-group-item.choice-item-loading {
  cursor: wait;
  opacity: var(--opacity-70);
}
.choice-group-item.choice-item-loading::after {
  content: "";
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  width: var(--space-4);
  height: var(--space-4);
  border: var(--border-2) solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: spinTranslateY 1s linear infinite;
}

.choice-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5);
  height: var(--space-5);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: var(--border-2) solid var(--color-border);
  flex-shrink: 0;
  transition: all var(--duration-fast) var(--ease-out);
}
.choice-checkbox .choice-checkbox-icon {
  font-size: var(--text-sm);
  color: transparent;
  transition: color var(--duration-fast) var(--ease-out);
}
.choice-checkbox .choice-checkbox-icon-checked {
  color: var(--color-primary);
}
.choice-item-selected .choice-checkbox {
  background: var(--color-text-inverse);
  border-color: var(--color-text-inverse);
}
.choice-item-selected .choice-checkbox .choice-checkbox-icon-checked {
  color: var(--color-primary);
}

.choice-item-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 2;
}
.choice-item-content .choice-item-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out);
}
.choice-item-content .choice-item-description {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out);
}

.choice-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-full);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-surface);
  border: var(--border-2) solid var(--color-border);
}
.choice-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.choice-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: color var(--duration-fast) var(--ease-out);
}
.choice-item-icon.icon {
  font-size: var(--text-lg);
}

.choice-item-badge {
  margin-left: auto;
  flex-shrink: 0;
}
.choice-item-badge.badge-secondary {
  background: var(--color-border-light);
  color: var(--color-text-muted);
}
.choice-item-badge.badge-success {
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  color: var(--color-success-dark);
}
.choice-item-badge.badge-warning {
  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
  color: var(--color-warning-dark);
}
.choice-item-badge.badge-error {
  background: color-mix(in srgb, var(--color-error) 10%, transparent);
  color: var(--color-error-dark);
}
.choice-item-badge.badge-info {
  background: color-mix(in srgb, var(--color-info) 10%, transparent);
  color: var(--color-info-dark);
}

.choice-selected-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  margin-left: auto;
  color: var(--color-text-inverse);
  flex-shrink: 0;
}
.choice-selected-icon.icon {
  font-size: var(--text-lg);
}

.choice-no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
}
.choice-no-results .icon {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-2);
  opacity: var(--opacity-50);
}
.choice-no-results span {
  font-size: var(--text-sm);
}

.choice-group.text-xs .choice-group-title {
  font-size: var(--text-xs);
}
.choice-group.text-xs .choice-group-header {
  padding: var(--space-2) var(--space-3);
  min-height: var(--space-10);
}
.choice-group.text-xs .choice-group-item {
  padding: var(--space-2) var(--space-3);
  min-height: var(--space-10);
  font-size: var(--text-xs);
}
.choice-group.text-sm .choice-group-title {
  font-size: var(--text-sm);
}
.choice-group.text-sm .choice-group-item {
  font-size: var(--text-sm);
}
.choice-group.text-lg .choice-group-title {
  font-size: var(--text-lg);
}
.choice-group.text-lg .choice-group-header {
  padding: var(--space-4) var(--space-5);
  min-height: var(--space-14);
}
.choice-group.text-lg .choice-group-item {
  padding: var(--space-4) var(--space-5);
  min-height: var(--space-14);
  font-size: var(--text-base);
}
.choice-group.input-compact .choice-group-header {
  padding: var(--space-1) var(--space-2);
  min-height: var(--space-8);
}
.choice-group.input-compact .choice-group-item {
  padding: var(--space-1) var(--space-2);
  min-height: var(--space-8);
}
.choice-group.input-compact .choice-group-content {
  padding: var(--space-1);
}
.choice-group.input-dense .choice-group-header {
  padding: var(--space-2) var(--space-3);
  min-height: var(--space-10);
}
.choice-group.input-dense .choice-group-item {
  padding: var(--space-2) var(--space-3);
  min-height: var(--space-10);
}
.choice-group.input-spacious .choice-group-header {
  padding: var(--space-5) var(--space-6);
  min-height: var(--space-16);
}
.choice-group.input-spacious .choice-group-item {
  padding: var(--space-5) var(--space-6);
  min-height: var(--space-16);
}
.choice-group.input-spacious .choice-group-content {
  padding: var(--space-4);
}

@media (prefers-color-scheme: dark) {
  .choice-group {
    --choice-bg-surface: var(--color-surface-dark);
    --choice-bg-content: var(--color-background-dark);
    --choice-bg-hover: color-mix(in srgb, var(--color-primary) 15%, var(--color-surface-dark));
    --choice-bg-selected: color-mix(in srgb, var(--color-primary) 80%, var(--color-text));
  }
  .choice-group .choice-group-header {
    background: var(--choice-bg-surface);
  }
  .choice-group .choice-group-header:hover {
    background: var(--choice-bg-hover);
  }
  .choice-group .choice-group-content {
    background: var(--choice-bg-content);
  }
  .choice-group .choice-group-item.choice-item-selected {
    background: var(--choice-bg-selected);
  }
  .choice-group .choice-group-item.choice-item-selected::before {
    background: var(--color-primary);
  }
}
@media (max-width: 639px) {
  .choice-group .choice-group-header {
    padding: var(--space-2) var(--space-3);
  }
  .choice-group .choice-group-header .choice-group-title {
    font-size: var(--text-sm);
  }
  .choice-group .choice-group-item {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
  }
  .choice-group .choice-group {
    margin-left: var(--space-2);
  }
}
@media (hover: none) and (pointer: coarse) {
  .choice-group .choice-item, .choice-group .choice-trigger {
    min-height: 44px;
    padding-top: max(var(--space-2), 8px);
    padding-bottom: max(var(--space-2), 8px);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media (hover: none) and (pointer: coarse) {
  .choice-group .choice-group-expand,
  .choice-group .choice-group-select-all {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
  }
}

.choice-tree {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  overflow: hidden;
}
.choice-tree-standard {
  background: var(--color-surface);
}
.choice-tree-bordered {
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.choice-tree-elevated {
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-md);
  border: none;
}
.choice-tree-flat {
  background: transparent;
  border: none;
  box-shadow: none;
}
.choice-tree-glass {
  backdrop-filter: blur(10px);
}
.choice-tree-lines .choice-tree-indent-line {
  position: relative;
}
.choice-tree-lines .choice-tree-indent-line::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-border-light);
  transform: translateX(-50%);
}
.choice-tree-lines .choice-tree-node-row {
  position: relative;
}
.choice-tree-lines .choice-tree-node-row::before {
  content: "";
  position: absolute;
  left: calc(var(--tree-indent-width) * var(--tree-level) - var(--space-3));
  top: 50%;
  width: var(--space-3);
  height: 1px;
  background: var(--color-border-light);
}
.choice-tree-striped .choice-tree-node-row-alt {
  background: color-mix(in srgb, var(--color-text) 3%, transparent);
}

.choice-tree-node {
  --tree-level: 0;
  --tree-indent-width: var(--space-6);
  display: flex;
  flex-direction: column;
  transition: all var(--duration-fast) var(--ease-out);
}
.choice-tree-node-expanded > .choice-tree-children {
  display: block;
}
.choice-tree-node-selected > .choice-tree-node-row {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.choice-tree-node-selected > .choice-tree-node-row::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-primary);
}
.choice-tree-node-partial > .choice-tree-node-row {
  background: color-mix(in srgb, var(--color-primary) 4%, transparent);
}
.choice-tree-node-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.choice-tree-node-disabled .choice-tree-item {
  cursor: not-allowed;
}
.choice-tree-node:not(.choice-tree-node-disabled) > .choice-tree-node-row:hover {
  background: color-mix(in srgb, var(--color-text) 5%, transparent);
}
.choice-tree-node:focus-within > .choice-tree-node-row {
  outline: none;
}

.choice-tree-node-row {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--space-10);
  padding: var(--space-2) var(--space-3);
  transition: background var(--duration-fast) var(--ease-out);
}

.choice-tree-indent {
  flex-shrink: 0;
  width: var(--tree-indent-width);
  height: 100%;
  position: relative;
}

.choice-tree-expand-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--space-6);
  height: var(--space-6);
  margin-right: var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  transition: all var(--duration-fast) var(--ease-out);
}
.choice-tree-expand-btn:hover {
  background: color-mix(in srgb, var(--color-text) 10%, transparent);
  color: var(--color-text);
}
.choice-tree-expand-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.choice-tree-expand-btn:active {
  transform: scale(0.95);
}

.choice-tree-expand-icon {
  font-size: var(--text-lg);
  transition: transform var(--duration-normal) var(--ease-spring);
}
.choice-tree-expand-icon-expanded {
  transform: rotate(180deg);
}

.choice-tree-spacer {
  flex-shrink: 0;
  width: var(--space-6);
  margin-right: var(--space-2);
}

.choice-tree-item {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  text-align: left;
  color: var(--color-text);
  transition: all var(--duration-fast) var(--ease-out);
}
.choice-tree-item:hover:not(.choice-tree-item-disabled) {
  background: color-mix(in srgb, var(--color-primary) 5%, transparent);
  color: var(--color-primary);
}
.choice-tree-item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.choice-tree-item-selected {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
  font-weight: var(--font-medium);
}
.choice-tree-item-selected:hover {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
}
.choice-tree-item-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.choice-tree-item-loading {
  pointer-events: none;
  opacity: 0.7;
}

.choice-tree-item-template {
  flex: 1;
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.choice-tree-item-template:hover {
  background: color-mix(in srgb, var(--color-primary) 5%, transparent);
}

.choice-tree-checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--space-5);
  height: var(--space-5);
}

.choice-tree-checkbox-icon {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  transition: all var(--duration-fast) var(--ease-out);
}
.choice-tree-checkbox-icon-checked {
  color: var(--color-primary);
}
.choice-tree-checkbox-icon-partial {
  color: var(--color-primary);
  opacity: 0.7;
}

.choice-tree-item-icon {
  flex-shrink: 0;
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}

.choice-tree-avatar {
  flex-shrink: 0;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 2px solid var(--color-border-light);
}
.choice-tree-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.choice-tree-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  min-width: 0;
}

.choice-tree-item-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.choice-tree-item-description {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.choice-tree-item-badge {
  flex-shrink: 0;
  padding: var(--space-0-5) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.choice-tree-item-badge.badge-secondary {
  background: var(--color-border-light);
  color: var(--color-text-muted);
}
.choice-tree-item-badge.badge-success {
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  color: var(--color-success-dark);
}
.choice-tree-item-badge.badge-warning {
  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
  color: var(--color-warning-dark);
}
.choice-tree-item-badge.badge-error {
  background: color-mix(in srgb, var(--color-error) 10%, transparent);
  color: var(--color-error-dark);
}
.choice-tree-item-badge.badge-info {
  background: color-mix(in srgb, var(--color-info) 10%, transparent);
  color: var(--color-info-dark);
}

.choice-tree-selected-icon {
  flex-shrink: 0;
  font-size: var(--text-lg);
  color: var(--color-primary);
  animation: zoomIn var(--duration-normal) var(--ease-spring);
}

.choice-tree-loading {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.choice-tree-loading-icon {
  font-size: var(--text-lg);
  color: var(--color-primary);
}

.choice-tree-children {
  display: none;
  padding-left: 0;
  animation: slideInDown var(--duration-normal) var(--ease-out);
}
.choice-tree-children .choice-tree-node-level-1 {
  --tree-level: 1;
}
.choice-tree-children .choice-tree-node-level-2 {
  --tree-level: 2;
}
.choice-tree-children .choice-tree-node-level-3 {
  --tree-level: 3;
}
.choice-tree-children .choice-tree-node-level-4 {
  --tree-level: 4;
}
.choice-tree-children .choice-tree-node-level-5 {
  --tree-level: 5;
}
.choice-tree-children .choice-tree-node-level-6 {
  --tree-level: 6;
}
.choice-tree-children .choice-tree-node-level-7 {
  --tree-level: 7;
}
.choice-tree-children .choice-tree-node-level-8 {
  --tree-level: 8;
}
.choice-tree-children .choice-tree-node-level-9 {
  --tree-level: 9;
}
.choice-tree-children .choice-tree-node-level-10 {
  --tree-level: 10;
}

.choice-tree-no-results {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-4);
  color: var(--color-text-muted);
  text-align: center;
}
.choice-tree-no-results-icon {
  font-size: var(--text-3xl);
  opacity: 0.5;
}
.choice-tree-no-results span {
  font-size: var(--text-sm);
}

.dense .choice-tree-node-row {
  min-height: var(--space-8);
  padding: var(--space-1) var(--space-2);
}
.dense .choice-tree-item {
  padding: var(--space-1) var(--space-2);
  gap: var(--space-1);
}
.dense .choice-tree-expand-btn,
.dense .choice-tree-spacer {
  width: var(--space-5);
  height: var(--space-5);
}
.dense .choice-tree-avatar {
  width: var(--space-6);
  height: var(--space-6);
}
.dense .choice-tree-indent {
  width: var(--space-5);
}

.ultra-dense .choice-tree-node-row {
  min-height: var(--space-6);
  padding: var(--space-0-5) var(--space-1);
}
.ultra-dense .choice-tree-item {
  padding: var(--space-0-5) var(--space-1);
  gap: var(--space-0-5);
}
.ultra-dense .choice-tree-expand-btn,
.ultra-dense .choice-tree-spacer {
  width: var(--space-4);
  height: var(--space-4);
  margin-right: var(--space-1);
}
.ultra-dense .choice-tree-avatar {
  width: var(--space-5);
  height: var(--space-5);
}
.ultra-dense .choice-tree-indent {
  width: var(--space-4);
}
.ultra-dense .choice-tree-item-label {
  font-size: var(--text-xs);
}
.ultra-dense .choice-tree-item-description {
  font-size: var(--text-2xs);
}

.text-xs .choice-tree-item-label {
  font-size: var(--text-xs);
}
.text-xs .choice-tree-item-icon,
.text-xs .choice-tree-expand-icon,
.text-xs .choice-tree-checkbox-icon {
  font-size: var(--text-sm);
}

.text-sm .choice-tree-item-label {
  font-size: var(--text-sm);
}
.text-sm .choice-tree-item-icon,
.text-sm .choice-tree-expand-icon,
.text-sm .choice-tree-checkbox-icon {
  font-size: var(--text-base);
}

.text-lg .choice-tree-item-label {
  font-size: var(--text-base);
}
.text-lg .choice-tree-item-description {
  font-size: var(--text-sm);
}
.text-lg .choice-tree-item-icon,
.text-lg .choice-tree-expand-icon,
.text-lg .choice-tree-checkbox-icon {
  font-size: var(--text-xl);
}
.text-lg .choice-tree-node-row {
  min-height: var(--space-12);
}

.text-xl .choice-tree-item-label {
  font-size: var(--text-lg);
}
.text-xl .choice-tree-item-description {
  font-size: var(--text-base);
}
.text-xl .choice-tree-item-icon,
.text-xl .choice-tree-expand-icon,
.text-xl .choice-tree-checkbox-icon {
  font-size: var(--text-2xl);
}
.text-xl .choice-tree-node-row {
  min-height: var(--space-14);
}

@media (max-width: 639px) {
  .choice-tree {
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  .choice-tree-item-label {
    font-size: var(--text-sm);
  }
  .choice-tree-indent {
    width: var(--space-4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .choice-tree-children {
    animation: none;
  }
  .choice-tree-expand-icon {
    transition: none;
  }
  .choice-tree-selected-icon {
    animation: none;
  }
}
@media (prefers-contrast: high) {
  .choice-tree {
    border-width: 2px;
  }
  .choice-tree-node-selected > .choice-tree-node-row {
    outline: none;
  }
  .choice-tree-item-selected {
    outline: none;
  }
}
:root[data-theme=dark] .choice-tree-striped .choice-tree-node-row-alt {
  background: color-mix(in srgb, var(--color-surface-elevated) 50%, transparent);
}
:root[data-theme=dark] .choice-tree-node-selected > .choice-tree-node-row {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
}
:root[data-theme=dark] .choice-tree-item-selected {
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip-content {
  position: fixed;
  background: var(--color-surface-elevated);
  color: var(--color-text);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: 1.4;
  white-space: normal;
  max-width: 24rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: var(--border-1) solid var(--color-border);
  z-index: var(--z-tooltip);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-fast) var(--ease-out), visibility var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
  pointer-events: none;
  transform: translateY(-4px);
  will-change: opacity, visibility, transform;
}
.tooltip-content .tooltip-arrow {
  position: absolute;
  width: var(--offset-8);
  height: var(--offset-8);
  background: var(--color-surface-elevated);
  border: var(--border-1) solid var(--color-border);
  transform: rotate(45deg);
  z-index: 1;
}
.tooltip-content.tooltip-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.tooltip-content.tooltip-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
}
.tooltip-top.tooltip-content {
  transform: translateY(4px);
}
.tooltip-top.tooltip-content.tooltip-visible {
  transform: translateY(0);
}
.tooltip-top .tooltip-arrow {
  bottom: calc(var(--offset-4) * -1);
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  border-bottom-color: transparent;
  border-left-color: transparent;
}
.tooltip-bottom.tooltip-content {
  transform: translateY(-4px);
}
.tooltip-bottom.tooltip-content.tooltip-visible {
  transform: translateY(0);
}
.tooltip-bottom .tooltip-arrow {
  top: calc(var(--offset-4) * -1);
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  border-top-color: transparent;
  border-right-color: transparent;
}
.tooltip-left.tooltip-content {
  transform: translateX(4px);
}
.tooltip-left.tooltip-content.tooltip-visible {
  transform: translateX(0);
}
.tooltip-left .tooltip-arrow {
  right: calc(var(--offset-4) * -1);
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  border-top-color: transparent;
  border-right-color: transparent;
}
.tooltip-right.tooltip-content {
  transform: translateX(-4px);
}
.tooltip-right.tooltip-content.tooltip-visible {
  transform: translateX(0);
}
.tooltip-right .tooltip-arrow {
  left: calc(var(--offset-4) * -1);
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  border-bottom-color: transparent;
  border-left-color: transparent;
}
.tooltip-primary .tooltip-content {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}
.tooltip-primary .tooltip-content .tooltip-arrow {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.tooltip-success .tooltip-content {
  background: var(--color-success);
  color: var(--color-text-inverse);
  border-color: var(--color-success);
}
.tooltip-success .tooltip-content .tooltip-arrow {
  background: var(--color-success);
  border-color: var(--color-success);
}
.tooltip-warning .tooltip-content {
  background: var(--color-warning);
  color: var(--color-text-inverse);
  border-color: var(--color-warning);
}
.tooltip-warning .tooltip-content .tooltip-arrow {
  background: var(--color-warning);
  border-color: var(--color-warning);
}
.tooltip-error .tooltip-content {
  background: var(--color-error);
  color: var(--color-text-inverse);
  border-color: var(--color-error);
}
.tooltip-error .tooltip-content .tooltip-arrow {
  background: var(--color-error);
  border-color: var(--color-error);
}
.tooltip-info .tooltip-content {
  background: var(--color-info);
  color: var(--color-text-inverse);
  border-color: var(--color-info);
}
.tooltip-info .tooltip-content .tooltip-arrow {
  background: var(--color-info);
  border-color: var(--color-info);
}
.tooltip-neutral .tooltip-content {
  background: var(--color-text-muted);
  color: var(--color-text-inverse);
  border-color: var(--color-text-muted);
}
.tooltip-neutral .tooltip-content .tooltip-arrow {
  background: var(--color-text-muted);
  border-color: var(--color-text-muted);
}
.tooltip-ghost .tooltip-content {
  background: transparent;
  color: var(--color-text);
  border: var(--border-2) dashed var(--color-border);
  backdrop-filter: blur(8px);
}
.tooltip-ghost .tooltip-content .tooltip-arrow {
  background: transparent;
  border-color: var(--color-border);
}
.tooltip-dark .tooltip-content {
  background: var(--color-text);
  color: var(--color-canvas);
  border-color: var(--color-text);
}
.tooltip-dark .tooltip-content .tooltip-arrow {
  background: var(--color-text);
  border-color: var(--color-text);
}
.tooltip-large .tooltip-content {
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.5;
  white-space: normal;
  max-width: 24rem;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  position: relative;
  overflow: visible;
  flex-shrink: 0;
  line-height: 1;
  vertical-align: middle;
  font-weight: var(--font-semibold);
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  width: 2.5rem;
  height: 2.5rem;
  font-size: var(--text-sm);
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-elevated) 100%);
  color: var(--color-text);
  border: 2px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.avatar:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-md);
}
.avatar img,
.avatar .avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.avatar .avatar-text {
  font-weight: var(--font-bold);
  text-transform: uppercase;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  user-select: none;
  background: transparent;
  border: none;
  outline: none;
  position: relative;
}
.avatar i {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  position: relative;
}
.avatar:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-hover);
}
.avatar-xs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  position: relative;
  overflow: visible;
  flex-shrink: 0;
  line-height: 1;
  vertical-align: middle;
  font-weight: var(--font-semibold);
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  width: 1.25rem;
  height: 1.25rem;
  font-size: var(--text-2xs);
}
.avatar-xs:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-md);
}
.avatar-xs img,
.avatar-xs .avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.avatar-xs .avatar-text {
  font-weight: var(--font-bold);
  text-transform: uppercase;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  user-select: none;
  background: transparent;
  border: none;
  outline: none;
  position: relative;
}
.avatar-xs i {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  position: relative;
}
.avatar-xs .avatar-status {
  width: 0.5rem;
  height: 0.5rem;
  border-width: 1px;
}
.avatar-xs .avatar-badge {
  min-width: 0.875rem;
  height: 0.875rem;
  font-size: var(--text-2xs);
  top: -2px;
  right: -2px;
}
.avatar-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  position: relative;
  overflow: visible;
  flex-shrink: 0;
  line-height: 1;
  vertical-align: middle;
  font-weight: var(--font-semibold);
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  width: 1.75rem;
  height: 1.75rem;
  font-size: var(--text-xs);
}
.avatar-sm:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-md);
}
.avatar-sm img,
.avatar-sm .avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.avatar-sm .avatar-text {
  font-weight: var(--font-bold);
  text-transform: uppercase;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  user-select: none;
  background: transparent;
  border: none;
  outline: none;
  position: relative;
}
.avatar-sm i {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  position: relative;
}
.avatar-sm .avatar-status {
  width: 0.625rem;
  height: 0.625rem;
  border-width: 1.5px;
}
.avatar-sm .avatar-badge {
  min-width: 1rem;
  height: 1rem;
  font-size: var(--text-2xs);
  top: -3px;
  right: -3px;
}
.avatar-md {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  position: relative;
  overflow: visible;
  flex-shrink: 0;
  line-height: 1;
  vertical-align: middle;
  font-weight: var(--font-semibold);
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  width: 2.5rem;
  height: 2.5rem;
  font-size: var(--text-sm);
}
.avatar-md:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-md);
}
.avatar-md img,
.avatar-md .avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.avatar-md .avatar-text {
  font-weight: var(--font-bold);
  text-transform: uppercase;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  user-select: none;
  background: transparent;
  border: none;
  outline: none;
  position: relative;
}
.avatar-md i {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  position: relative;
}
.avatar-md .avatar-status {
  width: 0.75rem;
  height: 0.75rem;
  border-width: 2px;
}
.avatar-md .avatar-badge {
  min-width: 1.25rem;
  height: 1.25rem;
  font-size: var(--text-xs);
  top: -4px;
  right: -4px;
}
.avatar-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  position: relative;
  overflow: visible;
  flex-shrink: 0;
  line-height: 1;
  vertical-align: middle;
  font-weight: var(--font-semibold);
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  width: var(--space-14);
  height: var(--space-14);
  font-size: var(--text-base);
}
.avatar-lg:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-md);
}
.avatar-lg img,
.avatar-lg .avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.avatar-lg .avatar-text {
  font-weight: var(--font-bold);
  text-transform: uppercase;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  user-select: none;
  background: transparent;
  border: none;
  outline: none;
  position: relative;
}
.avatar-lg i {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  position: relative;
}
.avatar-lg .avatar-status {
  width: 1rem;
  height: 1rem;
  border-width: 2.5px;
}
.avatar-lg .avatar-badge {
  min-width: 1.5rem;
  height: 1.5rem;
  font-size: var(--text-sm);
  top: -5px;
  right: -5px;
}
.avatar-xl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  position: relative;
  overflow: visible;
  flex-shrink: 0;
  line-height: 1;
  vertical-align: middle;
  font-weight: var(--font-semibold);
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  width: 4.5rem;
  height: 4.5rem;
  font-size: var(--text-lg);
}
.avatar-xl:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-md);
}
.avatar-xl img,
.avatar-xl .avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.avatar-xl .avatar-text {
  font-weight: var(--font-bold);
  text-transform: uppercase;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  user-select: none;
  background: transparent;
  border: none;
  outline: none;
  position: relative;
}
.avatar-xl i {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  position: relative;
}
.avatar-xl .avatar-status {
  width: 1.25rem;
  height: 1.25rem;
  border-width: 3px;
}
.avatar-xl .avatar-badge {
  min-width: 1.75rem;
  height: 1.75rem;
  font-size: var(--text-sm);
  top: -6px;
  right: -6px;
}
.avatar-default {
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-elevated) 100%);
  color: var(--color-text);
  border: 2px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.avatar-default:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-hover);
}
.avatar-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black 20%) 100%);
  color: var(--color-text-inverse);
  border: 2px solid var(--color-primary);
  box-shadow: 0 0 0 0 var(--color-primary), var(--shadow-sm);
}
.avatar-primary:hover {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 20%, transparent 80%), var(--shadow-md);
}
.avatar-primary:hover {
  transform: scale(1.02);
}
.avatar-secondary {
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-elevated) 100%);
  color: var(--color-text-muted);
  border: 2px solid var(--color-border);
  box-shadow: inset 0 1px 2px color-mix(in srgb, black 5%, transparent), var(--shadow-sm);
}
.avatar-secondary:hover {
  border-color: var(--color-text-muted);
  color: var(--color-text);
}
.avatar-success {
  background: linear-gradient(135deg, var(--color-success) 0%, color-mix(in srgb, var(--color-success) 80%, black 20%) 100%);
  color: var(--color-text-inverse);
  border: 2px solid var(--color-success);
  box-shadow: 0 0 0 0 var(--color-success), var(--shadow-sm);
}
.avatar-success:hover {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-success) 20%, transparent 80%), var(--shadow-md);
}
.avatar-success:hover {
  transform: scale(1.02);
}
.avatar-warning {
  background: linear-gradient(135deg, var(--color-warning) 0%, color-mix(in srgb, var(--color-warning) 80%, black 20%) 100%);
  color: var(--color-text-inverse);
  border: 2px solid var(--color-warning);
  box-shadow: 0 0 0 0 var(--color-warning), var(--shadow-sm);
}
.avatar-warning:hover {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-warning) 20%, transparent 80%), var(--shadow-md);
}
.avatar-warning:hover {
  transform: scale(1.02);
}
.avatar-error {
  background: linear-gradient(135deg, var(--color-error) 0%, color-mix(in srgb, var(--color-error) 80%, black 20%) 100%);
  color: var(--color-text-inverse);
  border: 2px solid var(--color-error);
  box-shadow: 0 0 0 0 var(--color-error), var(--shadow-sm);
}
.avatar-error:hover {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-error) 20%, transparent 80%), var(--shadow-md);
}
.avatar-error:hover {
  transform: scale(1.02);
}
.avatar-gradient {
  background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 70%, var(--color-success) 30%) 25%, var(--color-success) 50%, color-mix(in srgb, var(--color-warning) 70%, var(--color-error) 30%) 75%, var(--color-error) 100%);
  color: var(--color-text-inverse);
  border: none;
  box-shadow: 0 0 0 0 var(--color-primary), var(--shadow-md);
}
.avatar-gradient:hover {
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-primary) 15%, transparent 85%), var(--shadow-lg);
}
.avatar-gradient::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 70%, var(--color-success) 30%) 25%, var(--color-success) 50%, color-mix(in srgb, var(--color-warning) 70%, var(--color-error) 30%) 75%, var(--color-error) 100%);
  border-radius: inherit;
  z-index: -1;
  transition: all var(--duration-normal) var(--ease-out);
}
.avatar-gradient:hover {
  transform: scale(1.05);
}
.avatar-gradient:hover::before {
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
}
.avatar-interactive {
  cursor: pointer;
}
.avatar-interactive:hover {
  transform: translateY(-2px) scale(1.04);
}
.avatar-spaced-xs {
  margin: 0.125rem;
}
.avatar-spaced-sm {
  margin: 0.25rem;
}
.avatar-spaced-md {
  margin: 0.5rem;
}
.avatar-spaced-lg {
  margin: 0.75rem;
}
.avatar-spaced-xl {
  margin: 1rem;
}
.avatar-enhanced {
  position: relative;
  overflow: hidden;
}
.avatar-enhanced .avatar-image {
  transition: transform var(--duration-fast) var(--ease-out);
}
.avatar-enhanced .avatar-image:hover {
  transform: scale(1.05);
}
.avatar-enhanced::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--shadow-inset-avatar);
  pointer-events: none;
}
.avatar-loading {
  background: linear-gradient(90deg, var(--color-surface) 25%, transparent 37%, var(--color-surface) 63%);
  background-size: 400% 100%;
  animation: shimmer var(--duration-slow) ease-in-out infinite;
}

.avatar-status {
  position: absolute;
  bottom: -1px;
  right: -1px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-surface-elevated);
  z-index: var(--z-badge);
  transition: all var(--duration-fast) var(--ease-out);
}
.avatar-status-online {
  background: var(--color-success);
  box-shadow: 0 0 0 2px var(--color-surface-elevated), 0 0 8px color-mix(in srgb, var(--color-success) 60%, transparent);
}
.avatar-status-away {
  background: var(--color-warning);
  box-shadow: 0 0 0 2px var(--color-surface-elevated), 0 0 6px color-mix(in srgb, var(--color-warning) 50%, transparent);
}
.avatar-status-offline {
  background: var(--color-border);
  box-shadow: 0 0 0 2px var(--color-surface-elevated);
}

.avatar-badge {
  position: absolute;
  padding: 0 var(--space-1);
  background: var(--color-error);
  color: var(--color-text-inverse);
  border-radius: var(--radius-full);
  font-weight: var(--font-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-surface-elevated);
  line-height: 1;
  text-align: center;
  box-shadow: 0 0 0 1px var(--color-error), var(--shadow-sm);
  transition: all var(--duration-fast) var(--ease-out);
  z-index: var(--z-badge);
}

.avatar-group {
  display: flex;
  align-items: center;
  position: relative;
}
.avatar-group > .avatar-group-avatar, .avatar-group > [class*=avatar-]:not(.avatar-text):not(.avatar-status):not(.avatar-badge) {
  border: 2px solid var(--color-surface-elevated);
  margin-left: -0.5rem;
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
  box-shadow: var(--shadow-lg), 0 8px 16px color-mix(in srgb, black 15%, transparent), 0 2px 4px color-mix(in srgb, black 10%, transparent);
  position: relative;
}
.avatar-group > .avatar-group-avatar:first-child, .avatar-group > [class*=avatar-]:first-child:not(.avatar-text):not(.avatar-status):not(.avatar-badge) {
  margin-left: 0;
}
.avatar-group > .avatar-group-avatar:hover, .avatar-group > [class*=avatar-]:hover:not(.avatar-text):not(.avatar-status):not(.avatar-badge) {
  z-index: var(--z-above);
  transform: translateX(2px) scale(1.08);
  box-shadow: var(--shadow-xl), 0 12px 24px color-mix(in srgb, black 25%, transparent), 0 4px 8px color-mix(in srgb, black 15%, transparent);
  border-color: var(--color-primary);
}
.avatar-group > .avatar-group-avatar:focus-visible, .avatar-group > [class*=avatar-]:focus-visible:not(.avatar-text):not(.avatar-status):not(.avatar-badge) {
  z-index: calc(var(--z-above) + 1);
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.avatar-group-compact > .avatar-group-avatar, .avatar-group-compact.avatar-group > [class*=avatar-]:not(.avatar-text):not(.avatar-status):not(.avatar-badge) {
  margin-left: -0.875rem;
  border-width: 2.5px;
  box-shadow: var(--shadow-lg), 0 6px 12px color-mix(in srgb, black 12%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-border) 30%, transparent 70%);
}
.avatar-group-compact > .avatar-group-avatar:hover, .avatar-group-compact.avatar-group > [class*=avatar-]:hover:not(.avatar-text):not(.avatar-status):not(.avatar-badge) {
  transform: translateX(4px) scale(1.1);
  box-shadow: var(--shadow-xl), var(--shadow-avatar-elevated);
}
.avatar-group-spacious > .avatar-group-avatar, .avatar-group-spacious.avatar-group > [class*=avatar-]:not(.avatar-text):not(.avatar-status):not(.avatar-badge) {
  margin-left: -0.25rem;
  box-shadow: var(--shadow-md), 0 4px 8px color-mix(in srgb, black 10%, transparent);
}
.avatar-group-separated > .avatar-group-avatar, .avatar-group-separated.avatar-group > [class*=avatar-]:not(.avatar-text):not(.avatar-status):not(.avatar-badge) {
  margin-left: 0.5rem;
  border-width: 1px;
  box-shadow: var(--shadow-md), 0 4px 8px color-mix(in srgb, black 10%, transparent);
}
.avatar-group-separated > .avatar-group-avatar:first-child, .avatar-group-separated.avatar-group > [class*=avatar-]:first-child:not(.avatar-text):not(.avatar-status):not(.avatar-badge) {
  margin-left: 0;
}
.avatar-group-separated > .avatar-group-avatar:hover, .avatar-group-separated.avatar-group > [class*=avatar-]:hover:not(.avatar-text):not(.avatar-status):not(.avatar-badge) {
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--shadow-lg), 0 8px 16px color-mix(in srgb, black 15%, transparent);
}
.avatar-group-stacked {
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.avatar-group-stacked > .avatar-group-avatar, .avatar-group-stacked.avatar-group > [class*=avatar-]:not(.avatar-text):not(.avatar-status):not(.avatar-badge) {
  margin-left: 0;
  margin-right: -0.75rem;
}
.avatar-group-stacked > .avatar-group-avatar:last-child, .avatar-group-stacked.avatar-group > [class*=avatar-]:last-child:not(.avatar-text):not(.avatar-status):not(.avatar-badge) {
  margin-right: 0;
}
.avatar-group-stacked > .avatar-group-avatar:hover, .avatar-group-stacked.avatar-group > [class*=avatar-]:hover:not(.avatar-text):not(.avatar-status):not(.avatar-badge) {
  transform: translateX(-4px) scale(1.1);
}
.avatar-group-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  position: relative;
  overflow: visible;
  flex-shrink: 0;
  line-height: 1;
  vertical-align: middle;
  font-weight: var(--font-semibold);
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  background: color-mix(in srgb, var(--color-text-muted) 15%, transparent);
  color: var(--color-text-muted);
  border: 2px solid transparent;
  box-shadow: none;
  margin-left: -0.5rem;
  font-weight: var(--font-semibold);
  backdrop-filter: blur(8px);
}
.avatar-group-more:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-md);
}
.avatar-group-more img,
.avatar-group-more .avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.avatar-group-more .avatar-text {
  font-weight: var(--font-bold);
  text-transform: uppercase;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  user-select: none;
  background: transparent;
  border: none;
  outline: none;
  position: relative;
}
.avatar-group-more i {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  position: relative;
}
.avatar-group-more:hover {
  background: color-mix(in srgb, var(--color-text-muted) 25%, transparent);
  color: var(--color-text);
  transform: scale(1.05);
  box-shadow: var(--shadow-sm);
}

.avatar-group-more .avatar-text {
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
}

.avatars-compact {
  display: flex;
  gap: 0.25rem;
}
.avatars-normal {
  display: flex;
  gap: 0.5rem;
}
.avatars-spacious {
  display: flex;
  gap: 1rem;
}
.avatars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2.5rem, 1fr));
  gap: 0.75rem;
}
.avatars-grid-compact {
  gap: 0.5rem;
}
.avatars-grid-spacious {
  gap: 1.25rem;
}

.data-display {
  --data-display-gap: var(--space-2);
  --data-display-label-color: var(--color-text-muted);
  --data-display-value-color: var(--color-text);
  --data-display-separator-color: var(--color-border);
  --data-display-icon-color: var(--color-primary);
  --data-display-required-color: var(--color-error);
  --data-display-radius: var(--radius-md);
  --data-display-elevation: var(--shadow-sm);
  display: flex;
  position: relative;
  width: 100%;
}
.data-display-label {
  color: var(--data-display-label-color);
  font-weight: var(--font-medium);
  line-height: 1.4;
  word-break: break-word;
}
.data-display-label .icon,
.data-display-label i {
  color: var(--color-primary);
  flex-shrink: 0;
  font-size: var(--icon-base);
  margin-right: var(--space-2);
}
.data-display-label .icon,
.data-display-label i {
  color: var(--data-display-icon-color);
}
.data-display-value {
  color: var(--data-display-value-color);
  word-break: break-word;
  line-height: 1.4;
  transition: all var(--duration-fast) var(--ease-out);
}
.data-display-additional {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  opacity: 0.8;
}
.data-display-loading .data-display-value {
  opacity: var(--opacity-50);
}
.data-display-required .data-display-label::after {
  content: " *";
  color: var(--data-display-required-color);
  font-weight: var(--font-bold);
}
.data-display-separator-line {
  height: 1px;
  background: var(--data-display-separator-color);
  width: 100%;
  opacity: 0.3;
}
.data-display-small {
  --data-display-gap: var(--space-1);
}
.data-display-small .data-display-label {
  font-size: var(--text-xs);
}
.data-display-small .data-display-value {
  font-size: var(--text-sm);
}
.data-display-small .icon,
.data-display-small i {
  color: currentColor;
  flex-shrink: 0;
  margin-right: var(--space-2);
}
.data-display-small .icon,
.data-display-small i {
  font-size: var(--icon-sm);
}
.data-display-medium {
  --data-display-gap: var(--space-2);
}
.data-display-medium .data-display-label {
  font-size: var(--text-sm);
}
.data-display-medium .data-display-value {
  font-size: var(--text-base);
}
.data-display-medium .icon,
.data-display-medium i {
  color: currentColor;
  flex-shrink: 0;
  margin-right: var(--space-2);
}
.data-display-medium .icon,
.data-display-medium i {
  font-size: var(--icon-base);
}
.data-display-large {
  --data-display-gap: var(--space-3);
}
.data-display-large .data-display-label {
  font-size: var(--text-base);
}
.data-display-large .data-display-value {
  font-size: var(--text-lg);
}
.data-display-large .icon,
.data-display-large i {
  color: currentColor;
  flex-shrink: 0;
  margin-right: var(--space-2);
}
.data-display-large .icon,
.data-display-large i {
  font-size: var(--icon-lg);
}
.data-display-vertical {
  flex-direction: column;
  gap: var(--data-display-gap);
  align-items: flex-start;
}
.data-display-horizontal {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.data-display-horizontal .data-display-label {
  min-width: 120px;
  flex-shrink: 0;
}
.data-display-horizontal .data-display-value {
  text-align: right;
  flex: 1;
}
.data-display-inline {
  flex-direction: row;
  align-items: center;
  gap: var(--data-display-gap);
  flex-wrap: wrap;
}
.data-display-inline .data-display-label {
  flex-shrink: 0;
}
.data-display-inline .data-display-value {
  flex: 1;
  min-width: 0;
}
.data-display-emphasis-strong .data-display-value {
  font-weight: var(--font-semibold);
  color: var(--color-text);
}
.data-display-emphasis-bold .data-display-value {
  font-weight: var(--font-bold);
  color: var(--color-text);
}
.data-display-emphasis-success .data-display-value {
  font-weight: var(--font-semibold);
  color: var(--color-text);
}
.data-display-emphasis-success .data-display-label .icon,
.data-display-emphasis-success .data-display-label i {
  color: var(--color-primary);
  flex-shrink: 0;
  font-size: var(--icon-base);
  margin-right: var(--space-2);
}
.data-display-emphasis-success .data-display-label .icon,
.data-display-emphasis-success .data-display-label i {
  color: var(--color-success);
}
.data-display-emphasis-warning .data-display-value {
  font-weight: var(--font-semibold);
  color: var(--color-text);
}
.data-display-emphasis-warning .data-display-label .icon,
.data-display-emphasis-warning .data-display-label i {
  color: var(--color-primary);
  flex-shrink: 0;
  font-size: var(--icon-base);
  margin-right: var(--space-2);
}
.data-display-emphasis-warning .data-display-label .icon,
.data-display-emphasis-warning .data-display-label i {
  color: var(--color-warning);
}
.data-display-emphasis-error .data-display-value {
  font-weight: var(--font-semibold);
  color: var(--color-text);
}
.data-display-emphasis-error .data-display-label .icon,
.data-display-emphasis-error .data-display-label i {
  color: var(--color-primary);
  flex-shrink: 0;
  font-size: var(--icon-base);
  margin-right: var(--space-2);
}
.data-display-emphasis-error .data-display-label .icon,
.data-display-emphasis-error .data-display-label i {
  color: var(--color-error);
}
.data-display-emphasis-muted .data-display-value {
  color: var(--color-text-muted);
  opacity: 0.7;
}
.data-display-minimal {
  --data-display-gap: var(--space-1);
}
.data-display-minimal .data-display-label {
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
  color: var(--color-text-muted);
  opacity: 0.8;
}
.data-display-minimal .data-display-value {
  font-weight: var(--font-normal);
  color: var(--color-text);
}
.data-display-minimal:hover .data-display-label {
  opacity: 1;
}
.data-display-standard .data-display-label {
  font-weight: var(--font-medium);
}
.data-display-standard .data-display-value {
  font-weight: var(--font-normal);
}
.data-display-card .data-display-card {
  transition: all var(--duration-normal) var(--ease-out);
}
.data-display-card .data-display-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.data-display-card .data-display-label {
  color: var(--color-text-muted);
  font-weight: var(--font-medium);
}
.data-display-card .data-display-value {
  color: var(--color-text);
  font-weight: var(--font-semibold);
}
.data-display-highlighted {
  position: relative;
  padding-left: var(--space-3);
}
.data-display-highlighted::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--color-primary), var(--color-primary-light));
  border-radius: var(--radius-full);
}
.data-display-highlighted .data-display-label {
  color: var(--color-text);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-xs);
}
.data-display-highlighted .data-display-value {
  color: var(--color-text);
  font-weight: var(--font-bold);
  font-size: 1.1em;
}
.data-display-highlighted:hover::before {
  box-shadow: 0 0 8px var(--color-primary-light);
}
.data-display-premium .data-display-card {
  border: 1px solid color-mix(in srgb, white 10%, transparent);
  background: color-mix(in srgb, white 5%, transparent);
  backdrop-filter: blur(12px) saturate(150%);
  transition: all var(--duration-slow) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.data-display-premium .data-display-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, white 30%, transparent), transparent);
}
.data-display-premium .data-display-card:hover {
  background: color-mix(in srgb, white 8%, transparent);
  border-color: color-mix(in srgb, white 20%, transparent);
  transform: translateY(-2px) scale(1.01);
  box-shadow: var(--shadow-2xl), 0 0 20px color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.data-display-premium .data-display-label {
  color: var(--color-text);
  font-weight: var(--font-semibold);
  text-shadow: 0 1px 2px color-mix(in srgb, black 10%, transparent);
  letter-spacing: var(--tracking-wide);
}
.data-display-premium .data-display-value {
  color: var(--color-text);
  font-weight: var(--font-bold);
  font-size: 1.15em;
  text-shadow: 0 1px 3px color-mix(in srgb, black 20%, transparent);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.data-display-premium .icon,
.data-display-premium i {
  color: var(--color-primary);
  flex-shrink: 0;
  font-size: var(--icon-base);
  margin-right: var(--space-2);
}
.data-display-premium .icon,
.data-display-premium i {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 2px color-mix(in srgb, black 10%, transparent));
}
.data-display-info-card .data-display-label {
  margin-bottom: var(--space-1);
}
.data-display-summary-card .data-display-value {
  font-weight: var(--font-semibold);
}
@media (max-width: 767px) {
  .data-display-horizontal {
    flex-direction: column;
    gap: var(--space-2);
  }
  .data-display-horizontal .data-display-label {
    min-width: auto;
  }
  .data-display-horizontal .data-display-value {
    text-align: left;
  }
}
@media (max-width: 639px) {
  .data-display-large {
    --data-display-gap: var(--space-2);
  }
  .data-display-large .data-display-label {
    font-size: var(--text-sm);
  }
  .data-display-large .data-display-value {
    font-size: var(--text-base);
  }
  .data-display-premium .data-display-card {
    padding: var(--space-4);
  }
  .data-display-premium .data-display-card:hover {
    transform: translateY(-1px) scale(1.005);
  }
}

@media (prefers-color-scheme: dark) {
  .data-display-premium .data-display-card {
    background: color-mix(in srgb, black 10%, transparent);
    border-color: color-mix(in srgb, white 8%, transparent);
  }
  .data-display-premium .data-display-card:hover {
    background: color-mix(in srgb, black 15%, transparent);
    border-color: color-mix(in srgb, white 12%, transparent);
  }
}
.theme-dark .data-display {
  --data-display-icon-color: var(--color-primary);
}

.data-display-loading .data-display-value {
  animation: pulse 1.5s ease-in-out infinite;
}

.summary-item {
  --summary-item-gap: var(--space-2);
  --summary-item-label-color: var(--color-text-muted);
  --summary-item-value-color: var(--color-text);
  --summary-item-separator-color: var(--color-border);
  --summary-item-icon-color: var(--color-text-muted);
}
.summary-item-label {
  color: var(--summary-item-label-color);
  font-weight: var(--font-medium);
}
.summary-item-value {
  color: var(--summary-item-value-color);
  word-break: break-word;
}
.summary-item-separator {
  border-bottom-color: var(--summary-item-separator-color);
}
.summary-item-small {
  --summary-item-gap: var(--space-1);
}
.summary-item-small .summary-item-label {
  font-size: var(--text-xs);
}
.summary-item-small .summary-item-value {
  font-size: var(--text-sm);
}
.summary-item-medium {
  --summary-item-gap: var(--space-2);
}
.summary-item-medium .summary-item-label {
  font-size: var(--text-sm);
}
.summary-item-medium .summary-item-value {
  font-size: var(--text-base);
}
.summary-item-large {
  --summary-item-gap: var(--space-3);
}
.summary-item-large .summary-item-label {
  font-size: var(--text-base);
}
.summary-item-large .summary-item-value {
  font-size: var(--text-lg);
}
.summary-item-emphasis-strong .summary-item-value {
  font-weight: var(--font-semibold);
}
.summary-item-emphasis-bold .summary-item-value {
  font-weight: var(--font-bold);
}
.summary-item-emphasis-success .summary-item-value {
  color: var(--color-success);
  font-weight: var(--font-semibold);
}
.summary-item-emphasis-warning .summary-item-value {
  color: var(--color-warning);
  font-weight: var(--font-semibold);
}
.summary-item-emphasis-error .summary-item-value {
  color: var(--color-error);
  font-weight: var(--font-semibold);
}
.summary-item-emphasis-muted .summary-item-value {
  color: var(--color-text-muted);
}
.summary-item-horizontal .summary-item-label {
  min-width: 120px;
}
.summary-item-inline .summary-item-label::after {
  content: ":";
  margin-left: var(--space-1);
}

.pivot-grid {
  --pivot-border-color: var(--color-border);
  --pivot-header-bg: var(--color-surface-elevated);
  --pivot-cell-hover-bg: var(--state-hover-bg);
  --pivot-total-bg: rgba(var(--color-primary), 0.05);
  --pivot-subtotal-bg: rgba(var(--color-primary), 0.03);
  --pivot-drag-zone-bg: rgba(var(--color-primary), 0.1);
  --pivot-drag-zone-border: var(--color-primary);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.pivot-grid-compact {
  gap: var(--space-2);
}
.pivot-grid-compact .pivot-field-chip {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
}
.pivot-grid-compact .pivot-table th, .pivot-grid-compact .pivot-table td {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
}
.pivot-grid-dense {
  gap: var(--space-3);
}
.pivot-grid-dense .pivot-field-chip {
  padding: var(--space-1-5) var(--space-3);
}
.pivot-grid-spacious {
  gap: var(--space-6);
}
.pivot-grid-spacious .pivot-field-chip {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
}
.pivot-grid-spacious .pivot-table th, .pivot-grid-spacious .pivot-table td {
  padding: var(--space-3) var(--space-4);
}
.pivot-grid-virtualized .pivot-table-wrapper {
  contain: layout style paint;
  will-change: scroll-position;
}
.pivot-grid-drag-active {
  user-select: none;
}
.pivot-grid-drag-active .pivot-available-field,
.pivot-grid-drag-active .pivot-field-chip {
  pointer-events: none;
}

.pivot-header {
  display: flex;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--pivot-border-color);
  border-radius: var(--radius-lg);
}
.pivot-header-content {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.pivot-header-icon {
  font-size: var(--icon-lg);
  color: var(--color-primary);
}
.pivot-header-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.pivot-header-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}
.pivot-header-subtitle {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.pivot-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pivot-field-panel {
  background: var(--color-surface);
  border: 1px solid var(--pivot-border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.pivot-field-panel-areas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: var(--space-4);
}
@media (max-width: 768px) {
  .pivot-field-panel-areas {
    grid-template-columns: 1fr;
  }
}

.pivot-field-area {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.pivot-field-area-filter {
  grid-column: 1/-1;
}
.pivot-field-area-available {
  grid-column: 1/-1;
  border-top: 1px solid var(--pivot-border-color);
  padding-top: var(--space-4);
  margin-top: var(--space-2);
}
.pivot-field-area-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-medium);
  color: var(--color-text);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.pivot-field-area-header .icon {
  font-size: var(--icon-sm);
  color: var(--color-text-muted);
}

.pivot-field-drop-zone {
  min-height: 60px;
  border: 2px dashed var(--pivot-border-color);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  background: var(--color-canvas);
  transition: var(--transition-colors);
}
.pivot-field-drop-zone.active {
  border-color: var(--pivot-drag-zone-border);
  background: var(--pivot-grid-bg);
  transform: scale(1.02);
}
.pivot-field-drop-zone-placeholder {
  color: var(--color-text-muted);
  font-style: italic;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 40px;
}

.pivot-field-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-canvas);
  border-radius: var(--radius-md);
  max-height: 200px;
  overflow-y: auto;
}

.pivot-available-field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--pivot-border-color);
  border-radius: var(--radius-sm);
  cursor: grab;
  transition: var(--transition-colors);
  font-size: var(--text-sm);
}
.pivot-available-field-hover {
  background: var(--pivot-cell-hover-bg);
  border-color: var(--color-primary);
}
.pivot-available-field.active {
  cursor: grabbing;
}
.pivot-available-field-icon {
  font-size: var(--icon-sm);
  color: var(--color-text-muted);
}
.pivot-available-field-name {
  font-weight: var(--font-medium);
  color: var(--color-text);
}
.pivot-available-field-type {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  margin-left: auto;
}

.pivot-field-chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--pivot-border-color);
  border-radius: var(--radius-md);
  cursor: grab;
  transition: var(--transition-all);
  font-size: var(--text-sm);
  position: relative;
}
.pivot-field-chip-hover {
  background: var(--pivot-cell-hover-bg);
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.pivot-field-chip.active, .pivot-field-chip-dragging {
  cursor: grabbing;
  transform: rotate(2deg);
  box-shadow: var(--shadow-md);
}
.pivot-field-chip-optimistic {
  opacity: 0.8;
  border-style: dashed;
}
.pivot-field-chip-pending-removal {
  opacity: 0.5;
  transform: scale(0.95);
}
.pivot-field-chip-type-dimension {
  border-left: 3px solid var(--color-info);
}
.pivot-field-chip-type-measure {
  border-left: 3px solid var(--color-primary);
}
.pivot-field-chip-type-calculated {
  border-left: 3px solid var(--color-warning);
}
.pivot-field-chip-type-filter {
  border-left: 3px solid var(--color-secondary);
}
.pivot-field-chip-calculated {
  background: rgba(var(--color-warning), 0.05);
}
.pivot-field-chip-calculated::before {
  content: "fx";
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--color-warning);
  color: white;
  font-size: 8px;
  padding: 1px 3px;
  border-radius: var(--radius-sm);
  font-weight: var(--font-bold);
}
.pivot-field-chip-filtered {
  background: rgba(var(--color-info), 0.05);
}
.pivot-field-chip-filtered .pivot-filter-icon {
  color: var(--color-info);
}
.pivot-field-chip-content {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
}
.pivot-field-chip-icon {
  font-size: var(--icon-sm);
  color: var(--color-text-muted);
}
.pivot-field-chip-name {
  font-weight: var(--font-medium);
  color: var(--color-text);
}
.pivot-field-chip-aggregation {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: italic;
}
.pivot-field-chip-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  opacity: 0;
  transition: var(--transition-opacity);
}
.pivot-field-chip-hover .pivot-field-chip-actions {
  opacity: 1;
}
.pivot-field-chip-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-colors);
}
.pivot-field-chip-action-btn .icon {
  font-size: 14px;
}
.pivot-field-chip-action-btn-configure {
  color: var(--color-text-muted);
}
.pivot-field-chip-action-btn-configure-hover {
  background: var(--color-info);
  color: white;
}
.pivot-field-chip-action-btn-remove {
  color: var(--color-text-muted);
}
.pivot-field-chip-action-btn-remove-hover {
  background: var(--color-error);
  color: white;
}

.pivot-loading {
  padding: var(--space-8);
}
.pivot-loading-skeleton {
  min-height: 400px;
}
.pivot-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-8);
}

.pivot-table-container {
  background: var(--color-surface);
  border: 1px solid var(--pivot-border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.pivot-table-wrapper {
  overflow: auto;
  max-width: 100%;
  contain: layout style paint;
  will-change: scroll-position;
}

.pivot-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.pivot-table-head {
  background: var(--pivot-header-bg);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}
.pivot-table-corner-cell, .pivot-table-column-header, .pivot-table-row-header {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-weight: var(--font-semibold);
  border: 1px solid var(--pivot-border-color);
  background: var(--pivot-header-bg);
  position: relative;
}
.pivot-table-corner-cell-hover, .pivot-table-column-header-hover, .pivot-table-row-header-hover {
  background: var(--pivot-cell-hover-bg);
}
.pivot-table-corner-cell {
  background: var(--color-surface-elevated);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.pivot-table-column-header {
  text-align: center;
  cursor: pointer;
  user-select: none;
}
.pivot-table-column-header-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}
.pivot-table-column-header-hover .pivot-sort-indicator {
  opacity: 0.5;
}
.pivot-table-row-header {
  background: var(--pivot-header-bg);
  font-weight: var(--font-medium);
  position: sticky;
  left: 0;
  z-index: var(--z-content);
}
.pivot-table-row-header-content {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.pivot-table-row-header-text {
  flex: 1;
}
.pivot-table-sort-indicator {
  opacity: 0;
  transition: var(--transition-opacity);
}
.pivot-table-sort-indicator .icon {
  font-size: var(--icon-xs);
}
.pivot-table-sort-indicator-asc, .pivot-table-sort-indicator-desc {
  opacity: 1;
  color: var(--color-primary);
}
.pivot-table-expand-button {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-sm);
  transition: var(--transition-colors);
}
.pivot-table-expand-button-hover {
  background: var(--state-hover-bg);
  color: var(--color-primary);
}
.pivot-table-expand-button .icon {
  font-size: 14px;
}
.pivot-table-total-indicator {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: italic;
  margin-left: var(--space-2);
}
.pivot-table-header-level-0 {
  background: var(--pivot-header-bg);
}
.pivot-table-header-level-1 {
  background: rgba(var(--pivot-header-bg), 0.8);
}
.pivot-table-header-level-2 {
  background: rgba(var(--pivot-header-bg), 0.6);
}
.pivot-table-total-header, .pivot-table-subtotal-header {
  background: var(--pivot-total-bg);
  font-weight: var(--font-bold);
}
.pivot-table-data-cell {
  padding: var(--space-2) var(--space-3);
  text-align: right;
  border: 1px solid var(--pivot-border-color);
  background: var(--color-surface);
  position: relative;
  cursor: pointer;
  transition: var(--transition-colors);
}
.pivot-table-data-cell-hover {
  background: var(--pivot-cell-hover-bg);
}
.pivot-table-data-cell-row-highlight {
  background: rgba(var(--color-primary), 0.1);
}
.pivot-table-data-cell-column-highlight {
  background: rgba(var(--color-secondary), 0.1);
}
.pivot-table-data-cell-empty {
  color: var(--color-text-muted);
  font-style: italic;
  text-align: center;
}
.pivot-table-data-cell-subtotal {
  background: var(--pivot-subtotal-bg);
  font-weight: var(--font-semibold);
}
.pivot-table-data-cell-grand-total {
  background: var(--pivot-total-bg);
  font-weight: var(--font-bold);
}
.pivot-table-cell-value-positive {
  color: var(--color-success);
}
.pivot-table-cell-value-negative {
  color: var(--color-error);
}
.pivot-table-cell-value-zero {
  color: var(--color-text-muted);
}
.pivot-table-drill-button {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: var(--transition-opacity);
}
.pivot-table-drill-button .icon {
  font-size: 10px;
}
.pivot-table-data-row-level-0 {
  background: var(--color-surface);
}
.pivot-table-data-row-level-1 {
  background: rgba(var(--color-surface), 0.5);
}
.pivot-table-data-row-level-2 {
  background: rgba(var(--color-surface), 0.3);
}
.pivot-table-data-row-total {
  background: var(--pivot-total-bg);
}
.pivot-table-data-row-total .pivot-table-data-cell {
  background: var(--pivot-total-bg);
  font-weight: var(--font-bold);
}
.pivot-table-data-row-subtotal {
  background: var(--pivot-subtotal-bg);
}
.pivot-table-data-row-subtotal .pivot-table-data-cell {
  background: var(--pivot-subtotal-bg);
  font-weight: var(--font-semibold);
}
.pivot-table-data-row-collapsed {
  display: none;
}
.pivot-table-foot {
  background: var(--pivot-total-bg);
}
.pivot-table-grand-total-row .pivot-table-grand-total-header,
.pivot-table-grand-total-row .pivot-table-grand-total-cell {
  padding: var(--space-3) var(--space-3);
  font-weight: var(--font-bold);
  border: 1px solid var(--pivot-border-color);
  background: var(--pivot-total-bg);
}
.pivot-table-grand-total-header {
  text-align: center;
  color: var(--color-text);
}
.pivot-table-grand-total-cell {
  text-align: right;
}
.pivot-table-grand-total-value {
  font-size: var(--text-base);
  color: var(--color-primary);
}

.pivot-performance-info {
  padding: var(--space-2) var(--space-4);
  background: var(--color-canvas);
  border-top: 1px solid var(--pivot-border-color);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
}

.pivot-virtual-row {
  height: 32px;
  display: flex;
  align-items: center;
}

.pivot-virtual-spacer-top, .pivot-virtual-spacer-bottom {
  background: transparent;
  pointer-events: none;
}

@media (max-width: 1024px) {
  .pivot-field-panel-areas {
    grid-template-columns: 1fr;
  }
  .pivot-table-wrapper {
    font-size: var(--text-xs);
  }
  .pivot-table-wrapper .pivot-table th, .pivot-table-wrapper .pivot-table td {
    padding: var(--space-1) var(--space-2);
  }
}
@media (max-width: 768px) {
  .pivot-grid {
    gap: var(--space-2);
  }
  .pivot-header {
    flex-direction: column;
    gap: var(--space-3);
    align-items: stretch;
  }
  .pivot-header-actions {
    justify-content: center;
  }
  .pivot-field-panel {
    padding: var(--space-2);
  }
  .pivot-field-list,
  .pivot-field-drop-zone {
    gap: var(--space-1);
  }
  .pivot-table-wrapper {
    max-height: 400px;
  }
}
@media (prefers-contrast: high) {
  .pivot-grid {
    --pivot-border-color: var(--color-text);
    --pivot-drag-zone-border: var(--color-primary);
  }
  .pivot-field-chip,
  .pivot-available-field {
    border-width: 2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pivot-field-chip,
  .pivot-available-field,
  .pivot-field-drop-zone {
    transition: none;
  }
  .pivot-field-chip-dragging {
    transform: none;
  }
}
.pivot-modal-config-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.pivot-modal-config-header-icon {
  font-size: var(--icon-lg);
  color: var(--color-primary);
}
.pivot-modal-config-header h4 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}
.pivot-modal-config-header small {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.pivot-modal-config-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-height: 70vh;
  overflow-y: auto;
  padding: var(--space-2);
}
.pivot-modal-config-aggregation-checkboxes {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 120px;
  overflow-y: auto;
  padding: var(--space-2);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-canvas);
}
.pivot-modal-config-filter-values {
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  background: var(--color-canvas);
}
.pivot-modal-config-filter-values > * {
  margin-bottom: var(--space-1);
}
.pivot-modal-config-filter-values > *:last-child {
  margin-bottom: 0;
}
.pivot-modal-config-conditional-formats {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.pivot-modal-config-conditional-formats .pivot-format-rule {
  padding: var(--space-3);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: var(--transition-colors);
}
.pivot-modal-config-conditional-formats .pivot-format-rule:hover {
  border-color: var(--color-primary);
}
.pivot-modal-config-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: var(--border-1) solid var(--color-border);
}
.pivot-modal-export-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.pivot-modal-export-header-icon {
  font-size: var(--icon-lg);
  color: var(--color-success);
}
.pivot-modal-export-header h4 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}
.pivot-modal-export-header small {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.pivot-modal-export-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-height: 80vh;
  overflow-y: auto;
  padding: var(--space-2);
}
.pivot-modal-export-content .alert ul {
  margin-bottom: 0;
  padding-left: var(--space-4);
}
.pivot-modal-export-content .alert ul li {
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
}
.pivot-modal-export-content .alert ul li:last-child {
  margin-bottom: 0;
}
.pivot-modal-export-checkboxes {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.pivot-modal-export-checkboxes .checkbox {
  margin-bottom: var(--space-1);
}
.pivot-modal-export-field-selection .pivot-field-list {
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  background: var(--color-canvas);
}
.pivot-modal-export-field-selection .pivot-field-list .checkbox {
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
}
.pivot-modal-export-field-selection .pivot-field-list .checkbox:last-child {
  margin-bottom: 0;
}
.pivot-modal-export-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: var(--border-1) solid var(--color-border);
}
.pivot-modal-export-footer .btn[disabled] {
  opacity: var(--opacity-60);
  cursor: not-allowed;
}
.pivot-modal-export-footer .loading-spinner {
  width: var(--space-4);
  height: var(--space-4);
  margin-right: var(--space-2);
}

.pivot-field-selection .form-label {
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.pivot-field-selection .form-label::before {
  content: "";
  width: var(--space-3);
  height: var(--space-3);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.pivot-field-selection .col-md-6:first-child .form-label::before {
  background: var(--color-success);
}
.pivot-field-selection .col-md-6:last-child .form-label::before {
  background: var(--color-error);
}

.pivot-format-rule {
  transition: var(--transition-all);
  transform: translateX(0);
}
.pivot-format-rule:hover {
  transform: translateX(var(--space-0-5));
  box-shadow: var(--shadow-sm);
}

@media (max-width: 768px) {
  .pivot-modal-config-content, .pivot-modal-export-content {
    max-height: 60vh;
    padding: var(--space-1);
  }
  .pivot-modal-config-aggregation-checkboxes, .pivot-modal-config-filter-values, .pivot-modal-export-field-list {
    max-height: 100px;
  }
  .pivot-modal-config-footer, .pivot-modal-export-footer {
    flex-direction: column;
  }
  .pivot-modal-config-footer .btn, .pivot-modal-export-footer .btn {
    width: 100%;
  }
  .pivot-format-rule .row .col-md-3,
  .pivot-format-rule .row .col-md-4,
  .pivot-format-rule .row .col-md-6 {
    margin-bottom: var(--space-2);
  }
}
.action-group-spacing-none {
  gap: 0;
}
.action-group-spacing-small {
  gap: var(--space-1);
}
.action-group-spacing-medium {
  gap: var(--space-2);
}
.action-group-spacing-large {
  gap: var(--space-3);
}
.action-group-spacing-xl {
  gap: var(--space-4);
}
.action-group-horizontal {
  flex-direction: row;
}
@media (max-width: 639px) {
  .action-group-horizontal-responsive {
    flex-wrap: wrap;
  }
}
.action-group-vertical {
  flex-direction: column;
}
.action-group-vertical-full-width {
  width: 100%;
}
.action-group-vertical-full-width > * {
  width: 100%;
}
.action-group-horizontal-align-start {
  justify-content: flex-start;
}
.action-group-horizontal-align-center {
  justify-content: center;
}
.action-group-horizontal-align-end {
  justify-content: flex-end;
}
.action-group-horizontal-align-space-between {
  justify-content: space-between;
}
.action-group-horizontal-align-space-around {
  justify-content: space-around;
}
.action-group-horizontal-align-space-evenly {
  justify-content: space-evenly;
}
.action-group-vertical-align-start {
  align-items: flex-start;
}
.action-group-vertical-align-center {
  align-items: center;
}
.action-group-vertical-align-end {
  align-items: flex-end;
}
.action-group-vertical-align-stretch {
  align-items: stretch;
}
.action-group-modal-footer {
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.action-group-card-actions {
  justify-content: center;
  gap: var(--space-1);
}
@media (min-width: 768px) {
  .action-group-card-actions {
    justify-content: flex-end;
  }
}
.action-group-toolbar {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-1);
}
@media (max-width: 639px) {
  .action-group-responsive-action-group-horizontal, .action-group-responsive, .action-group-mobile-stack-action-group-horizontal, .action-group-mobile-stack {
    flex-direction: column;
  }
  .action-group-responsive-action-group-horizontal-align-space-between, .action-group-responsive-action-group-horizontal-align-space-around, .action-group-responsive-action-group-horizontal-align-space-evenly, .action-group-responsive-align-space-between, .action-group-responsive-align-space-around, .action-group-responsive-align-space-evenly, .action-group-mobile-stack-action-group-horizontal-align-space-between, .action-group-mobile-stack-action-group-horizontal-align-space-around, .action-group-mobile-stack-action-group-horizontal-align-space-evenly, .action-group-mobile-stack-align-space-between, .action-group-mobile-stack-align-space-around, .action-group-mobile-stack-align-space-evenly {
    justify-content: flex-start;
  }
  .action-group-responsive-action-group-horizontal > *, .action-group-responsive > *, .action-group-mobile-stack-action-group-horizontal > *, .action-group-mobile-stack > * {
    width: 100%;
  }
}

@media (prefers-color-scheme: dark) {
  .action-group-modal-footer {
    border-top-color: var(--color-border);
  }
}
.theme-dark .action-group-modal-footer {
  border-top-color: var(--color-border);
}

.rkanboard {
  --rkanboard-accent: var(--primary);
  --rkanboard-accent-rgb: var(--primary-rgb);
  --rkanboard-gap: var(--space-3);
  --rkanboard-column-padding: var(--space-3);
  --rkanboard-card-gap: var(--space-2);
  --rkanboard-card-padding: var(--space-3);
  --rkanboard-column-min-width: 280px;
  --rkanboard-column-max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: var(--rkanboard-gap);
  width: 100%;
}
.rkanboard.density-compact {
  --rkanboard-gap: var(--space-2);
  --rkanboard-column-padding: var(--space-2);
  --rkanboard-card-gap: var(--space-1);
  --rkanboard-card-padding: var(--space-2);
}
.rkanboard.density-dense {
  --rkanboard-gap: var(--space-2);
  --rkanboard-column-padding: var(--space-2);
  --rkanboard-card-gap: var(--space-1);
  --rkanboard-card-padding: var(--space-2);
}
.rkanboard.density-spacious {
  --rkanboard-gap: var(--space-4);
  --rkanboard-column-padding: var(--space-4);
  --rkanboard-card-gap: var(--space-3);
  --rkanboard-card-padding: var(--space-4);
}
.rkanboard.rkanboard-size-xs {
  --rkanboard-column-min-width: 220px;
  --rkanboard-column-max-width: 260px;
}
.rkanboard.rkanboard-size-sm {
  --rkanboard-column-min-width: 260px;
  --rkanboard-column-max-width: 320px;
}
.rkanboard.rkanboard-size-md {
  --rkanboard-column-min-width: 280px;
  --rkanboard-column-max-width: 340px;
}
.rkanboard.rkanboard-size-lg {
  --rkanboard-column-min-width: 320px;
  --rkanboard-column-max-width: 380px;
}
.rkanboard.rkanboard-size-xl {
  --rkanboard-column-min-width: 360px;
  --rkanboard-column-max-width: 420px;
}
.rkanboard.rkanboard-variant-default, .rkanboard.rkanboard-variant-primary {
  --rkanboard-accent: var(--primary);
  --rkanboard-accent-rgb: var(--primary-rgb);
}
.rkanboard.rkanboard-variant-secondary {
  --rkanboard-accent: var(--secondary, var(--primary));
  --rkanboard-accent-rgb: var(--secondary-rgb, var(--primary-rgb));
}
.rkanboard.rkanboard-variant-success {
  --rkanboard-accent: var(--success, var(--primary));
  --rkanboard-accent-rgb: var(--success-rgb, var(--primary-rgb));
}
.rkanboard.rkanboard-variant-warning {
  --rkanboard-accent: var(--warning, var(--primary));
  --rkanboard-accent-rgb: var(--warning-rgb, var(--primary-rgb));
}
.rkanboard.rkanboard-variant-error {
  --rkanboard-accent: var(--error, var(--primary));
  --rkanboard-accent-rgb: var(--error-rgb, var(--primary-rgb));
}
.rkanboard.rkanboard-variant-info {
  --rkanboard-accent: var(--info, var(--primary));
  --rkanboard-accent-rgb: var(--info-rgb, var(--primary-rgb));
}
.rkanboard.rkanboard-with-swimlanes {
  gap: var(--space-4);
}
.rkanboard:focus-visible {
  outline: 2px solid rgba(var(--rkanboard-accent-rgb), 0.35);
  outline-offset: 2px;
}

.rkanboard-toolbar {
  flex-wrap: wrap;
}

.rkanboard-template-bar {
  padding-bottom: var(--space-1);
  margin-bottom: var(--space-1);
  border-bottom: 1px dashed var(--border-light);
}

.rkanboard-template-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.rkanboard-template-badge {
  font-size: 0.65rem;
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: rgba(var(--rkanboard-accent-rgb), 0.12);
  color: var(--rkanboard-accent);
}

.rkanboard-body,
.rkanboard-swimlane-body {
  display: flex;
  gap: var(--rkanboard-gap);
  align-items: flex-start;
}
.rkanboard-body.is-vertical,
.rkanboard-swimlane-body.is-vertical {
  flex-direction: row;
  overflow-x: auto;
  padding-bottom: var(--space-2);
}
.rkanboard-body.is-horizontal,
.rkanboard-swimlane-body.is-horizontal {
  flex-direction: column;
  overflow-y: auto;
  max-height: 100%;
}

.rkanboard-swimlane {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.rkanboard-swimlane-header {
  padding: var(--space-2) var(--space-1);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.rkanboard-column {
  background: var(--surface-elevated);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  min-width: var(--rkanboard-column-min-width);
  max-width: var(--rkanboard-column-max-width);
  display: flex;
  flex-direction: column;
  gap: var(--rkanboard-card-gap);
  padding: var(--rkanboard-column-padding);
  transition: border-color var(--transition-colors), box-shadow var(--transition-colors);
}
.rkanboard-column-compact {
  min-width: calc(var(--rkanboard-column-min-width) - 40px);
}
.rkanboard-column-wide {
  min-width: calc(var(--rkanboard-column-min-width) + 40px);
  max-width: calc(var(--rkanboard-column-max-width) + 60px);
}
.rkanboard-column-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  padding-bottom: var(--space-2);
}
.rkanboard-column-body {
  min-height: 160px;
  display: flex;
  flex-direction: column;
  gap: var(--rkanboard-card-gap);
}
.rkanboard-column-hidden {
  opacity: 0.5;
}
.rkanboard-column-collapsed {
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-2);
}
.rkanboard-column.is-drop-target {
  border-color: rgba(var(--rkanboard-accent-rgb), 0.4);
  box-shadow: 0 0 0 2px rgba(var(--rkanboard-accent-rgb), 0.08);
}

.rkanboard-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  box-shadow: var(--shadow-xs);
  cursor: grab;
  transition: transform var(--transition-transform), box-shadow var(--transition-colors), border-color var(--transition-colors);
}
.rkanboard-card.is-dragging {
  opacity: 0.5;
}
.rkanboard-card.is-focused {
  box-shadow: 0 0 0 2px rgba(var(--rkanboard-accent-rgb), 0.12);
  border-color: rgba(var(--rkanboard-accent-rgb), 0.4);
}
.rkanboard-card:focus-visible {
  outline: 2px solid var(--rkanboard-accent);
  outline-offset: 2px;
}
.rkanboard-card-content {
  padding: var(--rkanboard-card-padding);
  display: flex;
  flex-direction: column;
  gap: var(--rkanboard-card-gap);
}
.rkanboard-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  padding: 0 var(--space-2);
  background: var(--surface-muted);
  color: var(--text-muted);
}
.rkanboard-card-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  font-size: 0.7rem;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.04);
}

.rkanboard-card-labels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.rkanboard-card-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  font-size: 0.65rem;
  border-radius: var(--radius-pill);
  background: rgba(var(--rkanboard-accent-rgb), 0.12);
  color: var(--text-muted);
}
.rkanboard-card-label .icon {
  font-size: 0.9em;
}

.rkanboard-card-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.rkanboard-card-progress-track {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.rkanboard-card-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: var(--rkanboard-accent);
}

.rkanboard-card-watchers {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.rkanboard-card-watchers .rkanboard-card-watcher {
  position: relative;
}
.rkanboard-card-watchers .rkanboard-card-watcher-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: var(--surface-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: var(--text-muted);
}
.rkanboard-card-watchers .rkanboard-card-watcher-avatar.placeholder {
  background: rgba(0, 0, 0, 0.04);
}
.rkanboard-card-watchers .rkanboard-card-watcher-more {
  font-size: 0.7rem;
  color: var(--text-muted);
  padding: 0 var(--space-1);
}

.rkanboard-inline-editor {
  margin-top: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.rkanboard-inline-editor__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-1);
}

.rkanboard-drop-zone {
  border: 1px dashed transparent;
  border-radius: var(--radius-md);
  padding: var(--space-2);
  text-align: center;
  color: var(--text-muted);
  font-size: 0.65rem;
  transition: border-color var(--transition-colors), background-color var(--transition-colors), color var(--transition-colors);
}
.rkanboard-drop-zone.is-active {
  border-color: var(--rkanboard-accent);
  background: rgba(var(--rkanboard-accent-rgb), 0.06);
  color: var(--rkanboard-accent);
}

.rkanboard-drop-indicator {
  height: 4px;
  border-radius: 4px;
  background: var(--rkanboard-accent);
  margin: -4px 0 var(--space-2);
  opacity: 0.5;
}

.rkanboard-assignee {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.rkanboard-assignee-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  object-fit: cover;
  background: var(--surface-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.rkanboard-assignee-avatar.placeholder {
  background: var(--surface-muted);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.rkanboard-assignee-picker {
  min-width: 200px;
}
.rkanboard-assignee-item {
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-colors);
}
.rkanboard-assignee-item:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.rkanboard-hidden-columns .rbutton {
  --button-padding-x: var(--space-2);
  --button-padding-y: var(--space-1);
}

.rkanboard-drop-indicator,
.rkanboard-column.is-drop-target,
.rkanboard-card.is-focused {
  transition: all var(--transition-colors);
}

.nav {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  gap: var(--space-1);
  box-sizing: border-box;
}
.nav > * {
  min-width: 0;
  max-width: 100%;
  flex-shrink: 0;
}
.nav-menu-container-aware {
  container-type: inline-size;
}
.nav-menu {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--glass-bg-light);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-lg);
  margin: var(--space-2);
  box-sizing: border-box;
  position: relative;
  z-index: var(--z-sidebar);
}
.nav-menu > * {
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  min-width: 0;
}
.nav::-webkit-scrollbar {
  width: var(--space-1);
}
.nav::-webkit-scrollbar-track {
  background: var(--color-border-light);
}
.nav::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-sm);
}
.nav::-webkit-scrollbar-thumb:hover {
  background: var(--color-border);
}
.nav-divider {
  height: var(--border-1);
  background: var(--color-border);
  margin: var(--space-2) 0;
}
[data-theme=dark] .nav-divider {
  background: var(--color-border);
}
.nav-icon {
  font-size: var(--text-xl);
  color: inherit;
  flex-shrink: 0;
}
.nav-text {
  flex: 1;
  transition: var(--transition-opacity);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
}
.nav-item {
  min-height: var(--touch-target-min, 2.75rem);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  text-decoration: none;
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  transition: all var(--duration-fast) var(--ease-out);
  cursor: pointer;
  position: relative;
  background: transparent;
  color: var(--color-text-muted);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  min-width: 0;
}
.nav-item:hover {
  background: color-mix(in srgb, var(--state-hover-bg) 70%, var(--color-surface));
  color: var(--color-text);
}
.nav-item:focus-visible {
  outline: none;
  outline-offset: 2px;
}
.nav-item.active {
  background: transparent;
  color: var(--color-text);
  font-weight: var(--font-bold);
}
.nav-item.active:hover {
  background: color-mix(in srgb, var(--state-hover-bg) 80%, var(--color-surface));
  color: var(--color-text);
}
.nav-item.active .nav-icon {
  color: var(--color-text);
}
.nav-item-highlighted {
  color: var(--color-primary);
}
.nav-item-highlighted .nav-icon {
  color: var(--color-primary);
}
.nav-item-highlighted::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: var(--border-2);
  height: 60%;
  background: var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.nav-item-admin {
  color: var(--color-primary);
}
.nav-item-admin::before {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border), transparent);
  margin-top: -var(--space-1);
}
.nav-item-admin:hover:not(.active) {
  background: color-mix(in srgb, var(--state-hover-bg) 50%, var(--color-surface));
  color: var(--color-text);
}
.nav-item-admin.active {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-md);
}
.nav-item-admin.active::after {
  background: var(--color-text-inverse);
}
.nav-item-child {
  padding-left: var(--space-8);
  font-size: var(--text-xs);
}
.sidebar-collapsed .nav-item-child {
  padding-left: var(--space-2);
}
.nav-item .nav-badge {
  margin-left: auto;
  flex-shrink: 0;
}
.nav-badge {
  margin-left: auto;
  flex-shrink: 0;
}
@media (max-width: 639px) {
  .nav-badge {
    margin-left: 0;
  }
}
.nav-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}
.nav-group-toggle {
  min-height: var(--touch-target-min, 2.75rem);
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-3) var(--space-4);
  gap: var(--space-3);
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-radius: var(--radius-lg);
  position: relative;
  cursor: pointer;
  background: transparent;
  color: var(--color-text-muted);
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  transition: all var(--duration-fast) var(--ease-out);
  box-sizing: border-box;
  overflow: hidden;
}
.nav-group-toggle:hover {
  background: color-mix(in srgb, var(--state-hover-bg) 60%, var(--color-surface));
  color: var(--color-text);
}
.nav-group-toggle:focus-visible {
  outline: none;
  outline-offset: 2px;
}
.nav-group-icon {
  font-size: var(--text-xl);
  color: inherit;
  flex-shrink: 0;
}
.nav-group-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
}
.nav-group-chevron {
  font-size: var(--text-xl);
  color: var(--color-text-subtle);
  transition: transform var(--duration-fast) var(--ease-out);
}
.nav-group-items {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--duration-slow) var(--ease-out);
}
.nav-group.expanded .nav-group-chevron {
  transform: rotate(180deg);
}
.nav-group.expanded .nav-group-items {
  max-height: calc(100vh - var(--space-20));
}

.app-shell.sidebar-collapsed .app-sidebar.collapsed .nav-item,
.app-shell.sidebar-collapsed .app-sidebar.collapsed .nav-group-toggle {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  margin: var(--space-1) var(--space-2);
  justify-content: center;
  width: calc(100% - var(--space-4));
  max-width: calc(100% - var(--space-4));
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}
.app-shell.sidebar-collapsed .app-sidebar.collapsed .nav-item .nav-text,
.app-shell.sidebar-collapsed .app-sidebar.collapsed .nav-item .nav-badge,
.app-shell.sidebar-collapsed .app-sidebar.collapsed .nav-item .nav-group-text,
.app-shell.sidebar-collapsed .app-sidebar.collapsed .nav-item .nav-group-chevron,
.app-shell.sidebar-collapsed .app-sidebar.collapsed .nav-group-toggle .nav-text,
.app-shell.sidebar-collapsed .app-sidebar.collapsed .nav-group-toggle .nav-badge,
.app-shell.sidebar-collapsed .app-sidebar.collapsed .nav-group-toggle .nav-group-text,
.app-shell.sidebar-collapsed .app-sidebar.collapsed .nav-group-toggle .nav-group-chevron {
  display: none;
}
.app-shell.sidebar-collapsed .app-sidebar.collapsed .nav-item .nav-icon,
.app-shell.sidebar-collapsed .app-sidebar.collapsed .nav-item .nav-group-icon,
.app-shell.sidebar-collapsed .app-sidebar.collapsed .nav-group-toggle .nav-icon,
.app-shell.sidebar-collapsed .app-sidebar.collapsed .nav-group-toggle .nav-group-icon {
  margin: 0;
  flex-shrink: 0;
  font-size: var(--text-xl);
}
.app-shell.sidebar-collapsed .app-sidebar.collapsed .nav-item[aria-label]:hover::after,
.app-shell.sidebar-collapsed .app-sidebar.collapsed .nav-group-toggle[aria-label]:hover::after {
  content: attr(aria-label);
  position: absolute;
  left: calc(100% + var(--space-2));
  top: 50%;
  transform: translateY(-50%);
  padding: var(--space-2) var(--space-3);
  background: var(--color-text);
  color: var(--color-text-inverse);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  white-space: nowrap;
  pointer-events: none;
  z-index: var(--z-tooltip, 1000);
}
@media (prefers-reduced-motion: reduce) {
  .app-shell.sidebar-collapsed .app-sidebar.collapsed .nav-item[aria-label]:hover::after,
  .app-shell.sidebar-collapsed .app-sidebar.collapsed .nav-group-toggle[aria-label]:hover::after {
    transition: none;
  }
}
.app-shell.sidebar-collapsed .app-sidebar.collapsed .nav-group-items {
  display: none;
}
.app-shell.sidebar-collapsed .app-sidebar.collapsed .nav-menu {
  padding: var(--space-2);
  align-items: center;
}

@media (max-width: 1023px) {
  .breadcrumbs .breadcrumb-item:not(:last-child) {
    display: none;
  }
  .breadcrumbs::before {
    content: "...";
    color: var(--color-text-muted);
    margin-right: var(--space-2);
  }
}
@media (max-width: 767px) {
  .breadcrumbs {
    padding: var(--space-1) 0;
  }
  .breadcrumbs::before {
    font-size: var(--text-xs);
  }
}
@media (pointer: coarse) {
  .breadcrumbs .breadcrumb-item {
    padding: var(--space-3);
  }
}
@media (max-width: 639px) {
  .breadcrumbs-collapsible ol li {
    display: none;
  }
  .breadcrumbs-collapsible ol li:first-child, .breadcrumbs-collapsible ol li:last-child {
    display: flex;
  }
  .breadcrumbs-collapsible ol li:first-child::after {
    content: "...";
    margin: 0 var(--space-2);
    color: var(--color-text-subtle);
    font-weight: var(--font-normal);
    line-height: 1;
    flex-shrink: 0;
  }
}

.list[style*="--container-height"] {
  height: var(--container-height);
  overflow-y: auto;
}

.list-item[style*="--item-min-height"] {
  min-height: var(--item-min-height);
}

.text-center[style*="--load-more-position"] {
  position: var(--load-more-position);
  bottom: var(--load-more-bottom);
}

.list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.list-compact {
  gap: var(--space-2);
}
.list-spacious {
  gap: var(--space-6);
}
.list-loose {
  gap: var(--space-8);
}
.list-horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
@media (max-width: 639px) {
  .list-horizontal {
    flex-direction: column;
  }
}
.list-divided {
  gap: var(--space-1);
}
.list-divided .list-item {
  border-bottom: var(--border-1) solid var(--color-border);
}
.list-divided .list-item:last-child {
  border-bottom: none;
}
.list-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface-elevated);
  border-radius: var(--radius-lg);
  border: var(--border-1) solid var(--color-border);
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
  min-height: var(--list-item-min-height);
  line-height: var(--leading-normal);
}
@media (max-width: 639px) {
  .list-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
}
.list-item:hover {
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border);
  filter: brightness(1.02) saturate(1.05);
}
.list-item-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.list-item-active:hover {
  background: var(--color-primary-hover);
  filter: brightness(1.05) saturate(1.1);
}
.list-item-clickable {
  cursor: pointer;
}
.list-item-clickable:active {
  transform: translateY(0);
}
.list-item-disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}
.list-item-disabled:hover {
  transform: none;
  box-shadow: none;
}
.list-item-flat {
  background: transparent;
  border: none;
  padding: var(--space-3) 0;
}
.list-item-flat:hover {
  background: var(--state-hover-bg);
  transform: none;
  box-shadow: none;
  filter: brightness(1.02);
}
.list-item-glass {
  box-shadow: var(--shadow-md);
}
.list-item-card {
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-md);
  border: var(--border-1) solid var(--color-border);
}
.list-item-card:hover {
  box-shadow: var(--shadow-xl);
  filter: brightness(1.02) saturate(1.05);
}
.list-item-icon {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface) 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--border-1) solid var(--color-border);
  color: var(--color-text-muted);
}
.list-item-icon-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.list-item-icon-success {
  background: color-mix(in srgb, var(--color-success) 10%, var(--color-surface));
  border-color: var(--color-success);
  color: var(--color-success);
}
.list-item-icon-warning {
  background: color-mix(in srgb, var(--color-warning) 10%, var(--color-surface));
  border-color: var(--color-warning);
  color: var(--color-warning);
}
.list-item-icon-error {
  background: color-mix(in srgb, var(--color-error) 10%, var(--color-surface));
  border-color: var(--color-error);
  color: var(--color-error);
}
.list-item-icon-small {
  width: 2.5rem;
  height: 2.5rem;
}
.list-item-icon-large {
  width: 4rem;
  height: 4rem;
}
.list-item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  justify-content: center;
}
.list-item-title {
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  display: flex;
  align-items: center;
}
.list-item-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--leading-relaxed);
}
.list-item-description {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: var(--space-1) 0 0 0;
  line-height: var(--leading-relaxed);
}
.list-item-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}
@media (max-width: 639px) {
  .list-item-meta {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
}
.list-item-actions {
  flex-shrink: 0;
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
}
@media (max-width: 639px) {
  .list-item-actions {
    width: 100%;
    justify-content: flex-end;
  }
}
.list-item-actions .button {
  min-width: 2.5rem;
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.list-item-badge {
  flex-shrink: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 639px) {
  .list-item-badge {
    margin-left: 0;
  }
}

.list-grid {
  display: grid;
  gap: var(--space-4);
}
.list-grid-cards {
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}
@media (max-width: 639px) {
  .list-grid-cards {
    grid-template-columns: 1fr;
  }
}
.list-grid-cards {
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-6);
}
@media (max-width: 639px) {
  .list-grid-cards {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}
.list-grid-compact {
  gap: var(--space-3);
}
.list-grid-compact .list-item {
  padding: var(--space-3);
}

.menu-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  background: var(--color-surface-elevated);
  border-radius: var(--radius-xl);
  border: var(--border-1) solid var(--color-border);
  overflow: hidden;
}
.menu-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-out);
  border-bottom: var(--border-1) solid var(--color-border);
}
.menu-list-item:last-child {
  border-bottom: none;
}
.menu-list-item:hover {
  background: var(--state-hover-bg);
  color: var(--color-text);
  filter: brightness(1.02);
}
.menu-list-item:active {
  background: var(--color-surface);
}
.menu-list-item-active {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: var(--font-medium);
}
.menu-list-item-disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}
.menu-list-item-disabled:hover {
  background: transparent;
  color: var(--color-text-muted);
}
.menu-list-item-danger {
  color: var(--color-error);
}
.menu-list-item-danger:hover {
  background: color-mix(in srgb, var(--color-error) 10%, var(--color-surface));
  color: var(--color-error);
}
.menu-list-divider {
  height: var(--border-1);
  background: var(--color-border);
  margin: var(--space-2) 0;
}
.menu-list-header {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-bottom: var(--border-1) solid var(--color-border);
}

.avatar-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.avatar-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  transition: background var(--duration-fast) var(--ease-out);
}
.avatar-list-item:hover {
  background: var(--state-hover-bg);
  filter: brightness(1.02);
}
.avatar-list-content {
  flex: 1;
  min-width: 0;
}
.avatar-list-name {
  font-weight: var(--font-medium);
  color: var(--color-text);
  margin: 0;
  font-size: var(--text-sm);
}
.avatar-list-role {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  margin: 0;
}

.avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-inverse);
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.load-more-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  border-radius: var(--radius-lg);
}
.load-more-trigger:hover {
  background: var(--state-hover-bg);
  color: var(--color-text);
}
.load-more-trigger:focus-visible {
  outline: none;
  outline-offset: var(--outline-offset-focus);
}
.load-more-trigger-loading {
  pointer-events: none;
}
.load-more-trigger-loading::after {
  content: "";
  width: 1rem;
  height: 1rem;
  border: var(--offset-2) solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-left: var(--space-2);
}

.list .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-weight: var(--font-medium);
  text-align: center;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
  position: relative;
  outline: none;
  user-select: none;
  font-size: var(--text-sm);
  line-height: 1.4;
  text-decoration: none;
  min-height: calc(var(--base-unit) * var(--φ) * var(--φ));
  min-width: calc(var(--base-unit) * var(--φ) * var(--φ));
  padding: var(--space-2) var(--space-4);
}
@media (min-width: 768px) {
  .list .button {
    min-height: calc(var(--base-unit) * var(--φ) * 1.5);
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-3);
  }
}
.list .button *, .list .button i, .list .button span {
  color: inherit;
}
.list .button [class*=icon],
.list .button [class*=material],
.list .button [class*=fa],
.list .button [class*=feather],
.list .button .icon {
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
}
.list .button span {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  line-height: 1.5;
}
@media (hover: none) and (pointer: coarse) {
  .list .button {
    min-height: var(--touch-target-lg);
    min-width: var(--touch-target-lg);
    font-size: var(--text-base);
    padding: var(--space-3) var(--space-4);
  }
  .list .button:hover {
    transform: none;
  }
}
.list .button:disabled, .list .button[disabled] {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.list .button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus);
  outline-offset: 2px;
}
.list .button {
  min-width: 2.5rem;
  min-height: 2.5rem;
}
@media (max-width: 767px) {
  .list .button {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
}
.list .button-group {
  gap: var(--space-1);
  justify-content: center;
  box-shadow: none;
}
.list .flex:has(.button) {
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
}
.list .flex:has(.button) .button {
  flex-shrink: 0;
}

.align-middle {
  vertical-align: middle !important;
}

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

.align-start {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.align-end {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-4);
  gap: var(--space-4);
  flex-direction: column;
  gap: var(--space-3);
}
@media (min-width: 768px) {
  .pagination {
    flex-direction: row;
    gap: var(--space-4);
  }
}
.pagination-info {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.pagination-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.pagination-button {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  background: var(--color-surface-elevated);
  color: var(--color-text-muted);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}
.pagination-button:hover:not(:disabled) {
  background: var(--state-hover-bg);
  border-color: var(--color-border);
}
.pagination-button:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}
.pagination-pages {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.pagination-page {
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  background: var(--color-surface-elevated);
  color: var(--color-text-muted);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
}
.pagination-page:hover:not(:disabled) {
  background: var(--state-hover-bg);
  border-color: var(--color-border);
}
.pagination-page-current {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}
.pagination-ellipsis {
  padding: 0 var(--space-2);
  color: var(--color-text-muted);
}
.pagination-page-size {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.pagination-page-size label {
  white-space: nowrap;
}
.pagination-page-size-select {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  background: var(--color-surface-elevated);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.pagination-page-size-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 50%, transparent);
}

.pagination-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface);
  border-top: var(--border-1) solid var(--grid-border-color);
  min-height: 60px;
  position: relative;
  z-index: var(--z-above);
  transition: var(--transition-normal);
}
@media (max-width: 768px) {
  .pagination-footer {
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
  }
  .pagination-footer > * {
    width: 100%;
  }
}
.pagination-footer-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  flex: 1;
  min-width: 0;
}
@media (max-width: 768px) {
  .pagination-footer-info {
    justify-content: center;
    flex-wrap: wrap;
  }
}
.pagination-footer-info-count {
  font-weight: var(--font-medium);
  white-space: nowrap;
}
.pagination-footer-info-timing {
  opacity: var(--opacity-70);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.pagination-footer-bulk-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-2);
}
.pagination-footer-bulk-actions .button {
  transition: var(--transition-normal);
}
.pagination-footer-bulk-actions .button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px var(--shadow-color-20);
}
.pagination-footer-controls {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
@media (max-width: 768px) {
  .pagination-footer-controls {
    justify-content: space-between;
    width: 100%;
  }
}
.pagination-footer-page-size {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.pagination-footer-page-size-selector {
  min-width: var(--space-20);
}
.pagination-footer-page-size-select {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: var(--transition-normal);
  min-width: 80px;
  cursor: pointer;
}
.pagination-footer-page-size-select:hover {
  border-color: var(--color-primary-medium);
  background: var(--surface-hover);
}
.pagination-footer-page-size-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.pagination-footer-navigation {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.pagination-footer-navigation-info {
  margin: 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .pagination-footer-navigation-info {
    margin: 0 var(--space-2);
    font-size: var(--text-xs);
  }
}
.pagination-footer-navigation .button {
  transition: var(--transition-normal);
}
.pagination-footer-navigation .button:hover:not(:disabled) {
  background: var(--color-primary-light);
  color: var(--color-primary);
  transform: translateY(-1px);
}
.pagination-footer-navigation .button:disabled {
  opacity: var(--opacity-40);
  cursor: not-allowed;
}
.pagination-footer-navigation .button-icon {
  font-size: 20px;
}
[data-theme=dark] .pagination-footer {
  background: var(--surface-elevated);
  border-top-color: color-mix(in srgb, var(--color-border) 10%, transparent);
}
[data-theme=dark] .pagination-footer .pagination-footer-page-size-select {
  background: var(--surface-dark);
  border-color: var(--color-border-dark);
}
[data-theme=dark] .pagination-footer .pagination-footer-page-size-select:hover {
  background: var(--surface-hover-dark);
}
[data-theme=dark] .pagination-footer .pagination-footer-navigation .button:hover:not(:disabled) {
  background: var(--color-primary-light);
}

.pagination-footer.dense {
  min-height: 48px;
  padding: var(--space-2) var(--space-4);
}
.pagination-footer.dense .pagination-footer-info, .pagination-footer.dense .pagination-footer-page-size, .pagination-footer.dense .pagination-footer-navigation-info {
  font-size: var(--text-xs);
}
.pagination-footer.dense .pagination-footer-navigation-icon {
  font-size: 18px;
}
.pagination-footer.comfortable {
  min-height: 72px;
  padding: var(--space-4) var(--space-6);
}
.pagination-footer.comfortable .pagination-footer-navigation-icon {
  font-size: 24px;
}
.pagination-footer.loading {
  pointer-events: none;
  opacity: var(--opacity-60);
}
.pagination-footer.loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--surface-80);
  backdrop-filter: blur(2px);
}
.pagination-footer.elevated {
  background: var(--surface-elevated);
  box-shadow: 0 -1px 3px var(--shadow-color-10);
}
.pagination-footer.flat {
  background: transparent;
  border-top: none;
}
.pagination-footer.primary {
  background: var(--color-primary-light);
  border-top-color: var(--color-primary-light);
}
.pagination-footer.primary .pagination-footer-info-count {
  color: var(--color-primary);
}
.pagination-footer.sticky {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
}
.pagination-footer.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-fixed);
}

.section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
@media (max-width: 767px) {
  .section {
    gap: var(--space-2);
  }
}
.section-small {
  gap: var(--space-2);
}
.section-small .section-header {
  padding-bottom: var(--space-2);
}
.section-small-divider .section-icon-wrapper {
  width: 24px;
  height: 24px;
}
.section-medium {
  gap: var(--space-4);
}
.section-medium .section-header {
  padding-bottom: var(--space-3);
}
.section-medium-divider .section-icon-wrapper {
  width: 32px;
  height: 32px;
}
.section-large {
  gap: var(--space-6);
}
.section-large .section-header {
  padding-bottom: var(--space-4);
}
.section-large-divider .section-icon-wrapper {
  width: 40px;
  height: 40px;
}
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-3);
  border-bottom: var(--border-1) solid var(--color-border);
}
@media (max-width: 767px) {
  .section-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
}
.section-header-no-border {
  border-bottom: none;
  padding-bottom: 0;
}
.section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0;
  line-height: 1.2;
}
@media (max-width: 767px) {
  .section-title {
    font-size: var(--text-lg);
  }
}
.section-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: var(--space-1) 0 0 0;
  line-height: 1.4;
}
@media (max-width: 767px) {
  .section-subtitle {
    font-size: var(--text-xs);
  }
}
.section-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
@media (max-width: 767px) {
  .section-actions {
    flex-direction: column;
    width: 100%;
  }
  .section-actions .button {
    width: 100%;
    justify-content: center;
  }
}
.section-content {
  flex: 1;
  min-height: 0;
  min-width: 0;
}
.section-footer {
  padding-top: var(--space-3);
  border-top: var(--border-1) solid var(--color-border);
}
@media (max-width: 767px) {
  .section-footer {
    padding-top: var(--space-2);
  }
}
.section-footer-no-border {
  border-top: none;
  padding-top: 0;
}
.section-collapsible .section-header {
  cursor: pointer;
  user-select: none;
  transition: all var(--duration-fast) var(--ease-out);
}
@media (hover: none) and (pointer: coarse) {
  .section-collapsible .section-header:active {
    background-color: var(--color-surface);
    transform: scale(0.98);
  }
}
.section-collapsible .section-content {
  transition: all var(--duration-slow) var(--ease-out);
  overflow: hidden;
}
.section-collapsible .section-content-collapsed {
  max-height: 0;
  opacity: 0;
  margin: 0;
  padding: 0;
}
.section-loading .section-content {
  position: relative;
  min-height: var(--space-20);
}
.section-loading .section-content::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, var(--color-surface-elevated) 0%, var(--color-surface) 100%);
  animation: pulse 1.5s ease-in-out infinite;
  border-radius: inherit;
}
.section-disabled {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  filter: grayscale(20%);
}
.section-elevated {
  background: var(--color-surface-elevated);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--space-6);
}
@media (max-width: 767px) {
  .section-elevated {
    padding: var(--space-3);
    border-radius: var(--radius-lg);
  }
}
.section-divider {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) 0;
  width: 100%;
}
.section-divider-small {
  margin: var(--space-2) 0;
  gap: var(--space-2);
}
.section-divider-large {
  margin: var(--space-6) 0;
  gap: var(--space-4);
}
.section-divider-primary .section-icon-wrapper {
  background: color-mix(in srgb, var(--color-primary) 8%, var(--glass-bg-light));
  color: var(--color-text-inverse);
}
.section-divider-secondary .section-icon-wrapper {
  background: var(--glass-bg-medium);
  color: var(--color-text-inverse);
}
.section-divider-success .section-icon-wrapper {
  background: var(--glass-success-bg);
  color: var(--color-text-inverse);
}
.section-divider-warning .section-icon-wrapper {
  background: color-mix(in srgb, var(--color-warning) 8%, var(--glass-bg-light));
  color: var(--color-text-inverse);
}
.section-divider-error .section-icon-wrapper {
  background: var(--glass-error-bg);
  color: var(--color-text-inverse);
}
.section-divider-info .section-icon-wrapper {
  background: var(--glass-info-bg);
  color: var(--color-text-inverse);
}
.section-divider-center {
  text-align: center;
}
.section-divider-center .section-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section-divider-right {
  flex-direction: row-reverse;
}
.section-divider-right .section-line {
  margin-left: 0;
  margin-right: var(--space-2);
}
.section-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-surface);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.section-icon-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-surface-elevated) 20%, transparent) 0%, transparent 100%);
  pointer-events: none;
}
.section-icon {
  transition: transform var(--duration-normal) var(--ease-out);
}
.section-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--color-border) 0%, var(--color-border) 100%);
  margin-left: var(--space-2);
  position: relative;
  overflow: hidden;
}
.section-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary) 0%, transparent 100%);
  opacity: 0.3;
  transform: translateX(-100%);
  animation: shimmer 3s ease-in-out infinite;
}
.section-primary-section-elevated {
  border: var(--border-1) solid var(--color-primary);
}
.section-primary-section-status .section-title {
  color: var(--color-text-inverse);
}
.section-secondary-section-elevated {
  border: var(--border-1) solid var(--color-border);
}
.section-secondary-section-status .section-title {
  color: var(--color-text-inverse);
}
.section-success-section-elevated {
  border: var(--border-1) solid var(--color-success);
}
.section-success-section-status .section-title {
  color: var(--color-text-inverse);
}
.section-warning-section-elevated {
  border: var(--border-1) solid var(--color-warning);
}
.section-warning-section-status .section-title {
  color: var(--color-text-inverse);
}
.section-error-section-elevated {
  border: var(--border-1) solid var(--color-error);
}
.section-error-section-status .section-title {
  color: var(--color-text-inverse);
}
.section-info-section-elevated {
  border: var(--border-1) solid var(--color-info);
}
.section-info-section-status .section-title {
  color: var(--color-text-inverse);
}

.step-progress {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
  padding: var(--space-4) 0;
}
.step-progress .step {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-2);
  position: relative;
}
.step-progress .step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: var(--space-6);
  left: calc(100% + var(--space-3));
  width: var(--space-6);
  height: var(--border-2);
  background: var(--color-border);
}
.step-progress .step.active:not(:last-child)::after {
  background: var(--color-primary);
}
.step-progress .step.active .step-number {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.step-progress .step.active .step-label {
  color: var(--color-text);
  font-weight: var(--font-semibold);
}
.step-progress .step-completed .step-number {
  background: var(--color-success);
  color: var(--color-text-inverse);
}
.step-progress .step-completed .step-number::after {
  content: "check";
  font-family: "Material Symbols Rounded";
  font-size: var(--text-sm);
}
.step-progress-number {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-full);
  background: var(--color-border);
  color: var(--color-text-muted);
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
}
.step-progress-label {
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--color-text-subtle);
  font-weight: var(--font-medium);
  text-align: center;
}

.step-content {
  padding: var(--space-6) 0;
}
.step-content h3 {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--color-text);
  margin: 0 0 var(--space-6) 0;
  font-weight: var(--font-semibold);
}

.step-navigation {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--border-1) solid var(--color-border);
}
.step-navigation-back {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.step-navigation-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

@media (max-width: 767px) {
  .step-progress {
    flex-wrap: wrap;
    gap: var(--space-4);
  }
  .step-progress .step:not(:last-child)::after {
    display: none;
  }
}
.content, .content-table, .content-form, .content-reading, .content-dashboard, .content-shell-aware {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 0;
  padding-left: 0;
  position: relative;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .content, .content-table, .content-form, .content-reading, .content-dashboard, .content-shell-aware {
    padding-left: 0;
    padding-right: 0;
  }
}
.content-normal, .content-table, .content-form, .content-reading, .content-dashboard, .content-shell-aware {
  padding-top: var(--container-padding, var(--space-4));
  padding-bottom: var(--container-padding, var(--space-4));
}
.content-dense, .content-table {
  padding-top: calc(var(--container-padding, var(--space-3)) * 0.5);
  padding-bottom: calc(var(--container-padding, var(--space-3)) * 0.5);
}
.content-compact {
  padding-top: calc(var(--container-padding, var(--space-2)) * 0.33);
  padding-bottom: calc(var(--container-padding, var(--space-2)) * 0.33);
}
.content-spacious {
  padding-top: calc(var(--container-padding, var(--space-6)) * 1.33);
  padding-bottom: calc(var(--container-padding, var(--space-6)) * 1.33);
}
.content-padded, .content-table, .content-form, .content-reading, .content-shell-aware {
  padding-left: var(--container-padding, var(--content-padding));
  padding-right: var(--container-padding, var(--content-padding));
}
@media (max-width: 1023px) {
  .content-padded, .content-table, .content-form, .content-reading, .content-shell-aware {
    padding-left: max(var(--space-4), 4vw);
    padding-right: max(var(--space-4), 4vw);
  }
}
@media (max-width: 767px) {
  .content-padded, .content-table, .content-form, .content-reading, .content-shell-aware {
    padding-left: max(var(--space-3), 3vw);
    padding-right: max(var(--space-3), 3vw);
  }
}
@media (max-width: 639px) {
  .content-padded, .content-table, .content-form, .content-reading, .content-shell-aware {
    padding-left: max(var(--space-2), 2vw);
    padding-right: max(var(--space-2), 2vw);
  }
}
.content-full-width, .content-dashboard {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}
@media (max-width: 767px) {
  .content-full-width, .content-dashboard {
    padding-left: 0;
    padding-right: 0;
  }
}
.content-max-sm {
  max-width: var(--content-max-width-sm);
}
.content-max-md, .content-form {
  max-width: var(--content-max-width-md);
}
.content-max-lg, .content-reading {
  max-width: var(--content-max-width-lg);
}
.content-max-xl, .content-table {
  max-width: var(--content-max-width-xl);
}
.content-max-2xl, .content-dashboard {
  max-width: var(--content-max-width-2xl);
}
.content-centered, .content-table, .content-form, .content-reading, .content-dashboard, .content-shell-aware {
  margin-left: auto;
  margin-right: auto;
}
.content-centered[class*=content-max-], [class*=content-max-].content-table, [class*=content-max-].content-form, [class*=content-max-].content-reading, [class*=content-max-].content-dashboard, [class*=content-max-].content-shell-aware {
  display: block;
  width: 100%;
}

.empty-state, .success-state, .error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-12) var(--space-6);
  min-height: 20rem;
  background: var(--color-surface-elevated);
  border-radius: var(--radius-xl);
  border: var(--border-2) dashed var(--color-border);
}
@media (max-width: 767px) {
  .empty-state, .success-state, .error-state {
    padding: var(--space-8) var(--space-4);
    min-height: 16rem;
  }
}
.empty-state-icon {
  width: 5rem;
  height: 5rem;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-6);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
@media (max-width: 767px) {
  .empty-state-icon {
    width: 4rem;
    height: 4rem;
    margin-bottom: var(--space-4);
  }
}
.empty-state-icon-primary {
  background: var(--color-primary);
}
.empty-state-icon-success {
  background: color-mix(in srgb, var(--color-success) 10%, var(--color-surface));
}
.empty-state-icon-warning {
  background: color-mix(in srgb, var(--color-warning) 10%, var(--color-surface));
}
.empty-state-icon-error {
  background: color-mix(in srgb, var(--color-error) 10%, var(--color-surface));
}
.empty-state-icon-info {
  background: color-mix(in srgb, var(--color-info) 10%, var(--color-surface));
}
.empty-state-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-3) 0;
}
@media (max-width: 767px) {
  .empty-state-title {
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
  }
}
.empty-state-description {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: 24rem;
  margin: 0 0 var(--space-6) 0;
}
@media (max-width: 767px) {
  .empty-state-description {
    font-size: var(--text-xs);
    margin-bottom: var(--space-4);
    max-width: 20rem;
  }
}
.empty-state-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}
@media (max-width: 767px) {
  .empty-state-actions {
    flex-direction: column;
    width: 100%;
    max-width: 16rem;
    gap: var(--space-2);
  }
  .empty-state-actions > .button {
    width: 100%;
  }
}
.empty-state-compact {
  padding: var(--space-8) var(--space-4);
  min-height: 12rem;
}
.empty-state-compact .empty-state-icon {
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--space-4);
}
.empty-state-compact .empty-state-title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}
.empty-state-compact .empty-state-description {
  font-size: var(--text-xs);
  margin-bottom: var(--space-4);
}
.empty-state-large {
  padding: var(--space-16) var(--space-8);
  min-height: 28rem;
}
.empty-state-large .empty-state-icon {
  width: 6rem;
  height: 6rem;
  margin-bottom: var(--space-8);
}
.empty-state-large .empty-state-title {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-4);
}
.empty-state-large .empty-state-description {
  font-size: var(--text-base);
  margin-bottom: var(--space-8);
  max-width: 28rem;
}
.empty-state-card {
  background: var(--color-surface-elevated);
  border: var(--border-1) solid var(--color-border);
  border-style: solid;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.empty-state-image {
  width: 8rem;
  height: 8rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.empty-state-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
@media (max-width: 767px) {
  .empty-state-image {
    width: 6rem;
    height: 6rem;
    margin-bottom: var(--space-4);
  }
}
.empty-state-custom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}
.empty-state-custom * {
  margin: 0;
}
.empty-state-row {
  display: table-row;
  width: 100%;
}
.empty-state-row td {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  vertical-align: middle;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.error-state {
  border-color: color-mix(in srgb, var(--color-error) 10%, var(--color-surface));
}
.error-state .empty-state-icon {
  background: color-mix(in srgb, var(--color-error) 10%, var(--color-surface));
}
.error-state .empty-state-title {
  color: var(--color-error);
}

.success-state {
  border-color: color-mix(in srgb, var(--color-success) 10%, var(--color-surface));
}
.success-state .empty-state-icon {
  background: color-mix(in srgb, var(--color-success) 10%, var(--color-surface));
}
.success-state .empty-state-title {
  color: var(--color-success);
}

.skeleton {
  display: block;
  background: color-mix(in srgb, var(--color-text) 15%, var(--color-surface));
  border-radius: var(--radius-sm);
  color: transparent !important;
  user-select: none;
  overflow: hidden;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
}
[data-theme=dark] .skeleton {
  background: color-mix(in srgb, var(--color-text) 10%, var(--color-surface));
}
.skeleton * {
  color: transparent !important;
  background: transparent !important;
  border: none !important;
}
.skeleton-text {
  display: block;
  background: color-mix(in srgb, var(--color-text) 15%, var(--color-surface));
  border-radius: var(--radius-sm);
  color: transparent !important;
  user-select: none;
  overflow: hidden;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
  height: 0.875rem;
  margin-bottom: var(--space-1);
  border-radius: var(--radius-xs);
}
[data-theme=dark] .skeleton-text {
  background: color-mix(in srgb, var(--color-text) 10%, var(--color-surface));
}
.skeleton-text:last-child {
  margin-bottom: 0;
}
.skeleton-block {
  display: block;
  background: color-mix(in srgb, var(--color-text) 15%, var(--color-surface));
  border-radius: var(--radius-sm);
  color: transparent !important;
  user-select: none;
  overflow: hidden;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
}
[data-theme=dark] .skeleton-block {
  background: color-mix(in srgb, var(--color-text) 10%, var(--color-surface));
}
.skeleton-title {
  display: block;
  background: color-mix(in srgb, var(--color-text) 15%, var(--color-surface));
  border-radius: var(--radius-sm);
  color: transparent !important;
  user-select: none;
  overflow: hidden;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
  height: 1.25rem;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-sm);
}
[data-theme=dark] .skeleton-title {
  background: color-mix(in srgb, var(--color-text) 10%, var(--color-surface));
}
.skeleton-caption {
  display: block;
  background: color-mix(in srgb, var(--color-text) 15%, var(--color-surface));
  border-radius: var(--radius-sm);
  color: transparent !important;
  user-select: none;
  overflow: hidden;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
  height: 0.75rem;
  margin-bottom: var(--space-1);
  border-radius: var(--radius-xs);
  opacity: var(--opacity-80);
}
[data-theme=dark] .skeleton-caption {
  background: color-mix(in srgb, var(--color-text) 10%, var(--color-surface));
}
.skeleton-avatar {
  display: block;
  background: color-mix(in srgb, var(--color-text) 15%, var(--color-surface));
  border-radius: var(--radius-sm);
  color: transparent !important;
  user-select: none;
  overflow: hidden;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full) !important;
  flex-shrink: 0;
}
[data-theme=dark] .skeleton-avatar {
  background: color-mix(in srgb, var(--color-text) 10%, var(--color-surface));
}
.skeleton-icon-circle {
  display: block;
  background: color-mix(in srgb, var(--color-text) 15%, var(--color-surface));
  border-radius: var(--radius-sm);
  color: transparent !important;
  user-select: none;
  overflow: hidden;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full) !important;
  flex-shrink: 0;
}
[data-theme=dark] .skeleton-icon-circle {
  background: color-mix(in srgb, var(--color-text) 10%, var(--color-surface));
}
.skeleton-icon {
  display: block;
  background: color-mix(in srgb, var(--color-text) 15%, var(--color-surface));
  border-radius: var(--radius-sm);
  color: transparent !important;
  user-select: none;
  overflow: hidden;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-sm);
}
[data-theme=dark] .skeleton-icon {
  background: color-mix(in srgb, var(--color-text) 10%, var(--color-surface));
}
.skeleton-button {
  display: block;
  background: color-mix(in srgb, var(--color-text) 15%, var(--color-surface));
  border-radius: var(--radius-sm);
  color: transparent !important;
  user-select: none;
  overflow: hidden;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 5rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
}
[data-theme=dark] .skeleton-button {
  background: color-mix(in srgb, var(--color-text) 10%, var(--color-surface));
}
.skeleton-badge {
  display: block;
  background: color-mix(in srgb, var(--color-text) 15%, var(--color-surface));
  border-radius: var(--radius-sm);
  color: transparent !important;
  user-select: none;
  overflow: hidden;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
  height: 1.5rem;
  min-width: 3rem;
  border-radius: var(--radius-full) !important;
  display: inline-block;
}
[data-theme=dark] .skeleton-badge {
  background: color-mix(in srgb, var(--color-text) 10%, var(--color-surface));
}
.skeleton-chip {
  display: block;
  background: color-mix(in srgb, var(--color-text) 15%, var(--color-surface));
  border-radius: var(--radius-sm);
  color: transparent !important;
  user-select: none;
  overflow: hidden;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
  height: 1.5rem;
  min-width: 3rem;
  border-radius: 0.75rem !important;
  display: inline-block;
}
[data-theme=dark] .skeleton-chip {
  background: color-mix(in srgb, var(--color-text) 10%, var(--color-surface));
}
.skeleton-chart-bar {
  display: block;
  background: color-mix(in srgb, var(--color-text) 15%, var(--color-surface));
  border-radius: var(--radius-sm);
  color: transparent !important;
  user-select: none;
  overflow: hidden;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
  width: 1rem;
  min-height: 1.5rem;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0 !important;
  align-self: flex-end;
  flex-shrink: 0;
}
[data-theme=dark] .skeleton-chart-bar {
  background: color-mix(in srgb, var(--color-text) 10%, var(--color-surface));
}
.skeleton-input {
  display: block;
  background: color-mix(in srgb, var(--color-text) 15%, var(--color-surface));
  border-radius: var(--radius-sm);
  color: transparent !important;
  user-select: none;
  overflow: hidden;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
  width: 100%;
  height: 2.25rem;
  border-radius: var(--radius-md);
}
[data-theme=dark] .skeleton-input {
  background: color-mix(in srgb, var(--color-text) 10%, var(--color-surface));
}
.skeleton-card {
  display: block;
  background: color-mix(in srgb, var(--color-text) 15%, var(--color-surface));
  border-radius: var(--radius-sm);
  color: transparent !important;
  user-select: none;
  overflow: hidden;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
  width: 100%;
  min-height: 8rem;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
[data-theme=dark] .skeleton-card {
  background: color-mix(in srgb, var(--color-text) 10%, var(--color-surface));
}
.skeleton-table {
  display: block;
  background: color-mix(in srgb, var(--color-text) 15%, var(--color-surface));
  border-radius: var(--radius-sm);
  color: transparent !important;
  user-select: none;
  overflow: hidden;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
  width: 100%;
}
[data-theme=dark] .skeleton-table {
  background: color-mix(in srgb, var(--color-text) 10%, var(--color-surface));
}
.skeleton-table .skeleton-row {
  height: 3rem;
  border-bottom: 1px solid var(--color-border-light);
  padding: var(--space-3);
}
.skeleton-smart-wrapper {
  position: relative;
  display: block;
  width: 100%;
  min-height: inherit;
}
.skeleton-smart-container {
  display: block;
}
.skeleton-smart-container.skeleton-hidden-container {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  height: 0;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
}
.skeleton-shimmer {
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-text) 15%, var(--color-surface)) 0%, color-mix(in srgb, var(--color-text) 5%, var(--color-surface)) 50%, color-mix(in srgb, var(--color-text) 15%, var(--color-surface)) 100%);
  background-size: 200% 100%;
  animation: shimmer 2s ease-in-out infinite;
}
[data-theme=dark] .skeleton-shimmer {
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-text) 10%, var(--color-surface)) 0%, color-mix(in srgb, var(--color-text) 20%, var(--color-surface)) 50%, color-mix(in srgb, var(--color-text) 10%, var(--color-surface)) 100%);
  background-size: 200% 100%;
}
.skeleton-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-shimmer, .skeleton-pulse {
    animation: none !important;
  }
}
@media (prefers-contrast: high) {
  .skeleton {
    background: repeating-linear-gradient(45deg, var(--color-border), var(--color-border) 10px, var(--color-border-light) 10px, var(--color-border-light) 20px) !important;
  }
  .skeleton-shimmer {
    animation: none !important;
    background: repeating-linear-gradient(45deg, var(--color-border), var(--color-border) 10px, var(--color-border-light) 10px, var(--color-border-light) 20px) !important;
  }
}
.progress-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--space-3);
}
@media (min-width: 768px) {
  .progress-container {
    gap: var(--space-2);
  }
}

.progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: var(--font-medium);
  color: var(--color-text);
  font-size: var(--text-base);
}
@media (min-width: 768px) {
  .progress-label {
    font-size: var(--text-sm);
  }
}

.progress-value {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}
@media (min-width: 768px) {
  .progress-value {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
  }
}

.progress {
  width: 100%;
  background: var(--color-surface);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
  height: var(--space-3);
}
@media (min-width: 768px) {
  .progress {
    height: var(--space-2);
  }
}
.progress-bar {
  height: 100%;
  background: color-mix(in srgb, var(--progress-start-color, var(--color-primary)) calc(100% - var(--progress-percentage, 0) * 1%), var(--progress-end-color, var(--color-success)) calc(var(--progress-percentage, 0) * 1%));
  border-radius: inherit;
  position: relative;
  width: var(--progress-width, 0%);
  transition: width var(--duration-normal) var(--ease-out), background-color var(--duration-normal) var(--ease-out);
  will-change: width, background-color;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (prefers-reduced-motion: reduce) {
  .progress-bar {
    transition: width var(--duration-fast) ease-out, background-color var(--duration-fast) ease-out;
  }
}
.progress-bar .progress-bar-label {
  color: var(--color-text-inverse);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  white-space: nowrap;
  position: relative;
  z-index: var(--z-base);
}
.progress-density-compact .progress-label {
  font-size: var(--text-xs);
  margin-bottom: var(--space-1);
}
.progress-density-compact .progress-value {
  font-size: var(--text-2xs);
}
.progress-density-dense .progress-label {
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}
.progress-density-dense .progress-value {
  font-size: var(--text-xs);
}
.progress-density-spacious .progress-label {
  font-size: var(--text-lg);
  margin-bottom: var(--space-4);
}
.progress-density-spacious .progress-value {
  font-size: var(--text-base);
}
.progress-sm {
  height: var(--space-2);
}
.progress-lg {
  height: var(--space-4);
}
.progress-xl {
  height: var(--space-5);
}
.progress-primary {
  --progress-start-color: var(--color-primary);
  --progress-end-color: var(--color-success);
}
.progress-success {
  --progress-start-color: var(--color-info);
  --progress-end-color: var(--color-success);
}
.progress-warning {
  --progress-start-color: var(--color-warning);
  --progress-end-color: var(--color-error);
}
.progress-error {
  --progress-start-color: var(--color-warning);
  --progress-end-color: var(--color-error);
}
.progress-info {
  --progress-start-color: var(--color-info);
  --progress-end-color: var(--color-success);
}
.progress::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--color-text-inverse) 15%, transparent) 50%, transparent 100%);
  background-size: 200% 100%;
  background-position: -200% center;
  animation: shimmer 2s infinite;
  will-change: background-position;
  border-radius: inherit;
  pointer-events: none;
  mask: linear-gradient(to right, white 0%, white var(--progress-width, 0%), transparent var(--progress-width, 0%));
  -webkit-mask: linear-gradient(to right, white 0%, white var(--progress-width, 0%), transparent var(--progress-width, 0%));
}
@media (prefers-reduced-motion: reduce) {
  .progress::after {
    animation: none;
  }
}
.progress:has(.progress-bar-label)::after, .progress:has(.progress-bar-no-shimmer)::after {
  display: none;
}
.progress-bar-striped {
  background-image: linear-gradient(45deg, color-mix(in srgb, var(--color-text-inverse) 25%, transparent) 25%, transparent 25%, transparent 50%, color-mix(in srgb, var(--color-text-inverse) 25%, transparent) 50%, color-mix(in srgb, var(--color-text-inverse) 25%, transparent) 75%, transparent 75%);
  background-size: 2rem 2rem;
}
.progress:has(.progress-bar-animated)::after {
  background: linear-gradient(45deg, color-mix(in srgb, var(--color-text-inverse) 25%, transparent) 25%, transparent 25%, transparent 50%, color-mix(in srgb, var(--color-text-inverse) 25%, transparent) 50%, color-mix(in srgb, var(--color-text-inverse) 25%, transparent) 75%, transparent 75%);
  background-size: 2rem 2rem;
  animation: progress-stripes 1s linear infinite;
}
.progress-indeterminate .progress-bar {
  width: 0;
  background: transparent;
}
.progress-indeterminate::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-primary);
  border-radius: inherit;
  animation: progress-slide-right 2s infinite ease-in-out;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .progress-indeterminate::before {
    animation: progress-slide-right 1s ease-in-out;
  }
}
.progress-indeterminate-left::before {
  animation: progress-slide-left 2s infinite ease-in-out;
}
.progress-indeterminate-right::before {
  animation: progress-slide-right 2s infinite ease-in-out;
}
.progress-indeterminate-up, .progress-indeterminate-down {
  width: var(--space-3);
  height: var(--space-32);
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .progress-indeterminate-up, .progress-indeterminate-down {
    width: var(--space-2);
    height: var(--space-24);
  }
}
.progress-indeterminate-up .progress-bar, .progress-indeterminate-down .progress-bar {
  width: 0;
  background: transparent;
}
.progress-indeterminate-up::before, .progress-indeterminate-down::before {
  content: "";
  position: absolute;
  background: var(--color-primary);
  border-radius: inherit;
  will-change: transform;
}
.progress-indeterminate-up::before {
  animation: progress-slide-up 2s infinite ease-in-out;
  left: 0;
  top: 100%;
  width: 100%;
  height: 100%;
}
.progress-indeterminate-down::before {
  animation: progress-slide-down 2s infinite ease-in-out;
  left: 0;
  top: -100%;
  width: 100%;
  height: 100%;
}

.progress-circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-16);
  height: var(--space-16);
}
@media (min-width: 768px) {
  .progress-circle {
    width: var(--space-12);
    height: var(--space-12);
  }
}
.progress-circle-svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}
.progress-circle-track {
  fill: none;
  stroke: var(--color-surface);
  stroke-width: var(--stroke-width, var(--border-4));
}
.progress-circle-bar {
  fill: none;
  stroke: color-mix(in srgb, var(--progress-start-color, var(--color-primary)) calc(100% - var(--progress-percentage, 0) * 1%), var(--progress-end-color, var(--color-success)) calc(var(--progress-percentage, 0) * 1%));
  stroke-width: var(--stroke-width, var(--border-4));
  stroke-linecap: round;
  transition: stroke-dashoffset var(--duration-slow) var(--ease-out), stroke var(--duration-slow) var(--ease-out);
  will-change: stroke-dashoffset, stroke;
}
@media (prefers-reduced-motion: reduce) {
  .progress-circle-bar {
    transition: none;
  }
}
.progress-circle-text {
  position: absolute;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}
.progress-circle-density-compact {
  width: 4;
  height: 4;
}
.progress-circle-density-compact {
  padding: var(--space-1);
  gap: var(--space-0-5);
  font-size: var(--text-xs);
}
.progress-circle-density-compact .progress-circle-track, .progress-circle-density-compact .progress-circle-bar {
  stroke-width: var(--border-2);
}
.progress-circle-density-compact .progress-circle-text {
  font-size: var(--text-2xs);
}
.progress-circle-density-dense {
  width: 9;
  height: 9;
}
.progress-circle-density-dense {
  padding: var(--space-1-5);
  gap: var(--space-0-5);
  font-size: var(--text-sm);
}
.progress-circle-density-dense .progress-circle-track, .progress-circle-density-dense .progress-circle-bar {
  stroke-width: var(--border-3);
}
.progress-circle-density-dense .progress-circle-text {
  font-size: var(--text-xs);
}
.progress-circle-density-spacious {
  width: 30;
  height: 30;
}
.progress-circle-density-spacious {
  padding: var(--space-6);
  gap: var(--space-5);
  font-size: var(--text-xl);
}
.progress-circle-density-spacious .progress-circle-track, .progress-circle-density-spacious .progress-circle-bar {
  stroke-width: var(--border-5);
}
.progress-circle-density-spacious .progress-circle-text {
  font-size: var(--text-lg);
}
.progress-circle-sm {
  width: var(--space-8);
  height: var(--space-8);
}
.progress-circle-sm .progress-circle-text {
  font-size: var(--text-2xs);
}
.progress-circle-lg {
  width: var(--space-20);
  height: var(--space-20);
}
.progress-circle-lg .progress-circle-text {
  font-size: var(--text-lg);
}
.progress-circle-xl {
  width: var(--space-24);
  height: var(--space-24);
}
.progress-circle-xl .progress-circle-text {
  font-size: var(--text-xl);
}
.progress-circle-primary {
  --progress-start-color: var(--color-primary);
  --progress-end-color: var(--color-success);
}
.progress-circle-success {
  --progress-start-color: var(--color-info);
  --progress-end-color: var(--color-success);
}
.progress-circle-warning {
  --progress-start-color: var(--color-warning);
  --progress-end-color: var(--color-error);
}
.progress-circle-error {
  --progress-start-color: var(--color-warning);
  --progress-end-color: var(--color-error);
}
.progress-circle-info {
  --progress-start-color: var(--color-info);
  --progress-end-color: var(--color-success);
}
.progress-circle-indeterminate .progress-circle-bar {
  animation: progress-circle-spin 2s linear infinite;
  transform-origin: center;
}
@media (prefers-reduced-motion: reduce) {
  .progress-circle-indeterminate .progress-circle-bar {
    animation: progress-circle-spin 1s ease-in-out;
  }
}

.progress-steps {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .progress-steps {
    flex-direction: row;
    gap: var(--space-2);
  }
}
.progress-steps-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
}
.progress-steps-step:last-child .progress-steps-line {
  display: none;
}
.progress-steps-circle {
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-semibold);
  border: var(--border-2) solid var(--color-border);
  background: var(--color-surface-elevated);
  color: var(--color-text-muted);
  flex-shrink: 0;
  width: var(--space-12);
  height: var(--space-12);
  font-size: var(--text-sm);
}
@media (min-width: 768px) {
  .progress-steps-circle {
    width: var(--space-8);
    height: var(--space-8);
    font-size: var(--text-xs);
  }
}
.progress-steps-circle-completed {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.progress-steps-circle-active {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.progress-steps-line {
  flex: 1;
  height: var(--border-2);
  background: var(--color-border);
  margin: 0 var(--space-2);
}
@media (max-width: 639px) {
  .progress-steps-line {
    width: var(--border-2);
    height: var(--space-8);
    margin: 0;
  }
}
.progress-steps-line-completed {
  background: var(--color-primary);
}
.progress-steps-label {
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
}
@media (min-width: 768px) {
  .progress-steps-label {
    font-size: var(--text-xs);
  }
}
.progress-steps-label-active {
  color: var(--color-primary);
  font-weight: var(--font-medium);
}
.progress-steps-label-completed {
  color: var(--color-text);
}

.rating-container-enhanced .rating-star {
  transition: color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.rating-container-enhanced .rating-star:hover {
  transform: scale(1.1);
}
.rating-container-enhanced .rating-star-highlight {
  color: var(--color-warning) !important;
  transform: scale(1.05);
}
.rating-container-interactive .rating-star {
  cursor: pointer;
}
.rating-container-interactive .rating-star:hover {
  color: var(--color-warning);
}

.rating-value {
  font-variant-numeric: tabular-nums;
  margin-left: var(--space-1);
}

.loading {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.loading-center {
  justify-content: center;
  margin: 0 auto;
}
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--surface-rgb), 0.8);
  backdrop-filter: blur(2px);
  z-index: var(--z-loader);
}
.loading-small .spinner {
  width: 16px;
  height: 16px;
  border-width: 2px;
}
.loading-small .dots span {
  width: 6px;
  height: 6px;
}
.loading-small .progress-bar {
  height: 2px;
}
.loading-medium .spinner {
  width: 32px;
  height: 32px;
  border-width: 3px;
}
.loading-medium .dots span {
  width: 8px;
  height: 8px;
}
.loading-medium .progress-bar {
  height: 4px;
}
.loading-large .spinner {
  width: 48px;
  height: 48px;
  border-width: 4px;
}
.loading-large .dots span {
  width: 12px;
  height: 12px;
}
.loading-large .progress-bar {
  height: 6px;
}
.loading .spinner {
  border: 3px solid var(--color-border-dark);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.loading .dots {
  display: flex;
  gap: var(--space-1);
}
.loading .dots span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  animation: pulse 1.4s ease-in-out infinite both;
}
.loading .dots span:nth-child(1) {
  animation-delay: -0.32s;
}
.loading .dots span:nth-child(2) {
  animation-delay: -0.16s;
}
.loading .progress-bar {
  width: 200px;
  height: 4px;
  background: var(--color-border-dark);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.loading .progress-bar .progress-fill {
  height: 100%;
  background: var(--color-primary);
  animation: progress 1.5s ease-in-out infinite;
}
.loading-text {
  font-style: body2;
}

.toast-container {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 420px;
  min-width: 320px;
  pointer-events: none;
  padding: var(--space-3);
  z-index: var(--z-toast);
}
.toast-container-top-left {
  top: 0;
  left: 0;
}
.toast-container-top-center {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.toast-container-top-right {
  top: 0;
  right: 0;
}
.toast-container-bottom-left {
  bottom: 0;
  left: 0;
}
.toast-container-bottom-center {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.toast-container-bottom-right {
  bottom: 0;
  right: 0;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-xl);
  pointer-events: auto;
  min-height: 56px;
  position: relative;
  overflow: hidden;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
  opacity: 0;
  transform: translateY(-20px) scale(0.9);
  transition: all var(--duration-normal) var(--ease-spring);
}
.toast-glass {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37), inset 0 2px 4px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 2px 0 rgba(0, 0, 0, 0.1);
  color: var(--color-text-inverse);
}
.toast-glass .toast-title {
  color: var(--color-text-inverse);
}
.toast-glass .toast-message {
  color: color-mix(in srgb, var(--color-text-inverse) 80%, transparent);
}
.toast.entering {
  opacity: 0;
  transform: translateY(-20px) scale(0.9);
  animation: fadeSlideIn var(--duration-normal) var(--ease-spring) forwards;
}
.toast.visible {
  opacity: 1;
  transform: translate(0) scale(1);
}
.toast.visible:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--shadow-lg);
}
.toast.visible:hover.toast-glass {
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--shadow-2xl), inset 0 1px 0 0 rgba(255, 255, 255, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.toast.exiting {
  animation: fadeSlideOut var(--duration-fast) var(--ease-in) forwards;
}
.toast-success {
  --toast-color: var(--color-success);
  --toast-rgb: 76, 175, 80;
  background: var(--color-primary-light);
  border-color: var(--color-success);
  border-left: 3px solid var(--toast-color);
  color: var(--color-text);
}
.toast-success.toast-glass {
  background: color-mix(in srgb, white 70%, var(--toast-color) 30%);
  border: 1px solid color-mix(in srgb, var(--toast-color) 30%, rgba(255, 255, 255, 0.3));
  color: var(--color-text-inverse);
}
.toast-success.toast-glass .toast-title {
  color: var(--color-text-inverse);
}
.toast-success.toast-glass .toast-message {
  color: color-mix(in srgb, var(--color-text-inverse) 85%, transparent);
}
.toast-success.toast-glass .toast-icon {
  color: var(--color-text-inverse);
}
.toast-success.toast-glass::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--toast-color) 15%, transparent) 0%, transparent 30%);
  pointer-events: none;
}
.toast-success.toast-glass:hover {
  background: color-mix(in srgb, white 65%, var(--toast-color) 35%);
}
.toast-error {
  --toast-color: var(--color-error);
  --toast-rgb: 244, 67, 54;
  background: color-mix(in srgb, var(--color-error) 10%, var(--color-surface));
  border-color: var(--color-error);
  border-left: 3px solid var(--toast-color);
  color: var(--color-text);
}
.toast-error.toast-glass {
  background: color-mix(in srgb, white 70%, var(--toast-color) 30%);
  border: 1px solid color-mix(in srgb, var(--toast-color) 30%, rgba(255, 255, 255, 0.3));
  color: var(--color-text-inverse);
}
.toast-error.toast-glass .toast-title {
  color: var(--color-text-inverse);
}
.toast-error.toast-glass .toast-message {
  color: color-mix(in srgb, var(--color-text-inverse) 85%, transparent);
}
.toast-error.toast-glass .toast-icon {
  color: var(--color-text-inverse);
}
.toast-error.toast-glass::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--toast-color) 15%, transparent) 0%, transparent 30%);
  pointer-events: none;
}
.toast-error.toast-glass::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--toast-color);
  opacity: 0.8;
  animation: pulse 2s ease-in-out infinite;
}
.toast-error.toast-glass:hover {
  background: color-mix(in srgb, white 65%, var(--toast-color) 35%);
}
.toast-warning {
  --toast-color: var(--color-warning);
  --toast-rgb: 255, 152, 0;
  background: color-mix(in srgb, var(--color-warning) 10%, var(--color-surface));
  border-color: var(--color-warning);
  border-left: 3px solid var(--toast-color);
  color: var(--color-text);
}
.toast-warning.toast-glass {
  background: color-mix(in srgb, white 70%, var(--toast-color) 30%);
  border: 1px solid color-mix(in srgb, var(--toast-color) 30%, rgba(255, 255, 255, 0.3));
  color: var(--color-text-inverse);
}
.toast-warning.toast-glass .toast-title {
  color: var(--color-text-inverse);
}
.toast-warning.toast-glass .toast-message {
  color: color-mix(in srgb, var(--color-text-inverse) 85%, transparent);
}
.toast-warning.toast-glass .toast-icon {
  color: var(--color-text-inverse);
}
.toast-warning.toast-glass::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--toast-color) 15%, transparent) 0%, transparent 30%);
  pointer-events: none;
}
.toast-warning.toast-glass:hover {
  background: color-mix(in srgb, white 65%, var(--toast-color) 35%);
}
.toast-info {
  --toast-color: var(--color-info);
  --toast-rgb: 33, 150, 243;
  background: color-mix(in srgb, var(--color-info) 10%, var(--color-surface));
  border-color: var(--color-info);
  border-left: 3px solid var(--toast-color);
  color: var(--color-text);
}
.toast-info.toast-glass {
  background: color-mix(in srgb, white 70%, var(--toast-color) 30%);
  border: 1px solid color-mix(in srgb, var(--toast-color) 30%, rgba(255, 255, 255, 0.3));
  color: var(--color-text-inverse);
}
.toast-info.toast-glass .toast-title {
  color: var(--color-text-inverse);
}
.toast-info.toast-glass .toast-message {
  color: color-mix(in srgb, var(--color-text-inverse) 85%, transparent);
}
.toast-info.toast-glass .toast-icon {
  color: var(--color-text-inverse);
}
.toast-info.toast-glass::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--toast-color) 15%, transparent) 0%, transparent 30%);
  pointer-events: none;
}
.toast-info.toast-glass:hover {
  background: color-mix(in srgb, white 65%, var(--toast-color) 35%);
}
.toast-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  color: var(--toast-color, var(--color-text));
}
.toast-icon .icon {
  font-size: 20px;
  line-height: 1;
  color: inherit;
}
.toast-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.toast-title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.toast-message {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--color-text-muted);
  font-weight: var(--font-medium);
  word-break: break-word;
}
.toast-progress {
  margin-top: var(--space-2);
  height: 3px;
  background: var(--color-surface);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}
.toast-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-hover));
  border-radius: var(--radius-full);
  transition: width var(--transition-normal);
  box-shadow: var(--shadow-glow-sm);
}
.toast-action {
  background-color: var(--color-primary);
  background-image: var(--gradient-primary);
  color: var(--color-text-inverse);
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all var(--duration-fast) var(--ease-out);
  margin-top: var(--space-2);
  padding: var(--space-1-5) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-2xs);
  font-weight: var(--font-semibold);
  height: 32px;
  min-width: 64px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.toast-action:hover {
  filter: brightness(0.9) saturate(1.1);
  transform: translateY(-0.618px);
}
.toast-action:active {
  transform: scale(0.938);
}
.toast-action:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.toast-action:active {
  transform: scale(0.96);
}
.toast-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  opacity: 0.7;
  transition: all var(--transition-fast);
}
.toast-close:hover {
  opacity: 1;
  background: var(--state-hover-bg);
  transform: rotate(90deg) scale(1.1);
}
.toast-close:active {
  transform: rotate(90deg) scale(0.9);
}
.toast-close .icon {
  font-size: 18px;
  color: var(--color-text-muted);
}
.toast-sticky {
  border-width: 2px;
}
.toast-sticky::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-primary));
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}
.toast-duration {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--color-primary);
  opacity: 0.3;
  animation: widthShrink linear forwards;
}

.toast-container-top-left .toast.entering {
  opacity: 0;
  transform: translateX(-100%) scale(0.8);
  animation: slideInLeftScale var(--duration-normal) var(--ease-spring) forwards;
}
.toast-container-top-left .toast.exiting {
  animation: slideInLeftScale var(--duration-fast) var(--ease-in) reverse forwards;
}
.toast-container-bottom-left .toast.entering {
  opacity: 0;
  transform: translateX(-100%) scale(0.8);
  animation: slideInLeftScale var(--duration-normal) var(--ease-spring) forwards;
}
.toast-container-bottom-left .toast.exiting {
  animation: slideInLeftScale var(--duration-fast) var(--ease-in) reverse forwards;
}
.toast-container-top-right .toast.entering {
  opacity: 0;
  transform: translateX(100%) scale(0.8);
  animation: slideInRightScale var(--duration-normal) var(--ease-spring) forwards;
}
.toast-container-top-right .toast.exiting {
  animation: slideInRightScale var(--duration-fast) var(--ease-in) reverse forwards;
}
.toast-container-bottom-right .toast.entering {
  opacity: 0;
  transform: translateX(100%) scale(0.8);
  animation: slideInRightScale var(--duration-normal) var(--ease-spring) forwards;
}
.toast-container-bottom-right .toast.exiting {
  animation: slideInRightScale var(--duration-fast) var(--ease-in) reverse forwards;
}
.toast-container-top-center .toast.entering {
  opacity: 0;
  transform: translateY(-100%) scale(0.8);
  animation: slideInTopScale var(--duration-normal) var(--ease-spring) forwards;
}
.toast-container-top-center .toast.exiting {
  animation: slideInTopScale var(--duration-fast) var(--ease-in) reverse forwards;
}
.toast-container-bottom-center .toast.entering {
  opacity: 0;
  transform: translateY(100%) scale(0.8);
  animation: slideInBottomScale var(--duration-normal) var(--ease-spring) forwards;
}
.toast-container-bottom-center .toast.exiting {
  animation: slideInBottomScale var(--duration-fast) var(--ease-in) reverse forwards;
}

@media (max-width: 639px) {
  .toast-container {
    max-width: calc(100vw - var(--space-4));
    min-width: 280px;
    gap: var(--space-1-5);
    padding: var(--space-2);
  }
  .toast-container-top-left, .toast-container-top-right, .toast-container-top-center, .toast-container-bottom-left, .toast-container-bottom-right, .toast-container-bottom-center {
    left: var(--space-2);
    right: var(--space-2);
    transform: none;
  }
  .toast {
    padding: var(--space-2-5) var(--space-3);
    min-height: 48px;
    gap: var(--space-2);
  }
  .toast-title {
    font-size: var(--text-xs);
  }
  .toast-message {
    font-size: var(--text-2xs);
    line-height: 1.4;
  }
  .toast-action {
    padding: var(--space-1) var(--space-2);
    height: 28px;
    font-size: var(--text-3xs);
  }
  .toast-close {
    width: 28px;
    height: 28px;
  }
  .toast-icon .icon {
    font-size: 18px;
  }
}
[data-theme=dark] .toast {
  background: var(--color-surface);
  border-color: var(--color-border);
}
[data-theme=dark] .toast-glass {
  background: var(--glass-bg-medium);
  border-color: var(--glass-border-light);
}
[data-theme=dark] .toast-glass::before {
  opacity: 0.3;
}
[data-theme=dark] .toast-glass-success, [data-theme=dark] .toast-glass-error, [data-theme=dark] .toast-glass-warning, [data-theme=dark] .toast-glass-info {
  background: var(--glass-bg-light);
}

@media (prefers-reduced-motion: reduce) {
  .toast.entering, .toast.exiting, .toast.visible {
    animation: none;
    transition: opacity var(--duration-fast);
  }
  .toast.entering {
    opacity: 0;
  }
  .toast.visible {
    opacity: 1;
  }
  .toast.exiting {
    opacity: 0;
  }
}
.status {
  display: inline-flex;
  align-items: center;
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
  transition: all var(--duration-fast) var(--ease-out);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  gap: var(--space-2);
}
.status-indicator {
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
}
.status-message {
  border-radius: var(--radius-md);
  border: var(--border-1) solid transparent;
}
.status-badge {
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
.status-small {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  gap: var(--space-1);
}
.status-medium {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  gap: var(--space-2);
}
.status-large {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  gap: var(--space-2);
}
.status-success {
  color: var(--color-success);
}
.status-success-status-indicator {
  background: color-mix(in srgb, var(--color-success) 10%, var(--color-surface));
}
.status-success-status-message {
  background: color-mix(in srgb, var(--color-success) 10%, var(--color-surface));
  border-color: var(--color-success);
}
.status-success-status-badge {
  background: var(--color-success);
  color: var(--color-text-inverse);
}
.status-warning {
  color: var(--color-warning);
}
.status-warning-status-indicator {
  background: color-mix(in srgb, var(--color-warning) 10%, var(--color-surface));
}
.status-warning-status-message {
  background: color-mix(in srgb, var(--color-warning) 10%, var(--color-surface));
  border-color: var(--color-warning);
}
.status-warning-status-badge {
  background: var(--color-warning);
  color: var(--color-text-inverse);
}
.status-error {
  color: var(--color-error);
}
.status-error-status-indicator {
  background: color-mix(in srgb, var(--color-error) 10%, var(--color-surface));
}
.status-error-status-message {
  background: color-mix(in srgb, var(--color-error) 10%, var(--color-surface));
  border-color: var(--color-error);
}
.status-error-status-badge {
  background: var(--color-error);
  color: var(--color-text-inverse);
}
.status-info {
  color: var(--color-info);
}
.status-info-status-indicator {
  background: color-mix(in srgb, var(--color-info) 10%, var(--color-surface));
}
.status-info-status-message {
  background: color-mix(in srgb, var(--color-info) 10%, var(--color-surface));
  border-color: var(--color-info);
}
.status-info-status-badge {
  background: var(--color-info);
  color: var(--color-text-inverse);
}
.status-pending {
  color: var(--color-text-muted);
}
.status-pending-status-indicator {
  background: var(--color-surface);
}
.status-pending-status-message {
  background: var(--color-surface);
  border-color: var(--color-border);
}
.status-pending-status-badge {
  background: var(--color-text-muted);
  color: var(--color-text-inverse);
}
.status-active {
  color: var(--color-success);
}
.status-active-status-indicator {
  background: color-mix(in srgb, var(--color-success) 10%, var(--color-surface));
}
.status-active-status-message {
  background: color-mix(in srgb, var(--color-success) 10%, var(--color-surface));
  border-color: var(--color-success);
}
.status-active-status-badge {
  background: var(--color-success);
  color: var(--color-text-inverse);
}
.status-inactive {
  color: var(--color-text-muted);
}
.status-inactive-status-indicator {
  background: var(--color-surface);
}
.status-inactive-status-message {
  background: var(--color-surface);
  border-color: var(--color-border);
}
.status-inactive-status-badge {
  background: var(--color-text-muted);
  color: var(--color-text-inverse);
}
.status-loading {
  position: relative;
}
.status-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--color-surface-elevated) 50%, transparent 100%);
  animation: shimmer 1.5s infinite;
  border-radius: inherit;
}
.status-pulse {
  animation: pulse 2s infinite;
}
.status-icon {
  font-size: 1rem;
  flex-shrink: 0;
}
.status-text {
  flex: 1;
}
.status-dot {
  width: var(--space-2);
  height: var(--space-2);
  background: currentColor;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot-pulse {
  animation: pulse var(--duration-slow) infinite;
}
.status-new {
  position: relative;
}
.status-new::after {
  content: "NEW";
  position: absolute;
  top: calc(-1 * var(--space-2));
  right: calc(-1 * var(--space-2));
  background: var(--color-success);
  color: var(--color-text-inverse);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  padding: var(--space-px) var(--space-2);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.status-updated {
  position: relative;
}
.status-updated::after {
  content: "";
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  width: var(--space-2);
  height: var(--space-2);
  background: var(--color-warning);
  border-radius: var(--radius-full);
  animation: pulse 2s infinite;
}

.status-bar {
  background: var(--color-surface-elevated);
  border-top: var(--border-1) solid var(--color-border);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.5rem;
  z-index: var(--z-sticky);
}
@media (max-width: 767px) {
  .status-bar {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }
}
.status-bar-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
@media (max-width: 639px) {
  .status-bar-item-text {
    display: none;
  }
}
.status-bar-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.is-success {
  color: var(--color-success);
}
.is-success-bg {
  background: color-mix(in srgb, var(--color-success) 10%, var(--color-surface));
  border-color: var(--color-success);
}
.is-success-border {
  border: var(--border-1) solid var(--color-success);
}

.is-warning {
  color: var(--color-warning);
}
.is-warning-bg {
  background: color-mix(in srgb, var(--color-warning) 10%, var(--color-surface));
  border-color: var(--color-warning);
}
.is-warning-border {
  border: var(--border-1) solid var(--color-warning);
}

.is-error {
  color: var(--color-error);
}
.is-error-bg {
  background: color-mix(in srgb, var(--color-error) 10%, var(--color-surface));
  border-color: var(--color-error);
}
.is-error-border {
  border: var(--border-1) solid var(--color-error);
}

.is-info {
  color: var(--color-info);
}
.is-info-bg {
  background: color-mix(in srgb, var(--color-info) 10%, var(--color-surface));
  border-color: var(--color-info);
}
.is-info-border {
  border: var(--border-1) solid var(--color-info);
}

.is-pending {
  color: var(--color-text-muted);
}
.is-pending-bg {
  background: var(--color-surface);
  border-color: var(--color-border);
}
.is-pending-border {
  border: var(--border-1) solid var(--color-border);
}

.is-active {
  color: var(--color-success);
}
.is-active-bg {
  background: color-mix(in srgb, var(--color-success) 10%, var(--color-surface));
  border-color: var(--color-success);
}
.is-active-border {
  border: var(--border-1) solid var(--color-success);
}

.is-inactive {
  color: var(--color-text-muted);
}
.is-inactive-bg {
  background: var(--color-surface);
  border-color: var(--color-border);
}
.is-inactive-border {
  border: var(--border-1) solid var(--color-border);
}

.comment {
  padding: var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border-left: var(--space-1) solid var(--color-border);
  margin-bottom: var(--space-3);
  transition: all var(--duration-fast) var(--ease-out);
}
.comment:last-child {
  margin-bottom: 0;
}
.comment:hover {
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-sm);
}
.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.comment-author {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.comment-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--color-text-muted);
  text-transform: uppercase;
}
.comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-full);
}
.comment-meta {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-px) * 2);
}
.comment-name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}
.comment-role {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.comment-timestamp {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  white-space: nowrap;
}
.comment-body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin: 0;
}
.comment-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.comment-actions button {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);
}
.comment-actions button:hover {
  color: var(--color-primary);
}
.comment-primary {
  border-left-color: var(--color-primary);
}
.comment-primary .comment-role {
  color: var(--color-primary);
}
.comment-secondary {
  border-left-color: var(--color-info);
}
.comment-secondary .comment-role {
  color: var(--color-info);
}
.comment-warning {
  border-left-color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 10%, var(--color-surface));
}
.comment-warning .comment-role {
  color: var(--color-warning);
}
.comment-error {
  border-left-color: var(--color-error);
  background: color-mix(in srgb, var(--color-error) 10%, var(--color-surface));
}
.comment-error .comment-role {
  color: var(--color-error);
}
.comment-reply {
  margin-left: var(--space-6);
}
@media (max-width: 639px) {
  .comment-reply {
    margin-left: var(--space-3);
  }
}
.comment-compact {
  padding: var(--space-2);
}
.comment-compact .comment-avatar {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.625rem;
}
.comment-compact .comment-name {
  font-size: var(--text-xs);
}
.comment-compact .comment-body {
  font-size: var(--text-xs);
}

.comment-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.comment-list-threaded .comment:not(:last-child) {
  position: relative;
}
.comment-list-threaded .comment:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1rem;
  top: 3rem;
  bottom: -1rem;
  width: 2px;
  background: var(--color-border);
}

.comment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
}

:root {
  --chart-series-1: var(--color-primary);
  --chart-series-2: var(--color-success);
  --chart-series-3: var(--color-info);
  --chart-series-4: var(--color-warning);
  --chart-series-5: var(--color-error);
  --chart-series-6: var(--color-secondary);
  --chart-series-7: var(--color-teal, var(--color-info));
  --chart-series-8: var(--color-purple, var(--color-accent, var(--color-secondary)));
}

.chart-grid-line {
  position: absolute;
  background: var(--color-border);
}
.chart-grid-line-horizontal {
  width: 100%;
  height: 1px;
  top: var(--grid-position, 0);
}
.chart-grid-line-vertical {
  height: 100%;
  width: 1px;
  left: var(--grid-position, 0);
}

.chart-bar-dynamic {
  height: 100%;
  background: var(--color-primary);
  transition: all var(--duration-normal) var(--ease-out);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.chart, .line-chart, .column-chart, .pie-chart {
  position: relative;
  background: var(--color-surface-elevated);
  border-radius: var(--radius-lg);
  overflow: visible;
  animation: fadeInUp var(--duration-normal) var(--ease-out);
}

.line-chart-canvas, .chart-canvas, .column-chart-container, .pie-chart-container {
  width: 100%;
  height: 100%;
  position: relative;
  flex: 1;
  min-height: 0;
}
.line-chart-canvas canvas, .chart-canvas canvas, .column-chart-container canvas, .pie-chart-container canvas, .line-chart-canvas svg, .chart-canvas svg, .column-chart-container svg, .pie-chart-container svg {
  width: 100%;
  height: 100%;
  display: block;
}

.chart-legend-item, .line-chart-point:hover, .column-chart-bar, .pie-chart-svg .pie-slice {
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.chart-legend-item:hover, .line-chart-point:hover, .column-chart-bar:hover, .pie-chart-svg .pie-slice:hover {
  transform: translateY(-0.5px);
}
.chart-legend-item:active, .line-chart-point:active:hover, .column-chart-bar:active, .pie-chart-svg .pie-slice:active {
  transform: translateY(-1px);
}

.chart-legend-item, .line-chart-axis, .line-chart-area-fill, .line-chart-container, .column-chart-bar-label, .pie-chart-center-text .label, .pie-chart-center-text, .pie-chart-svg .pie-slice {
  opacity: 0;
  animation: fadeIn var(--duration-normal) var(--ease-out) forwards;
}

.chart-legend-indicator, .line-chart-point, .column-chart-bar-fill {
  opacity: 0;
  transform: scale(0);
  animation: scaleIn var(--duration-fast) var(--ease-out) forwards;
}

.chart-container {
  background: var(--color-surface-elevated);
  border-radius: var(--radius-lg);
  border: var(--border-1) solid var(--color-border);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  overflow: visible;
  position: relative;
}
.chart-container-header {
  display: flex;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.chart-container-header-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0;
}
.chart-container-header-actions {
  display: flex;
  gap: var(--space-2);
}
.chart-container-content {
  min-height: var(--chart-min-height);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 0;
  overflow: visible;
}
.chart-container-footer {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--border-1) solid var(--color-border);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.chart-layout {
  display: grid;
  gap: var(--space-4);
  align-items: stretch;
}
.chart-layout-inline {
  grid-template-columns: minmax(0, 1fr);
}
.chart-layout-legend-left {
  grid-template-columns: minmax(0, var(--chart-legend-max-width, 260px)) minmax(0, 1fr);
}
.chart-layout-legend-right {
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--chart-legend-max-width, 260px));
}

.chart-viewport {
  position: relative;
  width: 100%;
  min-height: 240px;
  padding: var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
}
.chart-viewport .chart-canvas, .chart-viewport .column-chart-container, .chart-viewport .pie-chart-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chart-viewport .chart-loading,
.chart-viewport .chart-error,
.chart-viewport .chart-empty {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-4);
  width: 100%;
}

.chart-legend-align-start {
  justify-content: flex-start;
  align-content: flex-start;
  justify-items: start;
}

.chart-legend-align-center {
  justify-content: center;
  align-content: center;
  justify-items: center;
}

.chart-legend-align-end {
  justify-content: flex-end;
  align-content: flex-end;
  justify-items: end;
}

.chart-legend-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-self: stretch;
  width: min(var(--chart-legend-max-width, 280px), 100%);
  overflow-y: auto;
  padding: var(--space-1) var(--space-2);
}
.chart-legend-side .chart-legend-item {
  width: 100%;
}
@media (max-width: 767px) {
  .chart-legend-side {
    width: 100%;
    max-height: 180px;
  }
}

.progress-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}
.progress-bar:last-child {
  margin-bottom: 0;
}
.progress-bar-label {
  min-width: var(--space-25);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: var(--font-medium);
}
@media (max-width: 639px) {
  .progress-bar-label {
    min-width: var(--space-20);
  }
}
.progress-bar-track {
  flex: 1;
  height: var(--space-2);
  background: var(--color-surface);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}
.progress-bar-fill-primary {
  background: var(--color-primary);
}
.progress-bar-fill-success {
  background: var(--color-success);
}
.progress-bar-fill-warning {
  background: var(--color-warning);
}
.progress-bar-fill-error {
  background: var(--color-error);
}
.progress-bar-fill-info {
  background: var(--color-info);
}
.progress-bar-value {
  min-width: var(--space-15);
  text-align: right;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}
@media (max-width: 639px) {
  .progress-bar-value {
    min-width: var(--space-11);
  }
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.metrics-grid-small {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
}
.metrics-grid-large {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-6);
}
@media (max-width: 639px) {
  .metrics-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

.chart, .line-chart, .column-chart, .pie-chart {
  height: auto;
}
.chart-responsive {
  width: 100%;
  min-height: 200px;
}
@media (max-width: 767px) {
  .chart-responsive {
    min-height: var(--chart-mobile-min-height);
  }
}
.chart-responsive .chart-container {
  min-height: 200px;
}
.chart-responsive .chart-container-content {
  min-height: var(--chart-content-min-height);
}
.chart-responsive-fitted .chart-container {
  min-height: 120px;
}
.chart-responsive-fitted .chart-container-content {
  min-height: 120px;
}
.chart-loading {
  height: 200px;
  background: linear-gradient(90deg, var(--color-surface-elevated) 25%, color-mix(in srgb, var(--color-surface-elevated) 80%, white) 50%, var(--color-surface-elevated) 75%);
  background-size: 200% 100%;
  animation: shimmer var(--duration-slow) ease-in-out infinite;
  border-radius: var(--radius-sm);
  color: transparent;
  user-select: none;
}
.chart-loading::before, .chart-loading::after {
  display: none;
}
.chart-loading * {
  visibility: hidden;
}
.chart-error {
  background: var(--glass-error-bg);
  border: 1px solid var(--color-error);
  color: var(--color-error);
  text-align: center;
  padding: var(--space-8);
}
.chart-error-icon {
  font-size: var(--text-4xl);
  margin-bottom: var(--space-4);
}
.chart-empty {
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-8);
}
.chart-empty-icon {
  font-size: var(--text-4xl);
  margin-bottom: var(--space-4);
}
.chart-small {
  min-height: 200px;
}
@media (max-width: 767px) {
  .chart-small {
    min-height: 150px;
  }
}
.chart-medium {
  min-height: 300px;
}
@media (max-width: 767px) {
  .chart-medium {
    min-height: 200px;
  }
}
.chart-large {
  min-height: 400px;
}
@media (max-width: 767px) {
  .chart-large {
    min-height: 250px;
  }
}
.chart-full {
  min-height: 500px;
}
@media (max-width: 767px) {
  .chart-full {
    min-height: 300px;
  }
}
.chart-glass {
  box-shadow: var(--shadow-md);
}
.chart-glass:hover {
  box-shadow: var(--shadow-lg);
  transition: var(--transition-fast);
}
.chart-minimal {
  background: transparent;
  border: none;
  box-shadow: none;
}
.chart-elevated {
  box-shadow: var(--shadow-lg);
}
.chart-elevated {
  transition: all var(--duration-fast) var(--ease-out);
}
.chart-elevated:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.pie-chart-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pie-chart-svg-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: var(--space-4);
  overflow: visible;
}
.pie-chart-svg {
  max-width: 100%;
  max-height: 100%;
  animation: scaleIn var(--duration-normal) var(--ease-out);
}
.pie-chart-svg .pie-slice:nth-child(1) {
  animation-delay: calc(var(--duration-fast) * 0);
}
.pie-chart-svg .pie-slice:nth-child(2) {
  animation-delay: calc(var(--duration-fast) * 1);
}
.pie-chart-svg .pie-slice:nth-child(3) {
  animation-delay: calc(var(--duration-fast) * 2);
}
.pie-chart-svg .pie-slice:nth-child(4) {
  animation-delay: calc(var(--duration-fast) * 3);
}
.pie-chart-svg .pie-slice:nth-child(5) {
  animation-delay: calc(var(--duration-fast) * 4);
}
.pie-chart-svg .pie-slice:nth-child(6) {
  animation-delay: calc(var(--duration-fast) * 5);
}
.pie-chart-svg .pie-slice:nth-child(7) {
  animation-delay: calc(var(--duration-fast) * 6);
}
.pie-chart-svg .pie-slice:nth-child(8) {
  animation-delay: calc(var(--duration-fast) * 7);
}
.pie-chart-svg .pie-slice:nth-child(9) {
  animation-delay: calc(var(--duration-fast) * 8);
}
.pie-chart-svg .pie-slice:nth-child(10) {
  animation-delay: calc(var(--duration-fast) * 9);
}
.pie-chart-svg .pie-slice:nth-child(11) {
  animation-delay: calc(var(--duration-fast) * 10);
}
.pie-chart-svg .pie-slice:nth-child(12) {
  animation-delay: calc(var(--duration-fast) * 11);
}
.pie-chart-svg .pie-slice:hover {
  opacity: 0.8;
  transform: scale(1.02);
  filter: brightness(1.05);
}
.pie-chart-svg .pie-slice-selected {
  opacity: 0.9;
  transform: scale(1.03);
  filter: brightness(1.08);
}
.pie-chart-center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  animation-delay: calc(var(--duration-normal) * 2);
}
.pie-chart-center-text .value {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  animation: slideInDown var(--duration-slow) ease-out;
  animation-delay: calc(var(--duration-normal) * 2.5);
}
@media (max-width: 639px) {
  .pie-chart-center-text .value {
    font-size: var(--text-xl);
  }
}
.pie-chart-center-text .label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
  animation-delay: calc(var(--duration-normal) * 3);
}
.pie-chart-doughnut .pie-slice {
  stroke: var(--color-surface-elevated);
  stroke-width: 2;
}

.column-chart-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: var(--chart-container-min-height);
  display: grid;
  grid-template-areas: "y-labels chart-area" "empty x-labels";
  grid-template-columns: minmax(40px, 80px) 1fr;
  grid-template-rows: minmax(100px, 1fr) auto;
  gap: var(--space-2);
  padding: var(--space-4);
  animation: slideInBottomScale var(--duration-slow) ease-out;
}
.column-chart-container-xs {
  gap: var(--space-1);
}
.column-chart-container-xs .chart-label {
  font-size: var(--text-2xs);
  transform: rotate(45deg);
  transform-origin: left bottom;
}
.column-chart-container-xs .chart-label {
  font-size: var(--text-2xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.column-chart-container-xs .chart-value {
  font-size: var(--text-xs);
}
.column-chart-container-sm {
  gap: var(--space-1);
}
.column-chart-container-sm .chart-label {
  font-size: var(--text-xs);
}
.column-chart-container-sm .chart-label {
  font-size: var(--text-2xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.column-chart-container-sm .chart-value {
  font-size: var(--text-xs);
}
.column-chart-container-md {
  gap: var(--space-2);
}
.column-chart-container-lg {
  gap: var(--space-3);
}
.column-chart-container-lg .chart-label {
  font-size: var(--text-sm);
}
.column-chart-container-dense {
  gap: var(--space-1);
}
.column-chart-container-dense .chart-label {
  display: none;
}
.column-chart-container-dense .chart-value {
  font-size: var(--text-2xs);
}
.column-chart-container-compact {
  gap: var(--space-1);
}
.column-chart-container-compact .chart-label {
  font-size: var(--text-2xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.column-chart-container-compact .chart-value {
  font-size: var(--text-xs);
}
.column-chart-container-spacious {
  gap: var(--space-4);
}
.column-chart-container-spacious .chart-label {
  font-size: var(--text-sm);
}
.column-chart-y-axis-labels {
  grid-area: y-labels;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  padding-right: var(--space-2);
  width: max-content;
  min-width: 40px;
  max-width: 80px;
}
.column-chart-y-axis-labels .label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: right;
  line-height: 1;
  white-space: nowrap;
}
.column-chart-bars {
  grid-area: chart-area;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--chart-bars-min-height);
  width: 100%;
  height: 100%;
  padding: var(--space-2) 0;
  position: relative;
}
.column-chart-bars::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-border);
}
.column-chart-x-axis-labels {
  grid-area: x-labels;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: var(--space-2);
}
.column-chart-x-axis-labels .label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1;
  white-space: nowrap;
  flex: 1;
}
.column-chart-bar {
  flex: 1 1 auto;
  min-width: 20px;
  max-width: 150px;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  height: 100%;
}
.column-chart-bar:hover .column-chart-bar-fill {
  transform: scaleY(1.02);
  filter: brightness(1.05);
}
.column-chart-bar:hover .column-chart-bar-value {
  opacity: 1;
  transform: translateY(-6px);
}
.column-chart-bar-selected .column-chart-bar-fill {
  transform: scaleY(1.03);
  filter: brightness(1.08);
}
.column-chart-bar-fill {
  width: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  min-height: 4px;
  transition: all var(--duration-fast) var(--ease-out);
}
.column-chart-bar-fill {
  animation-delay: 0s;
  transform-origin: bottom;
}
.column-chart-bar-fill:nth-child(1) {
  animation-delay: calc(0s + var(--duration-fast) * 1);
}
.column-chart-bar-fill:nth-child(2) {
  animation-delay: calc(0s + var(--duration-fast) * 2);
}
.column-chart-bar-fill:nth-child(3) {
  animation-delay: calc(0s + var(--duration-fast) * 3);
}
.column-chart-bar-fill:nth-child(4) {
  animation-delay: calc(0s + var(--duration-fast) * 4);
}
.column-chart-bar-fill:nth-child(5) {
  animation-delay: calc(0s + var(--duration-fast) * 5);
}
.column-chart-bar-fill:nth-child(6) {
  animation-delay: calc(0s + var(--duration-fast) * 6);
}
.column-chart-bar-fill:nth-child(7) {
  animation-delay: calc(0s + var(--duration-fast) * 7);
}
.column-chart-bar-fill:nth-child(8) {
  animation-delay: calc(0s + var(--duration-fast) * 8);
}
.column-chart-bar-fill:nth-child(9) {
  animation-delay: calc(0s + var(--duration-fast) * 9);
}
.column-chart-bar-fill:nth-child(10) {
  animation-delay: calc(0s + var(--duration-fast) * 10);
}
.column-chart-bar-fill:nth-child(11) {
  animation-delay: calc(0s + var(--duration-fast) * 11);
}
.column-chart-bar-fill:nth-child(12) {
  animation-delay: calc(0s + var(--duration-fast) * 12);
}
.column-chart-bar-fill:nth-child(13) {
  animation-delay: calc(0s + var(--duration-fast) * 13);
}
.column-chart-bar-fill:nth-child(14) {
  animation-delay: calc(0s + var(--duration-fast) * 14);
}
.column-chart-bar-fill:nth-child(15) {
  animation-delay: calc(0s + var(--duration-fast) * 15);
}
.column-chart-bar-fill:nth-child(16) {
  animation-delay: calc(0s + var(--duration-fast) * 16);
}
.column-chart-bar-fill:nth-child(17) {
  animation-delay: calc(0s + var(--duration-fast) * 17);
}
.column-chart-bar-fill:nth-child(18) {
  animation-delay: calc(0s + var(--duration-fast) * 18);
}
.column-chart-bar-fill:nth-child(19) {
  animation-delay: calc(0s + var(--duration-fast) * 19);
}
.column-chart-bar-fill:nth-child(20) {
  animation-delay: calc(0s + var(--duration-fast) * 20);
}
.column-chart-bar-fill[style*=height] {
  min-height: 0;
}
.column-chart-bar-fill-primary {
  background: var(--color-primary);
}
.column-chart-bar-fill-success {
  background: var(--color-success);
}
.column-chart-bar-fill-warning {
  background: var(--color-warning);
}
.column-chart-bar-fill-error {
  background: var(--color-error);
}
.column-chart-bar-fill-info {
  background: var(--color-info);
}
.column-chart-bar-value {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-text);
  color: var(--color-text-inverse);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  white-space: nowrap;
  opacity: 0;
  transition: all var(--duration-normal) var(--ease-out);
  pointer-events: none;
  z-index: var(--z-tooltip);
}
.column-chart-bar-value::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--color-text);
}
.column-chart-bar-label {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-medium);
  text-align: center;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  animation-delay: 0.5s;
}
@media (max-width: 639px) {
  .column-chart-bar-label {
    font-size: var(--text-2xs);
  }
}
.column-chart-grid-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.column-chart-grid-lines .grid-line {
  position: absolute;
  background: var(--color-border);
  opacity: 0.2;
}
.column-chart-grid-lines .grid-line:not([style*=left]) {
  left: 0;
  right: 0;
  height: 1px;
}
.column-chart-grid-lines .grid-line[style*=left] {
  top: 0;
  bottom: 0;
  width: 1px;
}
.column-chart-horizontal .column-chart-bars {
  flex-direction: column;
  align-items: flex-start;
}
.column-chart-horizontal .column-chart-bar {
  width: 100%;
  flex-direction: row;
  margin-bottom: var(--space-2);
}
.column-chart-horizontal .column-chart-bar-fill {
  height: var(--space-8);
  min-width: 4px;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  transform-origin: left;
}
.column-chart-horizontal .column-chart-bar-label {
  margin-top: 0;
  margin-right: var(--space-3);
  min-width: var(--space-20);
  text-align: right;
}

.line-chart-container {
  padding: var(--space-4);
  position: relative;
}
.line-chart-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: scaleIn var(--duration-normal) var(--ease-out);
}
.line-chart-grid-line {
  transition: opacity var(--duration-fast) var(--ease-out);
}
.line-chart-grid-line:hover {
  opacity: 0.6;
}
.line-chart-grid-label {
  font-family: var(--font-family-mono);
  font-size: var(--text-2xs);
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}
.line-chart-line {
  transition: all var(--duration-fast) var(--ease-out);
  opacity: 0;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: lineDrawIn var(--duration-slow) var(--ease-out) forwards;
}
.line-chart-line-0 {
  animation-delay: calc(var(--duration-fast) * 1);
}
.line-chart-line-1 {
  animation-delay: calc(var(--duration-fast) * 2);
}
.line-chart-line-2 {
  animation-delay: calc(var(--duration-fast) * 3);
}
.line-chart-line-3 {
  animation-delay: calc(var(--duration-fast) * 4);
}
.line-chart-line-4 {
  animation-delay: calc(var(--duration-fast) * 5);
}
.line-chart-line-5 {
  animation-delay: calc(var(--duration-fast) * 6);
}
.line-chart-line-6 {
  animation-delay: calc(var(--duration-fast) * 7);
}
.line-chart-line-7 {
  animation-delay: calc(var(--duration-fast) * 8);
}
.line-chart-line-8 {
  animation-delay: calc(var(--duration-fast) * 9);
}
.line-chart-line-9 {
  animation-delay: calc(var(--duration-fast) * 10);
}
.line-chart-line:hover {
  stroke-width: 4;
  filter: drop-shadow(var(--shadow-sm));
}
.line-chart-line-smooth {
  stroke-linecap: round;
  stroke-linejoin: round;
}
.line-chart-area-fill {
  animation-delay: var(--duration-slow);
}
.line-chart-area-fill:hover {
  opacity: 0.4;
}
.line-chart-point-0-0 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 0 + 50ms * 0);
}
.line-chart-point-0-1 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 0 + 50ms * 1);
}
.line-chart-point-0-2 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 0 + 50ms * 2);
}
.line-chart-point-0-3 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 0 + 50ms * 3);
}
.line-chart-point-0-4 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 0 + 50ms * 4);
}
.line-chart-point-0-5 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 0 + 50ms * 5);
}
.line-chart-point-0-6 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 0 + 50ms * 6);
}
.line-chart-point-0-7 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 0 + 50ms * 7);
}
.line-chart-point-0-8 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 0 + 50ms * 8);
}
.line-chart-point-0-9 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 0 + 50ms * 9);
}
.line-chart-point-0-10 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 0 + 50ms * 10);
}
.line-chart-point-0-11 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 0 + 50ms * 11);
}
.line-chart-point-0-12 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 0 + 50ms * 12);
}
.line-chart-point-0-13 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 0 + 50ms * 13);
}
.line-chart-point-0-14 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 0 + 50ms * 14);
}
.line-chart-point-0-15 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 0 + 50ms * 15);
}
.line-chart-point-0-16 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 0 + 50ms * 16);
}
.line-chart-point-0-17 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 0 + 50ms * 17);
}
.line-chart-point-0-18 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 0 + 50ms * 18);
}
.line-chart-point-0-19 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 0 + 50ms * 19);
}
.line-chart-point-1-0 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 1 + 50ms * 0);
}
.line-chart-point-1-1 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 1 + 50ms * 1);
}
.line-chart-point-1-2 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 1 + 50ms * 2);
}
.line-chart-point-1-3 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 1 + 50ms * 3);
}
.line-chart-point-1-4 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 1 + 50ms * 4);
}
.line-chart-point-1-5 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 1 + 50ms * 5);
}
.line-chart-point-1-6 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 1 + 50ms * 6);
}
.line-chart-point-1-7 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 1 + 50ms * 7);
}
.line-chart-point-1-8 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 1 + 50ms * 8);
}
.line-chart-point-1-9 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 1 + 50ms * 9);
}
.line-chart-point-1-10 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 1 + 50ms * 10);
}
.line-chart-point-1-11 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 1 + 50ms * 11);
}
.line-chart-point-1-12 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 1 + 50ms * 12);
}
.line-chart-point-1-13 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 1 + 50ms * 13);
}
.line-chart-point-1-14 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 1 + 50ms * 14);
}
.line-chart-point-1-15 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 1 + 50ms * 15);
}
.line-chart-point-1-16 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 1 + 50ms * 16);
}
.line-chart-point-1-17 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 1 + 50ms * 17);
}
.line-chart-point-1-18 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 1 + 50ms * 18);
}
.line-chart-point-1-19 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 1 + 50ms * 19);
}
.line-chart-point-2-0 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 2 + 50ms * 0);
}
.line-chart-point-2-1 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 2 + 50ms * 1);
}
.line-chart-point-2-2 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 2 + 50ms * 2);
}
.line-chart-point-2-3 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 2 + 50ms * 3);
}
.line-chart-point-2-4 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 2 + 50ms * 4);
}
.line-chart-point-2-5 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 2 + 50ms * 5);
}
.line-chart-point-2-6 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 2 + 50ms * 6);
}
.line-chart-point-2-7 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 2 + 50ms * 7);
}
.line-chart-point-2-8 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 2 + 50ms * 8);
}
.line-chart-point-2-9 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 2 + 50ms * 9);
}
.line-chart-point-2-10 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 2 + 50ms * 10);
}
.line-chart-point-2-11 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 2 + 50ms * 11);
}
.line-chart-point-2-12 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 2 + 50ms * 12);
}
.line-chart-point-2-13 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 2 + 50ms * 13);
}
.line-chart-point-2-14 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 2 + 50ms * 14);
}
.line-chart-point-2-15 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 2 + 50ms * 15);
}
.line-chart-point-2-16 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 2 + 50ms * 16);
}
.line-chart-point-2-17 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 2 + 50ms * 17);
}
.line-chart-point-2-18 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 2 + 50ms * 18);
}
.line-chart-point-2-19 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 2 + 50ms * 19);
}
.line-chart-point-3-0 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 3 + 50ms * 0);
}
.line-chart-point-3-1 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 3 + 50ms * 1);
}
.line-chart-point-3-2 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 3 + 50ms * 2);
}
.line-chart-point-3-3 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 3 + 50ms * 3);
}
.line-chart-point-3-4 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 3 + 50ms * 4);
}
.line-chart-point-3-5 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 3 + 50ms * 5);
}
.line-chart-point-3-6 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 3 + 50ms * 6);
}
.line-chart-point-3-7 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 3 + 50ms * 7);
}
.line-chart-point-3-8 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 3 + 50ms * 8);
}
.line-chart-point-3-9 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 3 + 50ms * 9);
}
.line-chart-point-3-10 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 3 + 50ms * 10);
}
.line-chart-point-3-11 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 3 + 50ms * 11);
}
.line-chart-point-3-12 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 3 + 50ms * 12);
}
.line-chart-point-3-13 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 3 + 50ms * 13);
}
.line-chart-point-3-14 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 3 + 50ms * 14);
}
.line-chart-point-3-15 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 3 + 50ms * 15);
}
.line-chart-point-3-16 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 3 + 50ms * 16);
}
.line-chart-point-3-17 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 3 + 50ms * 17);
}
.line-chart-point-3-18 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 3 + 50ms * 18);
}
.line-chart-point-3-19 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 3 + 50ms * 19);
}
.line-chart-point-4-0 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 4 + 50ms * 0);
}
.line-chart-point-4-1 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 4 + 50ms * 1);
}
.line-chart-point-4-2 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 4 + 50ms * 2);
}
.line-chart-point-4-3 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 4 + 50ms * 3);
}
.line-chart-point-4-4 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 4 + 50ms * 4);
}
.line-chart-point-4-5 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 4 + 50ms * 5);
}
.line-chart-point-4-6 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 4 + 50ms * 6);
}
.line-chart-point-4-7 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 4 + 50ms * 7);
}
.line-chart-point-4-8 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 4 + 50ms * 8);
}
.line-chart-point-4-9 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 4 + 50ms * 9);
}
.line-chart-point-4-10 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 4 + 50ms * 10);
}
.line-chart-point-4-11 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 4 + 50ms * 11);
}
.line-chart-point-4-12 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 4 + 50ms * 12);
}
.line-chart-point-4-13 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 4 + 50ms * 13);
}
.line-chart-point-4-14 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 4 + 50ms * 14);
}
.line-chart-point-4-15 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 4 + 50ms * 15);
}
.line-chart-point-4-16 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 4 + 50ms * 16);
}
.line-chart-point-4-17 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 4 + 50ms * 17);
}
.line-chart-point-4-18 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 4 + 50ms * 18);
}
.line-chart-point-4-19 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 4 + 50ms * 19);
}
.line-chart-point-5-0 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 5 + 50ms * 0);
}
.line-chart-point-5-1 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 5 + 50ms * 1);
}
.line-chart-point-5-2 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 5 + 50ms * 2);
}
.line-chart-point-5-3 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 5 + 50ms * 3);
}
.line-chart-point-5-4 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 5 + 50ms * 4);
}
.line-chart-point-5-5 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 5 + 50ms * 5);
}
.line-chart-point-5-6 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 5 + 50ms * 6);
}
.line-chart-point-5-7 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 5 + 50ms * 7);
}
.line-chart-point-5-8 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 5 + 50ms * 8);
}
.line-chart-point-5-9 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 5 + 50ms * 9);
}
.line-chart-point-5-10 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 5 + 50ms * 10);
}
.line-chart-point-5-11 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 5 + 50ms * 11);
}
.line-chart-point-5-12 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 5 + 50ms * 12);
}
.line-chart-point-5-13 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 5 + 50ms * 13);
}
.line-chart-point-5-14 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 5 + 50ms * 14);
}
.line-chart-point-5-15 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 5 + 50ms * 15);
}
.line-chart-point-5-16 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 5 + 50ms * 16);
}
.line-chart-point-5-17 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 5 + 50ms * 17);
}
.line-chart-point-5-18 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 5 + 50ms * 18);
}
.line-chart-point-5-19 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 5 + 50ms * 19);
}
.line-chart-point-6-0 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 6 + 50ms * 0);
}
.line-chart-point-6-1 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 6 + 50ms * 1);
}
.line-chart-point-6-2 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 6 + 50ms * 2);
}
.line-chart-point-6-3 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 6 + 50ms * 3);
}
.line-chart-point-6-4 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 6 + 50ms * 4);
}
.line-chart-point-6-5 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 6 + 50ms * 5);
}
.line-chart-point-6-6 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 6 + 50ms * 6);
}
.line-chart-point-6-7 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 6 + 50ms * 7);
}
.line-chart-point-6-8 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 6 + 50ms * 8);
}
.line-chart-point-6-9 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 6 + 50ms * 9);
}
.line-chart-point-6-10 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 6 + 50ms * 10);
}
.line-chart-point-6-11 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 6 + 50ms * 11);
}
.line-chart-point-6-12 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 6 + 50ms * 12);
}
.line-chart-point-6-13 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 6 + 50ms * 13);
}
.line-chart-point-6-14 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 6 + 50ms * 14);
}
.line-chart-point-6-15 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 6 + 50ms * 15);
}
.line-chart-point-6-16 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 6 + 50ms * 16);
}
.line-chart-point-6-17 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 6 + 50ms * 17);
}
.line-chart-point-6-18 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 6 + 50ms * 18);
}
.line-chart-point-6-19 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 6 + 50ms * 19);
}
.line-chart-point-7-0 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 7 + 50ms * 0);
}
.line-chart-point-7-1 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 7 + 50ms * 1);
}
.line-chart-point-7-2 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 7 + 50ms * 2);
}
.line-chart-point-7-3 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 7 + 50ms * 3);
}
.line-chart-point-7-4 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 7 + 50ms * 4);
}
.line-chart-point-7-5 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 7 + 50ms * 5);
}
.line-chart-point-7-6 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 7 + 50ms * 6);
}
.line-chart-point-7-7 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 7 + 50ms * 7);
}
.line-chart-point-7-8 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 7 + 50ms * 8);
}
.line-chart-point-7-9 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 7 + 50ms * 9);
}
.line-chart-point-7-10 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 7 + 50ms * 10);
}
.line-chart-point-7-11 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 7 + 50ms * 11);
}
.line-chart-point-7-12 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 7 + 50ms * 12);
}
.line-chart-point-7-13 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 7 + 50ms * 13);
}
.line-chart-point-7-14 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 7 + 50ms * 14);
}
.line-chart-point-7-15 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 7 + 50ms * 15);
}
.line-chart-point-7-16 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 7 + 50ms * 16);
}
.line-chart-point-7-17 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 7 + 50ms * 17);
}
.line-chart-point-7-18 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 7 + 50ms * 18);
}
.line-chart-point-7-19 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 7 + 50ms * 19);
}
.line-chart-point-8-0 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 8 + 50ms * 0);
}
.line-chart-point-8-1 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 8 + 50ms * 1);
}
.line-chart-point-8-2 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 8 + 50ms * 2);
}
.line-chart-point-8-3 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 8 + 50ms * 3);
}
.line-chart-point-8-4 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 8 + 50ms * 4);
}
.line-chart-point-8-5 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 8 + 50ms * 5);
}
.line-chart-point-8-6 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 8 + 50ms * 6);
}
.line-chart-point-8-7 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 8 + 50ms * 7);
}
.line-chart-point-8-8 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 8 + 50ms * 8);
}
.line-chart-point-8-9 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 8 + 50ms * 9);
}
.line-chart-point-8-10 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 8 + 50ms * 10);
}
.line-chart-point-8-11 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 8 + 50ms * 11);
}
.line-chart-point-8-12 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 8 + 50ms * 12);
}
.line-chart-point-8-13 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 8 + 50ms * 13);
}
.line-chart-point-8-14 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 8 + 50ms * 14);
}
.line-chart-point-8-15 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 8 + 50ms * 15);
}
.line-chart-point-8-16 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 8 + 50ms * 16);
}
.line-chart-point-8-17 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 8 + 50ms * 17);
}
.line-chart-point-8-18 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 8 + 50ms * 18);
}
.line-chart-point-8-19 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 8 + 50ms * 19);
}
.line-chart-point-9-0 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 9 + 50ms * 0);
}
.line-chart-point-9-1 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 9 + 50ms * 1);
}
.line-chart-point-9-2 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 9 + 50ms * 2);
}
.line-chart-point-9-3 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 9 + 50ms * 3);
}
.line-chart-point-9-4 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 9 + 50ms * 4);
}
.line-chart-point-9-5 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 9 + 50ms * 5);
}
.line-chart-point-9-6 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 9 + 50ms * 6);
}
.line-chart-point-9-7 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 9 + 50ms * 7);
}
.line-chart-point-9-8 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 9 + 50ms * 8);
}
.line-chart-point-9-9 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 9 + 50ms * 9);
}
.line-chart-point-9-10 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 9 + 50ms * 10);
}
.line-chart-point-9-11 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 9 + 50ms * 11);
}
.line-chart-point-9-12 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 9 + 50ms * 12);
}
.line-chart-point-9-13 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 9 + 50ms * 13);
}
.line-chart-point-9-14 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 9 + 50ms * 14);
}
.line-chart-point-9-15 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 9 + 50ms * 15);
}
.line-chart-point-9-16 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 9 + 50ms * 16);
}
.line-chart-point-9-17 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 9 + 50ms * 17);
}
.line-chart-point-9-18 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 9 + 50ms * 18);
}
.line-chart-point-9-19 {
  animation-delay: calc(var(--duration-slow) + var(--duration-fast) * 9 + 50ms * 19);
}
.line-chart-point:hover {
  transform: scale(1.2);
  filter: drop-shadow(var(--shadow-xs));
}
.line-chart-point-selected {
  transform: scale(1.3);
  filter: drop-shadow(var(--shadow-sm));
}
.line-chart-point:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.line-chart-axis {
  stroke: var(--color-border);
  stroke-width: 2;
  animation-delay: var(--duration-fast);
}

.chart-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--chart-legend-column-width, 220px), 1fr));
  gap: var(--space-3) var(--space-4);
  padding: var(--space-3) 0;
  margin-top: var(--space-3);
  min-height: auto;
  animation: slideInDown var(--duration-slow) ease-out;
  animation-delay: var(--duration-normal);
  align-items: stretch;
  justify-content: stretch;
}
.chart-legend-top {
  order: -1;
  grid-column: 1/-1;
  margin-bottom: 0;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-3);
  animation: slideInTopScale var(--duration-slow) ease-out;
}
.chart-legend-bottom {
  order: 1;
  grid-column: 1/-1;
  margin-top: 0;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
  animation: slideInBottomScale var(--duration-slow) ease-out;
}
.chart-legend-left {
  border-right: 1px solid var(--color-border);
  margin-right: var(--space-4);
  padding-right: var(--space-3);
  animation: slideInLeftScale var(--duration-slow) ease-out;
}
.chart-legend-right {
  border-left: 1px solid var(--color-border);
  margin-left: var(--space-4);
  padding-left: var(--space-3);
  animation: slideInRightScale var(--duration-slow) ease-out;
}
.chart-legend-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-2);
  row-gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  margin: 0;
  min-height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-xs);
  flex: 1 1 auto;
  max-width: 100%;
}
.chart-legend-item:nth-child(1) {
  animation-delay: calc(var(--duration-normal) + var(--duration-fast) * 1);
}
.chart-legend-item:nth-child(2) {
  animation-delay: calc(var(--duration-normal) + var(--duration-fast) * 2);
}
.chart-legend-item:nth-child(3) {
  animation-delay: calc(var(--duration-normal) + var(--duration-fast) * 3);
}
.chart-legend-item:nth-child(4) {
  animation-delay: calc(var(--duration-normal) + var(--duration-fast) * 4);
}
.chart-legend-item:nth-child(5) {
  animation-delay: calc(var(--duration-normal) + var(--duration-fast) * 5);
}
.chart-legend-item:nth-child(6) {
  animation-delay: calc(var(--duration-normal) + var(--duration-fast) * 6);
}
.chart-legend-item:nth-child(7) {
  animation-delay: calc(var(--duration-normal) + var(--duration-fast) * 7);
}
.chart-legend-item:nth-child(8) {
  animation-delay: calc(var(--duration-normal) + var(--duration-fast) * 8);
}
.chart-legend-item:nth-child(9) {
  animation-delay: calc(var(--duration-normal) + var(--duration-fast) * 9);
}
.chart-legend-item:nth-child(10) {
  animation-delay: calc(var(--duration-normal) + var(--duration-fast) * 10);
}
.chart-legend-item:nth-child(11) {
  animation-delay: calc(var(--duration-normal) + var(--duration-fast) * 11);
}
.chart-legend-item:nth-child(12) {
  animation-delay: calc(var(--duration-normal) + var(--duration-fast) * 12);
}
.chart-legend-item:nth-child(13) {
  animation-delay: calc(var(--duration-normal) + var(--duration-fast) * 13);
}
.chart-legend-item:nth-child(14) {
  animation-delay: calc(var(--duration-normal) + var(--duration-fast) * 14);
}
.chart-legend-item:nth-child(15) {
  animation-delay: calc(var(--duration-normal) + var(--duration-fast) * 15);
}
.chart-legend-item:nth-child(16) {
  animation-delay: calc(var(--duration-normal) + var(--duration-fast) * 16);
}
.chart-legend-item:nth-child(17) {
  animation-delay: calc(var(--duration-normal) + var(--duration-fast) * 17);
}
.chart-legend-item:nth-child(18) {
  animation-delay: calc(var(--duration-normal) + var(--duration-fast) * 18);
}
.chart-legend-item:nth-child(19) {
  animation-delay: calc(var(--duration-normal) + var(--duration-fast) * 19);
}
.chart-legend-item:nth-child(20) {
  animation-delay: calc(var(--duration-normal) + var(--duration-fast) * 20);
}
.chart-legend-item:hover {
  background: color-mix(in srgb, var(--color-surface-elevated) 88%, var(--color-primary) 12%);
}
.chart-legend-item-selected {
  background: color-mix(in srgb, var(--color-surface-elevated) 80%, var(--color-primary) 20%);
  transform: translateY(-1px);
}
.chart-legend-item-inactive {
  opacity: 0.5;
}
.chart-legend-item-inactive .chart-legend-indicator {
  background: var(--color-surface);
}
.chart-legend-indicator {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-surface) 60%, transparent);
  animation-delay: calc(var(--duration-normal) * 1.5);
}
.chart-legend-indicator-square {
  border-radius: var(--radius-sm);
}
.chart-legend-indicator-line {
  height: 2px;
  border-radius: var(--radius-full);
  width: var(--space-4);
}
.chart-legend-label {
  font-size: var(--text-sm);
  color: var(--color-text);
  font-weight: var(--font-medium);
  user-select: none;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.chart-legend-metrics {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-left: auto;
  min-width: max-content;
}
.chart-legend-value {
  font-size: var(--text-xs);
  color: var(--color-text);
  font-weight: var(--font-semibold);
  user-select: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.chart-legend-percentage {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  font-weight: var(--font-semibold);
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
  white-space: nowrap;
}

.chart-generic {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  height: 100%;
}

.chart-generic-bars {
  width: 100%;
  height: 100%;
}
.chart-generic-bars-grid {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  width: 100%;
  height: 100%;
}
.chart-generic-bars-group {
  flex: 1 1 0;
  min-width: 56px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
}
.chart-generic-bars-track {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--chart-bars-min-height, 220px);
  width: 100%;
  flex: 1 1 auto;
  height: 100%;
  padding: var(--space-2) var(--space-3) var(--space-3);
}
.chart-generic-bars-track::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  height: 1px;
  background: var(--color-border-strong);
  opacity: 0.4;
  top: var(--chart-zero-from-top, 100%);
  pointer-events: none;
}
.chart-generic-bars-track-stacked {
  position: relative;
  display: block;
  gap: 0;
  height: 100%;
}
.chart-generic-bars-track-stacked .chart-generic-bar {
  flex: 0 0 100%;
  min-width: 100%;
}
.chart-generic-bars-track-stacked .chart-generic-bar-fill {
  left: 0;
  right: 0;
  transform: none;
  width: 100%;
}
.chart-generic-bars-track-stacked-horizontal {
  position: relative;
  display: block;
  gap: 0;
}
.chart-generic-bars-track-stacked-horizontal .chart-generic-bar {
  flex: 0 0 auto;
  min-height: 100%;
}
.chart-generic-bars-track-stacked-horizontal .chart-generic-bar-fill {
  left: 0;
  right: auto;
  transform: translateY(-50%);
  width: auto;
  height: 100%;
}

.chart-generic-bar {
  position: relative;
  flex: 1 1 0;
  min-width: 28px;
  display: flex;
  justify-content: center;
  height: 100%;
  transition: transform var(--duration-fast) var(--ease-out);
}
.chart-generic-bar:hover {
  transform: translateY(-2px);
}

.chart-generic-bar-fill {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: none;
  width: min(100% - var(--space-2), var(--chart-bar-max-width, 160px));
  max-width: 100%;
  background: var(--chart-color, var(--color-primary));
  box-shadow: var(--shadow-xs);
  transition: transform var(--duration-fast) var(--ease-out), filter var(--duration-fast) var(--ease-out);
}

.chart-generic-bar-fill-positive {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.chart-generic-bar-fill-negative {
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.chart-generic-bar-label {
  text-align: center;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-generic-bar-value {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -6px);
  background: var(--color-surface-elevated);
  color: var(--color-text);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-2xs);
  font-weight: var(--font-semibold);
  white-space: nowrap;
  box-shadow: var(--shadow-xs);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.chart-generic-bar:hover .chart-generic-bar-value {
  opacity: 1;
}

.chart-generic-bar-value-positive {
  bottom: calc(100% + var(--space-1));
}

.chart-generic-bar-value-negative {
  top: calc(100% + var(--space-1));
  bottom: auto;
  transform: translate(-50%, 6px);
}

.chart-generic-bars-horizontal .chart-generic-bars-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: stretch;
}
.chart-generic-bars-horizontal .chart-generic-bars-group {
  display: grid;
  grid-template-columns: minmax(140px, 240px) 1fr;
  gap: var(--space-3);
  align-items: center;
  height: 100%;
}
.chart-generic-bars-horizontal .chart-generic-bars-track {
  min-height: var(--space-9);
  align-items: center;
  justify-content: flex-start;
  flex: 1 1 auto;
  height: 100%;
  padding: var(--space-2) var(--space-3);
}
.chart-generic-bars-horizontal .chart-generic-bars-track::after {
  top: var(--space-2);
  bottom: var(--space-2);
  width: 1px;
  height: auto;
  left: var(--chart-zero-from-left, 0%);
  right: auto;
}
.chart-generic-bars-horizontal .chart-generic-bar {
  min-height: 100%;
}
.chart-generic-bars-horizontal .chart-generic-bar-fill {
  left: 0;
  transform: translateY(-50%);
  top: 50%;
  width: auto;
  max-width: none;
  height: min(100% - var(--space-2), var(--chart-bar-max-thickness, 36px));
}
.chart-generic-bars-horizontal .chart-generic-bar-fill-positive {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.chart-generic-bars-horizontal .chart-generic-bar-fill-negative {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.chart-generic-bars-horizontal .chart-generic-bar-label {
  margin: 0;
  text-align: right;
}
.chart-generic-bars-horizontal .chart-generic-bar-value {
  top: 50%;
  bottom: auto;
  transform: translate(100%, -50%);
  left: auto;
  right: calc(-1 * var(--space-1));
}
.chart-generic-bars-horizontal .chart-generic-bar-value-horizontal-positive {
  right: calc(-1 * var(--space-1));
}
.chart-generic-bars-horizontal .chart-generic-bar-value-horizontal-negative {
  left: calc(-1 * var(--space-1));
  right: auto;
  transform: translate(-100%, -50%);
}

.chart-generic-line {
  width: 100%;
  height: 100%;
}
.chart-generic-line-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.chart-generic-line-path {
  fill: none;
  stroke-width: 2.4px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chart-generic-line-area {
  opacity: 0.14;
}
.chart-generic-line-grid-line {
  stroke: var(--color-border);
  stroke-width: 1;
  opacity: 0.25;
}

.chart-generic-pie {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 260px;
}
.chart-generic-pie-svg {
  width: 100%;
  height: 100%;
  max-width: 420px;
  max-height: 420px;
}
.chart-generic-pie-slice {
  transition: transform var(--duration-fast) var(--ease-out), filter var(--duration-fast) var(--ease-out);
  transform-origin: 50% 50%;
}
.chart-generic-pie-slice:hover {
  transform: scale(1.03);
  filter: brightness(1.08);
}
.chart-generic-pie-center {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  gap: var(--space-1);
  text-align: center;
}
.chart-generic-pie-center-value {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
}
.chart-generic-pie-center-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.chart-tooltip {
  position: absolute;
  background: var(--color-text);
  color: var(--color-text-inverse);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  z-index: var(--z-tooltip);
  opacity: 0;
  transform: translateY(-8px);
  transition: all var(--duration-fast) var(--ease-out);
}
.chart-tooltip-visible {
  opacity: 1;
  transform: translateY(0);
  animation: slideInDown var(--duration-slow) ease-out;
}
.chart-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--color-text);
}
.chart-tooltip-title {
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-1);
  color: var(--color-text-inverse);
}
.chart-tooltip-value {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
}
.chart-tooltip-percentage {
  font-size: var(--text-sm);
  opacity: 0.8;
  margin-left: var(--space-1);
}

.chart-accessibility-table-visible {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  margin-top: var(--space-4);
}
.chart-accessibility-table-visible table {
  width: 100%;
  border-collapse: collapse;
}
.chart-accessibility-table-visible table th, .chart-accessibility-table-visible table td {
  padding: var(--space-2);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.chart-accessibility-table-visible table th {
  font-weight: var(--font-semibold);
  color: var(--color-text);
}
.chart-accessibility-summary-visible {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

@media (max-width: 639px) {
  .chart-legend {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .chart-legend-left, .chart-legend-right {
    margin: var(--space-2) 0;
    border: none;
    padding: 0;
  }
  .chart-legend-item {
    grid-template-columns: auto 1fr;
    padding: var(--space-1) var(--space-2);
    min-height: 32px;
    max-width: none;
  }
  .chart-legend-metrics {
    justify-content: flex-start;
    margin-left: 0;
    gap: var(--space-1);
  }
  .chart-legend-label {
    max-width: none;
  }
  .chart-legend-side {
    width: 100%;
    max-height: 220px;
  }
  .chart-legend-side .chart-legend-item {
    max-width: none;
  }
  .chart-legend-indicator {
    width: 10px;
    height: 10px;
  }
  .progress-bar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }
  .progress-bar-label, .progress-bar-value {
    max-width: 100%;
  }
  .progress-bar-value {
    text-align: left;
  }
}
.chart-item-selected {
  background-color: var(--color-primary);
  background-image: var(--gradient-primary);
  color: var(--color-text-inverse);
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all var(--duration-fast) var(--ease-out);
  transform: scale(1.1);
  z-index: var(--z-above);
}
.chart-item-selected:hover {
  filter: brightness(0.9) saturate(1.1);
  transform: translateY(-0.618px);
}
.chart-item-selected:active {
  transform: scale(0.938);
}
.chart-item-selected:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.comparison-enabled {
  background-color: var(--color-info);
  background-image: var(--gradient-info);
  color: var(--color-text-inverse);
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all var(--duration-fast) var(--ease-out);
  border: 2px dashed var(--color-info);
}
.comparison-enabled:hover {
  filter: brightness(0.9) saturate(1.1);
  transform: translateY(-0.618px);
}
.comparison-enabled:active {
  transform: scale(0.938);
}
.comparison-enabled:focus-visible {
  outline: 2px solid var(--color-info);
  outline-offset: 2px;
}

.select-modal-item-selected {
  background-color: var(--color-primary);
  background-image: var(--gradient-primary);
  color: var(--color-text-inverse);
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all var(--duration-fast) var(--ease-out);
  border-left: 4px solid var(--color-primary);
}
.select-modal-item-selected:hover {
  filter: brightness(0.9) saturate(1.1);
  transform: translateY(-0.618px);
}
.select-modal-item-selected:active {
  transform: scale(0.938);
}
.select-modal-item-selected:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  bottom: var(--space-4);
  width: var(--border-2);
  background: var(--color-border);
  z-index: 0;
}
.timeline-item {
  display: flex;
  gap: var(--space-4);
  position: relative;
  z-index: var(--z-base);
  padding-left: 0;
}
.timeline-item-content, .timeline-content {
  flex: 1;
  min-width: 0;
  padding-top: var(--space-1);
}
.timeline-item-marker, .timeline-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-full);
  flex-shrink: 0;
  border: var(--border-3) solid var(--color-surface-elevated);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: var(--text-sm);
}
.timeline-item-marker-success {
  background: var(--color-success);
  border-color: var(--color-success);
}
.timeline-item-marker-info {
  background: var(--color-info);
  border-color: var(--color-info);
}
.timeline-item-marker-warning {
  background: var(--color-warning);
  border-color: var(--color-warning);
}
.timeline-item-marker-danger {
  background: var(--color-error);
  border-color: var(--color-error);
}
.timeline-item-marker-error {
  background: var(--color-error);
  border-color: var(--color-error);
}
.timeline-item-marker-pending {
  background: var(--color-text-muted);
  border-color: var(--color-text-muted);
}
.timeline-item-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.timeline-item-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0;
}
.timeline-item-time {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-text-subtle);
  margin-bottom: var(--space-1);
}
.timeline-item-description {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin: 0;
}
.timeline-item-subtitle {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  margin-top: var(--space-1);
}
.timeline-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.timeline-item-tag {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
  background: var(--color-surface);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
}
.timeline-item-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.timeline-item-custom {
  margin-top: var(--space-3);
}
.timeline-item-highlighted .timeline-item-content, .timeline-item-highlighted .timeline-content {
  background: var(--color-surface-elevated);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
}
.timeline-item-first {
  margin-top: 0;
}
.timeline-item-last {
  margin-bottom: 0;
}
.timeline-item-skeleton {
  opacity: 0.6;
}
.timeline-item-skeleton .timeline-item-marker-skeleton {
  background: var(--color-surface);
  animation: pulse 1.5s ease-in-out infinite;
}
.timeline-default {
  gap: var(--space-4);
}
.timeline-process .timeline-item-marker, .timeline-process .timeline-marker {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.timeline-minimal .timeline-item {
  gap: var(--space-3);
}
.timeline-minimal .timeline-item-marker, .timeline-minimal .timeline-marker {
  width: var(--space-4);
  height: var(--space-4);
  font-size: var(--text-xs);
}
.timeline-vertical {
  flex-direction: column;
}
.timeline-vertical::before {
  left: var(--space-4);
  top: var(--space-4);
  bottom: var(--space-4);
  width: 2px;
  height: auto;
}
.timeline-horizontal {
  flex-direction: row;
  gap: var(--space-6);
}
.timeline-horizontal::before {
  left: var(--space-6);
  right: var(--space-6);
  top: var(--space-4);
  bottom: auto;
  width: auto;
  height: 2px;
}
.timeline-horizontal .timeline-item {
  flex-direction: column;
  text-align: center;
}
.timeline-compact {
  gap: var(--space-2);
}
.timeline-compact .timeline-item {
  gap: var(--space-2);
}
.timeline-compact .timeline-item-content, .timeline-compact .timeline-content {
  padding-top: 0;
}
.timeline-compact .timeline-item-marker, .timeline-compact .timeline-marker {
  width: var(--space-6);
  height: var(--space-6);
  font-size: var(--text-xs);
}
.timeline-loading .timeline-item-skeleton .timeline-item-marker-skeleton {
  background: var(--color-surface);
  animation: pulse 1.5s ease-in-out infinite;
}

.timeline-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: var(--border-1) solid var(--color-border);
  font-size: var(--text-sm);
}
.timeline-meta-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}
.timeline-meta-value {
  font-weight: var(--font-semibold);
  color: var(--color-text);
}
.timeline-meta-value-urgent {
  color: var(--color-warning);
}
.timeline-meta-value-overdue {
  color: var(--color-error);
}
.timeline-meta-value-positive {
  color: var(--color-success);
}
.timeline-meta-days {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  font-weight: var(--font-normal);
  margin-left: var(--space-1);
}
.timeline-meta-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.timeline-meta-item-compact {
  gap: 0;
}

.activity-icon-success {
  background: color-mix(in srgb, var(--color-success) 10 %, var(--color-surface));
  color: var(--color-success);
  border-color: var(--color-success);
}

.activity-icon-interactive-primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

.activity-icon-info {
  background: color-mix(in srgb, var(--color-info) 10 %, var(--color-surface));
  color: var(--color-info);
  border-color: var(--color-info);
}

.activity-icon-warning {
  background: color-mix(in srgb, var(--color-warning) 10 %, var(--color-surface));
  color: var(--color-warning);
  border-color: var(--color-warning);
}

.activity-icon-error {
  background: color-mix(in srgb, var(--color-error) 10 %, var(--color-surface));
  color: var(--color-error);
  border-color: var(--color-error);
}

.activity-icon-text-secondary {
  background: var(--color-surface);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

.timeline-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.timeline-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: var(--border-1) solid var(--color-border);
}
.timeline-list li:last-child {
  border-bottom: none;
}

.timeline-simple {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.timeline-simple::before {
  display: none;
}
.timeline-simple .timeline-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface-elevated);
  border-radius: var(--radius-md);
  border: var(--border-1) solid var(--color-border);
}

.timeline-item-animated {
  animation: fadeIn 0.3s ease-out;
}
.timeline-item-loading {
  opacity: 0.6;
  pointer-events: none;
}
@media (max-width: 639px) {
  .timeline-item {
    gap: var(--space-2);
  }
  .timeline-item .timeline-item {
    gap: var(--space-2);
  }
  .timeline-item .timeline-item-marker, .timeline-item .timeline-marker {
    width: var(--space-6);
    height: var(--space-6);
    font-size: var(--text-xs);
  }
  .timeline-item .timeline-item-content, .timeline-item .timeline-content {
    padding: var(--space-2);
  }
  .timeline-item .timeline-item-title {
    font-size: var(--text-sm);
  }
  .timeline-item .timeline-item-description {
    font-size: var(--text-xs);
  }
}

.metric {
  --metric-card-min-height: var(--space-20);
  --metric-card-min-height-mobile: var(--space-16);
  --metric-mini-height: var(--space-15);
  --metric-icon-size: var(--space-6);
  --metric-label-line-height: 1.2;
  --metric-value-line-height: 1.1;
  --metric-status-line-height: 1.3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
}
.metric-small {
  padding: var(--space-3);
}
.metric-small .metric-value {
  font-size: 1.25rem;
}
.metric-small .metric-label {
  font-size: 0.75rem;
}
.metric-mini {
  padding: var(--space-2);
  min-height: var(--metric-mini-height, var(--space-15));
  border-radius: var(--radius-md);
}
.metric-mini .metric-value {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-0-5);
}
.metric-mini .metric-label {
  font-size: var(--text-2xs);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-wide);
}
.metric-mini .metric-icon {
  font-size: var(--icon-base);
  margin-bottom: var(--space-1);
  opacity: var(--opacity-70);
}
.metric-mini .metric-extra {
  border-top: none;
  padding-top: 0;
  margin-top: var(--space-0-5);
}
.metric-mini:hover {
  transform: translateY(calc(var(--space-px) * -0.5));
}

.metric-card-pro {
  min-height: var(--metric-card-min-height, var(--space-20));
  border-radius: var(--radius-lg);
  transition: all var(--duration-fast) var(--ease-out);
}
.metric-card-pro:hover {
  transform: translateY(calc(var(--space-px) * -1));
  box-shadow: var(--shadow-lg);
}

.metric-micro {
  min-height: var(--space-12);
  max-height: var(--space-16);
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-out);
  background: var(--color-surface-elevated);
  border: var(--border-1) solid var(--color-border);
  box-shadow: var(--shadow-xs);
}
.metric-micro:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: var(--color-border);
}
.metric-micro-clickable:hover {
  cursor: pointer;
  background: var(--color-surface-elevated);
}
.metric-micro .pa-1 {
  padding: var(--space-1) var(--space-2) !important;
}
.metric-micro .metric-pro-layout {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.metric-micro .metric-header {
  flex-shrink: 0;
}
.metric-micro .metric-header .metric-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--metric-icon-size, var(--space-6));
  height: var(--metric-icon-size, var(--space-6));
}
.metric-micro .metric-header .metric-icon-container i {
  font-size: var(--icon-lg);
  line-height: 1;
}
.metric-micro .metric-content {
  flex: 1;
}
.metric-micro .metric-content .metric-label {
  line-height: var(--metric-label-line-height, 1.2);
  opacity: var(--opacity-80);
}
.metric-micro .metric-content .metric-value {
  line-height: var(--metric-value-line-height, 1.1);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}
.metric-micro .metric-content .metric-status {
  line-height: var(--metric-status-line-height, 1.3);
  opacity: var(--opacity-70);
}
@media (max-width: 639px) {
  .metric-micro {
    min-height: var(--metric-card-min-height-mobile, var(--space-18));
  }
  .metric-micro .metric-value {
    font-size: var(--text-base) !important;
  }
  .metric-micro .metric-label {
    font-size: var(--text-2xs) !important;
  }
}

.metric-medium {
  padding: var(--space-4);
}
.metric-medium .metric-value {
  font-size: 2rem;
}
.metric-medium .metric-label {
  font-size: 0.875rem;
}
.metric-large {
  padding: var(--space-6);
}
.metric-large .metric-value {
  font-size: 2.5rem;
}
.metric-large .metric-label {
  font-size: 1rem;
}
.metric-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
}
.metric-content {
  flex: 1;
  width: 100%;
}
.metric-value {
  font-weight: 700;
  line-height: 1;
  margin-bottom: var(--space-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
}
.metric-prefix, .metric-suffix {
  font-size: 0.8em;
  opacity: 0.8;
}
.metric-label {
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
}
.metric-subtitle {
  color: var(--color-text-subtle);
  font-size: 0.75em;
  line-height: 1.3;
}
.metric-change {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0-5);
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: var(--space-1);
  padding: var(--space-0-5) var(--space-1-5);
  border-radius: var(--radius-sm);
}
.metric-change-positive {
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 5 %, var(--color-surface));
}
.metric-change-negative {
  color: var(--color-error);
  background: color-mix(in srgb, var(--color-error) 10 %, var(--color-surface));
}
.metric-change-neutral {
  color: var(--color-text-muted);
  background: color-mix(in srgb, var(--color-text-muted) 10%, var(--color-surface));
}
.metric-extra {
  width: 100%;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-2);
}
.metric-loading {
  border-radius: inherit;
  backdrop-filter: blur(2px);
}
@media (max-width: 639px) {
  .metric-value {
    font-size: var(--text-xl);
  }
}
.metric {
  transition: all var(--duration-fast) var(--ease-out);
}
.metric:hover {
  transform: translateY(-1px);
}
.metric:active {
  transform: scale(0.98);
}

.file-upload .upload-area-input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
  z-index: -1;
}
.file-upload .active.upload-area-input {
  pointer-events: auto;
  z-index: var(--z-base);
  inset: 0;
  width: 100%;
  height: 100%;
}
.file-upload-dropzone, .upload-zone, .upload-area {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  cursor: pointer;
  transition: var(--transition-normal);
  text-align: center;
}
.file-upload-dropzone:hover, .upload-zone:hover, .upload-area:hover {
  border-color: var(--color-primary);
  background: var(--color-surface-elevated);
}
.active.file-upload-dropzone, .active.upload-zone, .active.upload-area {
  border-color: var(--color-primary);
  background: var(--color-surface-elevated);
  transform: scale(1.02);
}
.disabled.file-upload-dropzone, .disabled.upload-zone, .disabled.upload-area {
  opacity: 0.6;
  cursor: not-allowed;
}
.disabled.file-upload-dropzone:hover, .disabled.upload-zone:hover, .disabled.upload-area:hover {
  border-color: var(--color-border);
  background: var(--color-surface);
  transform: none;
}

.file-upload-progress .upload-progress-bar, .upload-progress-bar {
  width: 100%;
  height: var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-full);
  overflow: hidden;
  border: var(--border-1) solid var(--color-border);
}
.upload-progress-bar-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
  position: relative;
}
.upload-progress-bar-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--glass-border-light) 50%, transparent 100%);
  animation: shimmer 2s infinite;
}

.file-upload {
  position: relative;
}
.upload-area .file-upload .upload-area-input, .file-upload-label .file-upload .upload-area-input, .file-add-more-button .file-upload .upload-area-input {
  pointer-events: auto;
  z-index: var(--z-base);
  inset: 0;
}
.file-upload-minimal-container .file-upload .upload-area-input {
  width: 1px;
  height: 1px;
  position: fixed;
  visibility: hidden;
}

.upload-progress-bar-fill {
  width: 0;
}
.upload-progress-bar-fill[data-progress] {
  width: calc(var(--progress, 0) * 1%);
}
.upload-progress-bar-fill[data-progress="0"] {
  --progress: 0;
}
.upload-progress-bar-fill[data-progress="1"] {
  --progress: 1;
}
.upload-progress-bar-fill[data-progress="2"] {
  --progress: 2;
}
.upload-progress-bar-fill[data-progress="3"] {
  --progress: 3;
}
.upload-progress-bar-fill[data-progress="4"] {
  --progress: 4;
}
.upload-progress-bar-fill[data-progress="5"] {
  --progress: 5;
}
.upload-progress-bar-fill[data-progress="6"] {
  --progress: 6;
}
.upload-progress-bar-fill[data-progress="7"] {
  --progress: 7;
}
.upload-progress-bar-fill[data-progress="8"] {
  --progress: 8;
}
.upload-progress-bar-fill[data-progress="9"] {
  --progress: 9;
}
.upload-progress-bar-fill[data-progress="10"] {
  --progress: 10;
}
.upload-progress-bar-fill[data-progress="11"] {
  --progress: 11;
}
.upload-progress-bar-fill[data-progress="12"] {
  --progress: 12;
}
.upload-progress-bar-fill[data-progress="13"] {
  --progress: 13;
}
.upload-progress-bar-fill[data-progress="14"] {
  --progress: 14;
}
.upload-progress-bar-fill[data-progress="15"] {
  --progress: 15;
}
.upload-progress-bar-fill[data-progress="16"] {
  --progress: 16;
}
.upload-progress-bar-fill[data-progress="17"] {
  --progress: 17;
}
.upload-progress-bar-fill[data-progress="18"] {
  --progress: 18;
}
.upload-progress-bar-fill[data-progress="19"] {
  --progress: 19;
}
.upload-progress-bar-fill[data-progress="20"] {
  --progress: 20;
}
.upload-progress-bar-fill[data-progress="21"] {
  --progress: 21;
}
.upload-progress-bar-fill[data-progress="22"] {
  --progress: 22;
}
.upload-progress-bar-fill[data-progress="23"] {
  --progress: 23;
}
.upload-progress-bar-fill[data-progress="24"] {
  --progress: 24;
}
.upload-progress-bar-fill[data-progress="25"] {
  --progress: 25;
}
.upload-progress-bar-fill[data-progress="26"] {
  --progress: 26;
}
.upload-progress-bar-fill[data-progress="27"] {
  --progress: 27;
}
.upload-progress-bar-fill[data-progress="28"] {
  --progress: 28;
}
.upload-progress-bar-fill[data-progress="29"] {
  --progress: 29;
}
.upload-progress-bar-fill[data-progress="30"] {
  --progress: 30;
}
.upload-progress-bar-fill[data-progress="31"] {
  --progress: 31;
}
.upload-progress-bar-fill[data-progress="32"] {
  --progress: 32;
}
.upload-progress-bar-fill[data-progress="33"] {
  --progress: 33;
}
.upload-progress-bar-fill[data-progress="34"] {
  --progress: 34;
}
.upload-progress-bar-fill[data-progress="35"] {
  --progress: 35;
}
.upload-progress-bar-fill[data-progress="36"] {
  --progress: 36;
}
.upload-progress-bar-fill[data-progress="37"] {
  --progress: 37;
}
.upload-progress-bar-fill[data-progress="38"] {
  --progress: 38;
}
.upload-progress-bar-fill[data-progress="39"] {
  --progress: 39;
}
.upload-progress-bar-fill[data-progress="40"] {
  --progress: 40;
}
.upload-progress-bar-fill[data-progress="41"] {
  --progress: 41;
}
.upload-progress-bar-fill[data-progress="42"] {
  --progress: 42;
}
.upload-progress-bar-fill[data-progress="43"] {
  --progress: 43;
}
.upload-progress-bar-fill[data-progress="44"] {
  --progress: 44;
}
.upload-progress-bar-fill[data-progress="45"] {
  --progress: 45;
}
.upload-progress-bar-fill[data-progress="46"] {
  --progress: 46;
}
.upload-progress-bar-fill[data-progress="47"] {
  --progress: 47;
}
.upload-progress-bar-fill[data-progress="48"] {
  --progress: 48;
}
.upload-progress-bar-fill[data-progress="49"] {
  --progress: 49;
}
.upload-progress-bar-fill[data-progress="50"] {
  --progress: 50;
}
.upload-progress-bar-fill[data-progress="51"] {
  --progress: 51;
}
.upload-progress-bar-fill[data-progress="52"] {
  --progress: 52;
}
.upload-progress-bar-fill[data-progress="53"] {
  --progress: 53;
}
.upload-progress-bar-fill[data-progress="54"] {
  --progress: 54;
}
.upload-progress-bar-fill[data-progress="55"] {
  --progress: 55;
}
.upload-progress-bar-fill[data-progress="56"] {
  --progress: 56;
}
.upload-progress-bar-fill[data-progress="57"] {
  --progress: 57;
}
.upload-progress-bar-fill[data-progress="58"] {
  --progress: 58;
}
.upload-progress-bar-fill[data-progress="59"] {
  --progress: 59;
}
.upload-progress-bar-fill[data-progress="60"] {
  --progress: 60;
}
.upload-progress-bar-fill[data-progress="61"] {
  --progress: 61;
}
.upload-progress-bar-fill[data-progress="62"] {
  --progress: 62;
}
.upload-progress-bar-fill[data-progress="63"] {
  --progress: 63;
}
.upload-progress-bar-fill[data-progress="64"] {
  --progress: 64;
}
.upload-progress-bar-fill[data-progress="65"] {
  --progress: 65;
}
.upload-progress-bar-fill[data-progress="66"] {
  --progress: 66;
}
.upload-progress-bar-fill[data-progress="67"] {
  --progress: 67;
}
.upload-progress-bar-fill[data-progress="68"] {
  --progress: 68;
}
.upload-progress-bar-fill[data-progress="69"] {
  --progress: 69;
}
.upload-progress-bar-fill[data-progress="70"] {
  --progress: 70;
}
.upload-progress-bar-fill[data-progress="71"] {
  --progress: 71;
}
.upload-progress-bar-fill[data-progress="72"] {
  --progress: 72;
}
.upload-progress-bar-fill[data-progress="73"] {
  --progress: 73;
}
.upload-progress-bar-fill[data-progress="74"] {
  --progress: 74;
}
.upload-progress-bar-fill[data-progress="75"] {
  --progress: 75;
}
.upload-progress-bar-fill[data-progress="76"] {
  --progress: 76;
}
.upload-progress-bar-fill[data-progress="77"] {
  --progress: 77;
}
.upload-progress-bar-fill[data-progress="78"] {
  --progress: 78;
}
.upload-progress-bar-fill[data-progress="79"] {
  --progress: 79;
}
.upload-progress-bar-fill[data-progress="80"] {
  --progress: 80;
}
.upload-progress-bar-fill[data-progress="81"] {
  --progress: 81;
}
.upload-progress-bar-fill[data-progress="82"] {
  --progress: 82;
}
.upload-progress-bar-fill[data-progress="83"] {
  --progress: 83;
}
.upload-progress-bar-fill[data-progress="84"] {
  --progress: 84;
}
.upload-progress-bar-fill[data-progress="85"] {
  --progress: 85;
}
.upload-progress-bar-fill[data-progress="86"] {
  --progress: 86;
}
.upload-progress-bar-fill[data-progress="87"] {
  --progress: 87;
}
.upload-progress-bar-fill[data-progress="88"] {
  --progress: 88;
}
.upload-progress-bar-fill[data-progress="89"] {
  --progress: 89;
}
.upload-progress-bar-fill[data-progress="90"] {
  --progress: 90;
}
.upload-progress-bar-fill[data-progress="91"] {
  --progress: 91;
}
.upload-progress-bar-fill[data-progress="92"] {
  --progress: 92;
}
.upload-progress-bar-fill[data-progress="93"] {
  --progress: 93;
}
.upload-progress-bar-fill[data-progress="94"] {
  --progress: 94;
}
.upload-progress-bar-fill[data-progress="95"] {
  --progress: 95;
}
.upload-progress-bar-fill[data-progress="96"] {
  --progress: 96;
}
.upload-progress-bar-fill[data-progress="97"] {
  --progress: 97;
}
.upload-progress-bar-fill[data-progress="98"] {
  --progress: 98;
}
.upload-progress-bar-fill[data-progress="99"] {
  --progress: 99;
}
.upload-progress-bar-fill[data-progress="100"] {
  --progress: 100;
}

.upload {
  position: relative;
}
.upload-section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--space-6);
}
.upload-info-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--color-text);
  margin: 0 0 var(--space-4) 0;
  font-weight: var(--font-semibold);
}
.upload-info-list {
  margin: 0;
  padding-left: var(--space-6);
  color: var(--color-text-muted);
  line-height: 1.6;
}
.upload-info-list li {
  margin-bottom: var(--space-2);
}
.upload-info-list li:last-child {
  margin-bottom: 0;
}
.upload-area {
  position: relative;
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-8);
}
.upload-area {
  transition: all var(--duration-fast) var(--ease-out);
}
.upload-area:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.upload-area-label {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-4);
  cursor: pointer;
}
.upload-area-label i {
  font-size: var(--space-12);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.upload-area-text {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  font-weight: var(--font-medium);
  color: var(--color-text);
  margin: 0;
}
.upload-area-hint {
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  margin: 0;
}
.upload-zone {
  padding: var(--space-8);
  position: relative;
}
.upload-zone.dragover, .upload-zone.active {
  border-color: var(--color-primary);
  background: var(--color-surface-elevated);
  transform: scale(1.02);
}
.upload-zone.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.upload-zone.disabled:hover {
  border-color: var(--color-border);
  background: var(--color-surface);
  transform: none;
}
.upload-zone-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-3);
}
.upload-zone-icon {
  font-size: var(--space-12);
  color: var(--color-primary);
}
.upload-zone-supported {
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}
.upload-zone-file-info {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-2);
}
.upload-zone-file-info i {
  font-size: var(--space-8);
  color: var(--color-primary);
}
.upload-zone-file-info h4 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--color-text);
  margin: 0;
}
.upload-zone.dragover .upload-drag-overlay {
  display: flex !important;
}
.upload-zone h5 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--color-text);
  margin: 0;
}
.upload-zone p {
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  margin: 0;
}
.upload-progress {
  text-align: center;
  padding: var(--space-6) 0;
}
.upload-progress-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-6) 0;
  color: var(--color-text);
}
.upload-progress-bar {
  margin-bottom: var(--space-4);
}
.upload-progress-text {
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  font-weight: var(--font-medium);
}
.upload-complete, .upload-error {
  text-align: center;
  padding: var(--space-6) 0;
}
.upload-complete-title, .upload-error-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-4) 0;
  color: var(--color-text);
}
.upload-complete-message, .upload-error-message {
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.upload-error-title {
  color: var(--color-error);
}
.upload-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.upload-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-3);
}
.upload-icon {
  font-size: var(--space-12);
  color: var(--color-primary);
}

.file-upload {
  position: relative;
  display: inline-block;
  width: 100%;
}
.file-upload-input {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  opacity: 0;
}
.file-upload-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-elevated);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
  text-decoration: none;
}
.file-upload-label:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-canvas);
}
.file-upload-dropzone {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-6);
}
.file-upload-dropzone i {
  font-size: var(--space-9);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.file-upload-dropzone p {
  margin: 0;
  color: var(--color-text);
  font-weight: var(--font-medium);
}
.file-upload-dropzone p:last-child {
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  font-weight: normal;
}
.file-upload-hint {
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}
.file-upload-section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--space-4);
}
.file-upload-simple {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-3);
}
.file-upload-compact {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-2);
}
.file-upload-count {
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  font-weight: var(--font-medium);
}
.file-upload-errors {
  margin-top: var(--space-3);
}
.file-upload-errors-hidden {
  display: none;
}

.file-preview-grid {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.file-preview-grid-single-file {
  grid-template-columns: 1fr;
  max-width: 100%;
}
@media (max-width: 768px) {
  .file-preview-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}
@media (max-width: 600px) {
  .file-preview-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}
.file-preview-card {
  overflow: hidden;
  position: relative;
  animation: slideUpSmooth var(--duration-normal) var(--ease-out) backwards;
}
.file-preview-content {
  padding: var(--space-4);
  flex: 1;
}
.file-preview-thumbnail {
  position: relative;
  width: 100%;
  height: 120px;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-3);
}
.file-preview-thumbnail-overlay {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-background) 80%, transparent);
  opacity: 0;
  transition: var(--transition-normal);
}
.file-preview-thumbnail-overlay i {
  background: none;
  color: var(--color-primary);
}
.file-preview-thumbnail:hover .file-preview-thumbnail-overlay {
  opacity: 1;
}
.file-preview-icon-container {
  height: 80px;
  margin-bottom: var(--space-3);
}
.file-preview-icon-container i {
  background: none;
  color: var(--color-primary);
}
.file-preview-details {
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}
.file-preview-name {
  color: var(--color-text);
  font-weight: var(--font-medium);
  font-size: var(--text-base);
  margin: 0;
  line-height: 1.3;
}
.file-preview-size {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0;
}
.file-preview-error {
  color: var(--color-error);
  font-size: var(--text-sm);
  margin: 0;
  font-weight: var(--font-medium);
}
.file-preview-actions {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: flex;
  gap: var(--space-1);
  z-index: var(--z-above);
  opacity: 1;
  transition: var(--transition-normal);
}
.file-preview-card:hover .file-preview-actions {
  opacity: 1;
  transform: scale(1.05);
}
.file-preview-card:focus-within .file-preview-actions {
  opacity: 1;
}
.file-preview-status i {
  background: none;
  border: none;
}
.file-preview-status i-success {
  color: var(--color-success);
}
.file-preview-status i-error {
  color: var(--color-error);
}
.file-preview-status i-pending {
  color: var(--color-text-muted);
}
.file-action-btn {
  width: var(--space-8);
  height: var(--space-8);
  background: var(--color-surface-elevated);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(8px);
}
.file-action-btn:hover {
  background: var(--color-surface);
  transform: scale(1.1);
}
.file-action-btn-danger:hover {
  background: color-mix(in srgb, var(--color-error) 10 %, var(--color-surface));
  border-color: var(--color-error);
  color: var(--color-error);
}
.file-action-btn i {
  font-size: var(--text-sm);
}
.file-status-area {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-top: var(--border-1) solid var(--color-border);
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}
.file-add-more-card {
  min-height: 200px;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  cursor: pointer;
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  transition: var(--transition-fast);
  position: relative;
  outline: none;
}
.file-add-more-card:hover {
  background: color-mix(in srgb, var(--color-surface-elevated) 80%, transparent);
}
.file-add-more-card:active {
  background: color-mix(in srgb, var(--color-surface-elevated) 60%, transparent);
}
.file-add-more-card:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
@media (hover: none) and (pointer: coarse) {
  .file-add-more-card {
    min-height: var(--touch-target-lg);
    min-width: var(--touch-target-lg);
  }
  .file-add-more-card:hover {
    transform: none;
  }
}
.file-add-more-card:hover {
  border-color: var(--color-primary);
  background: var(--color-surface-elevated);
}
.file-add-more-card label {
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  text-align: center;
  padding: var(--space-4);
}
.file-add-more-card label i {
  background: none;
  color: var(--color-primary);
}
.file-add-more-card label span {
  color: var(--color-text);
  font-weight: var(--font-medium);
  font-size: var(--text-base);
}
.file-add-more-card label small {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.file-replace-section {
  margin-top: var(--space-4);
}
.file-replace-section label {
  font-weight: var(--font-medium);
}
.file-replace-section label {
  background: var(--color-surface-elevated);
  color: var(--color-text);
  border-color: var(--color-border);
}
.file-replace-section label:hover {
  background: color-mix(in srgb, var(--color-surface-elevated) 96%, var(--color-text));
  border-color: color-mix(in srgb, var(--color-border) 85%, var(--color-text));
}
.file-replace-section label:active {
  background: color-mix(in srgb, var(--color-surface-elevated) 92%, var(--color-text));
  transform: scale(0.98);
}
.file-replace-section label i {
  font-size: var(--text-lg);
}
.file-remove-btn {
  opacity: 0.7;
  transition: var(--transition-normal);
}
.file-remove-btn:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--color-error) 10 %, var(--color-surface));
  color: var(--color-error);
}
.file-upload-progress {
  gap: var(--space-1);
  width: 100%;
}
.file-upload-progress .upload-progress-bar {
  height: var(--space-2);
}
.file-upload-progress .upload-progress-text {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
  font-weight: var(--font-medium);
}
.file-attachments {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.file-attachment {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface-elevated);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-md);
  transition: var(--transition-normal);
}
.file-attachment:hover {
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}
.file-attachment-name {
  flex: 1;
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--color-text);
  margin: 0;
}
.file-attachment-icon {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}
.file-attachment i:first-child {
  color: var(--color-text-muted);
}
.file-actions {
  margin-top: var(--space-3);
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}

.action-button-container {
  position: relative;
  display: inline-block;
}
.action-button-container .action-progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
}
.action-button-container .action-progress-text {
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}
.action-button-container-export-active {
  opacity: 0.8;
  pointer-events: none;
}

.export-options {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--space-4);
}
.export-options .export-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-2);
  max-height: 200px;
  overflow-y: auto;
  padding: var(--space-2);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-md);
}

.export-modal-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4);
  border-bottom: var(--border-1) solid var(--color-border);
}
.export-modal-content {
  padding: var(--space-6);
  min-height: 300px;
}

:root {
  --datepicker-min-width: 240px;
  --datepicker-min-width-sm: 280px;
  --datepicker-min-width-md: 320px;
  --datepicker-max-width: 320px;
  --datepicker-popup-max-height: 380px;
  --datepicker-min-height: 150px;
}

.rr-datepicker {
  position: relative;
  width: 100%;
  font-family: inherit;
}
.rr-datepicker-disabled {
  opacity: var(--opacity-disabled);
  pointer-events: none;
}
.rr-datepicker-error .rr-datepicker-error-input {
  border-color: var(--color-error);
}
.rr-datepicker-error .rr-datepicker-error-input:focus {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 20%, transparent);
}
.rr-datepicker-extrasmall .rr-datepicker-trigger {
  padding: var(--space-1) var(--space-2);
  min-height: var(--space-8);
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
}
.rr-datepicker-small .rr-datepicker-trigger {
  padding: var(--space-2) var(--space-3);
  min-height: var(--space-10);
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
}
.rr-datepicker-large .rr-datepicker-trigger {
  padding: var(--space-4) var(--space-4);
  min-height: var(--space-14);
  font-size: var(--text-base);
  border-radius: var(--radius-lg);
}
.rr-datepicker-extralarge .rr-datepicker-trigger {
  padding: var(--space-5) var(--space-5);
  min-height: var(--space-16);
  font-size: var(--text-lg);
  border-radius: var(--radius-xl);
}
.rr-datepicker-trigger {
  margin: 0;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  box-shadow: none;
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: max(16px, 1rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: calc(var(--base-unit) * 0.01);
  color: var(--color-text);
  background: var(--color-surface-elevated);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-4);
  min-height: var(--space-12);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: border-color, box-shadow, transform;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  cursor: pointer;
}
.rr-datepicker-trigger:hover:not(.disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 25px -8px var(--overlay-light);
  border-color: var(--color-border);
  filter: brightness(1.02) saturate(1.05);
}
.rr-datepicker-trigger:focus-within {
  border-color: var(--color-primary);
  background: var(--color-surface-elevated);
  box-shadow: 0 0 0 3px rgba(var(--color-primary), calc(15% / 100));
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.rr-datepicker-trigger-error {
  border-color: var(--color-error);
  border-width: 2px;
  background: color-mix(in srgb, var(--color-error) 3%, var(--color-surface-elevated));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-error) 20%, transparent);
}
.rr-datepicker-trigger-error:focus-within {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(var(--color-error), calc(25% / 100));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 20%, transparent), 0 4px 12px color-mix(in srgb, var(--color-error) 15%, transparent);
}
.rr-datepicker-trigger-success {
  border-color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 3%, var(--color-surface-elevated));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-success) 20%, transparent);
}
.rr-datepicker-trigger-success:focus-within {
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px rgba(var(--color-success), calc(15% / 100));
}
.rr-datepicker-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  font-size: inherit;
  font-weight: var(--font-medium);
  color: var(--color-text);
  cursor: pointer;
  line-height: inherit;
}
.rr-datepicker-input::placeholder {
  color: var(--color-text-muted);
  font-weight: var(--font-normal);
}
.rr-datepicker-input:disabled {
  cursor: not-allowed;
  color: var(--color-text-muted);
}
.rr-datepicker-input-error {
  color: inherit;
}
.rr-datepicker-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: color var(--duration-fast);
  flex-shrink: 0;
}
.rr-datepicker-icon-start {
  margin-right: var(--space-2);
  width: var(--space-6);
  height: var(--space-6);
}
.rr-datepicker-icon-end {
  margin-left: var(--space-2);
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  width: var(--space-6);
  height: var(--space-6);
}
.rr-datepicker-icon-end:hover {
  background: var(--color-surface-elevated);
  color: var(--color-primary);
  transform: scale(1.05);
}
.rr-datepicker-small .rr-datepicker-icon-end {
  width: var(--space-5);
  height: var(--space-5);
  font-size: var(--text-sm);
}
.rr-datepicker-large .rr-datepicker-icon-end {
  width: var(--space-7);
  height: var(--space-7);
  font-size: var(--text-lg);
}
.rr-datepicker-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal-backdrop);
  background: transparent;
}
.rr-datepicker-popup {
  position: absolute;
  visibility: hidden;
  z-index: var(--dropdown-z-index, var(--z-modal-popup));
  background: var(--color-surface-elevated);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  backdrop-filter: blur(var(--blur-sm));
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: all var(--duration-fast) var(--ease-out);
  min-width: var(--datepicker-min-width);
  max-width: min(var(--datepicker-max-width), 90vw);
  min-height: var(--datepicker-min-height);
  max-height: min(var(--datepicker-popup-max-height), 85vh);
  display: flex;
  flex-direction: column;
}
.rr-datepicker-popup.rr-datepicker-positioned {
  position: fixed;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
@media (min-width: 640px) {
  .rr-datepicker-popup {
    min-width: var(--datepicker-min-width-sm);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(var(--blur-md));
    box-shadow: var(--shadow-2xl);
  }
}
@media (min-width: 768px) {
  .rr-datepicker-popup {
    min-width: var(--datepicker-min-width-md);
  }
}
.rr-datepicker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-1) solid var(--color-border);
  background: var(--color-surface);
  min-height: 48px;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .rr-datepicker-header {
    padding: var(--space-3) var(--space-4);
    min-height: 56px;
  }
}
.rr-datepicker-nav {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  transition: var(--transition-fast);
  min-height: 32px;
  min-width: 32px;
}
@media (min-width: 768px) {
  .rr-datepicker-nav {
    padding: var(--space-2);
    border-radius: var(--radius-md);
    min-height: 36px;
    min-width: 36px;
  }
}
.rr-datepicker-nav:hover {
  background: var(--color-surface-elevated);
  color: var(--color-text);
}
.rr-datepicker-title {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  color: var(--color-text);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}
@media (min-width: 768px) {
  .rr-datepicker-title {
    font-size: var(--text-base);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
  }
}
.rr-datepicker-title:hover {
  background: var(--color-surface-elevated);
}
.rr-datepicker-years {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-1);
  padding: var(--space-2);
  max-height: 180px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
@media (min-width: 640px) {
  .rr-datepicker-years {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2);
    padding: var(--space-3);
    max-height: 200px;
  }
}
@media (min-width: 768px) {
  .rr-datepicker-years {
    padding: var(--space-4);
    max-height: 240px;
  }
}
.rr-datepicker-year {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  transition: var(--transition-fast);
  font-size: var(--text-xs);
  text-align: center;
  min-height: 32px;
}
@media (min-width: 768px) {
  .rr-datepicker-year {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    min-height: 36px;
  }
}
.rr-datepicker-year:hover {
  background: var(--color-surface-elevated);
  color: var(--color-text);
}
.rr-datepicker-year-selected {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: var(--font-semibold);
}
.rr-datepicker-year-selected:hover {
  background: var(--color-primary-hover);
}
.rr-datepicker-calendar {
  padding: var(--space-2);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
@media (min-width: 768px) {
  .rr-datepicker-calendar {
    padding: var(--space-3);
  }
}
.rr-datepicker-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-px);
  margin-bottom: var(--space-2);
}
.rr-datepicker-weekday {
  text-align: center;
  font-size: var(--text-2xs);
  font-weight: var(--font-medium);
  color: var(--color-text-subtle);
  padding: var(--space-1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
@media (min-width: 768px) {
  .rr-datepicker-weekday {
    font-size: var(--text-xs);
    padding: var(--space-2);
  }
}
.rr-datepicker-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-px);
}
.rr-datepicker-day {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  transition: var(--transition-fast);
  position: relative;
  min-height: 28px;
}
@media (min-width: 768px) {
  .rr-datepicker-day {
    font-size: var(--text-sm);
    border-radius: var(--radius-md);
    min-height: 36px;
  }
}
@media (min-width: 1024px) {
  .rr-datepicker-day {
    min-height: 40px;
  }
}
.rr-datepicker-day:hover:not(:disabled) {
  background: var(--color-surface-elevated);
  transform: translateY(-1px);
}
.rr-datepicker-day-other-month {
  color: var(--color-text-subtle);
  opacity: var(--opacity-disabled);
}
.rr-datepicker-day-today {
  font-weight: var(--font-semibold);
  color: var(--color-primary);
}
.rr-datepicker-day-today::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
}
.rr-datepicker-day-weekend {
  color: var(--color-text-muted);
}
.rr-datepicker-day-disabled {
  color: var(--color-text-subtle);
  cursor: not-allowed;
  opacity: 0.4;
}
.rr-datepicker-day-disabled:hover {
  background: none;
  transform: none;
}
.rr-datepicker-day-selected {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: var(--font-semibold);
  box-shadow: var(--shadow-md);
}
.rr-datepicker-day-selected:hover {
  background: var(--color-primary-hover);
}
.rr-datepicker-day-range-start, .rr-datepicker-day-range-end {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: var(--font-semibold);
}
.rr-datepicker-day-range-start:hover, .rr-datepicker-day-range-end:hover {
  background: var(--color-primary-hover);
}
.rr-datepicker-day-range-start {
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}
.rr-datepicker-day-range-end {
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}
.rr-datepicker-day-range-middle {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: 0;
  font-weight: var(--font-medium);
  opacity: 0.7;
}
.rr-datepicker-day-range-middle:hover {
  background: var(--color-primary);
  opacity: 0.8;
}
.rr-datepicker-time {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-top: var(--border-1) solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .rr-datepicker-time {
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
  }
}
.rr-datepicker-time-select {
  flex: 1;
  padding: var(--space-1) var(--space-2);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-elevated);
  color: var(--color-text);
  font-size: var(--text-xs);
  transition: var(--transition-fast);
  min-height: 32px;
}
@media (min-width: 768px) {
  .rr-datepicker-time-select {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    min-height: 36px;
  }
}
.rr-datepicker-time-select:hover {
  border-color: var(--color-border-dark);
}
.rr-datepicker-time-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 20%, transparent);
}
@media (min-width: 768px) {
  .rr-datepicker-time-select:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
  }
}
.rr-datepicker-footer {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-top: var(--border-1) solid var(--color-border);
  justify-content: flex-end;
  background: var(--color-surface);
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .rr-datepicker-footer {
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
  }
}

@media (max-width: -1px) {
  .rr-datepicker-popup {
    max-height: 80vh;
  }
  .rr-datepicker-calendar {
    max-height: 50vh;
  }
  .rr-datepicker-day {
    min-height: 36px;
    font-size: var(--text-sm);
  }
  .rr-datepicker-time {
    flex-direction: column;
    gap: var(--space-2);
  }
  .rr-datepicker-footer {
    flex-direction: column;
  }
  .rr-datepicker-footer .rr-datepicker-footer-btn {
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 639px) {
  .rr-datepicker-day {
    min-height: 40px;
  }
  .rr-datepicker-day:hover:not(:disabled) {
    transform: none;
  }
  .rr-datepicker-nav, .rr-datepicker-year {
    min-height: 40px;
    min-width: 40px;
  }
}
[data-theme=dark] .rr-datepicker-popup {
  border-color: var(--color-border-dark);
  box-shadow: var(--shadow-2xl);
}
[data-theme=dark] .rr-datepicker-day.today::after {
  box-shadow: 0 0 0 1px var(--color-canvas);
}
[data-theme=dark] .rr-datepicker-time-select {
  background: var(--color-canvas);
}

.calendar {
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  background: var(--color-surface-elevated);
}
.calendar-sm {
  --calendar-day-height: var(--space-8);
  --calendar-font-size: var(--text-xs);
  --calendar-header-size: var(--text-sm);
}
.calendar-default {
  --calendar-day-height: var(--space-12);
  --calendar-font-size: var(--text-sm);
  --calendar-header-size: var(--text-base);
}
.calendar-lg {
  --calendar-day-height: var(--space-16);
  --calendar-font-size: var(--text-base);
  --calendar-header-size: var(--text-lg);
}
.calendar-compact {
  --calendar-spacing: var(--space-1);
  --calendar-padding: var(--space-2);
}
.calendar-dense {
  --calendar-spacing: var(--space-2);
  --calendar-padding: var(--space-3);
}
.calendar-normal {
  --calendar-spacing: var(--space-3);
  --calendar-padding: var(--space-4);
}
.calendar-spacious {
  --calendar-spacing: var(--space-4);
  --calendar-padding: var(--space-6);
}
.calendar-week-view .calendar-day {
  min-height: calc(var(--calendar-day-height) * 2);
}
.calendar-header {
  padding: var(--calendar-padding);
  border-bottom: var(--border-1) solid var(--color-border);
  background: var(--glass-bg-light);
  backdrop-filter: blur(8px);
}
.calendar-title {
  font-size: var(--calendar-header-size);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0;
  text-align: center;
}
@media (max-width: 639px) {
  .calendar-title {
    font-size: var(--text-sm);
  }
}
.calendar-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--glass-bg-medium);
  border-bottom: var(--border-1) solid var(--color-border);
}
.calendar-weekday {
  text-align: center;
  padding: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
@media (max-width: 639px) {
  .calendar-weekday {
    padding: var(--space-2);
    font-size: var(--text-2xs);
  }
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  flex: 1;
  grid-auto-rows: minmax(var(--calendar-day-height), auto);
}

.calendar-day {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: var(--calendar-day-height);
  border-right: var(--border-1) solid var(--color-border);
  border-bottom: var(--border-1) solid var(--color-border);
  background: var(--color-canvas);
  transition: all var(--duration-fast) var(--ease-out);
  cursor: pointer;
  overflow: hidden;
}
.calendar-day:hover {
  background: color-mix(in srgb, var(--state-hover-bg) 60%, var(--color-surface));
}
.calendar-day:active {
  transform: translateY(0);
}
.calendar-day-today {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}
.calendar-day-today .calendar-day-number {
  color: var(--color-primary);
  font-weight: var(--font-bold);
}
.calendar-day-selected {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-lg);
}
.calendar-day-selected .calendar-day-number {
  color: var(--color-text-inverse);
  font-weight: var(--font-bold);
}
.calendar-day-selected:hover {
  background: color-mix(in srgb, var(--color-primary) 80%, var(--color-text));
}
.calendar-day-other-month {
  background: var(--color-surface);
  opacity: 0.6;
}
.calendar-day-other-month .calendar-day-number {
  color: var(--color-text-subtle);
}
.calendar-day-weekend {
  background: var(--color-surface);
}
.calendar-day-weekend .calendar-day-number {
  color: var(--color-text-muted);
}
.calendar-day-has-events .calendar-day-number::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
}
.calendar-day:nth-child(7n) {
  border-right: none;
}
.calendar-day:nth-last-child(-n+7) {
  border-bottom: none;
}

.calendar-day-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--calendar-spacing);
  gap: var(--space-1);
}

.calendar-day-number {
  position: relative;
  font-size: var(--calendar-font-size);
  font-weight: var(--font-medium);
  color: var(--color-text);
  text-align: center;
  min-height: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 639px) {
  .calendar-day-number {
    font-size: var(--text-xs);
    min-height: var(--space-4);
  }
}

.calendar-events {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  margin-top: var(--space-1);
}

.calendar-event {
  display: flex;
  align-items: center;
  padding: 1px var(--space-1);
  font-size: var(--text-2xs);
  font-weight: var(--font-medium);
  border-radius: var(--radius-sm);
  background: var(--color-primary-light);
  color: var(--color-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.calendar-event:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.calendar-event-meeting {
  background: color-mix(in srgb, var(--color-info) 10%, var(--color-surface));
  color: var(--color-info);
}
.calendar-event-meeting:hover {
  background: var(--color-info);
  color: var(--color-text-inverse);
}
.calendar-event-vacation {
  background: color-mix(in srgb, var(--color-success) 10%, var(--color-surface));
  color: var(--color-success);
}
.calendar-event-vacation:hover {
  background: var(--color-success);
  color: var(--color-text-inverse);
}
.calendar-event-holiday {
  background: color-mix(in srgb, var(--color-warning) 10%, var(--color-surface));
  color: var(--color-warning);
}
.calendar-event-holiday:hover {
  background: var(--color-warning);
  color: var(--color-text-inverse);
}
.calendar-event-urgent {
  background: color-mix(in srgb, var(--color-error) 10%, var(--color-surface));
  color: var(--color-error);
}
.calendar-event-urgent:hover {
  background: var(--color-error);
  color: var(--color-text-inverse);
}
.calendar-event-allday {
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: var(--font-semibold);
}
.calendar-event-allday:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
@media (max-width: 639px) {
  .calendar-event {
    padding: 1px;
    font-size: var(--text-2xs);
  }
}

.calendar-more-events {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  text-align: center;
  padding: 1px var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.calendar-more-events:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}
@media (max-width: 639px) {
  .calendar-more-events {
    font-size: var(--text-2xs);
  }
}

@media (max-width: 1023px) {
  .calendar {
    --calendar-day-height: var(--space-10);
  }
  .calendar-lg {
    --calendar-day-height: var(--space-12);
  }
}
@media (max-width: 767px) {
  .calendar {
    --calendar-day-height: var(--space-8);
    border-radius: var(--radius-lg);
  }
  .calendar-header {
    padding: var(--space-3);
  }
  .calendar-header .calendar-title {
    font-size: var(--text-sm);
  }
  .calendar-events {
    gap: var(--space-1);
  }
  .calendar-event {
    font-size: var(--text-2xs);
    padding: 0 2px;
  }
}
@media (max-width: 639px) {
  .calendar {
    --calendar-day-height: var(--space-6);
    border-radius: var(--radius-md);
  }
  .calendar-weekday {
    padding: var(--space-1);
    font-size: var(--text-2xs);
  }
  .calendar-day-content {
    padding: var(--space-1);
  }
  .calendar-day-number {
    min-height: var(--space-3);
    font-size: 11px;
  }
  .calendar-event {
    font-size: 9px;
    padding: 0 1px;
    border-radius: 2px;
  }
  .calendar-more-events {
    font-size: 9px;
  }
}
[data-theme=dark] .calendar {
  background: var(--color-surface-elevated);
  border-color: var(--color-border);
}
[data-theme=dark] .calendar-header {
  background: var(--glass-bg-medium);
  border-color: var(--color-border);
}
[data-theme=dark] .calendar-weekdays {
  background: var(--glass-bg-heavy);
}
[data-theme=dark] .calendar-day {
  background: var(--color-canvas);
  border-color: var(--color-border);
}
[data-theme=dark] .calendar-day:hover {
  background: color-mix(in srgb, var(--state-hover-bg) 40%, var(--color-surface));
}
[data-theme=dark] .calendar-day-other-month {
  background: var(--color-surface);
  opacity: 0.5;
}
[data-theme=dark] .calendar-day-weekend {
  background: var(--color-surface);
}

[data-high-contrast=true] .calendar {
  border: 2px solid var(--color-text);
}
[data-high-contrast=true] .calendar .calendar-day {
  border-color: var(--color-text);
}
[data-high-contrast=true] .calendar .calendar-day-selected {
  background: var(--color-text);
  color: var(--color-canvas);
}
[data-high-contrast=true] .calendar .calendar-day-today {
  border: 2px solid var(--color-primary);
}
[data-high-contrast=true] .calendar .calendar-event {
  border: 1px solid var(--color-text);
}
.calendar .calendar-day:focus {
  outline: none;
  outline-offset: -2px;
  z-index: calc(var(--z-base) + 1);
}
.calendar .calendar-event:focus {
  outline: none;
  outline-offset: 1px;
  z-index: calc(var(--z-base) + 2);
}
@media (prefers-reduced-motion: reduce) {
  .calendar .calendar-day,
  .calendar .calendar-event,
  .calendar .calendar-more-events {
    transition: none;
    transform: none;
  }
  .calendar .calendar-day:hover,
  .calendar .calendar-event:hover {
    transform: none;
  }
}

@media print {
  .calendar {
    box-shadow: none;
    border: var(--border-1) solid var(--color-text);
    background: var(--color-text-inverse);
  }
  .calendar-header {
    background: var(--color-surface);
    border-bottom: var(--border-1) solid var(--color-text);
  }
  .calendar-day {
    background: var(--color-text-inverse);
    border-color: var(--color-text);
  }
  .calendar-day:hover {
    background: var(--color-text-inverse);
    transform: none;
  }
  .calendar-day-selected {
    background: var(--color-surface-elevated);
    color: var(--color-text);
  }
  .calendar-day-today {
    background: var(--color-surface);
  }
  .calendar-event {
    background: var(--color-surface-elevated) !important;
    color: var(--color-text) !important;
  }
  .calendar-event:hover {
    transform: none;
  }
}
.notification-dot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.notification-dot::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--space-2);
  height: var(--space-2);
  background: var(--color-error);
  border: var(--space-0-5) solid var(--color-surface-elevated);
  border-radius: 50%;
  transform: translate(50%, -50%);
}
.notification-dot-large::after {
  width: var(--space-3);
  height: var(--space-3);
  transform: translate(50%, -50%);
}
.notification-dot-success::after {
  background: var(--color-success);
}
.notification-dot-warning::after {
  background: var(--color-warning);
}

.portal-root {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: var(--z-base, 1000);
}

.portal {
  position: fixed;
  pointer-events: auto;
}
.portal[data-z-index] {
  z-index: var(--z-popup);
}

.portal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--overlay-heavy);
  backdrop-filter: blur(var(--backdrop-blur));
  pointer-events: auto;
  z-index: var(--z-modal-backdrop);
  transition: opacity var(--duration-normal) var(--ease-out);
}
.portal-backdrop[data-backdrop-level] {
  --level: attr(data-backdrop-level);
  z-index: calc(var(--z-modal-backdrop) + var(--level, 0) * 100);
}
.modal .portal-backdrop {
  z-index: calc(var(--z-modal-backdrop) - 10);
}
.portal-backdrop-themed {
  background: var(--overlay-heavy);
  backdrop-filter: blur(var(--backdrop-blur));
}
[data-theme=dark] .portal-backdrop-themed {
  background: var(--overlay-heavy);
  backdrop-filter: blur(var(--backdrop-blur));
}
[data-theme=light] .portal-backdrop-themed {
  background: var(--overlay-light);
  backdrop-filter: blur(var(--backdrop-blur));
}
@media (prefers-contrast: high) {
  .portal-backdrop-themed {
    background: rgba(0, 0, 0, var(--backdrop-opacity));
    backdrop-filter: none;
  }
}
.portal-backdrop-glass {
  transition: all var(--duration-normal) var(--ease-out);
}
.portal-backdrop-glass:hover {
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
}
.portal-backdrop-solid {
  backdrop-filter: none;
  background: var(--color-surface-elevated);
}

.portal[data-portal-type=dropdown] .portal-content {
  min-width: 100%;
  width: max-content;
  background: var(--color-surface-elevated);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  backdrop-filter: blur(var(--blur-md));
}
.portal[data-portal-type=tooltip] {
  pointer-events: none;
}
.portal[data-portal-type=tooltip] .portal-content {
  pointer-events: auto;
}
.portal[data-portal-type=modal] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.portal[data-portal-type=modal] .portal-content {
  pointer-events: auto;
}

.datepicker-portal .rr-datepicker-popup {
  background: var(--color-surface-elevated);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  backdrop-filter: blur(var(--blur-md));
}

.choice-portal,
.dropdown-portal {
  width: 100%;
  min-width: var(--portal-min-width, 200px);
}

.portal[data-position*=top] {
  transform-origin: center bottom;
}
.portal[data-position*=bottom] {
  transform-origin: center top;
}
.portal[data-position*=left] {
  transform-origin: right center;
}
.portal[data-position*=right] {
  transform-origin: left center;
}

.portal-enter {
  animation: fadeIn 200ms ease-out;
}
.portal-enter-scale {
  animation: scaleIn 200ms ease-out;
}
.portal-enter-slide {
  animation: slideInDown 150ms ease-out;
}

.portal-exit {
  animation: fadeOut 150ms ease-in;
}
.portal-exit-scale {
  animation: scaleOut 150ms ease-in;
}
.portal-exit-slide {
  animation: fadeOutDown 100ms ease-in;
}

@media (prefers-reduced-motion: reduce) {
  .portal-enter,
  .portal-exit {
    animation: none;
  }
  .portal-backdrop {
    transition: none;
  }
}
[style*="--content-max-width"] {
  max-width: var(--content-max-width);
}

.main-content.mobile-sidebar {
  margin-left: 0;
}

@media (max-width: 767px) {
  .app-shell .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 280px;
    z-index: var(--z-sidebar);
    background: var(--color-surface-elevated);
    border-right: var(--border-1) solid var(--color-border);
    transform: translateX(-100%);
    transition: transform var(--duration-normal) var(--ease-out);
  }
  .app-shell .sidebar:not(.app-sidebar-sidebar-closed) {
    transform: translateX(0);
  }
  .app-shell .sidebar-mobile-hidden, .app-shell .sidebar-sidebar-closed {
    transform: translateX(-100%);
  }
  .app-shell .sidebar::before {
    content: "";
    position: fixed;
    top: 0;
    left: 280px;
    right: 0;
    bottom: 0;
    background: var(--overlay-light);
    z-index: -1;
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-out);
  }
  .app-shell .sidebar:not(.sidebar-closed)::before {
    opacity: 1;
  }
  .app-shell .main-content {
    margin-left: 0;
    width: 100%;
  }
  .app-shell .main-content-mobile-sidebar {
    margin-left: 0;
  }
  .app-shell .app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: var(--z-header);
    background: var(--color-surface-elevated);
    backdrop-filter: blur(8px);
    padding-left: var(--space-3);
    padding-right: var(--space-3);
    height: var(--header-height);
  }
  .app-shell .app-header .d-flex.items-center.gap-3.flex-1.min-w-0 {
    overflow: hidden;
    min-width: 0;
  }
}
@media (max-width: 767px) and (max-width: -1px) {
  .app-shell .app-header .d-flex.items-center.gap-3.flex-1.min-w-0 .text-sm.font-semibold.text-primary {
    display: none;
  }
}
@media (max-width: 767px) {
  .app-shell .app-header .d-flex.items-center.gap-1.shrink-0 {
    flex-shrink: 0;
    min-width: auto;
  }
}
@media (max-width: 767px) and (max-width: -1px) {
  .app-shell .app-header .d-flex.items-center.gap-1.shrink-0 {
    gap: var(--space-1);
  }
}
@media (max-width: 767px) {
  .app-shell .main-content {
    padding-top: var(--header-height);
  }
}
@media (max-width: -1px) {
  .app-shell .app-header .d-flex.items-center.gap-2.shrink-0 {
    display: none;
  }
  .app-shell .app-header .d-flex.items-center.gap-1.shrink-0 {
    gap: var(--space-1);
  }
  .app-shell .app-header .d-flex.items-center.gap-1.shrink-0 button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-weight: var(--font-medium);
    text-align: center;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-out);
    position: relative;
    outline: none;
    user-select: none;
    font-size: var(--text-sm);
    line-height: 1.4;
    text-decoration: none;
    min-height: calc(var(--base-unit) * var(--φ) * var(--φ));
    min-width: calc(var(--base-unit) * var(--φ) * var(--φ));
    padding: var(--space-2) var(--space-4);
    padding: var(--space-1);
    min-width: 32px;
    min-height: 32px;
  }
}
@media (max-width: -1px) and (min-width: 768px) {
  .app-shell .app-header .d-flex.items-center.gap-1.shrink-0 button {
    min-height: calc(var(--base-unit) * var(--φ) * 1.5);
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-3);
  }
}
@media (max-width: -1px) {
  .app-shell .app-header .d-flex.items-center.gap-1.shrink-0 button *, .app-shell .app-header .d-flex.items-center.gap-1.shrink-0 button i, .app-shell .app-header .d-flex.items-center.gap-1.shrink-0 button span {
    color: inherit;
  }
  .app-shell .app-header .d-flex.items-center.gap-1.shrink-0 button [class*=icon],
  .app-shell .app-header .d-flex.items-center.gap-1.shrink-0 button [class*=material],
  .app-shell .app-header .d-flex.items-center.gap-1.shrink-0 button [class*=fa],
  .app-shell .app-header .d-flex.items-center.gap-1.shrink-0 button [class*=feather],
  .app-shell .app-header .d-flex.items-center.gap-1.shrink-0 button .icon {
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
  }
  .app-shell .app-header .d-flex.items-center.gap-1.shrink-0 button span {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    line-height: 1.5;
  }
}
@media (max-width: -1px) and (hover: none) and (pointer: coarse) {
  .app-shell .app-header .d-flex.items-center.gap-1.shrink-0 button {
    min-height: var(--touch-target-lg);
    min-width: var(--touch-target-lg);
    font-size: var(--text-base);
    padding: var(--space-3) var(--space-4);
  }
  .app-shell .app-header .d-flex.items-center.gap-1.shrink-0 button:hover {
    transform: none;
  }
}
@media (max-width: -1px) {
  .app-shell .app-header .d-flex.items-center.gap-1.shrink-0 button:disabled, .app-shell .app-header .d-flex.items-center.gap-1.shrink-0 button[disabled] {
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
    pointer-events: none;
  }
  .app-shell .app-header .d-flex.items-center.gap-1.shrink-0 button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-focus);
    outline-offset: 2px;
  }
  .app-shell .app-header .header-right {
    gap: var(--space-0-5);
    flex-wrap: nowrap;
    overflow: visible;
    align-items: center;
  }
  .app-shell .app-header .header-right .theme-switcher,
  .app-shell .app-header .header-right .theme-toggle,
  .app-shell .app-header .header-right [data-component=theme-switcher] {
    display: none;
  }
  .app-shell .app-header .header-right .notification-count {
    display: none;
  }
  .app-shell .sidebar {
    width: 260px;
  }
  .app-shell .sidebar::before {
    left: 260px;
  }
}
.app-header {
  height: var(--header-height);
  z-index: var(--z-header);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
@media (max-width: 767px) {
  .app-header {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
}

.app-shell .dropdown-menu {
  min-width: 12rem;
  z-index: var(--z-popup);
}

.app-shell .section-shadow-2xl, .app-shell .section-shadow-xl, .app-shell .section-shadow-lg {
  position: relative;
  z-index: var(--z-base);
}
.app-shell .section-shadow-2xl-glass-heavy, .app-shell .section-shadow-2xl-glass-medium, .app-shell .section-shadow-2xl-backdrop-blur-xl, .app-shell .section-shadow-2xl-backdrop-blur-lg, .app-shell .section-shadow-xl-glass-heavy, .app-shell .section-shadow-xl-glass-medium, .app-shell .section-shadow-xl-backdrop-blur-xl, .app-shell .section-shadow-xl-backdrop-blur-lg, .app-shell .section-shadow-lg-glass-heavy, .app-shell .section-shadow-lg-glass-medium, .app-shell .section-shadow-lg-backdrop-blur-xl, .app-shell .section-shadow-lg-backdrop-blur-lg {
  z-index: calc(var(--z-base) - 1);
}
.app-shell .main-content {
  position: relative;
  z-index: var(--z-base);
}

.app-shell-enhanced {
  background: linear-gradient(135deg, var(--color-canvas) 0%, var(--color-surface) 100%);
  overflow: hidden;
}

.quick-actions-floating {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.quick-actions-floating button {
  box-shadow: var(--shadow-xl);
  border-radius: var(--radius-full);
  width: var(--space-14);
  height: var(--space-14);
  transition: all var(--duration-normal) var(--ease-out);
}
.quick-actions-floating button {
  transition: all var(--duration-fast) var(--ease-out);
}
.quick-actions-floating button:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--shadow-2xl);
}
.quick-actions-floating button:active {
  transform: translateY(0) scale(0.95);
  box-shadow: var(--shadow-xl);
}
@media (max-width: 767px) {
  .quick-actions-floating button {
    width: 3rem;
    height: 3rem;
  }
}
@media (max-width: 639px) {
  .quick-actions-floating button {
    width: 2.75rem;
    height: 2.75rem;
  }
}

.app-shell .main-content,
.app-shell .sidebar-content {
  will-change: scroll-position;
  transform: translateZ(0);
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  .app-shell .main-content,
  .app-shell .sidebar-content {
    scroll-behavior: auto;
  }
}
.app-shell .virtualized-list {
  height: 100%;
  overflow: auto;
}

.shell-focus-highlight:focus-within {
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

.app-shell .skip-link {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-max);
  transform: translateY(-100%);
  transition: transform var(--duration-fast);
}
.app-shell .skip-link:focus {
  transform: translateY(0);
}

.app-shell [role=banner],
.app-shell [role=navigation],
.app-shell [role=main],
.app-shell [role=complementary] {
  outline: none;
}
.app-shell [role=banner]:focus,
.app-shell [role=navigation]:focus,
.app-shell [role=main]:focus,
.app-shell [role=complementary]:focus {
  outline: none;
  outline-offset: -2px;
}

@media (pointer: coarse) {
  .app-shell .nav-item,
  .app-shell .quick-actions-floating button {
    min-height: 48px;
    min-width: 48px;
  }
}
[data-high-contrast=true] .app-shell .quick-actions-floating button {
  border: 2px solid var(--color-text);
}

[data-voice-control=true] .app-shell .button,
[data-voice-control=true] .app-shell .nav-item {
  position: relative;
}
[data-voice-control=true] .app-shell .button::after,
[data-voice-control=true] .app-shell .nav-item::after {
  content: "";
  position: absolute;
  inset: -8px;
  pointer-events: none;
  border: 2px dashed transparent;
}
[data-voice-control=true] .app-shell .button:focus::after,
[data-voice-control=true] .app-shell .nav-item:focus::after {
  border-color: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
  .quick-actions-floating button {
    transition: none;
    animation: none;
    transform: none;
  }
}
[data-theme=light] .app-shell .quick-actions-floating button {
  box-shadow: var(--shadow-sm);
  background: var(--color-surface-elevated);
  border: var(--border-1) solid var(--color-border);
}

[data-theme=dark] .app-shell-enhanced {
  background: linear-gradient(135deg, var(--color-canvas) 0%, color-mix(in srgb, var(--color-canvas) 90%, var(--color-primary) 10%) 100%);
}
[data-theme=dark] .app-shell .quick-actions-floating button {
  box-shadow: var(--shadow-lg);
  background: var(--color-surface-elevated);
  border: var(--border-1) solid var(--color-border);
}

.app-search-container {
  --app-search-width: clamp(16rem, 24vw, 26rem);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: var(--space-10);
  min-height: var(--space-10);
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  gap: 0;
  overflow: visible;
}
@media (max-width: 767px) {
  .app-search-container {
    --app-search-width: clamp(14rem, 50vw, 18rem);
  }
}
@media (max-width: 639px) {
  .app-search-container {
    --app-search-width: clamp(12rem, 80vw, 16rem);
  }
}
.app-search-container.collapsible .search-toggle-btn {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--duration-fast) var(--ease-out), visibility var(--duration-fast) var(--ease-out);
}
.app-search-container.collapsible .search-input-wrapper {
  width: 0;
  max-width: 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
  margin-left: 0;
  transition: max-width var(--duration-normal) var(--ease-out), opacity var(--duration-fast) var(--ease-out), visibility var(--duration-fast) var(--ease-out);
}
.app-search-container.collapsible .search-close-btn {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.app-search-container.collapsible.collapsed .search-toggle-btn {
  position: relative;
}
.app-search-container.collapsible.expanded .search-toggle-btn {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.app-search-container.collapsible.expanded .search-input-wrapper {
  width: var(--app-search-width);
  max-width: var(--app-search-width);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  margin-left: var(--space-2);
  overflow: visible;
}
.app-search-container.collapsible.expanded .search-close-btn {
  opacity: 0.7;
  pointer-events: auto;
}
.app-search-container.static {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
}
.app-search-container.static .search-input-wrapper {
  width: var(--app-search-width);
  max-width: var(--app-search-width);
  opacity: 1;
  pointer-events: auto;
  display: flex;
  margin-left: 0;
}

.search-input-wrapper {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  height: var(--space-10);
  flex: 0 0 auto;
  width: var(--app-search-width);
  max-width: var(--app-search-width);
  opacity: 1;
  overflow: visible;
  position: relative;
  transition: max-width var(--duration-normal) var(--ease-out), opacity var(--duration-fast) var(--ease-out), visibility var(--duration-fast) var(--ease-out);
}
.search-input-wrapper .app-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  min-height: var(--space-10);
  display: flex;
  align-items: stretch;
  overflow: visible;
}
.search-input-wrapper .app-search-input .autosuggest {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  align-items: stretch;
  min-height: inherit;
}
.search-input-wrapper .app-search-input .autosuggest-input {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  gap: 0;
  height: 100%;
  min-height: inherit;
  transition: all var(--duration-fast) var(--ease-out);
}
.search-input-wrapper .app-search-input .autosuggest-input > .relative {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  height: 100%;
}
.search-input-wrapper .app-search-input .input-group {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all var(--duration-fast) var(--ease-out);
}
.search-input-wrapper .app-search-input .input-group:hover {
  border-color: var(--color-border-hover);
  background: var(--color-surface-hover);
}
.search-input-wrapper .app-search-input .input-group:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-alpha-20);
  background: var(--color-surface-elevated);
}
.search-input-wrapper .app-search-input .input-group-icon,
.search-input-wrapper .app-search-input .input-group-icon-end {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-3);
  color: var(--color-text-muted);
  transition: color var(--duration-fast) var(--ease-out);
}
.search-input-wrapper .app-search-input .input-group:focus-within .input-group-icon,
.search-input-wrapper .app-search-input .input-group:focus-within .input-group-icon-end {
  color: var(--color-primary);
}
.search-input-wrapper .app-search-input .input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  border: none;
  background: transparent;
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--space-10);
  box-sizing: border-box;
  color: var(--color-text-primary);
}
.search-input-wrapper .app-search-input .input.input-with-start-icon {
  padding-left: calc(var(--space-6) + var(--space-4) + var(--space-2));
}
.search-input-wrapper .app-search-input .input.input-with-end-icon {
  padding-right: calc(var(--space-6) + var(--space-4) + var(--space-2));
}
.search-input-wrapper .app-search-input .autosuggest-trigger {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0;
  background: transparent;
  border: none;
}
.search-input-wrapper .app-search-input .autosuggest-trigger::placeholder {
  color: var(--color-text-muted);
  opacity: 0.7;
}
.search-input-wrapper .autosuggest-dropdown {
  z-index: var(--z-header-popup);
  right: 0;
  left: auto;
  min-width: 20rem;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: fadeInDown var(--duration-fast) var(--ease-out);
}
@media (max-width: 767px) {
  .search-input-wrapper .autosuggest-dropdown {
    min-width: 18rem;
  }
}
@media (max-width: 639px) {
  .search-input-wrapper .autosuggest-dropdown {
    min-width: 15rem;
  }
}
.search-input-wrapper .search-close-btn {
  flex-shrink: 0;
  height: var(--space-10);
  width: var(--space-10);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.search-input-wrapper .search-close-btn:hover {
  opacity: 1;
}

.search-toggle-btn {
  flex-shrink: 0;
  height: var(--space-10);
  width: var(--space-10);
  transition: all var(--duration-fast) var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-toggle-btn:hover {
  transform: scale(1.05);
}
.search-toggle-btn:active {
  transform: scale(0.95);
}

@media (pointer: coarse) {
  .search-toggle-btn,
  .search-close-btn {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
  }
}
@media (prefers-reduced-motion: reduce) {
  .app-search-container,
  .search-input-wrapper,
  .search-toggle-btn,
  .search-close-btn {
    transition: none;
    animation: none;
  }
}
.box-border {
  box-sizing: border-box;
}

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

.float-right {
  float: right;
}

.float-left {
  float: left;
}

.float-none {
  float: none;
}

.clear-left {
  clear: left;
}

.clear-right {
  clear: right;
}

.clear-both {
  clear: both;
}

.clear-none {
  clear: none;
}

.isolate {
  isolation: isolate;
}

.isolation-auto {
  isolation: auto;
}

.transition-none {
  transition-property: none;
}

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

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

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

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

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

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

.accent-auto {
  accent-color: auto;
}

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

.caret-transparent {
  caret-color: transparent;
}

.caret-current {
  caret-color: currentColor;
}

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

.will-change-auto {
  will-change: auto;
}

.will-change-scroll {
  will-change: scroll-position;
}

.will-change-contents {
  will-change: contents;
}

.will-change-transform {
  will-change: transform;
}

.contain-none {
  contain: none;
}

.contain-strict {
  contain: strict;
}

.contain-content {
  contain: content;
}

.contain-size {
  contain: size;
}

.contain-layout {
  contain: layout;
}

.contain-style {
  contain: style;
}

.contain-paint {
  contain: paint;
}

.content-none {
  content: none;
}

.forced-color-adjust-auto {
  forced-color-adjust: auto;
}

.forced-color-adjust-none {
  forced-color-adjust: none;
}

.box-decoration-slice {
  box-decoration-break: slice;
}

.box-decoration-clone {
  box-decoration-break: clone;
}

.d-block {
  display: block;
}

.d-inline-block {
  display: inline-block;
}

.d-inline {
  display: inline;
}

.d-flex {
  display: flex;
}

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

.d-grid {
  display: grid;
}

.d-inline-grid {
  display: inline-grid;
}

.d-table {
  display: table;
}

.d-inline-table {
  display: inline-table;
}

.d-table-caption {
  display: table-caption;
}

.d-table-cell {
  display: table-cell;
}

.d-table-column {
  display: table-column;
}

.d-table-column-group {
  display: table-column-group;
}

.d-table-footer-group {
  display: table-footer-group;
}

.d-table-header-group {
  display: table-header-group;
}

.d-table-row-group {
  display: table-row-group;
}

.d-table-row {
  display: table-row;
}

.d-flow-root {
  display: flow-root;
}

.d-contents {
  display: contents;
}

.d-list-item {
  display: list-item;
}

.hidden {
  display: none;
}

.overflow-auto {
  overflow: auto;
}

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

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

.overflow-hidden {
  overflow: hidden;
}

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

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

.overflow-visible {
  overflow: visible;
}

.overflow-x-visible {
  overflow-x: visible;
}

.overflow-y-visible {
  overflow-y: visible;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-x-scroll {
  overflow-x: scroll;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

.overflow-clip {
  overflow: clip;
}

.overflow-x-clip {
  overflow-x: clip;
}

.overflow-y-clip {
  overflow-y: clip;
}

.object-contain {
  object-fit: contain;
}

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

.object-fill {
  object-fit: fill;
}

.object-none {
  object-fit: none;
}

.object-scale-down {
  object-fit: scale-down;
}

.object-bottom {
  object-position: bottom;
}

.object-center {
  object-position: center;
}

.object-left {
  object-position: left;
}

.object-left-bottom {
  object-position: left bottom;
}

.object-left-top {
  object-position: left top;
}

.object-right {
  object-position: right;
}

.object-right-bottom {
  object-position: right bottom;
}

.object-right-top {
  object-position: right top;
}

.object-top {
  object-position: top;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.cursor-auto {
  cursor: auto;
}

.cursor-default {
  cursor: default;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-wait {
  cursor: wait;
}

.cursor-text {
  cursor: text;
}

.cursor-move {
  cursor: move;
}

.cursor-help {
  cursor: help;
}

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

.cursor-none {
  cursor: none;
}

.cursor-context-menu {
  cursor: context-menu;
}

.cursor-progress {
  cursor: progress;
}

.cursor-cell {
  cursor: cell;
}

.cursor-crosshair {
  cursor: crosshair;
}

.cursor-vertical-text {
  cursor: vertical-text;
}

.cursor-alias {
  cursor: alias;
}

.cursor-copy {
  cursor: copy;
}

.cursor-no-drop {
  cursor: no-drop;
}

.cursor-grab {
  cursor: grab;
}

.cursor-grabbing {
  cursor: grabbing;
}

.cursor-all-scroll {
  cursor: all-scroll;
}

.cursor-col-resize {
  cursor: col-resize;
}

.cursor-row-resize {
  cursor: row-resize;
}

.cursor-n-resize {
  cursor: n-resize;
}

.cursor-e-resize {
  cursor: e-resize;
}

.cursor-s-resize {
  cursor: s-resize;
}

.cursor-w-resize {
  cursor: w-resize;
}

.cursor-ne-resize {
  cursor: ne-resize;
}

.cursor-nw-resize {
  cursor: nw-resize;
}

.cursor-se-resize {
  cursor: se-resize;
}

.cursor-sw-resize {
  cursor: sw-resize;
}

.cursor-ew-resize {
  cursor: ew-resize;
}

.cursor-ns-resize {
  cursor: ns-resize;
}

.cursor-nesw-resize {
  cursor: nesw-resize;
}

.cursor-nwse-resize {
  cursor: nwse-resize;
}

.cursor-zoom-in {
  cursor: zoom-in;
}

.cursor-zoom-out {
  cursor: zoom-out;
}

.not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.table-auto {
  table-layout: auto;
}

.table-fixed {
  table-layout: fixed;
}

.select-none {
  user-select: none;
}

.select-text {
  user-select: text;
}

.select-all {
  user-select: all;
}

.select-auto {
  user-select: auto;
}

.appearance-none {
  appearance: none;
}

.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

@media (min-width: 640px) {
  .sm\:d-block {
    display: block;
  }
  .sm\:d-inline-block {
    display: inline-block;
  }
  .sm\:d-inline {
    display: inline;
  }
  .sm\:d-flex {
    display: flex;
  }
  .sm\:d-inline-flex {
    display: inline-flex;
  }
  .sm\:d-grid {
    display: grid;
  }
  .sm\:d-inline-grid {
    display: inline-grid;
  }
  .sm\:d-table {
    display: table;
  }
  .sm\:d-inline-table {
    display: inline-table;
  }
  .sm\:d-table-caption {
    display: table-caption;
  }
  .sm\:d-table-cell {
    display: table-cell;
  }
  .sm\:d-table-column {
    display: table-column;
  }
  .sm\:d-table-column-group {
    display: table-column-group;
  }
  .sm\:d-table-footer-group {
    display: table-footer-group;
  }
  .sm\:d-table-header-group {
    display: table-header-group;
  }
  .sm\:d-table-row-group {
    display: table-row-group;
  }
  .sm\:d-table-row {
    display: table-row;
  }
  .sm\:d-flow-root {
    display: flow-root;
  }
  .sm\:d-contents {
    display: contents;
  }
  .sm\:d-list-item {
    display: list-item;
  }
  .sm\:hidden {
    display: none;
  }
  .sm\:overflow-auto {
    overflow: auto;
  }
  .sm\:overflow-x-auto {
    overflow-x: auto;
  }
  .sm\:overflow-y-auto {
    overflow-y: auto;
  }
  .sm\:overflow-hidden {
    overflow: hidden;
  }
  .sm\:overflow-x-hidden {
    overflow-x: hidden;
  }
  .sm\:overflow-y-hidden {
    overflow-y: hidden;
  }
  .sm\:overflow-visible {
    overflow: visible;
  }
  .sm\:overflow-x-visible {
    overflow-x: visible;
  }
  .sm\:overflow-y-visible {
    overflow-y: visible;
  }
  .sm\:overflow-scroll {
    overflow: scroll;
  }
  .sm\:overflow-x-scroll {
    overflow-x: scroll;
  }
  .sm\:overflow-y-scroll {
    overflow-y: scroll;
  }
  .sm\:overflow-clip {
    overflow: clip;
  }
  .sm\:overflow-x-clip {
    overflow-x: clip;
  }
  .sm\:overflow-y-clip {
    overflow-y: clip;
  }
  .sm\:visible {
    visibility: visible;
  }
  .sm\:invisible {
    visibility: hidden;
  }
  .sm\:object-contain {
    object-fit: contain;
  }
  .sm\:object-cover {
    object-fit: cover;
  }
  .sm\:object-fill {
    object-fit: fill;
  }
  .sm\:object-none {
    object-fit: none;
  }
  .sm\:object-scale-down {
    object-fit: scale-down;
  }
  .sm\:object-bottom {
    object-position: bottom;
  }
  .sm\:object-center {
    object-position: center;
  }
  .sm\:object-left {
    object-position: left;
  }
  .sm\:object-left-bottom {
    object-position: left bottom;
  }
  .sm\:object-left-top {
    object-position: left top;
  }
  .sm\:object-right {
    object-position: right;
  }
  .sm\:object-right-bottom {
    object-position: right bottom;
  }
  .sm\:object-right-top {
    object-position: right top;
  }
  .sm\:object-top {
    object-position: top;
  }
  .sm\:cursor-auto {
    cursor: auto;
  }
  .sm\:cursor-default {
    cursor: default;
  }
  .sm\:cursor-pointer {
    cursor: pointer;
  }
  .sm\:cursor-wait {
    cursor: wait;
  }
  .sm\:cursor-text {
    cursor: text;
  }
  .sm\:cursor-move {
    cursor: move;
  }
  .sm\:cursor-not-allowed {
    cursor: not-allowed;
  }
  .sm\:cursor-grab {
    cursor: grab;
  }
  .sm\:cursor-grabbing {
    cursor: grabbing;
  }
  .sm\:select-none {
    user-select: none;
  }
  .sm\:select-text {
    user-select: text;
  }
  .sm\:select-all {
    user-select: all;
  }
  .sm\:select-auto {
    user-select: auto;
  }
  .sm\:table-auto {
    table-layout: auto;
  }
  .sm\:table-fixed {
    table-layout: fixed;
  }
}
@media (min-width: 768px) {
  .md\:d-block {
    display: block;
  }
  .md\:d-inline-block {
    display: inline-block;
  }
  .md\:d-inline {
    display: inline;
  }
  .md\:d-flex {
    display: flex;
  }
  .md\:d-inline-flex {
    display: inline-flex;
  }
  .md\:d-grid {
    display: grid;
  }
  .md\:d-inline-grid {
    display: inline-grid;
  }
  .md\:d-table {
    display: table;
  }
  .md\:d-inline-table {
    display: inline-table;
  }
  .md\:d-table-caption {
    display: table-caption;
  }
  .md\:d-table-cell {
    display: table-cell;
  }
  .md\:d-table-column {
    display: table-column;
  }
  .md\:d-table-column-group {
    display: table-column-group;
  }
  .md\:d-table-footer-group {
    display: table-footer-group;
  }
  .md\:d-table-header-group {
    display: table-header-group;
  }
  .md\:d-table-row-group {
    display: table-row-group;
  }
  .md\:d-table-row {
    display: table-row;
  }
  .md\:d-flow-root {
    display: flow-root;
  }
  .md\:d-contents {
    display: contents;
  }
  .md\:d-list-item {
    display: list-item;
  }
  .md\:hidden {
    display: none;
  }
  .md\:overflow-auto {
    overflow: auto;
  }
  .md\:overflow-x-auto {
    overflow-x: auto;
  }
  .md\:overflow-y-auto {
    overflow-y: auto;
  }
  .md\:overflow-hidden {
    overflow: hidden;
  }
  .md\:overflow-x-hidden {
    overflow-x: hidden;
  }
  .md\:overflow-y-hidden {
    overflow-y: hidden;
  }
  .md\:overflow-visible {
    overflow: visible;
  }
  .md\:overflow-x-visible {
    overflow-x: visible;
  }
  .md\:overflow-y-visible {
    overflow-y: visible;
  }
  .md\:overflow-scroll {
    overflow: scroll;
  }
  .md\:overflow-x-scroll {
    overflow-x: scroll;
  }
  .md\:overflow-y-scroll {
    overflow-y: scroll;
  }
  .md\:overflow-clip {
    overflow: clip;
  }
  .md\:overflow-x-clip {
    overflow-x: clip;
  }
  .md\:overflow-y-clip {
    overflow-y: clip;
  }
  .md\:visible {
    visibility: visible;
  }
  .md\:invisible {
    visibility: hidden;
  }
  .md\:object-contain {
    object-fit: contain;
  }
  .md\:object-cover {
    object-fit: cover;
  }
  .md\:object-fill {
    object-fit: fill;
  }
  .md\:object-none {
    object-fit: none;
  }
  .md\:object-scale-down {
    object-fit: scale-down;
  }
  .md\:object-bottom {
    object-position: bottom;
  }
  .md\:object-center {
    object-position: center;
  }
  .md\:object-left {
    object-position: left;
  }
  .md\:object-left-bottom {
    object-position: left bottom;
  }
  .md\:object-left-top {
    object-position: left top;
  }
  .md\:object-right {
    object-position: right;
  }
  .md\:object-right-bottom {
    object-position: right bottom;
  }
  .md\:object-right-top {
    object-position: right top;
  }
  .md\:object-top {
    object-position: top;
  }
  .md\:cursor-auto {
    cursor: auto;
  }
  .md\:cursor-default {
    cursor: default;
  }
  .md\:cursor-pointer {
    cursor: pointer;
  }
  .md\:cursor-wait {
    cursor: wait;
  }
  .md\:cursor-text {
    cursor: text;
  }
  .md\:cursor-move {
    cursor: move;
  }
  .md\:cursor-not-allowed {
    cursor: not-allowed;
  }
  .md\:cursor-grab {
    cursor: grab;
  }
  .md\:cursor-grabbing {
    cursor: grabbing;
  }
  .md\:select-none {
    user-select: none;
  }
  .md\:select-text {
    user-select: text;
  }
  .md\:select-all {
    user-select: all;
  }
  .md\:select-auto {
    user-select: auto;
  }
  .md\:table-auto {
    table-layout: auto;
  }
  .md\:table-fixed {
    table-layout: fixed;
  }
}
@media (min-width: 1024px) {
  .lg\:d-block {
    display: block;
  }
  .lg\:d-inline-block {
    display: inline-block;
  }
  .lg\:d-inline {
    display: inline;
  }
  .lg\:d-flex {
    display: flex;
  }
  .lg\:d-inline-flex {
    display: inline-flex;
  }
  .lg\:d-grid {
    display: grid;
  }
  .lg\:d-inline-grid {
    display: inline-grid;
  }
  .lg\:d-table {
    display: table;
  }
  .lg\:d-inline-table {
    display: inline-table;
  }
  .lg\:d-table-caption {
    display: table-caption;
  }
  .lg\:d-table-cell {
    display: table-cell;
  }
  .lg\:d-table-column {
    display: table-column;
  }
  .lg\:d-table-column-group {
    display: table-column-group;
  }
  .lg\:d-table-footer-group {
    display: table-footer-group;
  }
  .lg\:d-table-header-group {
    display: table-header-group;
  }
  .lg\:d-table-row-group {
    display: table-row-group;
  }
  .lg\:d-table-row {
    display: table-row;
  }
  .lg\:d-flow-root {
    display: flow-root;
  }
  .lg\:d-contents {
    display: contents;
  }
  .lg\:d-list-item {
    display: list-item;
  }
  .lg\:hidden {
    display: none;
  }
  .lg\:overflow-auto {
    overflow: auto;
  }
  .lg\:overflow-x-auto {
    overflow-x: auto;
  }
  .lg\:overflow-y-auto {
    overflow-y: auto;
  }
  .lg\:overflow-hidden {
    overflow: hidden;
  }
  .lg\:overflow-x-hidden {
    overflow-x: hidden;
  }
  .lg\:overflow-y-hidden {
    overflow-y: hidden;
  }
  .lg\:overflow-visible {
    overflow: visible;
  }
  .lg\:overflow-x-visible {
    overflow-x: visible;
  }
  .lg\:overflow-y-visible {
    overflow-y: visible;
  }
  .lg\:overflow-scroll {
    overflow: scroll;
  }
  .lg\:overflow-x-scroll {
    overflow-x: scroll;
  }
  .lg\:overflow-y-scroll {
    overflow-y: scroll;
  }
  .lg\:overflow-clip {
    overflow: clip;
  }
  .lg\:overflow-x-clip {
    overflow-x: clip;
  }
  .lg\:overflow-y-clip {
    overflow-y: clip;
  }
  .lg\:visible {
    visibility: visible;
  }
  .lg\:invisible {
    visibility: hidden;
  }
  .lg\:object-contain {
    object-fit: contain;
  }
  .lg\:object-cover {
    object-fit: cover;
  }
  .lg\:object-fill {
    object-fit: fill;
  }
  .lg\:object-none {
    object-fit: none;
  }
  .lg\:object-scale-down {
    object-fit: scale-down;
  }
  .lg\:object-bottom {
    object-position: bottom;
  }
  .lg\:object-center {
    object-position: center;
  }
  .lg\:object-left {
    object-position: left;
  }
  .lg\:object-left-bottom {
    object-position: left bottom;
  }
  .lg\:object-left-top {
    object-position: left top;
  }
  .lg\:object-right {
    object-position: right;
  }
  .lg\:object-right-bottom {
    object-position: right bottom;
  }
  .lg\:object-right-top {
    object-position: right top;
  }
  .lg\:object-top {
    object-position: top;
  }
  .lg\:cursor-auto {
    cursor: auto;
  }
  .lg\:cursor-default {
    cursor: default;
  }
  .lg\:cursor-pointer {
    cursor: pointer;
  }
  .lg\:cursor-wait {
    cursor: wait;
  }
  .lg\:cursor-text {
    cursor: text;
  }
  .lg\:cursor-move {
    cursor: move;
  }
  .lg\:cursor-not-allowed {
    cursor: not-allowed;
  }
  .lg\:cursor-grab {
    cursor: grab;
  }
  .lg\:cursor-grabbing {
    cursor: grabbing;
  }
  .lg\:select-none {
    user-select: none;
  }
  .lg\:select-text {
    user-select: text;
  }
  .lg\:select-all {
    user-select: all;
  }
  .lg\:select-auto {
    user-select: auto;
  }
  .lg\:table-auto {
    table-layout: auto;
  }
  .lg\:table-fixed {
    table-layout: fixed;
  }
}
@media (min-width: 1280px) {
  .xl\:d-block {
    display: block;
  }
  .xl\:d-inline-block {
    display: inline-block;
  }
  .xl\:d-inline {
    display: inline;
  }
  .xl\:d-flex {
    display: flex;
  }
  .xl\:d-inline-flex {
    display: inline-flex;
  }
  .xl\:d-grid {
    display: grid;
  }
  .xl\:d-inline-grid {
    display: inline-grid;
  }
  .xl\:d-table {
    display: table;
  }
  .xl\:d-inline-table {
    display: inline-table;
  }
  .xl\:d-table-caption {
    display: table-caption;
  }
  .xl\:d-table-cell {
    display: table-cell;
  }
  .xl\:d-table-column {
    display: table-column;
  }
  .xl\:d-table-column-group {
    display: table-column-group;
  }
  .xl\:d-table-footer-group {
    display: table-footer-group;
  }
  .xl\:d-table-header-group {
    display: table-header-group;
  }
  .xl\:d-table-row-group {
    display: table-row-group;
  }
  .xl\:d-table-row {
    display: table-row;
  }
  .xl\:d-flow-root {
    display: flow-root;
  }
  .xl\:d-contents {
    display: contents;
  }
  .xl\:d-list-item {
    display: list-item;
  }
  .xl\:hidden {
    display: none;
  }
  .xl\:overflow-auto {
    overflow: auto;
  }
  .xl\:overflow-x-auto {
    overflow-x: auto;
  }
  .xl\:overflow-y-auto {
    overflow-y: auto;
  }
  .xl\:overflow-hidden {
    overflow: hidden;
  }
  .xl\:overflow-x-hidden {
    overflow-x: hidden;
  }
  .xl\:overflow-y-hidden {
    overflow-y: hidden;
  }
  .xl\:overflow-visible {
    overflow: visible;
  }
  .xl\:overflow-x-visible {
    overflow-x: visible;
  }
  .xl\:overflow-y-visible {
    overflow-y: visible;
  }
  .xl\:overflow-scroll {
    overflow: scroll;
  }
  .xl\:overflow-x-scroll {
    overflow-x: scroll;
  }
  .xl\:overflow-y-scroll {
    overflow-y: scroll;
  }
  .xl\:overflow-clip {
    overflow: clip;
  }
  .xl\:overflow-x-clip {
    overflow-x: clip;
  }
  .xl\:overflow-y-clip {
    overflow-y: clip;
  }
  .xl\:visible {
    visibility: visible;
  }
  .xl\:invisible {
    visibility: hidden;
  }
  .xl\:object-contain {
    object-fit: contain;
  }
  .xl\:object-cover {
    object-fit: cover;
  }
  .xl\:object-fill {
    object-fit: fill;
  }
  .xl\:object-none {
    object-fit: none;
  }
  .xl\:object-scale-down {
    object-fit: scale-down;
  }
  .xl\:object-bottom {
    object-position: bottom;
  }
  .xl\:object-center {
    object-position: center;
  }
  .xl\:object-left {
    object-position: left;
  }
  .xl\:object-left-bottom {
    object-position: left bottom;
  }
  .xl\:object-left-top {
    object-position: left top;
  }
  .xl\:object-right {
    object-position: right;
  }
  .xl\:object-right-bottom {
    object-position: right bottom;
  }
  .xl\:object-right-top {
    object-position: right top;
  }
  .xl\:object-top {
    object-position: top;
  }
  .xl\:cursor-auto {
    cursor: auto;
  }
  .xl\:cursor-default {
    cursor: default;
  }
  .xl\:cursor-pointer {
    cursor: pointer;
  }
  .xl\:cursor-wait {
    cursor: wait;
  }
  .xl\:cursor-text {
    cursor: text;
  }
  .xl\:cursor-move {
    cursor: move;
  }
  .xl\:cursor-not-allowed {
    cursor: not-allowed;
  }
  .xl\:cursor-grab {
    cursor: grab;
  }
  .xl\:cursor-grabbing {
    cursor: grabbing;
  }
  .xl\:select-none {
    user-select: none;
  }
  .xl\:select-text {
    user-select: text;
  }
  .xl\:select-all {
    user-select: all;
  }
  .xl\:select-auto {
    user-select: auto;
  }
  .xl\:table-auto {
    table-layout: auto;
  }
  .xl\:table-fixed {
    table-layout: fixed;
  }
}
.w-0 {
  width: 0;
}

.w-px {
  width: 1px;
}

.w-0-5 {
  width: var(--space-0-5);
}

.w-1 {
  width: var(--space-1);
}

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

.w-3 {
  width: var(--space-3);
}

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

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

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

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

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

.w-9 {
  width: var(--space-9);
}

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

.w-11 {
  width: var(--space-11);
}

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

.w-14 {
  width: var(--space-14);
}

.w-15 {
  width: var(--space-15);
}

.w-16 {
  width: var(--space-16);
}

.w-18 {
  width: var(--space-18);
}

.w-20 {
  width: var(--space-20);
}

.w-24 {
  width: var(--space-24);
}

.w-28 {
  width: var(--space-28);
}

.w-32 {
  width: var(--space-32);
}

.w-40 {
  width: var(--space-40);
}

.w-48 {
  width: var(--space-48);
}

.w-56 {
  width: var(--space-56);
}

.w-64 {
  width: var(--space-64);
}

.w-96 {
  width: var(--space-96);
}

.w-120 {
  width: var(--space-120);
}

.w-1\/2 {
  width: 50%;
}

.w-1\/3 {
  width: 33.333333%;
}

.w-2\/3 {
  width: 66.666667%;
}

.w-1\/4 {
  width: 25%;
}

.w-3\/4 {
  width: 75%;
}

.w-1\/5 {
  width: 20%;
}

.w-2\/5 {
  width: 40%;
}

.w-3\/5 {
  width: 60%;
}

.w-4\/5 {
  width: 80%;
}

.w-25 {
  width: 25%;
}

.w-50 {
  width: 50%;
}

.w-75 {
  width: 75%;
}

.w-100 {
  width: 100%;
}

.w-10 {
  width: 10%;
}

.w-20 {
  width: 20%;
}

.w-30 {
  width: 30%;
}

.w-40 {
  width: 40%;
}

.w-60 {
  width: 60%;
}

.w-70 {
  width: 70%;
}

.w-80 {
  width: 80%;
}

.w-90 {
  width: 90%;
}

.h-0 {
  height: 0;
}

.h-px {
  height: 1px;
}

.h-0-5 {
  height: var(--space-0-5);
}

.h-1 {
  height: var(--space-1);
}

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

.h-3 {
  height: var(--space-3);
}

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

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

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

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

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

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

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

.h-11 {
  height: var(--space-11);
}

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

.h-14 {
  height: var(--space-14);
}

.h-15 {
  height: var(--space-15);
}

.h-16 {
  height: var(--space-16);
}

.h-18 {
  height: var(--space-18);
}

.h-20 {
  height: var(--space-20);
}

.h-24 {
  height: var(--space-24);
}

.h-28 {
  height: var(--space-28);
}

.h-32 {
  height: var(--space-32);
}

.h-40 {
  height: var(--space-40);
}

.h-48 {
  height: var(--space-48);
}

.h-56 {
  height: var(--space-56);
}

.h-64 {
  height: var(--space-64);
}

.h-96 {
  height: var(--space-96);
}

.h-120 {
  height: var(--space-120);
}

select.h-8,
.select.h-8,
.select-field.h-8 {
  height: auto;
  min-height: var(--space-10);
}

select.min-h-10,
.select.min-h-10,
.select-field.min-h-10,
.form-select.min-h-10 {
  min-height: var(--space-12);
  line-height: 1.5;
}

.h-25 {
  height: 25%;
}

.h-50 {
  height: 50%;
}

.h-75 {
  height: 75%;
}

.h-100 {
  height: 100%;
}

.h-full {
  height: 100%;
}

.h-screen {
  height: 100vh;
}

.h-min {
  height: min-content;
}

.h-max {
  height: max-content;
}

.h-fit {
  height: fit-content;
}

.w-full {
  width: 100%;
}

.w-auto {
  width: auto;
}

.h-full {
  height: 100%;
}

.h-auto {
  height: auto;
}

.w-screen {
  width: 100vw;
}

.h-screen {
  height: 100vh;
}

.size-auto {
  width: auto;
  height: auto;
}

.min-w-0 {
  min-width: 0;
}

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

.min-w-min {
  min-width: min-content;
}

.min-w-max {
  min-width: max-content;
}

.min-w-fit {
  min-width: fit-content;
}

.min-w-64 {
  min-width: 16rem;
}

.min-w-200 {
  min-width: 12.5rem;
}

.min-w-0 {
  min-width: 0;
}

.min-w-4 {
  min-width: var(--space-4);
}

.min-w-8 {
  min-width: var(--space-8);
}

.min-w-10 {
  min-width: var(--space-10);
}

.min-w-11 {
  min-width: var(--space-11);
}

.min-w-12 {
  min-width: var(--space-12);
}

.min-w-16 {
  min-width: var(--space-16);
}

.min-w-20 {
  min-width: var(--space-20);
}

.min-w-24 {
  min-width: var(--space-24);
}

.min-w-32 {
  min-width: var(--space-32);
}

.min-w-48 {
  min-width: var(--space-48);
}

.min-w-64 {
  min-width: var(--space-64);
}

.min-h-0 {
  min-height: 0;
}

.min-h-4 {
  min-height: var(--space-4);
}

.min-h-8 {
  min-height: var(--space-8);
}

.min-h-10 {
  min-height: var(--space-10);
}

.min-h-11 {
  min-height: var(--space-11);
}

.min-h-12 {
  min-height: var(--space-12);
}

.min-h-16 {
  min-height: var(--space-16);
}

.min-h-20 {
  min-height: var(--space-20);
}

.min-h-24 {
  min-height: var(--space-24);
}

.min-h-32 {
  min-height: var(--space-32);
}

.min-h-48 {
  min-height: var(--space-48);
}

.min-h-64 {
  min-height: var(--space-64);
}

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

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

.max-w-screen {
  max-width: 100vh;
}

.max-w-min {
  max-width: min-content;
}

.max-w-max {
  max-width: max-content;
}

.max-w-fit {
  max-width: fit-content;
}

.max-w-96 {
  max-width: 24rem;
}

.max-w-xs {
  max-width: 20rem;
}

.max-w-sm {
  max-width: 24rem;
}

.max-w-md {
  max-width: 28rem;
}

.max-w-lg {
  max-width: 32rem;
}

.max-w-xl {
  max-width: 36rem;
}

.max-w-2xl {
  max-width: 42rem;
}

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

.max-w-4xl {
  max-width: 56rem;
}

.max-w-5xl {
  max-width: 64rem;
}

.max-w-6xl {
  max-width: 72rem;
}

.max-w-7xl {
  max-width: 80rem;
}

.max-w-screen {
  max-width: 100vw;
}

.min-h-0 {
  min-height: 0;
}

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

.min-h-min {
  min-height: min-content;
}

.min-h-max {
  min-height: max-content;
}

.min-h-fit {
  min-height: fit-content;
}

.min-h-64 {
  min-height: 16rem;
}

.min-h-200 {
  min-height: 12.5rem;
}

.max-h-none {
  max-height: none;
}

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

.max-h-screen {
  max-height: 100vh;
}

.max-h-min {
  max-height: min-content;
}

.max-h-max {
  max-height: max-content;
}

.max-h-fit {
  max-height: fit-content;
}

.max-h-96 {
  max-height: 24rem;
}

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

.max-h-screen {
  max-height: 100vh;
}

.square-4 {
  width: 1rem;
  height: 1rem;
}

.square-6 {
  width: 1.5rem;
  height: 1.5rem;
}

.square-8 {
  width: 2rem;
  height: 2rem;
}

.square-10 {
  width: 2.5rem;
  height: 2.5rem;
}

.square-12 {
  width: 3rem;
  height: 3rem;
}

.square-16 {
  width: 4rem;
  height: 4rem;
}

.square-20 {
  width: 5rem;
  height: 5rem;
}

@media (min-width: 640px) {
  .sm\:w-0 {
    width: 0;
  }
  .sm\:w-4 {
    width: var(--space-4);
  }
  .sm\:w-8 {
    width: var(--space-8);
  }
  .sm\:w-12 {
    width: var(--space-12);
  }
  .sm\:w-16 {
    width: var(--space-16);
  }
  .sm\:w-24 {
    width: var(--space-24);
  }
  .sm\:w-32 {
    width: var(--space-32);
  }
  .sm\:w-48 {
    width: var(--space-48);
  }
  .sm\:w-64 {
    width: var(--space-64);
  }
  .sm\:w-auto {
    width: auto;
  }
  .sm\:w-full {
    width: 100%;
  }
  .sm\:w-25 {
    width: 25%;
  }
  .sm\:w-50 {
    width: 50%;
  }
  .sm\:w-75 {
    width: 75%;
  }
  .sm\:w-100 {
    width: 100%;
  }
  .sm\:h-0 {
    height: 0;
  }
  .sm\:h-4 {
    height: var(--space-4);
  }
  .sm\:h-8 {
    height: var(--space-8);
  }
  .sm\:h-12 {
    height: var(--space-12);
  }
  .sm\:h-16 {
    height: var(--space-16);
  }
  .sm\:h-24 {
    height: var(--space-24);
  }
  .sm\:h-32 {
    height: var(--space-32);
  }
  .sm\:h-48 {
    height: var(--space-48);
  }
  .sm\:h-auto {
    height: auto;
  }
  .sm\:h-full {
    height: 100%;
  }
  .sm\:h-screen {
    height: 100vh;
  }
  .sm\:max-w-none {
    max-width: none;
  }
  .sm\:max-w-full {
    max-width: 100%;
  }
  .sm\:min-h-screen {
    min-height: 100vh;
  }
  .sm\:max-h-screen {
    max-height: 100vh;
  }
  .sm\:max-w-xs {
    max-width: 20rem;
  }
  .sm\:max-w-sm {
    max-width: 24rem;
  }
  .sm\:max-w-md {
    max-width: 28rem;
  }
  .sm\:max-w-lg {
    max-width: 32rem;
  }
  .sm\:max-w-xl {
    max-width: 36rem;
  }
  .sm\:max-w-2xl {
    max-width: 42rem;
  }
  .sm\:max-w-3xl {
    max-width: 48rem;
  }
}
@media (min-width: 768px) {
  .md\:w-0 {
    width: 0;
  }
  .md\:w-4 {
    width: var(--space-4);
  }
  .md\:w-8 {
    width: var(--space-8);
  }
  .md\:w-12 {
    width: var(--space-12);
  }
  .md\:w-16 {
    width: var(--space-16);
  }
  .md\:w-24 {
    width: var(--space-24);
  }
  .md\:w-32 {
    width: var(--space-32);
  }
  .md\:w-48 {
    width: var(--space-48);
  }
  .md\:w-64 {
    width: var(--space-64);
  }
  .md\:w-auto {
    width: auto;
  }
  .md\:w-full {
    width: 100%;
  }
  .md\:w-25 {
    width: 25%;
  }
  .md\:w-50 {
    width: 50%;
  }
  .md\:w-75 {
    width: 75%;
  }
  .md\:w-100 {
    width: 100%;
  }
  .md\:h-0 {
    height: 0;
  }
  .md\:h-4 {
    height: var(--space-4);
  }
  .md\:h-8 {
    height: var(--space-8);
  }
  .md\:h-12 {
    height: var(--space-12);
  }
  .md\:h-16 {
    height: var(--space-16);
  }
  .md\:h-24 {
    height: var(--space-24);
  }
  .md\:h-32 {
    height: var(--space-32);
  }
  .md\:h-48 {
    height: var(--space-48);
  }
  .md\:h-auto {
    height: auto;
  }
  .md\:h-full {
    height: 100%;
  }
  .md\:h-screen {
    height: 100vh;
  }
  .md\:max-w-none {
    max-width: none;
  }
  .md\:max-w-full {
    max-width: 100%;
  }
  .md\:min-h-screen {
    min-height: 100vh;
  }
  .md\:max-h-screen {
    max-height: 100vh;
  }
  .md\:max-w-xs {
    max-width: 20rem;
  }
  .md\:max-w-sm {
    max-width: 24rem;
  }
  .md\:max-w-md {
    max-width: 28rem;
  }
  .md\:max-w-lg {
    max-width: 32rem;
  }
  .md\:max-w-xl {
    max-width: 36rem;
  }
  .md\:max-w-2xl {
    max-width: 42rem;
  }
  .md\:max-w-3xl {
    max-width: 48rem;
  }
}
@media (min-width: 1024px) {
  .lg\:w-0 {
    width: 0;
  }
  .lg\:w-4 {
    width: var(--space-4);
  }
  .lg\:w-8 {
    width: var(--space-8);
  }
  .lg\:w-12 {
    width: var(--space-12);
  }
  .lg\:w-16 {
    width: var(--space-16);
  }
  .lg\:w-24 {
    width: var(--space-24);
  }
  .lg\:w-32 {
    width: var(--space-32);
  }
  .lg\:w-48 {
    width: var(--space-48);
  }
  .lg\:w-64 {
    width: var(--space-64);
  }
  .lg\:w-auto {
    width: auto;
  }
  .lg\:w-full {
    width: 100%;
  }
  .lg\:w-25 {
    width: 25%;
  }
  .lg\:w-50 {
    width: 50%;
  }
  .lg\:w-75 {
    width: 75%;
  }
  .lg\:w-100 {
    width: 100%;
  }
  .lg\:h-0 {
    height: 0;
  }
  .lg\:h-4 {
    height: var(--space-4);
  }
  .lg\:h-8 {
    height: var(--space-8);
  }
  .lg\:h-12 {
    height: var(--space-12);
  }
  .lg\:h-16 {
    height: var(--space-16);
  }
  .lg\:h-24 {
    height: var(--space-24);
  }
  .lg\:h-32 {
    height: var(--space-32);
  }
  .lg\:h-48 {
    height: var(--space-48);
  }
  .lg\:h-auto {
    height: auto;
  }
  .lg\:h-full {
    height: 100%;
  }
  .lg\:h-screen {
    height: 100vh;
  }
  .lg\:max-w-none {
    max-width: none;
  }
  .lg\:max-w-full {
    max-width: 100%;
  }
  .lg\:min-h-screen {
    min-height: 100vh;
  }
  .lg\:max-h-screen {
    max-height: 100vh;
  }
  .lg\:max-w-xs {
    max-width: 20rem;
  }
  .lg\:max-w-sm {
    max-width: 24rem;
  }
  .lg\:max-w-md {
    max-width: 28rem;
  }
  .lg\:max-w-lg {
    max-width: 32rem;
  }
  .lg\:max-w-xl {
    max-width: 36rem;
  }
  .lg\:max-w-2xl {
    max-width: 42rem;
  }
  .lg\:max-w-3xl {
    max-width: 48rem;
  }
}
@media (min-width: 1280px) {
  .xl\:w-0 {
    width: 0;
  }
  .xl\:w-4 {
    width: var(--space-4);
  }
  .xl\:w-8 {
    width: var(--space-8);
  }
  .xl\:w-12 {
    width: var(--space-12);
  }
  .xl\:w-16 {
    width: var(--space-16);
  }
  .xl\:w-24 {
    width: var(--space-24);
  }
  .xl\:w-32 {
    width: var(--space-32);
  }
  .xl\:w-48 {
    width: var(--space-48);
  }
  .xl\:w-64 {
    width: var(--space-64);
  }
  .xl\:w-auto {
    width: auto;
  }
  .xl\:w-full {
    width: 100%;
  }
  .xl\:w-25 {
    width: 25%;
  }
  .xl\:w-50 {
    width: 50%;
  }
  .xl\:w-75 {
    width: 75%;
  }
  .xl\:w-100 {
    width: 100%;
  }
  .xl\:h-0 {
    height: 0;
  }
  .xl\:h-4 {
    height: var(--space-4);
  }
  .xl\:h-8 {
    height: var(--space-8);
  }
  .xl\:h-12 {
    height: var(--space-12);
  }
  .xl\:h-16 {
    height: var(--space-16);
  }
  .xl\:h-24 {
    height: var(--space-24);
  }
  .xl\:h-32 {
    height: var(--space-32);
  }
  .xl\:h-48 {
    height: var(--space-48);
  }
  .xl\:h-auto {
    height: auto;
  }
  .xl\:h-full {
    height: 100%;
  }
  .xl\:h-screen {
    height: 100vh;
  }
  .xl\:max-w-none {
    max-width: none;
  }
  .xl\:max-w-full {
    max-width: 100%;
  }
  .xl\:min-h-screen {
    min-height: 100vh;
  }
  .xl\:max-h-screen {
    max-height: 100vh;
  }
  .xl\:max-w-xs {
    max-width: 20rem;
  }
  .xl\:max-w-sm {
    max-width: 24rem;
  }
  .xl\:max-w-md {
    max-width: 28rem;
  }
  .xl\:max-w-lg {
    max-width: 32rem;
  }
  .xl\:max-w-xl {
    max-width: 36rem;
  }
  .xl\:max-w-2xl {
    max-width: 42rem;
  }
  .xl\:max-w-3xl {
    max-width: 48rem;
  }
}
.flex {
  display: flex;
}

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

.flex-row {
  flex-direction: row;
}

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

.flex-row-reverse {
  flex-direction: row-reverse;
}

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

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

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

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

.justify-start {
  justify-content: flex-start;
}

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

.justify-end {
  justify-content: flex-end;
}

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

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

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

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

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

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.content-normal {
  align-content: normal;
}

.content-start {
  align-content: flex-start;
}

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

.content-end {
  align-content: flex-end;
}

.content-between {
  align-content: space-between;
}

.content-around {
  align-content: space-around;
}

.content-evenly {
  align-content: space-evenly;
}

.content-baseline {
  align-content: baseline;
}

.content-stretch {
  align-content: stretch;
}

.self-auto {
  align-self: auto;
}

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

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

.self-end {
  align-self: flex-end;
}

.self-stretch {
  align-self: stretch;
}

.self-baseline {
  align-self: baseline;
}

.flex-1 {
  flex: 1;
}

.flex-auto {
  flex: 1 1 auto;
}

.flex-initial {
  flex: 0 1 auto;
}

.flex-none {
  flex: none;
}

.grow {
  flex-grow: 1;
}

.grow-0 {
  flex-grow: 0;
}

.shrink {
  flex-shrink: 1;
}

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

.basis-0 {
  flex-basis: 0;
}

.basis-auto {
  flex-basis: auto;
}

.basis-full {
  flex-basis: 100%;
}

.basis-200 {
  flex-basis: calc(var(--base-unit) * 12.5);
}

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

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.flex-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

@media (max-width: 767px) {
  .flex-between {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
}

@media (min-width: 640px) {
  .sm\:flex {
    display: flex;
  }
  .sm\:d-flex {
    display: flex;
  }
  .sm\:inline-flex {
    display: inline-flex;
  }
  .sm\:d-inline-flex {
    display: inline-flex;
  }
  .sm\:flex-row {
    flex-direction: row;
  }
  .sm\:flex-col {
    flex-direction: column;
  }
  .sm\:flex-row-reverse {
    flex-direction: row-reverse;
  }
  .sm\:flex-col-reverse {
    flex-direction: column-reverse;
  }
  .sm\:justify-start {
    justify-content: flex-start;
  }
  .sm\:justify-center {
    justify-content: center;
  }
  .sm\:justify-end {
    justify-content: flex-end;
  }
  .sm\:justify-between {
    justify-content: space-between;
  }
  .sm\:justify-around {
    justify-content: space-around;
  }
  .sm\:justify-evenly {
    justify-content: space-evenly;
  }
  .sm\:items-start {
    align-items: flex-start;
  }
  .sm\:items-center {
    align-items: center;
  }
  .sm\:items-end {
    align-items: flex-end;
  }
  .sm\:items-baseline {
    align-items: baseline;
  }
  .sm\:items-stretch {
    align-items: stretch;
  }
  .sm\:content-normal {
    align-content: normal;
  }
  .sm\:content-start {
    align-content: flex-start;
  }
  .sm\:content-center {
    align-content: center;
  }
  .sm\:content-end {
    align-content: flex-end;
  }
  .sm\:content-between {
    align-content: space-between;
  }
  .sm\:content-around {
    align-content: space-around;
  }
  .sm\:content-evenly {
    align-content: space-evenly;
  }
  .sm\:content-baseline {
    align-content: baseline;
  }
  .sm\:content-stretch {
    align-content: stretch;
  }
  .sm\:flex-1 {
    flex: 1;
  }
  .sm\:flex-auto {
    flex: 1 1 auto;
  }
  .sm\:flex-initial {
    flex: 0 1 auto;
  }
  .sm\:flex-none {
    flex: none;
  }
  .sm\:grow {
    flex-grow: 1;
  }
  .sm\:grow-0 {
    flex-grow: 0;
  }
  .sm\:shrink {
    flex-shrink: 1;
  }
  .sm\:shrink-0 {
    flex-shrink: 0;
  }
}
@media (min-width: 768px) {
  .md\:flex {
    display: flex;
  }
  .md\:d-flex {
    display: flex;
  }
  .md\:inline-flex {
    display: inline-flex;
  }
  .md\:d-inline-flex {
    display: inline-flex;
  }
  .md\:flex-row {
    flex-direction: row;
  }
  .md\:flex-col {
    flex-direction: column;
  }
  .md\:flex-row-reverse {
    flex-direction: row-reverse;
  }
  .md\:flex-col-reverse {
    flex-direction: column-reverse;
  }
  .md\:justify-start {
    justify-content: flex-start;
  }
  .md\:justify-center {
    justify-content: center;
  }
  .md\:justify-end {
    justify-content: flex-end;
  }
  .md\:justify-between {
    justify-content: space-between;
  }
  .md\:justify-around {
    justify-content: space-around;
  }
  .md\:justify-evenly {
    justify-content: space-evenly;
  }
  .md\:items-start {
    align-items: flex-start;
  }
  .md\:items-center {
    align-items: center;
  }
  .md\:items-end {
    align-items: flex-end;
  }
  .md\:items-baseline {
    align-items: baseline;
  }
  .md\:items-stretch {
    align-items: stretch;
  }
  .md\:content-normal {
    align-content: normal;
  }
  .md\:content-start {
    align-content: flex-start;
  }
  .md\:content-center {
    align-content: center;
  }
  .md\:content-end {
    align-content: flex-end;
  }
  .md\:content-between {
    align-content: space-between;
  }
  .md\:content-around {
    align-content: space-around;
  }
  .md\:content-evenly {
    align-content: space-evenly;
  }
  .md\:content-baseline {
    align-content: baseline;
  }
  .md\:content-stretch {
    align-content: stretch;
  }
  .md\:flex-1 {
    flex: 1;
  }
  .md\:flex-auto {
    flex: 1 1 auto;
  }
  .md\:flex-initial {
    flex: 0 1 auto;
  }
  .md\:flex-none {
    flex: none;
  }
  .md\:grow {
    flex-grow: 1;
  }
  .md\:grow-0 {
    flex-grow: 0;
  }
  .md\:shrink {
    flex-shrink: 1;
  }
  .md\:shrink-0 {
    flex-shrink: 0;
  }
}
@media (min-width: 1024px) {
  .lg\:flex {
    display: flex;
  }
  .lg\:d-flex {
    display: flex;
  }
  .lg\:inline-flex {
    display: inline-flex;
  }
  .lg\:d-inline-flex {
    display: inline-flex;
  }
  .lg\:flex-row {
    flex-direction: row;
  }
  .lg\:flex-col {
    flex-direction: column;
  }
  .lg\:flex-row-reverse {
    flex-direction: row-reverse;
  }
  .lg\:flex-col-reverse {
    flex-direction: column-reverse;
  }
  .lg\:justify-start {
    justify-content: flex-start;
  }
  .lg\:justify-center {
    justify-content: center;
  }
  .lg\:justify-end {
    justify-content: flex-end;
  }
  .lg\:justify-between {
    justify-content: space-between;
  }
  .lg\:justify-around {
    justify-content: space-around;
  }
  .lg\:justify-evenly {
    justify-content: space-evenly;
  }
  .lg\:items-start {
    align-items: flex-start;
  }
  .lg\:items-center {
    align-items: center;
  }
  .lg\:items-end {
    align-items: flex-end;
  }
  .lg\:items-baseline {
    align-items: baseline;
  }
  .lg\:items-stretch {
    align-items: stretch;
  }
  .lg\:content-normal {
    align-content: normal;
  }
  .lg\:content-start {
    align-content: flex-start;
  }
  .lg\:content-center {
    align-content: center;
  }
  .lg\:content-end {
    align-content: flex-end;
  }
  .lg\:content-between {
    align-content: space-between;
  }
  .lg\:content-around {
    align-content: space-around;
  }
  .lg\:content-evenly {
    align-content: space-evenly;
  }
  .lg\:content-baseline {
    align-content: baseline;
  }
  .lg\:content-stretch {
    align-content: stretch;
  }
  .lg\:flex-1 {
    flex: 1;
  }
  .lg\:flex-auto {
    flex: 1 1 auto;
  }
  .lg\:flex-initial {
    flex: 0 1 auto;
  }
  .lg\:flex-none {
    flex: none;
  }
  .lg\:grow {
    flex-grow: 1;
  }
  .lg\:grow-0 {
    flex-grow: 0;
  }
  .lg\:shrink {
    flex-shrink: 1;
  }
  .lg\:shrink-0 {
    flex-shrink: 0;
  }
}
@media (min-width: 1280px) {
  .xl\:flex {
    display: flex;
  }
  .xl\:d-flex {
    display: flex;
  }
  .xl\:inline-flex {
    display: inline-flex;
  }
  .xl\:d-inline-flex {
    display: inline-flex;
  }
  .xl\:flex-row {
    flex-direction: row;
  }
  .xl\:flex-col {
    flex-direction: column;
  }
  .xl\:flex-row-reverse {
    flex-direction: row-reverse;
  }
  .xl\:flex-col-reverse {
    flex-direction: column-reverse;
  }
  .xl\:justify-start {
    justify-content: flex-start;
  }
  .xl\:justify-center {
    justify-content: center;
  }
  .xl\:justify-end {
    justify-content: flex-end;
  }
  .xl\:justify-between {
    justify-content: space-between;
  }
  .xl\:justify-around {
    justify-content: space-around;
  }
  .xl\:justify-evenly {
    justify-content: space-evenly;
  }
  .xl\:items-start {
    align-items: flex-start;
  }
  .xl\:items-center {
    align-items: center;
  }
  .xl\:items-end {
    align-items: flex-end;
  }
  .xl\:items-baseline {
    align-items: baseline;
  }
  .xl\:items-stretch {
    align-items: stretch;
  }
  .xl\:content-normal {
    align-content: normal;
  }
  .xl\:content-start {
    align-content: flex-start;
  }
  .xl\:content-center {
    align-content: center;
  }
  .xl\:content-end {
    align-content: flex-end;
  }
  .xl\:content-between {
    align-content: space-between;
  }
  .xl\:content-around {
    align-content: space-around;
  }
  .xl\:content-evenly {
    align-content: space-evenly;
  }
  .xl\:content-baseline {
    align-content: baseline;
  }
  .xl\:content-stretch {
    align-content: stretch;
  }
  .xl\:flex-1 {
    flex: 1;
  }
  .xl\:flex-auto {
    flex: 1 1 auto;
  }
  .xl\:flex-initial {
    flex: 0 1 auto;
  }
  .xl\:flex-none {
    flex: none;
  }
  .xl\:grow {
    flex-grow: 1;
  }
  .xl\:grow-0 {
    flex-grow: 0;
  }
  .xl\:shrink {
    flex-shrink: 1;
  }
  .xl\:shrink-0 {
    flex-shrink: 0;
  }
}
.grid {
  display: grid;
  align-items: start;
}

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

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

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

.items-stretch {
  align-items: stretch;
}

.items-baseline {
  align-items: baseline;
}

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

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

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

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

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

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

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

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

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

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

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

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

.grid-cols-none {
  grid-template-columns: none;
}

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

.grid-rows-2 {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.grid-rows-3 {
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.grid-rows-4 {
  grid-template-rows: repeat(4, minmax(0, 1fr));
}

.grid-rows-5 {
  grid-template-rows: repeat(5, minmax(0, 1fr));
}

.grid-rows-6 {
  grid-template-rows: repeat(6, minmax(0, 1fr));
}

.grid-rows-none {
  grid-template-rows: none;
}

.grid-auto-fit-150 {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.grid-auto-fit-200 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.grid-auto-fit-250 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-auto-fit-300 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-auto-fit-350 {
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

.col-auto {
  grid-column: auto;
}

.col-span-1 {
  grid-column: span 1/span 1;
}

.col-span-2 {
  grid-column: span 2/span 2;
}

.col-span-3 {
  grid-column: span 3/span 3;
}

.col-span-4 {
  grid-column: span 4/span 4;
}

.col-span-5 {
  grid-column: span 5/span 5;
}

.col-span-6 {
  grid-column: span 6/span 6;
}

.col-span-7 {
  grid-column: span 7/span 7;
}

.col-span-8 {
  grid-column: span 8/span 8;
}

.col-span-9 {
  grid-column: span 9/span 9;
}

.col-span-10 {
  grid-column: span 10/span 10;
}

.col-span-11 {
  grid-column: span 11/span 11;
}

.col-span-12 {
  grid-column: span 12/span 12;
}

.col-span-full {
  grid-column: 1/-1;
}

.col-start-1 {
  grid-column-start: 1;
}

.col-end-1 {
  grid-column-end: 1;
}

.col-start-2 {
  grid-column-start: 2;
}

.col-end-2 {
  grid-column-end: 2;
}

.col-start-3 {
  grid-column-start: 3;
}

.col-end-3 {
  grid-column-end: 3;
}

.col-start-4 {
  grid-column-start: 4;
}

.col-end-4 {
  grid-column-end: 4;
}

.col-start-5 {
  grid-column-start: 5;
}

.col-end-5 {
  grid-column-end: 5;
}

.col-start-6 {
  grid-column-start: 6;
}

.col-end-6 {
  grid-column-end: 6;
}

.col-start-7 {
  grid-column-start: 7;
}

.col-end-7 {
  grid-column-end: 7;
}

.col-start-8 {
  grid-column-start: 8;
}

.col-end-8 {
  grid-column-end: 8;
}

.col-start-9 {
  grid-column-start: 9;
}

.col-end-9 {
  grid-column-end: 9;
}

.col-start-10 {
  grid-column-start: 10;
}

.col-end-10 {
  grid-column-end: 10;
}

.col-start-11 {
  grid-column-start: 11;
}

.col-end-11 {
  grid-column-end: 11;
}

.col-start-12 {
  grid-column-start: 12;
}

.col-end-12 {
  grid-column-end: 12;
}

.col-start-13 {
  grid-column-start: 13;
}

.col-end-13 {
  grid-column-end: 13;
}

.col-start-auto {
  grid-column-start: auto;
}

.col-end-auto {
  grid-column-end: auto;
}

.row-auto {
  grid-row: auto;
}

.row-span-1 {
  grid-row: span 1/span 1;
}

.row-span-2 {
  grid-row: span 2/span 2;
}

.row-span-3 {
  grid-row: span 3/span 3;
}

.row-span-4 {
  grid-row: span 4/span 4;
}

.row-span-5 {
  grid-row: span 5/span 5;
}

.row-span-6 {
  grid-row: span 6/span 6;
}

.row-span-full {
  grid-row: 1/-1;
}

.row-start-1 {
  grid-row-start: 1;
}

.row-end-1 {
  grid-row-end: 1;
}

.row-start-2 {
  grid-row-start: 2;
}

.row-end-2 {
  grid-row-end: 2;
}

.row-start-3 {
  grid-row-start: 3;
}

.row-end-3 {
  grid-row-end: 3;
}

.row-start-4 {
  grid-row-start: 4;
}

.row-end-4 {
  grid-row-end: 4;
}

.row-start-5 {
  grid-row-start: 5;
}

.row-end-5 {
  grid-row-end: 5;
}

.row-start-6 {
  grid-row-start: 6;
}

.row-end-6 {
  grid-row-end: 6;
}

.row-start-7 {
  grid-row-start: 7;
}

.row-end-7 {
  grid-row-end: 7;
}

.row-start-auto {
  grid-row-start: auto;
}

.row-end-auto {
  grid-row-end: auto;
}

.grid-flow-row {
  grid-auto-flow: row;
}

.grid-flow-col {
  grid-auto-flow: column;
}

.grid-flow-dense {
  grid-auto-flow: dense;
}

.grid-flow-row-dense {
  grid-auto-flow: row dense;
}

.grid-flow-col-dense {
  grid-auto-flow: column dense;
}

.auto-cols-auto {
  grid-auto-columns: auto;
}

.auto-rows-auto {
  grid-auto-rows: auto;
}

.auto-cols-min {
  grid-auto-columns: min-content;
}

.auto-rows-min {
  grid-auto-rows: min-content;
}

.auto-cols-max {
  grid-auto-columns: max-content;
}

.auto-rows-max {
  grid-auto-rows: max-content;
}

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

.auto-rows-fr {
  grid-auto-rows: minmax(0, 1fr);
}

.justify-items-start {
  justify-items: start;
}

.justify-self-start {
  justify-self: start;
}

.justify-items-end {
  justify-items: end;
}

.justify-self-end {
  justify-self: end;
}

.justify-items-center {
  justify-items: center;
}

.justify-self-center {
  justify-self: center;
}

.justify-items-stretch {
  justify-items: stretch;
}

.justify-self-stretch {
  justify-self: stretch;
}

.justify-self-auto {
  justify-self: auto;
}

.gap-0 {
  gap: var(--space-0);
}

.gap-px {
  gap: var(--space-px);
}

.gap-0-5 {
  gap: var(--space-0-5);
}

.gap-1 {
  gap: var(--space-1);
}

.gap-1-5 {
  gap: var(--space-1-5);
}

.gap-2 {
  gap: var(--space-2);
}

.gap-2-5 {
  gap: var(--space-2-5);
}

.gap-3 {
  gap: var(--space-3);
}

.gap-3-5 {
  gap: var(--space-3-5);
}

.gap-4 {
  gap: var(--space-4);
}

.gap-5 {
  gap: var(--space-5);
}

.gap-6 {
  gap: var(--space-6);
}

.gap-7 {
  gap: var(--space-7);
}

.gap-8 {
  gap: var(--space-8);
}

.gap-9 {
  gap: var(--space-9);
}

.gap-10 {
  gap: var(--space-10);
}

.gap-11 {
  gap: var(--space-11);
}

.gap-12 {
  gap: var(--space-12);
}

.gap-14 {
  gap: var(--space-14);
}

.gap-16 {
  gap: var(--space-16);
}

.gap-20 {
  gap: var(--space-20);
}

.gap-24 {
  gap: var(--space-24);
}

.gap-x-0 {
  column-gap: var(--space-0);
}

.gap-y-0 {
  row-gap: var(--space-0);
}

.gap-x-1 {
  column-gap: var(--space-1);
}

.gap-y-1 {
  row-gap: var(--space-1);
}

.gap-x-2 {
  column-gap: var(--space-2);
}

.gap-y-2 {
  row-gap: var(--space-2);
}

.gap-x-3 {
  column-gap: var(--space-3);
}

.gap-y-3 {
  row-gap: var(--space-3);
}

.gap-x-4 {
  column-gap: var(--space-4);
}

.gap-y-4 {
  row-gap: var(--space-4);
}

.gap-x-5 {
  column-gap: var(--space-5);
}

.gap-y-5 {
  row-gap: var(--space-5);
}

.gap-x-6 {
  column-gap: var(--space-6);
}

.gap-y-6 {
  row-gap: var(--space-6);
}

.gap-x-7 {
  column-gap: var(--space-7);
}

.gap-y-7 {
  row-gap: var(--space-7);
}

.gap-x-8 {
  column-gap: var(--space-8);
}

.gap-y-8 {
  row-gap: var(--space-8);
}

.gap-x-9 {
  column-gap: var(--space-9);
}

.gap-y-9 {
  row-gap: var(--space-9);
}

.gap-x-10 {
  column-gap: var(--space-10);
}

.gap-y-10 {
  row-gap: var(--space-10);
}

.gap-x-11 {
  column-gap: var(--space-11);
}

.gap-y-11 {
  row-gap: var(--space-11);
}

.gap-x-12 {
  column-gap: var(--space-12);
}

.gap-y-12 {
  row-gap: var(--space-12);
}

.gap-x-14 {
  column-gap: var(--space-14);
}

.gap-y-14 {
  row-gap: var(--space-14);
}

.gap-x-16 {
  column-gap: var(--space-16);
}

.gap-y-16 {
  row-gap: var(--space-16);
}

.gap-x-20 {
  column-gap: var(--space-20);
}

.gap-y-20 {
  row-gap: var(--space-20);
}

.gap-x-24 {
  column-gap: var(--space-24);
}

.gap-y-24 {
  row-gap: var(--space-24);
}

@media (min-width: 640px) {
  .sm\:gap-0 {
    gap: var(--space-0);
  }
  .sm\:gap-x-0 {
    column-gap: var(--space-0);
  }
  .sm\:gap-y-0 {
    row-gap: var(--space-0);
  }
  .sm\:gap-1 {
    gap: var(--space-1);
  }
  .sm\:gap-x-1 {
    column-gap: var(--space-1);
  }
  .sm\:gap-y-1 {
    row-gap: var(--space-1);
  }
  .sm\:gap-2 {
    gap: var(--space-2);
  }
  .sm\:gap-x-2 {
    column-gap: var(--space-2);
  }
  .sm\:gap-y-2 {
    row-gap: var(--space-2);
  }
  .sm\:gap-3 {
    gap: var(--space-3);
  }
  .sm\:gap-x-3 {
    column-gap: var(--space-3);
  }
  .sm\:gap-y-3 {
    row-gap: var(--space-3);
  }
  .sm\:gap-4 {
    gap: var(--space-4);
  }
  .sm\:gap-x-4 {
    column-gap: var(--space-4);
  }
  .sm\:gap-y-4 {
    row-gap: var(--space-4);
  }
  .sm\:gap-5 {
    gap: var(--space-5);
  }
  .sm\:gap-x-5 {
    column-gap: var(--space-5);
  }
  .sm\:gap-y-5 {
    row-gap: var(--space-5);
  }
  .sm\:gap-6 {
    gap: var(--space-6);
  }
  .sm\:gap-x-6 {
    column-gap: var(--space-6);
  }
  .sm\:gap-y-6 {
    row-gap: var(--space-6);
  }
  .sm\:gap-7 {
    gap: var(--space-7);
  }
  .sm\:gap-x-7 {
    column-gap: var(--space-7);
  }
  .sm\:gap-y-7 {
    row-gap: var(--space-7);
  }
  .sm\:gap-8 {
    gap: var(--space-8);
  }
  .sm\:gap-x-8 {
    column-gap: var(--space-8);
  }
  .sm\:gap-y-8 {
    row-gap: var(--space-8);
  }
  .sm\:gap-9 {
    gap: var(--space-9);
  }
  .sm\:gap-x-9 {
    column-gap: var(--space-9);
  }
  .sm\:gap-y-9 {
    row-gap: var(--space-9);
  }
  .sm\:gap-10 {
    gap: var(--space-10);
  }
  .sm\:gap-x-10 {
    column-gap: var(--space-10);
  }
  .sm\:gap-y-10 {
    row-gap: var(--space-10);
  }
  .sm\:gap-11 {
    gap: var(--space-11);
  }
  .sm\:gap-x-11 {
    column-gap: var(--space-11);
  }
  .sm\:gap-y-11 {
    row-gap: var(--space-11);
  }
  .sm\:gap-12 {
    gap: var(--space-12);
  }
  .sm\:gap-x-12 {
    column-gap: var(--space-12);
  }
  .sm\:gap-y-12 {
    row-gap: var(--space-12);
  }
  .sm\:gap-14 {
    gap: var(--space-14);
  }
  .sm\:gap-x-14 {
    column-gap: var(--space-14);
  }
  .sm\:gap-y-14 {
    row-gap: var(--space-14);
  }
  .sm\:gap-16 {
    gap: var(--space-16);
  }
  .sm\:gap-x-16 {
    column-gap: var(--space-16);
  }
  .sm\:gap-y-16 {
    row-gap: var(--space-16);
  }
  .sm\:gap-20 {
    gap: var(--space-20);
  }
  .sm\:gap-x-20 {
    column-gap: var(--space-20);
  }
  .sm\:gap-y-20 {
    row-gap: var(--space-20);
  }
  .sm\:gap-24 {
    gap: var(--space-24);
  }
  .sm\:gap-x-24 {
    column-gap: var(--space-24);
  }
  .sm\:gap-y-24 {
    row-gap: var(--space-24);
  }
}
@media (min-width: 768px) {
  .md\:gap-0 {
    gap: var(--space-0);
  }
  .md\:gap-x-0 {
    column-gap: var(--space-0);
  }
  .md\:gap-y-0 {
    row-gap: var(--space-0);
  }
  .md\:gap-1 {
    gap: var(--space-1);
  }
  .md\:gap-x-1 {
    column-gap: var(--space-1);
  }
  .md\:gap-y-1 {
    row-gap: var(--space-1);
  }
  .md\:gap-2 {
    gap: var(--space-2);
  }
  .md\:gap-x-2 {
    column-gap: var(--space-2);
  }
  .md\:gap-y-2 {
    row-gap: var(--space-2);
  }
  .md\:gap-3 {
    gap: var(--space-3);
  }
  .md\:gap-x-3 {
    column-gap: var(--space-3);
  }
  .md\:gap-y-3 {
    row-gap: var(--space-3);
  }
  .md\:gap-4 {
    gap: var(--space-4);
  }
  .md\:gap-x-4 {
    column-gap: var(--space-4);
  }
  .md\:gap-y-4 {
    row-gap: var(--space-4);
  }
  .md\:gap-5 {
    gap: var(--space-5);
  }
  .md\:gap-x-5 {
    column-gap: var(--space-5);
  }
  .md\:gap-y-5 {
    row-gap: var(--space-5);
  }
  .md\:gap-6 {
    gap: var(--space-6);
  }
  .md\:gap-x-6 {
    column-gap: var(--space-6);
  }
  .md\:gap-y-6 {
    row-gap: var(--space-6);
  }
  .md\:gap-7 {
    gap: var(--space-7);
  }
  .md\:gap-x-7 {
    column-gap: var(--space-7);
  }
  .md\:gap-y-7 {
    row-gap: var(--space-7);
  }
  .md\:gap-8 {
    gap: var(--space-8);
  }
  .md\:gap-x-8 {
    column-gap: var(--space-8);
  }
  .md\:gap-y-8 {
    row-gap: var(--space-8);
  }
  .md\:gap-9 {
    gap: var(--space-9);
  }
  .md\:gap-x-9 {
    column-gap: var(--space-9);
  }
  .md\:gap-y-9 {
    row-gap: var(--space-9);
  }
  .md\:gap-10 {
    gap: var(--space-10);
  }
  .md\:gap-x-10 {
    column-gap: var(--space-10);
  }
  .md\:gap-y-10 {
    row-gap: var(--space-10);
  }
  .md\:gap-11 {
    gap: var(--space-11);
  }
  .md\:gap-x-11 {
    column-gap: var(--space-11);
  }
  .md\:gap-y-11 {
    row-gap: var(--space-11);
  }
  .md\:gap-12 {
    gap: var(--space-12);
  }
  .md\:gap-x-12 {
    column-gap: var(--space-12);
  }
  .md\:gap-y-12 {
    row-gap: var(--space-12);
  }
  .md\:gap-14 {
    gap: var(--space-14);
  }
  .md\:gap-x-14 {
    column-gap: var(--space-14);
  }
  .md\:gap-y-14 {
    row-gap: var(--space-14);
  }
  .md\:gap-16 {
    gap: var(--space-16);
  }
  .md\:gap-x-16 {
    column-gap: var(--space-16);
  }
  .md\:gap-y-16 {
    row-gap: var(--space-16);
  }
  .md\:gap-20 {
    gap: var(--space-20);
  }
  .md\:gap-x-20 {
    column-gap: var(--space-20);
  }
  .md\:gap-y-20 {
    row-gap: var(--space-20);
  }
  .md\:gap-24 {
    gap: var(--space-24);
  }
  .md\:gap-x-24 {
    column-gap: var(--space-24);
  }
  .md\:gap-y-24 {
    row-gap: var(--space-24);
  }
}
@media (min-width: 1024px) {
  .lg\:gap-0 {
    gap: var(--space-0);
  }
  .lg\:gap-x-0 {
    column-gap: var(--space-0);
  }
  .lg\:gap-y-0 {
    row-gap: var(--space-0);
  }
  .lg\:gap-1 {
    gap: var(--space-1);
  }
  .lg\:gap-x-1 {
    column-gap: var(--space-1);
  }
  .lg\:gap-y-1 {
    row-gap: var(--space-1);
  }
  .lg\:gap-2 {
    gap: var(--space-2);
  }
  .lg\:gap-x-2 {
    column-gap: var(--space-2);
  }
  .lg\:gap-y-2 {
    row-gap: var(--space-2);
  }
  .lg\:gap-3 {
    gap: var(--space-3);
  }
  .lg\:gap-x-3 {
    column-gap: var(--space-3);
  }
  .lg\:gap-y-3 {
    row-gap: var(--space-3);
  }
  .lg\:gap-4 {
    gap: var(--space-4);
  }
  .lg\:gap-x-4 {
    column-gap: var(--space-4);
  }
  .lg\:gap-y-4 {
    row-gap: var(--space-4);
  }
  .lg\:gap-5 {
    gap: var(--space-5);
  }
  .lg\:gap-x-5 {
    column-gap: var(--space-5);
  }
  .lg\:gap-y-5 {
    row-gap: var(--space-5);
  }
  .lg\:gap-6 {
    gap: var(--space-6);
  }
  .lg\:gap-x-6 {
    column-gap: var(--space-6);
  }
  .lg\:gap-y-6 {
    row-gap: var(--space-6);
  }
  .lg\:gap-7 {
    gap: var(--space-7);
  }
  .lg\:gap-x-7 {
    column-gap: var(--space-7);
  }
  .lg\:gap-y-7 {
    row-gap: var(--space-7);
  }
  .lg\:gap-8 {
    gap: var(--space-8);
  }
  .lg\:gap-x-8 {
    column-gap: var(--space-8);
  }
  .lg\:gap-y-8 {
    row-gap: var(--space-8);
  }
  .lg\:gap-9 {
    gap: var(--space-9);
  }
  .lg\:gap-x-9 {
    column-gap: var(--space-9);
  }
  .lg\:gap-y-9 {
    row-gap: var(--space-9);
  }
  .lg\:gap-10 {
    gap: var(--space-10);
  }
  .lg\:gap-x-10 {
    column-gap: var(--space-10);
  }
  .lg\:gap-y-10 {
    row-gap: var(--space-10);
  }
  .lg\:gap-11 {
    gap: var(--space-11);
  }
  .lg\:gap-x-11 {
    column-gap: var(--space-11);
  }
  .lg\:gap-y-11 {
    row-gap: var(--space-11);
  }
  .lg\:gap-12 {
    gap: var(--space-12);
  }
  .lg\:gap-x-12 {
    column-gap: var(--space-12);
  }
  .lg\:gap-y-12 {
    row-gap: var(--space-12);
  }
  .lg\:gap-14 {
    gap: var(--space-14);
  }
  .lg\:gap-x-14 {
    column-gap: var(--space-14);
  }
  .lg\:gap-y-14 {
    row-gap: var(--space-14);
  }
  .lg\:gap-16 {
    gap: var(--space-16);
  }
  .lg\:gap-x-16 {
    column-gap: var(--space-16);
  }
  .lg\:gap-y-16 {
    row-gap: var(--space-16);
  }
  .lg\:gap-20 {
    gap: var(--space-20);
  }
  .lg\:gap-x-20 {
    column-gap: var(--space-20);
  }
  .lg\:gap-y-20 {
    row-gap: var(--space-20);
  }
  .lg\:gap-24 {
    gap: var(--space-24);
  }
  .lg\:gap-x-24 {
    column-gap: var(--space-24);
  }
  .lg\:gap-y-24 {
    row-gap: var(--space-24);
  }
}
@media (min-width: 1280px) {
  .xl\:gap-0 {
    gap: var(--space-0);
  }
  .xl\:gap-x-0 {
    column-gap: var(--space-0);
  }
  .xl\:gap-y-0 {
    row-gap: var(--space-0);
  }
  .xl\:gap-1 {
    gap: var(--space-1);
  }
  .xl\:gap-x-1 {
    column-gap: var(--space-1);
  }
  .xl\:gap-y-1 {
    row-gap: var(--space-1);
  }
  .xl\:gap-2 {
    gap: var(--space-2);
  }
  .xl\:gap-x-2 {
    column-gap: var(--space-2);
  }
  .xl\:gap-y-2 {
    row-gap: var(--space-2);
  }
  .xl\:gap-3 {
    gap: var(--space-3);
  }
  .xl\:gap-x-3 {
    column-gap: var(--space-3);
  }
  .xl\:gap-y-3 {
    row-gap: var(--space-3);
  }
  .xl\:gap-4 {
    gap: var(--space-4);
  }
  .xl\:gap-x-4 {
    column-gap: var(--space-4);
  }
  .xl\:gap-y-4 {
    row-gap: var(--space-4);
  }
  .xl\:gap-5 {
    gap: var(--space-5);
  }
  .xl\:gap-x-5 {
    column-gap: var(--space-5);
  }
  .xl\:gap-y-5 {
    row-gap: var(--space-5);
  }
  .xl\:gap-6 {
    gap: var(--space-6);
  }
  .xl\:gap-x-6 {
    column-gap: var(--space-6);
  }
  .xl\:gap-y-6 {
    row-gap: var(--space-6);
  }
  .xl\:gap-7 {
    gap: var(--space-7);
  }
  .xl\:gap-x-7 {
    column-gap: var(--space-7);
  }
  .xl\:gap-y-7 {
    row-gap: var(--space-7);
  }
  .xl\:gap-8 {
    gap: var(--space-8);
  }
  .xl\:gap-x-8 {
    column-gap: var(--space-8);
  }
  .xl\:gap-y-8 {
    row-gap: var(--space-8);
  }
  .xl\:gap-9 {
    gap: var(--space-9);
  }
  .xl\:gap-x-9 {
    column-gap: var(--space-9);
  }
  .xl\:gap-y-9 {
    row-gap: var(--space-9);
  }
  .xl\:gap-10 {
    gap: var(--space-10);
  }
  .xl\:gap-x-10 {
    column-gap: var(--space-10);
  }
  .xl\:gap-y-10 {
    row-gap: var(--space-10);
  }
  .xl\:gap-11 {
    gap: var(--space-11);
  }
  .xl\:gap-x-11 {
    column-gap: var(--space-11);
  }
  .xl\:gap-y-11 {
    row-gap: var(--space-11);
  }
  .xl\:gap-12 {
    gap: var(--space-12);
  }
  .xl\:gap-x-12 {
    column-gap: var(--space-12);
  }
  .xl\:gap-y-12 {
    row-gap: var(--space-12);
  }
  .xl\:gap-14 {
    gap: var(--space-14);
  }
  .xl\:gap-x-14 {
    column-gap: var(--space-14);
  }
  .xl\:gap-y-14 {
    row-gap: var(--space-14);
  }
  .xl\:gap-16 {
    gap: var(--space-16);
  }
  .xl\:gap-x-16 {
    column-gap: var(--space-16);
  }
  .xl\:gap-y-16 {
    row-gap: var(--space-16);
  }
  .xl\:gap-20 {
    gap: var(--space-20);
  }
  .xl\:gap-x-20 {
    column-gap: var(--space-20);
  }
  .xl\:gap-y-20 {
    row-gap: var(--space-20);
  }
  .xl\:gap-24 {
    gap: var(--space-24);
  }
  .xl\:gap-x-24 {
    column-gap: var(--space-24);
  }
  .xl\:gap-y-24 {
    row-gap: var(--space-24);
  }
}
.grid-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width, 200px), 1fr));
  gap: var(--space-4);
}
@media (max-width: 767px) {
  .grid-auto-fit {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

.card-container {
  display: grid;
  gap: var(--space-4);
  width: 100%;
}
@media (min-width: 768px) {
  .card-container {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}
@media (min-width: 1024px) {
  .card-container {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1280px) {
  .card-container {
    grid-template-columns: repeat(4, 1fr);
  }
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

.col {
  flex: 1 0 0%;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.col-1 {
  flex: 0 0 calc(1 / 12 * 100%);
  max-width: calc(1 / 12 * 100%);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.col-2 {
  flex: 0 0 calc(2 / 12 * 100%);
  max-width: calc(2 / 12 * 100%);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.col-3 {
  flex: 0 0 calc(3 / 12 * 100%);
  max-width: calc(3 / 12 * 100%);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.col-4 {
  flex: 0 0 calc(4 / 12 * 100%);
  max-width: calc(4 / 12 * 100%);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.col-5 {
  flex: 0 0 calc(5 / 12 * 100%);
  max-width: calc(5 / 12 * 100%);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.col-6 {
  flex: 0 0 calc(6 / 12 * 100%);
  max-width: calc(6 / 12 * 100%);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.col-7 {
  flex: 0 0 calc(7 / 12 * 100%);
  max-width: calc(7 / 12 * 100%);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.col-8 {
  flex: 0 0 calc(8 / 12 * 100%);
  max-width: calc(8 / 12 * 100%);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.col-9 {
  flex: 0 0 calc(9 / 12 * 100%);
  max-width: calc(9 / 12 * 100%);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.col-10 {
  flex: 0 0 calc(10 / 12 * 100%);
  max-width: calc(10 / 12 * 100%);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.col-11 {
  flex: 0 0 calc(11 / 12 * 100%);
  max-width: calc(11 / 12 * 100%);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.col-12 {
  flex: 0 0 calc(12 / 12 * 100%);
  max-width: calc(12 / 12 * 100%);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

@media (min-width: 640px) {
  .col-sm {
    flex: 1 0 0%;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-sm-1 {
    flex: 0 0 calc(1 / 12 * 100%);
    max-width: calc(1 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-sm-2 {
    flex: 0 0 calc(2 / 12 * 100%);
    max-width: calc(2 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-sm-3 {
    flex: 0 0 calc(3 / 12 * 100%);
    max-width: calc(3 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-sm-4 {
    flex: 0 0 calc(4 / 12 * 100%);
    max-width: calc(4 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-sm-5 {
    flex: 0 0 calc(5 / 12 * 100%);
    max-width: calc(5 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-sm-6 {
    flex: 0 0 calc(6 / 12 * 100%);
    max-width: calc(6 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-sm-7 {
    flex: 0 0 calc(7 / 12 * 100%);
    max-width: calc(7 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-sm-8 {
    flex: 0 0 calc(8 / 12 * 100%);
    max-width: calc(8 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-sm-9 {
    flex: 0 0 calc(9 / 12 * 100%);
    max-width: calc(9 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-sm-10 {
    flex: 0 0 calc(10 / 12 * 100%);
    max-width: calc(10 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-sm-11 {
    flex: 0 0 calc(11 / 12 * 100%);
    max-width: calc(11 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-sm-12 {
    flex: 0 0 calc(12 / 12 * 100%);
    max-width: calc(12 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}
@media (min-width: 768px) {
  .col-md {
    flex: 1 0 0%;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-md-1 {
    flex: 0 0 calc(1 / 12 * 100%);
    max-width: calc(1 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-md-2 {
    flex: 0 0 calc(2 / 12 * 100%);
    max-width: calc(2 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-md-3 {
    flex: 0 0 calc(3 / 12 * 100%);
    max-width: calc(3 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-md-4 {
    flex: 0 0 calc(4 / 12 * 100%);
    max-width: calc(4 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-md-5 {
    flex: 0 0 calc(5 / 12 * 100%);
    max-width: calc(5 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-md-6 {
    flex: 0 0 calc(6 / 12 * 100%);
    max-width: calc(6 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-md-7 {
    flex: 0 0 calc(7 / 12 * 100%);
    max-width: calc(7 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-md-8 {
    flex: 0 0 calc(8 / 12 * 100%);
    max-width: calc(8 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-md-9 {
    flex: 0 0 calc(9 / 12 * 100%);
    max-width: calc(9 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-md-10 {
    flex: 0 0 calc(10 / 12 * 100%);
    max-width: calc(10 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-md-11 {
    flex: 0 0 calc(11 / 12 * 100%);
    max-width: calc(11 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-md-12 {
    flex: 0 0 calc(12 / 12 * 100%);
    max-width: calc(12 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}
@media (min-width: 1024px) {
  .col-lg {
    flex: 1 0 0%;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-lg-1 {
    flex: 0 0 calc(1 / 12 * 100%);
    max-width: calc(1 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-lg-2 {
    flex: 0 0 calc(2 / 12 * 100%);
    max-width: calc(2 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-lg-3 {
    flex: 0 0 calc(3 / 12 * 100%);
    max-width: calc(3 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-lg-4 {
    flex: 0 0 calc(4 / 12 * 100%);
    max-width: calc(4 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-lg-5 {
    flex: 0 0 calc(5 / 12 * 100%);
    max-width: calc(5 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-lg-6 {
    flex: 0 0 calc(6 / 12 * 100%);
    max-width: calc(6 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-lg-7 {
    flex: 0 0 calc(7 / 12 * 100%);
    max-width: calc(7 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-lg-8 {
    flex: 0 0 calc(8 / 12 * 100%);
    max-width: calc(8 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-lg-9 {
    flex: 0 0 calc(9 / 12 * 100%);
    max-width: calc(9 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-lg-10 {
    flex: 0 0 calc(10 / 12 * 100%);
    max-width: calc(10 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-lg-11 {
    flex: 0 0 calc(11 / 12 * 100%);
    max-width: calc(11 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-lg-12 {
    flex: 0 0 calc(12 / 12 * 100%);
    max-width: calc(12 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}
@media (min-width: 1280px) {
  .col-xl {
    flex: 1 0 0%;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-xl-1 {
    flex: 0 0 calc(1 / 12 * 100%);
    max-width: calc(1 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-xl-2 {
    flex: 0 0 calc(2 / 12 * 100%);
    max-width: calc(2 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-xl-3 {
    flex: 0 0 calc(3 / 12 * 100%);
    max-width: calc(3 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-xl-4 {
    flex: 0 0 calc(4 / 12 * 100%);
    max-width: calc(4 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-xl-5 {
    flex: 0 0 calc(5 / 12 * 100%);
    max-width: calc(5 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-xl-6 {
    flex: 0 0 calc(6 / 12 * 100%);
    max-width: calc(6 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-xl-7 {
    flex: 0 0 calc(7 / 12 * 100%);
    max-width: calc(7 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-xl-8 {
    flex: 0 0 calc(8 / 12 * 100%);
    max-width: calc(8 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-xl-9 {
    flex: 0 0 calc(9 / 12 * 100%);
    max-width: calc(9 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-xl-10 {
    flex: 0 0 calc(10 / 12 * 100%);
    max-width: calc(10 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-xl-11 {
    flex: 0 0 calc(11 / 12 * 100%);
    max-width: calc(11 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .col-xl-12 {
    flex: 0 0 calc(12 / 12 * 100%);
    max-width: calc(12 / 12 * 100%);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}
.g-0 {
  margin-left: 0;
  margin-right: 0;
}
.g-0 > * {
  padding-left: 0;
  padding-right: 0;
}

.g-1 {
  margin-left: calc(var(--space-1) * -1);
  margin-right: calc(var(--space-1) * -1);
}
.g-1 > * {
  padding-left: var(--space-1);
  padding-right: var(--space-1);
}

.g-2 {
  margin-left: calc(var(--space-2) * -1);
  margin-right: calc(var(--space-2) * -1);
}
.g-2 > * {
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

.g-3 {
  margin-left: calc(var(--space-3) * -1);
  margin-right: calc(var(--space-3) * -1);
}
.g-3 > * {
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

.g-4 {
  margin-left: calc(var(--space-4) * -1);
  margin-right: calc(var(--space-4) * -1);
}
.g-4 > * {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.g-5 {
  margin-left: calc(var(--space-6) * -1);
  margin-right: calc(var(--space-6) * -1);
}
.g-5 > * {
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

@media (min-width: 640px) {
  .sm\:grid {
    display: grid;
  }
  .sm\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .sm\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .sm\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .sm\:grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .sm\:grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .sm\:grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .sm\:grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .sm\:grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .sm\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .sm\:grid-rows-1 {
    grid-template-rows: repeat(1, minmax(0, 1fr));
  }
  .sm\:grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .sm\:grid-rows-3 {
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }
  .sm\:grid-rows-4 {
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }
  .sm\:grid-rows-5 {
    grid-template-rows: repeat(5, minmax(0, 1fr));
  }
  .sm\:grid-rows-6 {
    grid-template-rows: repeat(6, minmax(0, 1fr));
  }
  .sm\:col-span-1 {
    grid-column: span 1/span 1;
  }
  .sm\:col-span-2 {
    grid-column: span 2/span 2;
  }
  .sm\:col-span-3 {
    grid-column: span 3/span 3;
  }
  .sm\:col-span-4 {
    grid-column: span 4/span 4;
  }
  .sm\:col-span-5 {
    grid-column: span 5/span 5;
  }
  .sm\:col-span-6 {
    grid-column: span 6/span 6;
  }
  .sm\:col-span-7 {
    grid-column: span 7/span 7;
  }
  .sm\:col-span-8 {
    grid-column: span 8/span 8;
  }
  .sm\:col-span-9 {
    grid-column: span 9/span 9;
  }
  .sm\:col-span-10 {
    grid-column: span 10/span 10;
  }
  .sm\:col-span-11 {
    grid-column: span 11/span 11;
  }
  .sm\:col-span-12 {
    grid-column: span 12/span 12;
  }
  .sm\:col-span-full {
    grid-column: 1/-1;
  }
}
@media (min-width: 768px) {
  .md\:grid {
    display: grid;
  }
  .md\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .md\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .md\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .md\:grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .md\:grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .md\:grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .md\:grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .md\:grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .md\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .md\:grid-rows-1 {
    grid-template-rows: repeat(1, minmax(0, 1fr));
  }
  .md\:grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-rows-3 {
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }
  .md\:grid-rows-4 {
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }
  .md\:grid-rows-5 {
    grid-template-rows: repeat(5, minmax(0, 1fr));
  }
  .md\:grid-rows-6 {
    grid-template-rows: repeat(6, minmax(0, 1fr));
  }
  .md\:col-span-1 {
    grid-column: span 1/span 1;
  }
  .md\:col-span-2 {
    grid-column: span 2/span 2;
  }
  .md\:col-span-3 {
    grid-column: span 3/span 3;
  }
  .md\:col-span-4 {
    grid-column: span 4/span 4;
  }
  .md\:col-span-5 {
    grid-column: span 5/span 5;
  }
  .md\:col-span-6 {
    grid-column: span 6/span 6;
  }
  .md\:col-span-7 {
    grid-column: span 7/span 7;
  }
  .md\:col-span-8 {
    grid-column: span 8/span 8;
  }
  .md\:col-span-9 {
    grid-column: span 9/span 9;
  }
  .md\:col-span-10 {
    grid-column: span 10/span 10;
  }
  .md\:col-span-11 {
    grid-column: span 11/span 11;
  }
  .md\:col-span-12 {
    grid-column: span 12/span 12;
  }
  .md\:col-span-full {
    grid-column: 1/-1;
  }
}
@media (min-width: 1024px) {
  .lg\:grid {
    display: grid;
  }
  .lg\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .lg\:grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .lg\:grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .lg\:grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .lg\:grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .lg\:grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .lg\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .lg\:grid-rows-1 {
    grid-template-rows: repeat(1, minmax(0, 1fr));
  }
  .lg\:grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .lg\:grid-rows-3 {
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }
  .lg\:grid-rows-4 {
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }
  .lg\:grid-rows-5 {
    grid-template-rows: repeat(5, minmax(0, 1fr));
  }
  .lg\:grid-rows-6 {
    grid-template-rows: repeat(6, minmax(0, 1fr));
  }
  .lg\:col-span-1 {
    grid-column: span 1/span 1;
  }
  .lg\:col-span-2 {
    grid-column: span 2/span 2;
  }
  .lg\:col-span-3 {
    grid-column: span 3/span 3;
  }
  .lg\:col-span-4 {
    grid-column: span 4/span 4;
  }
  .lg\:col-span-5 {
    grid-column: span 5/span 5;
  }
  .lg\:col-span-6 {
    grid-column: span 6/span 6;
  }
  .lg\:col-span-7 {
    grid-column: span 7/span 7;
  }
  .lg\:col-span-8 {
    grid-column: span 8/span 8;
  }
  .lg\:col-span-9 {
    grid-column: span 9/span 9;
  }
  .lg\:col-span-10 {
    grid-column: span 10/span 10;
  }
  .lg\:col-span-11 {
    grid-column: span 11/span 11;
  }
  .lg\:col-span-12 {
    grid-column: span 12/span 12;
  }
  .lg\:col-span-full {
    grid-column: 1/-1;
  }
}
@media (min-width: 1280px) {
  .xl\:grid {
    display: grid;
  }
  .xl\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .xl\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .xl\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .xl\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .xl\:grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .xl\:grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .xl\:grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .xl\:grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .xl\:grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .xl\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .xl\:grid-rows-1 {
    grid-template-rows: repeat(1, minmax(0, 1fr));
  }
  .xl\:grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .xl\:grid-rows-3 {
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }
  .xl\:grid-rows-4 {
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }
  .xl\:grid-rows-5 {
    grid-template-rows: repeat(5, minmax(0, 1fr));
  }
  .xl\:grid-rows-6 {
    grid-template-rows: repeat(6, minmax(0, 1fr));
  }
  .xl\:col-span-1 {
    grid-column: span 1/span 1;
  }
  .xl\:col-span-2 {
    grid-column: span 2/span 2;
  }
  .xl\:col-span-3 {
    grid-column: span 3/span 3;
  }
  .xl\:col-span-4 {
    grid-column: span 4/span 4;
  }
  .xl\:col-span-5 {
    grid-column: span 5/span 5;
  }
  .xl\:col-span-6 {
    grid-column: span 6/span 6;
  }
  .xl\:col-span-7 {
    grid-column: span 7/span 7;
  }
  .xl\:col-span-8 {
    grid-column: span 8/span 8;
  }
  .xl\:col-span-9 {
    grid-column: span 9/span 9;
  }
  .xl\:col-span-10 {
    grid-column: span 10/span 10;
  }
  .xl\:col-span-11 {
    grid-column: span 11/span 11;
  }
  .xl\:col-span-12 {
    grid-column: span 12/span 12;
  }
  .xl\:col-span-full {
    grid-column: 1/-1;
  }
}
.space-x-0 > :not([hidden]) ~ :not([hidden]) {
  margin-left: var(--space-0);
}

.space-x-1 > :not([hidden]) ~ :not([hidden]) {
  margin-left: var(--space-1);
}

.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  margin-left: var(--space-2);
}

.space-x-3 > :not([hidden]) ~ :not([hidden]) {
  margin-left: var(--space-3);
}

.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  margin-left: var(--space-4);
}

.space-x-6 > :not([hidden]) ~ :not([hidden]) {
  margin-left: var(--space-6);
}

.space-x-8 > :not([hidden]) ~ :not([hidden]) {
  margin-left: var(--space-8);
}

.space-x-12 > :not([hidden]) ~ :not([hidden]) {
  margin-left: var(--space-12);
}

.space-x-16 > :not([hidden]) ~ :not([hidden]) {
  margin-left: var(--space-16);
}

.space-y-0 > :not([hidden]) ~ :not([hidden]) {
  margin-top: var(--space-0);
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  margin-top: var(--space-1);
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  margin-top: var(--space-2);
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  margin-top: var(--space-3);
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  margin-top: var(--space-4);
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  margin-top: var(--space-6);
}

.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  margin-top: var(--space-8);
}

.space-y-12 > :not([hidden]) ~ :not([hidden]) {
  margin-top: var(--space-12);
}

.space-y-16 > :not([hidden]) ~ :not([hidden]) {
  margin-top: var(--space-16);
}

@media (max-width: 767px) {
  .gap-responsive {
    gap: var(--space-3);
  }
}
@media (max-width: 639px) {
  .gap-responsive {
    gap: var(--space-2);
  }
}
.section-spacing {
  margin-bottom: var(--space-6);
}
@media (max-width: 767px) {
  .section-spacing {
    margin-bottom: var(--space-4);
  }
}
@media (max-width: 639px) {
  .section-spacing {
    margin-bottom: var(--space-3);
  }
}

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

.pt-1 {
  padding-top: var(--space-1);
}

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

.pt-3 {
  padding-top: var(--space-3);
}

.pt-4 {
  padding-top: var(--space-4);
}

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

.pt-6 {
  padding-top: var(--space-6);
}

.pt-8 {
  padding-top: var(--space-8);
}

.pt-10 {
  padding-top: var(--space-10);
}

.pt-12 {
  padding-top: var(--space-12);
}

.pt-16 {
  padding-top: var(--space-16);
}

.pt-20 {
  padding-top: var(--space-20);
}

.pr-0 {
  padding-right: var(--space-0);
}

.pr-1 {
  padding-right: var(--space-1);
}

.pr-2 {
  padding-right: var(--space-2);
}

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

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

.pr-5 {
  padding-right: var(--space-5);
}

.pr-6 {
  padding-right: var(--space-6);
}

.pr-8 {
  padding-right: var(--space-8);
}

.pr-10 {
  padding-right: var(--space-10);
}

.pr-12 {
  padding-right: var(--space-12);
}

.pr-16 {
  padding-right: var(--space-16);
}

.pr-20 {
  padding-right: var(--space-20);
}

.pb-0 {
  padding-bottom: var(--space-0);
}

.pb-1 {
  padding-bottom: var(--space-1);
}

.pb-2 {
  padding-bottom: var(--space-2);
}

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

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

.pb-5 {
  padding-bottom: var(--space-5);
}

.pb-6 {
  padding-bottom: var(--space-6);
}

.pb-8 {
  padding-bottom: var(--space-8);
}

.pb-10 {
  padding-bottom: var(--space-10);
}

.pb-12 {
  padding-bottom: var(--space-12);
}

.pb-16 {
  padding-bottom: var(--space-16);
}

.pb-20 {
  padding-bottom: var(--space-20);
}

.pl-0 {
  padding-left: var(--space-0);
}

.pl-1 {
  padding-left: var(--space-1);
}

.pl-2 {
  padding-left: var(--space-2);
}

.pl-3 {
  padding-left: var(--space-3);
}

.pl-4 {
  padding-left: var(--space-4);
}

.pl-5 {
  padding-left: var(--space-5);
}

.pl-6 {
  padding-left: var(--space-6);
}

.pl-8 {
  padding-left: var(--space-8);
}

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

.pl-12 {
  padding-left: var(--space-12);
}

.pl-16 {
  padding-left: var(--space-16);
}

.pl-20 {
  padding-left: var(--space-20);
}

.pa-0 {
  padding: var(--space-0);
}

.pa-1 {
  padding: var(--space-1);
}

.pa-2 {
  padding: var(--space-2);
}

.pa-3 {
  padding: var(--space-3);
}

.pa-4 {
  padding: var(--space-4);
}

.pa-5 {
  padding: var(--space-5);
}

.pa-6 {
  padding: var(--space-6);
}

.pa-8 {
  padding: var(--space-8);
}

.pa-10 {
  padding: var(--space-10);
}

.pa-12 {
  padding: var(--space-12);
}

.pa-16 {
  padding: var(--space-16);
}

.pa-20 {
  padding: var(--space-20);
}

.p-0 {
  padding: var(--space-0);
}

.p-1 {
  padding: var(--space-1);
}

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

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

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

.p-5 {
  padding: var(--space-5);
}

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

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

.p-10 {
  padding: var(--space-10);
}

.p-12 {
  padding: var(--space-12);
}

.p-16 {
  padding: var(--space-16);
}

.p-20 {
  padding: var(--space-20);
}

.px-0 {
  padding-inline: var(--space-0);
}

.py-0 {
  padding-block: var(--space-0);
}

.px-1 {
  padding-inline: var(--space-1);
}

.py-1 {
  padding-block: var(--space-1);
}

.px-2 {
  padding-inline: var(--space-2);
}

.py-2 {
  padding-block: var(--space-2);
}

.px-3 {
  padding-inline: var(--space-3);
}

.py-3 {
  padding-block: var(--space-3);
}

.px-4 {
  padding-inline: var(--space-4);
}

.py-4 {
  padding-block: var(--space-4);
}

.px-5 {
  padding-inline: var(--space-5);
}

.py-5 {
  padding-block: var(--space-5);
}

.px-6 {
  padding-inline: var(--space-6);
}

.py-6 {
  padding-block: var(--space-6);
}

.px-8 {
  padding-inline: var(--space-8);
}

.py-8 {
  padding-block: var(--space-8);
}

.px-10 {
  padding-inline: var(--space-10);
}

.py-10 {
  padding-block: var(--space-10);
}

.px-12 {
  padding-inline: var(--space-12);
}

.py-12 {
  padding-block: var(--space-12);
}

.px-16 {
  padding-inline: var(--space-16);
}

.py-16 {
  padding-block: var(--space-16);
}

.px-20 {
  padding-inline: var(--space-20);
}

.py-20 {
  padding-block: var(--space-20);
}

.mt-0 {
  margin-top: var(--space-0);
}

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

.mt-2 {
  margin-top: var(--space-2);
}

.mt-3 {
  margin-top: var(--space-3);
}

.mt-4 {
  margin-top: var(--space-4);
}

.mt-5 {
  margin-top: var(--space-5);
}

.mt-6 {
  margin-top: var(--space-6);
}

.mt-8 {
  margin-top: var(--space-8);
}

.mt-10 {
  margin-top: var(--space-10);
}

.mt-12 {
  margin-top: var(--space-12);
}

.mt-16 {
  margin-top: var(--space-16);
}

.mt-20 {
  margin-top: var(--space-20);
}

.mr-0 {
  margin-right: var(--space-0);
}

.mr-1 {
  margin-right: var(--space-1);
}

.mr-2 {
  margin-right: var(--space-2);
}

.mr-3 {
  margin-right: var(--space-3);
}

.mr-4 {
  margin-right: var(--space-4);
}

.mr-5 {
  margin-right: var(--space-5);
}

.mr-6 {
  margin-right: var(--space-6);
}

.mr-8 {
  margin-right: var(--space-8);
}

.mr-10 {
  margin-right: var(--space-10);
}

.mr-12 {
  margin-right: var(--space-12);
}

.mr-16 {
  margin-right: var(--space-16);
}

.mr-20 {
  margin-right: var(--space-20);
}

.mb-0 {
  margin-bottom: var(--space-0);
}

.mb-1 {
  margin-bottom: var(--space-1);
}

.mb-2 {
  margin-bottom: var(--space-2);
}

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

.mb-4 {
  margin-bottom: var(--space-4);
}

.mb-5 {
  margin-bottom: var(--space-5);
}

.mb-6 {
  margin-bottom: var(--space-6);
}

.mb-8 {
  margin-bottom: var(--space-8);
}

.mb-10 {
  margin-bottom: var(--space-10);
}

.mb-12 {
  margin-bottom: var(--space-12);
}

.mb-16 {
  margin-bottom: var(--space-16);
}

.mb-20 {
  margin-bottom: var(--space-20);
}

.ml-0 {
  margin-left: var(--space-0);
}

.ml-1 {
  margin-left: var(--space-1);
}

.ml-2 {
  margin-left: var(--space-2);
}

.ml-3 {
  margin-left: var(--space-3);
}

.ml-4 {
  margin-left: var(--space-4);
}

.ml-5 {
  margin-left: var(--space-5);
}

.ml-6 {
  margin-left: var(--space-6);
}

.ml-8 {
  margin-left: var(--space-8);
}

.ml-10 {
  margin-left: var(--space-10);
}

.ml-12 {
  margin-left: var(--space-12);
}

.ml-16 {
  margin-left: var(--space-16);
}

.ml-20 {
  margin-left: var(--space-20);
}

.ma-0 {
  margin: var(--space-0);
}

.ma-1 {
  margin: var(--space-1);
}

.ma-2 {
  margin: var(--space-2);
}

.ma-3 {
  margin: var(--space-3);
}

.ma-4 {
  margin: var(--space-4);
}

.ma-5 {
  margin: var(--space-5);
}

.ma-6 {
  margin: var(--space-6);
}

.ma-8 {
  margin: var(--space-8);
}

.ma-10 {
  margin: var(--space-10);
}

.ma-12 {
  margin: var(--space-12);
}

.ma-16 {
  margin: var(--space-16);
}

.ma-20 {
  margin: var(--space-20);
}

.m-0 {
  margin: var(--space-0);
}

.m-1 {
  margin: var(--space-1);
}

.m-2 {
  margin: var(--space-2);
}

.m-3 {
  margin: var(--space-3);
}

.m-4 {
  margin: var(--space-4);
}

.m-5 {
  margin: var(--space-5);
}

.m-6 {
  margin: var(--space-6);
}

.m-8 {
  margin: var(--space-8);
}

.m-10 {
  margin: var(--space-10);
}

.m-12 {
  margin: var(--space-12);
}

.m-16 {
  margin: var(--space-16);
}

.m-20 {
  margin: var(--space-20);
}

.mx-0 {
  margin-inline: var(--space-0);
}

.my-0 {
  margin-block: var(--space-0);
}

.mx-1 {
  margin-inline: var(--space-1);
}

.my-1 {
  margin-block: var(--space-1);
}

.mx-2 {
  margin-inline: var(--space-2);
}

.my-2 {
  margin-block: var(--space-2);
}

.mx-3 {
  margin-inline: var(--space-3);
}

.my-3 {
  margin-block: var(--space-3);
}

.mx-4 {
  margin-inline: var(--space-4);
}

.my-4 {
  margin-block: var(--space-4);
}

.mx-5 {
  margin-inline: var(--space-5);
}

.my-5 {
  margin-block: var(--space-5);
}

.mx-6 {
  margin-inline: var(--space-6);
}

.my-6 {
  margin-block: var(--space-6);
}

.mx-8 {
  margin-inline: var(--space-8);
}

.my-8 {
  margin-block: var(--space-8);
}

.mx-10 {
  margin-inline: var(--space-10);
}

.my-10 {
  margin-block: var(--space-10);
}

.mx-12 {
  margin-inline: var(--space-12);
}

.my-12 {
  margin-block: var(--space-12);
}

.mx-16 {
  margin-inline: var(--space-16);
}

.my-16 {
  margin-block: var(--space-16);
}

.mx-20 {
  margin-inline: var(--space-20);
}

.my-20 {
  margin-block: var(--space-20);
}

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

.mr-auto {
  margin-right: auto;
}

.mb-auto {
  margin-bottom: auto;
}

.ml-auto {
  margin-left: auto;
}

.mt-n1 {
  margin-top: calc(-1 * var(--space-1));
}

.mt-n2 {
  margin-top: calc(-1 * var(--space-2));
}

.mt-n3 {
  margin-top: calc(-1 * var(--space-3));
}

.mt-n4 {
  margin-top: calc(-1 * var(--space-4));
}

.mt-n6 {
  margin-top: calc(-1 * var(--space-6));
}

.mt-n8 {
  margin-top: calc(-1 * var(--space-8));
}

.mt-n12 {
  margin-top: calc(-1 * var(--space-12));
}

.mt-n16 {
  margin-top: calc(-1 * var(--space-16));
}

.mt-n80 {
  margin-top: calc(-1 * );
}

.mr-n1 {
  margin-right: calc(-1 * var(--space-1));
}

.mr-n2 {
  margin-right: calc(-1 * var(--space-2));
}

.mr-n3 {
  margin-right: calc(-1 * var(--space-3));
}

.mr-n4 {
  margin-right: calc(-1 * var(--space-4));
}

.mr-n6 {
  margin-right: calc(-1 * var(--space-6));
}

.mr-n8 {
  margin-right: calc(-1 * var(--space-8));
}

.mr-n12 {
  margin-right: calc(-1 * var(--space-12));
}

.mr-n16 {
  margin-right: calc(-1 * var(--space-16));
}

.mr-n80 {
  margin-right: calc(-1 * );
}

.mb-n1 {
  margin-bottom: calc(-1 * var(--space-1));
}

.mb-n2 {
  margin-bottom: calc(-1 * var(--space-2));
}

.mb-n3 {
  margin-bottom: calc(-1 * var(--space-3));
}

.mb-n4 {
  margin-bottom: calc(-1 * var(--space-4));
}

.mb-n6 {
  margin-bottom: calc(-1 * var(--space-6));
}

.mb-n8 {
  margin-bottom: calc(-1 * var(--space-8));
}

.mb-n12 {
  margin-bottom: calc(-1 * var(--space-12));
}

.mb-n16 {
  margin-bottom: calc(-1 * var(--space-16));
}

.mb-n80 {
  margin-bottom: calc(-1 * );
}

.ml-n1 {
  margin-left: calc(-1 * var(--space-1));
}

.ml-n2 {
  margin-left: calc(-1 * var(--space-2));
}

.ml-n3 {
  margin-left: calc(-1 * var(--space-3));
}

.ml-n4 {
  margin-left: calc(-1 * var(--space-4));
}

.ml-n6 {
  margin-left: calc(-1 * var(--space-6));
}

.ml-n8 {
  margin-left: calc(-1 * var(--space-8));
}

.ml-n12 {
  margin-left: calc(-1 * var(--space-12));
}

.ml-n16 {
  margin-left: calc(-1 * var(--space-16));
}

.ml-n80 {
  margin-left: calc(-1 * );
}

.ma-n1 {
  margin: calc(-1 * var(--space-1));
}

.ma-n2 {
  margin: calc(-1 * var(--space-2));
}

.ma-n3 {
  margin: calc(-1 * var(--space-3));
}

.ma-n4 {
  margin: calc(-1 * var(--space-4));
}

.ma-n6 {
  margin: calc(-1 * var(--space-6));
}

.ma-n8 {
  margin: calc(-1 * var(--space-8));
}

.ma-n12 {
  margin: calc(-1 * var(--space-12));
}

.ma-n16 {
  margin: calc(-1 * var(--space-16));
}

.ma-n80 {
  margin: calc(-1 * );
}

.m-n1 {
  margin: calc(-1 * var(--space-1));
}

.m-n2 {
  margin: calc(-1 * var(--space-2));
}

.m-n3 {
  margin: calc(-1 * var(--space-3));
}

.m-n4 {
  margin: calc(-1 * var(--space-4));
}

.m-n6 {
  margin: calc(-1 * var(--space-6));
}

.m-n8 {
  margin: calc(-1 * var(--space-8));
}

.m-n12 {
  margin: calc(-1 * var(--space-12));
}

.m-n16 {
  margin: calc(-1 * var(--space-16));
}

.m-n80 {
  margin: calc(-1 * );
}

.mx-n1 {
  margin-inline: calc(-1 * var(--space-1));
}

.my-n1 {
  margin-block: calc(-1 * var(--space-1));
}

.mx-n2 {
  margin-inline: calc(-1 * var(--space-2));
}

.my-n2 {
  margin-block: calc(-1 * var(--space-2));
}

.mx-n3 {
  margin-inline: calc(-1 * var(--space-3));
}

.my-n3 {
  margin-block: calc(-1 * var(--space-3));
}

.mx-n4 {
  margin-inline: calc(-1 * var(--space-4));
}

.my-n4 {
  margin-block: calc(-1 * var(--space-4));
}

.mx-n6 {
  margin-inline: calc(-1 * var(--space-6));
}

.my-n6 {
  margin-block: calc(-1 * var(--space-6));
}

.mx-n8 {
  margin-inline: calc(-1 * var(--space-8));
}

.my-n8 {
  margin-block: calc(-1 * var(--space-8));
}

.mx-n12 {
  margin-inline: calc(-1 * var(--space-12));
}

.my-n12 {
  margin-block: calc(-1 * var(--space-12));
}

.mx-n16 {
  margin-inline: calc(-1 * var(--space-16));
}

.my-n16 {
  margin-block: calc(-1 * var(--space-16));
}

.mx-n80 {
  margin-inline: calc(-1 * );
}

.my-n80 {
  margin-block: calc(-1 * );
}

@media (min-width: 640px) {
  .sm\:pt-0 {
    padding-top: var(--space-0);
  }
  .sm\:pt-1 {
    padding-top: var(--space-1);
  }
  .sm\:pt-2 {
    padding-top: var(--space-2);
  }
  .sm\:pt-3 {
    padding-top: var(--space-3);
  }
  .sm\:pt-4 {
    padding-top: var(--space-4);
  }
  .sm\:pt-6 {
    padding-top: var(--space-6);
  }
  .sm\:pt-8 {
    padding-top: var(--space-8);
  }
  .sm\:pt-12 {
    padding-top: var(--space-12);
  }
  .sm\:pt-16 {
    padding-top: var(--space-16);
  }
  .sm\:pr-0 {
    padding-right: var(--space-0);
  }
  .sm\:pr-1 {
    padding-right: var(--space-1);
  }
  .sm\:pr-2 {
    padding-right: var(--space-2);
  }
  .sm\:pr-3 {
    padding-right: var(--space-3);
  }
  .sm\:pr-4 {
    padding-right: var(--space-4);
  }
  .sm\:pr-6 {
    padding-right: var(--space-6);
  }
  .sm\:pr-8 {
    padding-right: var(--space-8);
  }
  .sm\:pr-12 {
    padding-right: var(--space-12);
  }
  .sm\:pr-16 {
    padding-right: var(--space-16);
  }
  .sm\:pb-0 {
    padding-bottom: var(--space-0);
  }
  .sm\:pb-1 {
    padding-bottom: var(--space-1);
  }
  .sm\:pb-2 {
    padding-bottom: var(--space-2);
  }
  .sm\:pb-3 {
    padding-bottom: var(--space-3);
  }
  .sm\:pb-4 {
    padding-bottom: var(--space-4);
  }
  .sm\:pb-6 {
    padding-bottom: var(--space-6);
  }
  .sm\:pb-8 {
    padding-bottom: var(--space-8);
  }
  .sm\:pb-12 {
    padding-bottom: var(--space-12);
  }
  .sm\:pb-16 {
    padding-bottom: var(--space-16);
  }
  .sm\:pl-0 {
    padding-left: var(--space-0);
  }
  .sm\:pl-1 {
    padding-left: var(--space-1);
  }
  .sm\:pl-2 {
    padding-left: var(--space-2);
  }
  .sm\:pl-3 {
    padding-left: var(--space-3);
  }
  .sm\:pl-4 {
    padding-left: var(--space-4);
  }
  .sm\:pl-6 {
    padding-left: var(--space-6);
  }
  .sm\:pl-8 {
    padding-left: var(--space-8);
  }
  .sm\:pl-12 {
    padding-left: var(--space-12);
  }
  .sm\:pl-16 {
    padding-left: var(--space-16);
  }
  .sm\:pa-0 {
    padding: var(--space-0);
  }
  .sm\:pa-1 {
    padding: var(--space-1);
  }
  .sm\:pa-2 {
    padding: var(--space-2);
  }
  .sm\:pa-3 {
    padding: var(--space-3);
  }
  .sm\:pa-4 {
    padding: var(--space-4);
  }
  .sm\:pa-6 {
    padding: var(--space-6);
  }
  .sm\:pa-8 {
    padding: var(--space-8);
  }
  .sm\:pa-12 {
    padding: var(--space-12);
  }
  .sm\:pa-16 {
    padding: var(--space-16);
  }
  .sm\:p-0 {
    padding: var(--space-0);
  }
  .sm\:p-1 {
    padding: var(--space-1);
  }
  .sm\:p-2 {
    padding: var(--space-2);
  }
  .sm\:p-3 {
    padding: var(--space-3);
  }
  .sm\:p-4 {
    padding: var(--space-4);
  }
  .sm\:p-6 {
    padding: var(--space-6);
  }
  .sm\:p-8 {
    padding: var(--space-8);
  }
  .sm\:p-12 {
    padding: var(--space-12);
  }
  .sm\:p-16 {
    padding: var(--space-16);
  }
  .sm\:mt-0 {
    margin-top: var(--space-0);
  }
  .sm\:mt-1 {
    margin-top: var(--space-1);
  }
  .sm\:mt-2 {
    margin-top: var(--space-2);
  }
  .sm\:mt-3 {
    margin-top: var(--space-3);
  }
  .sm\:mt-4 {
    margin-top: var(--space-4);
  }
  .sm\:mt-6 {
    margin-top: var(--space-6);
  }
  .sm\:mt-8 {
    margin-top: var(--space-8);
  }
  .sm\:mt-12 {
    margin-top: var(--space-12);
  }
  .sm\:mt-16 {
    margin-top: var(--space-16);
  }
  .sm\:mr-0 {
    margin-right: var(--space-0);
  }
  .sm\:mr-1 {
    margin-right: var(--space-1);
  }
  .sm\:mr-2 {
    margin-right: var(--space-2);
  }
  .sm\:mr-3 {
    margin-right: var(--space-3);
  }
  .sm\:mr-4 {
    margin-right: var(--space-4);
  }
  .sm\:mr-6 {
    margin-right: var(--space-6);
  }
  .sm\:mr-8 {
    margin-right: var(--space-8);
  }
  .sm\:mr-12 {
    margin-right: var(--space-12);
  }
  .sm\:mr-16 {
    margin-right: var(--space-16);
  }
  .sm\:mb-0 {
    margin-bottom: var(--space-0);
  }
  .sm\:mb-1 {
    margin-bottom: var(--space-1);
  }
  .sm\:mb-2 {
    margin-bottom: var(--space-2);
  }
  .sm\:mb-3 {
    margin-bottom: var(--space-3);
  }
  .sm\:mb-4 {
    margin-bottom: var(--space-4);
  }
  .sm\:mb-6 {
    margin-bottom: var(--space-6);
  }
  .sm\:mb-8 {
    margin-bottom: var(--space-8);
  }
  .sm\:mb-12 {
    margin-bottom: var(--space-12);
  }
  .sm\:mb-16 {
    margin-bottom: var(--space-16);
  }
  .sm\:ml-0 {
    margin-left: var(--space-0);
  }
  .sm\:ml-1 {
    margin-left: var(--space-1);
  }
  .sm\:ml-2 {
    margin-left: var(--space-2);
  }
  .sm\:ml-3 {
    margin-left: var(--space-3);
  }
  .sm\:ml-4 {
    margin-left: var(--space-4);
  }
  .sm\:ml-6 {
    margin-left: var(--space-6);
  }
  .sm\:ml-8 {
    margin-left: var(--space-8);
  }
  .sm\:ml-12 {
    margin-left: var(--space-12);
  }
  .sm\:ml-16 {
    margin-left: var(--space-16);
  }
  .sm\:ma-0 {
    margin: var(--space-0);
  }
  .sm\:ma-1 {
    margin: var(--space-1);
  }
  .sm\:ma-2 {
    margin: var(--space-2);
  }
  .sm\:ma-3 {
    margin: var(--space-3);
  }
  .sm\:ma-4 {
    margin: var(--space-4);
  }
  .sm\:ma-6 {
    margin: var(--space-6);
  }
  .sm\:ma-8 {
    margin: var(--space-8);
  }
  .sm\:ma-12 {
    margin: var(--space-12);
  }
  .sm\:ma-16 {
    margin: var(--space-16);
  }
  .sm\:m-0 {
    margin: var(--space-0);
  }
  .sm\:m-1 {
    margin: var(--space-1);
  }
  .sm\:m-2 {
    margin: var(--space-2);
  }
  .sm\:m-3 {
    margin: var(--space-3);
  }
  .sm\:m-4 {
    margin: var(--space-4);
  }
  .sm\:m-6 {
    margin: var(--space-6);
  }
  .sm\:m-8 {
    margin: var(--space-8);
  }
  .sm\:m-12 {
    margin: var(--space-12);
  }
  .sm\:m-16 {
    margin: var(--space-16);
  }
  .sm\:px-0 {
    padding-inline: var(--space-0);
  }
  .sm\:py-0 {
    padding-block: var(--space-0);
  }
  .sm\:mx-0 {
    margin-inline: var(--space-0);
  }
  .sm\:my-0 {
    margin-block: var(--space-0);
  }
  .sm\:px-1 {
    padding-inline: var(--space-1);
  }
  .sm\:py-1 {
    padding-block: var(--space-1);
  }
  .sm\:mx-1 {
    margin-inline: var(--space-1);
  }
  .sm\:my-1 {
    margin-block: var(--space-1);
  }
  .sm\:px-2 {
    padding-inline: var(--space-2);
  }
  .sm\:py-2 {
    padding-block: var(--space-2);
  }
  .sm\:mx-2 {
    margin-inline: var(--space-2);
  }
  .sm\:my-2 {
    margin-block: var(--space-2);
  }
  .sm\:px-3 {
    padding-inline: var(--space-3);
  }
  .sm\:py-3 {
    padding-block: var(--space-3);
  }
  .sm\:mx-3 {
    margin-inline: var(--space-3);
  }
  .sm\:my-3 {
    margin-block: var(--space-3);
  }
  .sm\:px-4 {
    padding-inline: var(--space-4);
  }
  .sm\:py-4 {
    padding-block: var(--space-4);
  }
  .sm\:mx-4 {
    margin-inline: var(--space-4);
  }
  .sm\:my-4 {
    margin-block: var(--space-4);
  }
  .sm\:px-6 {
    padding-inline: var(--space-6);
  }
  .sm\:py-6 {
    padding-block: var(--space-6);
  }
  .sm\:mx-6 {
    margin-inline: var(--space-6);
  }
  .sm\:my-6 {
    margin-block: var(--space-6);
  }
  .sm\:px-8 {
    padding-inline: var(--space-8);
  }
  .sm\:py-8 {
    padding-block: var(--space-8);
  }
  .sm\:mx-8 {
    margin-inline: var(--space-8);
  }
  .sm\:my-8 {
    margin-block: var(--space-8);
  }
  .sm\:px-12 {
    padding-inline: var(--space-12);
  }
  .sm\:py-12 {
    padding-block: var(--space-12);
  }
  .sm\:mx-12 {
    margin-inline: var(--space-12);
  }
  .sm\:my-12 {
    margin-block: var(--space-12);
  }
  .sm\:px-16 {
    padding-inline: var(--space-16);
  }
  .sm\:py-16 {
    padding-block: var(--space-16);
  }
  .sm\:mx-16 {
    margin-inline: var(--space-16);
  }
  .sm\:my-16 {
    margin-block: var(--space-16);
  }
  .sm\:mt-auto {
    margin-top: auto;
  }
  .sm\:mr-auto {
    margin-right: auto;
  }
  .sm\:mb-auto {
    margin-bottom: auto;
  }
  .sm\:ml-auto {
    margin-left: auto;
  }
}
@media (min-width: 768px) {
  .md\:pt-0 {
    padding-top: var(--space-0);
  }
  .md\:pt-1 {
    padding-top: var(--space-1);
  }
  .md\:pt-2 {
    padding-top: var(--space-2);
  }
  .md\:pt-3 {
    padding-top: var(--space-3);
  }
  .md\:pt-4 {
    padding-top: var(--space-4);
  }
  .md\:pt-6 {
    padding-top: var(--space-6);
  }
  .md\:pt-8 {
    padding-top: var(--space-8);
  }
  .md\:pt-12 {
    padding-top: var(--space-12);
  }
  .md\:pt-16 {
    padding-top: var(--space-16);
  }
  .md\:pr-0 {
    padding-right: var(--space-0);
  }
  .md\:pr-1 {
    padding-right: var(--space-1);
  }
  .md\:pr-2 {
    padding-right: var(--space-2);
  }
  .md\:pr-3 {
    padding-right: var(--space-3);
  }
  .md\:pr-4 {
    padding-right: var(--space-4);
  }
  .md\:pr-6 {
    padding-right: var(--space-6);
  }
  .md\:pr-8 {
    padding-right: var(--space-8);
  }
  .md\:pr-12 {
    padding-right: var(--space-12);
  }
  .md\:pr-16 {
    padding-right: var(--space-16);
  }
  .md\:pb-0 {
    padding-bottom: var(--space-0);
  }
  .md\:pb-1 {
    padding-bottom: var(--space-1);
  }
  .md\:pb-2 {
    padding-bottom: var(--space-2);
  }
  .md\:pb-3 {
    padding-bottom: var(--space-3);
  }
  .md\:pb-4 {
    padding-bottom: var(--space-4);
  }
  .md\:pb-6 {
    padding-bottom: var(--space-6);
  }
  .md\:pb-8 {
    padding-bottom: var(--space-8);
  }
  .md\:pb-12 {
    padding-bottom: var(--space-12);
  }
  .md\:pb-16 {
    padding-bottom: var(--space-16);
  }
  .md\:pl-0 {
    padding-left: var(--space-0);
  }
  .md\:pl-1 {
    padding-left: var(--space-1);
  }
  .md\:pl-2 {
    padding-left: var(--space-2);
  }
  .md\:pl-3 {
    padding-left: var(--space-3);
  }
  .md\:pl-4 {
    padding-left: var(--space-4);
  }
  .md\:pl-6 {
    padding-left: var(--space-6);
  }
  .md\:pl-8 {
    padding-left: var(--space-8);
  }
  .md\:pl-12 {
    padding-left: var(--space-12);
  }
  .md\:pl-16 {
    padding-left: var(--space-16);
  }
  .md\:pa-0 {
    padding: var(--space-0);
  }
  .md\:pa-1 {
    padding: var(--space-1);
  }
  .md\:pa-2 {
    padding: var(--space-2);
  }
  .md\:pa-3 {
    padding: var(--space-3);
  }
  .md\:pa-4 {
    padding: var(--space-4);
  }
  .md\:pa-6 {
    padding: var(--space-6);
  }
  .md\:pa-8 {
    padding: var(--space-8);
  }
  .md\:pa-12 {
    padding: var(--space-12);
  }
  .md\:pa-16 {
    padding: var(--space-16);
  }
  .md\:p-0 {
    padding: var(--space-0);
  }
  .md\:p-1 {
    padding: var(--space-1);
  }
  .md\:p-2 {
    padding: var(--space-2);
  }
  .md\:p-3 {
    padding: var(--space-3);
  }
  .md\:p-4 {
    padding: var(--space-4);
  }
  .md\:p-6 {
    padding: var(--space-6);
  }
  .md\:p-8 {
    padding: var(--space-8);
  }
  .md\:p-12 {
    padding: var(--space-12);
  }
  .md\:p-16 {
    padding: var(--space-16);
  }
  .md\:mt-0 {
    margin-top: var(--space-0);
  }
  .md\:mt-1 {
    margin-top: var(--space-1);
  }
  .md\:mt-2 {
    margin-top: var(--space-2);
  }
  .md\:mt-3 {
    margin-top: var(--space-3);
  }
  .md\:mt-4 {
    margin-top: var(--space-4);
  }
  .md\:mt-6 {
    margin-top: var(--space-6);
  }
  .md\:mt-8 {
    margin-top: var(--space-8);
  }
  .md\:mt-12 {
    margin-top: var(--space-12);
  }
  .md\:mt-16 {
    margin-top: var(--space-16);
  }
  .md\:mr-0 {
    margin-right: var(--space-0);
  }
  .md\:mr-1 {
    margin-right: var(--space-1);
  }
  .md\:mr-2 {
    margin-right: var(--space-2);
  }
  .md\:mr-3 {
    margin-right: var(--space-3);
  }
  .md\:mr-4 {
    margin-right: var(--space-4);
  }
  .md\:mr-6 {
    margin-right: var(--space-6);
  }
  .md\:mr-8 {
    margin-right: var(--space-8);
  }
  .md\:mr-12 {
    margin-right: var(--space-12);
  }
  .md\:mr-16 {
    margin-right: var(--space-16);
  }
  .md\:mb-0 {
    margin-bottom: var(--space-0);
  }
  .md\:mb-1 {
    margin-bottom: var(--space-1);
  }
  .md\:mb-2 {
    margin-bottom: var(--space-2);
  }
  .md\:mb-3 {
    margin-bottom: var(--space-3);
  }
  .md\:mb-4 {
    margin-bottom: var(--space-4);
  }
  .md\:mb-6 {
    margin-bottom: var(--space-6);
  }
  .md\:mb-8 {
    margin-bottom: var(--space-8);
  }
  .md\:mb-12 {
    margin-bottom: var(--space-12);
  }
  .md\:mb-16 {
    margin-bottom: var(--space-16);
  }
  .md\:ml-0 {
    margin-left: var(--space-0);
  }
  .md\:ml-1 {
    margin-left: var(--space-1);
  }
  .md\:ml-2 {
    margin-left: var(--space-2);
  }
  .md\:ml-3 {
    margin-left: var(--space-3);
  }
  .md\:ml-4 {
    margin-left: var(--space-4);
  }
  .md\:ml-6 {
    margin-left: var(--space-6);
  }
  .md\:ml-8 {
    margin-left: var(--space-8);
  }
  .md\:ml-12 {
    margin-left: var(--space-12);
  }
  .md\:ml-16 {
    margin-left: var(--space-16);
  }
  .md\:ma-0 {
    margin: var(--space-0);
  }
  .md\:ma-1 {
    margin: var(--space-1);
  }
  .md\:ma-2 {
    margin: var(--space-2);
  }
  .md\:ma-3 {
    margin: var(--space-3);
  }
  .md\:ma-4 {
    margin: var(--space-4);
  }
  .md\:ma-6 {
    margin: var(--space-6);
  }
  .md\:ma-8 {
    margin: var(--space-8);
  }
  .md\:ma-12 {
    margin: var(--space-12);
  }
  .md\:ma-16 {
    margin: var(--space-16);
  }
  .md\:m-0 {
    margin: var(--space-0);
  }
  .md\:m-1 {
    margin: var(--space-1);
  }
  .md\:m-2 {
    margin: var(--space-2);
  }
  .md\:m-3 {
    margin: var(--space-3);
  }
  .md\:m-4 {
    margin: var(--space-4);
  }
  .md\:m-6 {
    margin: var(--space-6);
  }
  .md\:m-8 {
    margin: var(--space-8);
  }
  .md\:m-12 {
    margin: var(--space-12);
  }
  .md\:m-16 {
    margin: var(--space-16);
  }
  .md\:px-0 {
    padding-inline: var(--space-0);
  }
  .md\:py-0 {
    padding-block: var(--space-0);
  }
  .md\:mx-0 {
    margin-inline: var(--space-0);
  }
  .md\:my-0 {
    margin-block: var(--space-0);
  }
  .md\:px-1 {
    padding-inline: var(--space-1);
  }
  .md\:py-1 {
    padding-block: var(--space-1);
  }
  .md\:mx-1 {
    margin-inline: var(--space-1);
  }
  .md\:my-1 {
    margin-block: var(--space-1);
  }
  .md\:px-2 {
    padding-inline: var(--space-2);
  }
  .md\:py-2 {
    padding-block: var(--space-2);
  }
  .md\:mx-2 {
    margin-inline: var(--space-2);
  }
  .md\:my-2 {
    margin-block: var(--space-2);
  }
  .md\:px-3 {
    padding-inline: var(--space-3);
  }
  .md\:py-3 {
    padding-block: var(--space-3);
  }
  .md\:mx-3 {
    margin-inline: var(--space-3);
  }
  .md\:my-3 {
    margin-block: var(--space-3);
  }
  .md\:px-4 {
    padding-inline: var(--space-4);
  }
  .md\:py-4 {
    padding-block: var(--space-4);
  }
  .md\:mx-4 {
    margin-inline: var(--space-4);
  }
  .md\:my-4 {
    margin-block: var(--space-4);
  }
  .md\:px-6 {
    padding-inline: var(--space-6);
  }
  .md\:py-6 {
    padding-block: var(--space-6);
  }
  .md\:mx-6 {
    margin-inline: var(--space-6);
  }
  .md\:my-6 {
    margin-block: var(--space-6);
  }
  .md\:px-8 {
    padding-inline: var(--space-8);
  }
  .md\:py-8 {
    padding-block: var(--space-8);
  }
  .md\:mx-8 {
    margin-inline: var(--space-8);
  }
  .md\:my-8 {
    margin-block: var(--space-8);
  }
  .md\:px-12 {
    padding-inline: var(--space-12);
  }
  .md\:py-12 {
    padding-block: var(--space-12);
  }
  .md\:mx-12 {
    margin-inline: var(--space-12);
  }
  .md\:my-12 {
    margin-block: var(--space-12);
  }
  .md\:px-16 {
    padding-inline: var(--space-16);
  }
  .md\:py-16 {
    padding-block: var(--space-16);
  }
  .md\:mx-16 {
    margin-inline: var(--space-16);
  }
  .md\:my-16 {
    margin-block: var(--space-16);
  }
  .md\:mt-auto {
    margin-top: auto;
  }
  .md\:mr-auto {
    margin-right: auto;
  }
  .md\:mb-auto {
    margin-bottom: auto;
  }
  .md\:ml-auto {
    margin-left: auto;
  }
}
@media (min-width: 1024px) {
  .lg\:pt-0 {
    padding-top: var(--space-0);
  }
  .lg\:pt-1 {
    padding-top: var(--space-1);
  }
  .lg\:pt-2 {
    padding-top: var(--space-2);
  }
  .lg\:pt-3 {
    padding-top: var(--space-3);
  }
  .lg\:pt-4 {
    padding-top: var(--space-4);
  }
  .lg\:pt-6 {
    padding-top: var(--space-6);
  }
  .lg\:pt-8 {
    padding-top: var(--space-8);
  }
  .lg\:pt-12 {
    padding-top: var(--space-12);
  }
  .lg\:pt-16 {
    padding-top: var(--space-16);
  }
  .lg\:pr-0 {
    padding-right: var(--space-0);
  }
  .lg\:pr-1 {
    padding-right: var(--space-1);
  }
  .lg\:pr-2 {
    padding-right: var(--space-2);
  }
  .lg\:pr-3 {
    padding-right: var(--space-3);
  }
  .lg\:pr-4 {
    padding-right: var(--space-4);
  }
  .lg\:pr-6 {
    padding-right: var(--space-6);
  }
  .lg\:pr-8 {
    padding-right: var(--space-8);
  }
  .lg\:pr-12 {
    padding-right: var(--space-12);
  }
  .lg\:pr-16 {
    padding-right: var(--space-16);
  }
  .lg\:pb-0 {
    padding-bottom: var(--space-0);
  }
  .lg\:pb-1 {
    padding-bottom: var(--space-1);
  }
  .lg\:pb-2 {
    padding-bottom: var(--space-2);
  }
  .lg\:pb-3 {
    padding-bottom: var(--space-3);
  }
  .lg\:pb-4 {
    padding-bottom: var(--space-4);
  }
  .lg\:pb-6 {
    padding-bottom: var(--space-6);
  }
  .lg\:pb-8 {
    padding-bottom: var(--space-8);
  }
  .lg\:pb-12 {
    padding-bottom: var(--space-12);
  }
  .lg\:pb-16 {
    padding-bottom: var(--space-16);
  }
  .lg\:pl-0 {
    padding-left: var(--space-0);
  }
  .lg\:pl-1 {
    padding-left: var(--space-1);
  }
  .lg\:pl-2 {
    padding-left: var(--space-2);
  }
  .lg\:pl-3 {
    padding-left: var(--space-3);
  }
  .lg\:pl-4 {
    padding-left: var(--space-4);
  }
  .lg\:pl-6 {
    padding-left: var(--space-6);
  }
  .lg\:pl-8 {
    padding-left: var(--space-8);
  }
  .lg\:pl-12 {
    padding-left: var(--space-12);
  }
  .lg\:pl-16 {
    padding-left: var(--space-16);
  }
  .lg\:pa-0 {
    padding: var(--space-0);
  }
  .lg\:pa-1 {
    padding: var(--space-1);
  }
  .lg\:pa-2 {
    padding: var(--space-2);
  }
  .lg\:pa-3 {
    padding: var(--space-3);
  }
  .lg\:pa-4 {
    padding: var(--space-4);
  }
  .lg\:pa-6 {
    padding: var(--space-6);
  }
  .lg\:pa-8 {
    padding: var(--space-8);
  }
  .lg\:pa-12 {
    padding: var(--space-12);
  }
  .lg\:pa-16 {
    padding: var(--space-16);
  }
  .lg\:p-0 {
    padding: var(--space-0);
  }
  .lg\:p-1 {
    padding: var(--space-1);
  }
  .lg\:p-2 {
    padding: var(--space-2);
  }
  .lg\:p-3 {
    padding: var(--space-3);
  }
  .lg\:p-4 {
    padding: var(--space-4);
  }
  .lg\:p-6 {
    padding: var(--space-6);
  }
  .lg\:p-8 {
    padding: var(--space-8);
  }
  .lg\:p-12 {
    padding: var(--space-12);
  }
  .lg\:p-16 {
    padding: var(--space-16);
  }
  .lg\:mt-0 {
    margin-top: var(--space-0);
  }
  .lg\:mt-1 {
    margin-top: var(--space-1);
  }
  .lg\:mt-2 {
    margin-top: var(--space-2);
  }
  .lg\:mt-3 {
    margin-top: var(--space-3);
  }
  .lg\:mt-4 {
    margin-top: var(--space-4);
  }
  .lg\:mt-6 {
    margin-top: var(--space-6);
  }
  .lg\:mt-8 {
    margin-top: var(--space-8);
  }
  .lg\:mt-12 {
    margin-top: var(--space-12);
  }
  .lg\:mt-16 {
    margin-top: var(--space-16);
  }
  .lg\:mr-0 {
    margin-right: var(--space-0);
  }
  .lg\:mr-1 {
    margin-right: var(--space-1);
  }
  .lg\:mr-2 {
    margin-right: var(--space-2);
  }
  .lg\:mr-3 {
    margin-right: var(--space-3);
  }
  .lg\:mr-4 {
    margin-right: var(--space-4);
  }
  .lg\:mr-6 {
    margin-right: var(--space-6);
  }
  .lg\:mr-8 {
    margin-right: var(--space-8);
  }
  .lg\:mr-12 {
    margin-right: var(--space-12);
  }
  .lg\:mr-16 {
    margin-right: var(--space-16);
  }
  .lg\:mb-0 {
    margin-bottom: var(--space-0);
  }
  .lg\:mb-1 {
    margin-bottom: var(--space-1);
  }
  .lg\:mb-2 {
    margin-bottom: var(--space-2);
  }
  .lg\:mb-3 {
    margin-bottom: var(--space-3);
  }
  .lg\:mb-4 {
    margin-bottom: var(--space-4);
  }
  .lg\:mb-6 {
    margin-bottom: var(--space-6);
  }
  .lg\:mb-8 {
    margin-bottom: var(--space-8);
  }
  .lg\:mb-12 {
    margin-bottom: var(--space-12);
  }
  .lg\:mb-16 {
    margin-bottom: var(--space-16);
  }
  .lg\:ml-0 {
    margin-left: var(--space-0);
  }
  .lg\:ml-1 {
    margin-left: var(--space-1);
  }
  .lg\:ml-2 {
    margin-left: var(--space-2);
  }
  .lg\:ml-3 {
    margin-left: var(--space-3);
  }
  .lg\:ml-4 {
    margin-left: var(--space-4);
  }
  .lg\:ml-6 {
    margin-left: var(--space-6);
  }
  .lg\:ml-8 {
    margin-left: var(--space-8);
  }
  .lg\:ml-12 {
    margin-left: var(--space-12);
  }
  .lg\:ml-16 {
    margin-left: var(--space-16);
  }
  .lg\:ma-0 {
    margin: var(--space-0);
  }
  .lg\:ma-1 {
    margin: var(--space-1);
  }
  .lg\:ma-2 {
    margin: var(--space-2);
  }
  .lg\:ma-3 {
    margin: var(--space-3);
  }
  .lg\:ma-4 {
    margin: var(--space-4);
  }
  .lg\:ma-6 {
    margin: var(--space-6);
  }
  .lg\:ma-8 {
    margin: var(--space-8);
  }
  .lg\:ma-12 {
    margin: var(--space-12);
  }
  .lg\:ma-16 {
    margin: var(--space-16);
  }
  .lg\:m-0 {
    margin: var(--space-0);
  }
  .lg\:m-1 {
    margin: var(--space-1);
  }
  .lg\:m-2 {
    margin: var(--space-2);
  }
  .lg\:m-3 {
    margin: var(--space-3);
  }
  .lg\:m-4 {
    margin: var(--space-4);
  }
  .lg\:m-6 {
    margin: var(--space-6);
  }
  .lg\:m-8 {
    margin: var(--space-8);
  }
  .lg\:m-12 {
    margin: var(--space-12);
  }
  .lg\:m-16 {
    margin: var(--space-16);
  }
  .lg\:px-0 {
    padding-inline: var(--space-0);
  }
  .lg\:py-0 {
    padding-block: var(--space-0);
  }
  .lg\:mx-0 {
    margin-inline: var(--space-0);
  }
  .lg\:my-0 {
    margin-block: var(--space-0);
  }
  .lg\:px-1 {
    padding-inline: var(--space-1);
  }
  .lg\:py-1 {
    padding-block: var(--space-1);
  }
  .lg\:mx-1 {
    margin-inline: var(--space-1);
  }
  .lg\:my-1 {
    margin-block: var(--space-1);
  }
  .lg\:px-2 {
    padding-inline: var(--space-2);
  }
  .lg\:py-2 {
    padding-block: var(--space-2);
  }
  .lg\:mx-2 {
    margin-inline: var(--space-2);
  }
  .lg\:my-2 {
    margin-block: var(--space-2);
  }
  .lg\:px-3 {
    padding-inline: var(--space-3);
  }
  .lg\:py-3 {
    padding-block: var(--space-3);
  }
  .lg\:mx-3 {
    margin-inline: var(--space-3);
  }
  .lg\:my-3 {
    margin-block: var(--space-3);
  }
  .lg\:px-4 {
    padding-inline: var(--space-4);
  }
  .lg\:py-4 {
    padding-block: var(--space-4);
  }
  .lg\:mx-4 {
    margin-inline: var(--space-4);
  }
  .lg\:my-4 {
    margin-block: var(--space-4);
  }
  .lg\:px-6 {
    padding-inline: var(--space-6);
  }
  .lg\:py-6 {
    padding-block: var(--space-6);
  }
  .lg\:mx-6 {
    margin-inline: var(--space-6);
  }
  .lg\:my-6 {
    margin-block: var(--space-6);
  }
  .lg\:px-8 {
    padding-inline: var(--space-8);
  }
  .lg\:py-8 {
    padding-block: var(--space-8);
  }
  .lg\:mx-8 {
    margin-inline: var(--space-8);
  }
  .lg\:my-8 {
    margin-block: var(--space-8);
  }
  .lg\:px-12 {
    padding-inline: var(--space-12);
  }
  .lg\:py-12 {
    padding-block: var(--space-12);
  }
  .lg\:mx-12 {
    margin-inline: var(--space-12);
  }
  .lg\:my-12 {
    margin-block: var(--space-12);
  }
  .lg\:px-16 {
    padding-inline: var(--space-16);
  }
  .lg\:py-16 {
    padding-block: var(--space-16);
  }
  .lg\:mx-16 {
    margin-inline: var(--space-16);
  }
  .lg\:my-16 {
    margin-block: var(--space-16);
  }
  .lg\:mt-auto {
    margin-top: auto;
  }
  .lg\:mr-auto {
    margin-right: auto;
  }
  .lg\:mb-auto {
    margin-bottom: auto;
  }
  .lg\:ml-auto {
    margin-left: auto;
  }
}
@media (min-width: 1280px) {
  .xl\:pt-0 {
    padding-top: var(--space-0);
  }
  .xl\:pt-1 {
    padding-top: var(--space-1);
  }
  .xl\:pt-2 {
    padding-top: var(--space-2);
  }
  .xl\:pt-3 {
    padding-top: var(--space-3);
  }
  .xl\:pt-4 {
    padding-top: var(--space-4);
  }
  .xl\:pt-6 {
    padding-top: var(--space-6);
  }
  .xl\:pt-8 {
    padding-top: var(--space-8);
  }
  .xl\:pt-12 {
    padding-top: var(--space-12);
  }
  .xl\:pt-16 {
    padding-top: var(--space-16);
  }
  .xl\:pr-0 {
    padding-right: var(--space-0);
  }
  .xl\:pr-1 {
    padding-right: var(--space-1);
  }
  .xl\:pr-2 {
    padding-right: var(--space-2);
  }
  .xl\:pr-3 {
    padding-right: var(--space-3);
  }
  .xl\:pr-4 {
    padding-right: var(--space-4);
  }
  .xl\:pr-6 {
    padding-right: var(--space-6);
  }
  .xl\:pr-8 {
    padding-right: var(--space-8);
  }
  .xl\:pr-12 {
    padding-right: var(--space-12);
  }
  .xl\:pr-16 {
    padding-right: var(--space-16);
  }
  .xl\:pb-0 {
    padding-bottom: var(--space-0);
  }
  .xl\:pb-1 {
    padding-bottom: var(--space-1);
  }
  .xl\:pb-2 {
    padding-bottom: var(--space-2);
  }
  .xl\:pb-3 {
    padding-bottom: var(--space-3);
  }
  .xl\:pb-4 {
    padding-bottom: var(--space-4);
  }
  .xl\:pb-6 {
    padding-bottom: var(--space-6);
  }
  .xl\:pb-8 {
    padding-bottom: var(--space-8);
  }
  .xl\:pb-12 {
    padding-bottom: var(--space-12);
  }
  .xl\:pb-16 {
    padding-bottom: var(--space-16);
  }
  .xl\:pl-0 {
    padding-left: var(--space-0);
  }
  .xl\:pl-1 {
    padding-left: var(--space-1);
  }
  .xl\:pl-2 {
    padding-left: var(--space-2);
  }
  .xl\:pl-3 {
    padding-left: var(--space-3);
  }
  .xl\:pl-4 {
    padding-left: var(--space-4);
  }
  .xl\:pl-6 {
    padding-left: var(--space-6);
  }
  .xl\:pl-8 {
    padding-left: var(--space-8);
  }
  .xl\:pl-12 {
    padding-left: var(--space-12);
  }
  .xl\:pl-16 {
    padding-left: var(--space-16);
  }
  .xl\:pa-0 {
    padding: var(--space-0);
  }
  .xl\:pa-1 {
    padding: var(--space-1);
  }
  .xl\:pa-2 {
    padding: var(--space-2);
  }
  .xl\:pa-3 {
    padding: var(--space-3);
  }
  .xl\:pa-4 {
    padding: var(--space-4);
  }
  .xl\:pa-6 {
    padding: var(--space-6);
  }
  .xl\:pa-8 {
    padding: var(--space-8);
  }
  .xl\:pa-12 {
    padding: var(--space-12);
  }
  .xl\:pa-16 {
    padding: var(--space-16);
  }
  .xl\:p-0 {
    padding: var(--space-0);
  }
  .xl\:p-1 {
    padding: var(--space-1);
  }
  .xl\:p-2 {
    padding: var(--space-2);
  }
  .xl\:p-3 {
    padding: var(--space-3);
  }
  .xl\:p-4 {
    padding: var(--space-4);
  }
  .xl\:p-6 {
    padding: var(--space-6);
  }
  .xl\:p-8 {
    padding: var(--space-8);
  }
  .xl\:p-12 {
    padding: var(--space-12);
  }
  .xl\:p-16 {
    padding: var(--space-16);
  }
  .xl\:mt-0 {
    margin-top: var(--space-0);
  }
  .xl\:mt-1 {
    margin-top: var(--space-1);
  }
  .xl\:mt-2 {
    margin-top: var(--space-2);
  }
  .xl\:mt-3 {
    margin-top: var(--space-3);
  }
  .xl\:mt-4 {
    margin-top: var(--space-4);
  }
  .xl\:mt-6 {
    margin-top: var(--space-6);
  }
  .xl\:mt-8 {
    margin-top: var(--space-8);
  }
  .xl\:mt-12 {
    margin-top: var(--space-12);
  }
  .xl\:mt-16 {
    margin-top: var(--space-16);
  }
  .xl\:mr-0 {
    margin-right: var(--space-0);
  }
  .xl\:mr-1 {
    margin-right: var(--space-1);
  }
  .xl\:mr-2 {
    margin-right: var(--space-2);
  }
  .xl\:mr-3 {
    margin-right: var(--space-3);
  }
  .xl\:mr-4 {
    margin-right: var(--space-4);
  }
  .xl\:mr-6 {
    margin-right: var(--space-6);
  }
  .xl\:mr-8 {
    margin-right: var(--space-8);
  }
  .xl\:mr-12 {
    margin-right: var(--space-12);
  }
  .xl\:mr-16 {
    margin-right: var(--space-16);
  }
  .xl\:mb-0 {
    margin-bottom: var(--space-0);
  }
  .xl\:mb-1 {
    margin-bottom: var(--space-1);
  }
  .xl\:mb-2 {
    margin-bottom: var(--space-2);
  }
  .xl\:mb-3 {
    margin-bottom: var(--space-3);
  }
  .xl\:mb-4 {
    margin-bottom: var(--space-4);
  }
  .xl\:mb-6 {
    margin-bottom: var(--space-6);
  }
  .xl\:mb-8 {
    margin-bottom: var(--space-8);
  }
  .xl\:mb-12 {
    margin-bottom: var(--space-12);
  }
  .xl\:mb-16 {
    margin-bottom: var(--space-16);
  }
  .xl\:ml-0 {
    margin-left: var(--space-0);
  }
  .xl\:ml-1 {
    margin-left: var(--space-1);
  }
  .xl\:ml-2 {
    margin-left: var(--space-2);
  }
  .xl\:ml-3 {
    margin-left: var(--space-3);
  }
  .xl\:ml-4 {
    margin-left: var(--space-4);
  }
  .xl\:ml-6 {
    margin-left: var(--space-6);
  }
  .xl\:ml-8 {
    margin-left: var(--space-8);
  }
  .xl\:ml-12 {
    margin-left: var(--space-12);
  }
  .xl\:ml-16 {
    margin-left: var(--space-16);
  }
  .xl\:ma-0 {
    margin: var(--space-0);
  }
  .xl\:ma-1 {
    margin: var(--space-1);
  }
  .xl\:ma-2 {
    margin: var(--space-2);
  }
  .xl\:ma-3 {
    margin: var(--space-3);
  }
  .xl\:ma-4 {
    margin: var(--space-4);
  }
  .xl\:ma-6 {
    margin: var(--space-6);
  }
  .xl\:ma-8 {
    margin: var(--space-8);
  }
  .xl\:ma-12 {
    margin: var(--space-12);
  }
  .xl\:ma-16 {
    margin: var(--space-16);
  }
  .xl\:m-0 {
    margin: var(--space-0);
  }
  .xl\:m-1 {
    margin: var(--space-1);
  }
  .xl\:m-2 {
    margin: var(--space-2);
  }
  .xl\:m-3 {
    margin: var(--space-3);
  }
  .xl\:m-4 {
    margin: var(--space-4);
  }
  .xl\:m-6 {
    margin: var(--space-6);
  }
  .xl\:m-8 {
    margin: var(--space-8);
  }
  .xl\:m-12 {
    margin: var(--space-12);
  }
  .xl\:m-16 {
    margin: var(--space-16);
  }
  .xl\:px-0 {
    padding-inline: var(--space-0);
  }
  .xl\:py-0 {
    padding-block: var(--space-0);
  }
  .xl\:mx-0 {
    margin-inline: var(--space-0);
  }
  .xl\:my-0 {
    margin-block: var(--space-0);
  }
  .xl\:px-1 {
    padding-inline: var(--space-1);
  }
  .xl\:py-1 {
    padding-block: var(--space-1);
  }
  .xl\:mx-1 {
    margin-inline: var(--space-1);
  }
  .xl\:my-1 {
    margin-block: var(--space-1);
  }
  .xl\:px-2 {
    padding-inline: var(--space-2);
  }
  .xl\:py-2 {
    padding-block: var(--space-2);
  }
  .xl\:mx-2 {
    margin-inline: var(--space-2);
  }
  .xl\:my-2 {
    margin-block: var(--space-2);
  }
  .xl\:px-3 {
    padding-inline: var(--space-3);
  }
  .xl\:py-3 {
    padding-block: var(--space-3);
  }
  .xl\:mx-3 {
    margin-inline: var(--space-3);
  }
  .xl\:my-3 {
    margin-block: var(--space-3);
  }
  .xl\:px-4 {
    padding-inline: var(--space-4);
  }
  .xl\:py-4 {
    padding-block: var(--space-4);
  }
  .xl\:mx-4 {
    margin-inline: var(--space-4);
  }
  .xl\:my-4 {
    margin-block: var(--space-4);
  }
  .xl\:px-6 {
    padding-inline: var(--space-6);
  }
  .xl\:py-6 {
    padding-block: var(--space-6);
  }
  .xl\:mx-6 {
    margin-inline: var(--space-6);
  }
  .xl\:my-6 {
    margin-block: var(--space-6);
  }
  .xl\:px-8 {
    padding-inline: var(--space-8);
  }
  .xl\:py-8 {
    padding-block: var(--space-8);
  }
  .xl\:mx-8 {
    margin-inline: var(--space-8);
  }
  .xl\:my-8 {
    margin-block: var(--space-8);
  }
  .xl\:px-12 {
    padding-inline: var(--space-12);
  }
  .xl\:py-12 {
    padding-block: var(--space-12);
  }
  .xl\:mx-12 {
    margin-inline: var(--space-12);
  }
  .xl\:my-12 {
    margin-block: var(--space-12);
  }
  .xl\:px-16 {
    padding-inline: var(--space-16);
  }
  .xl\:py-16 {
    padding-block: var(--space-16);
  }
  .xl\:mx-16 {
    margin-inline: var(--space-16);
  }
  .xl\:my-16 {
    margin-block: var(--space-16);
  }
  .xl\:mt-auto {
    margin-top: auto;
  }
  .xl\:mr-auto {
    margin-right: auto;
  }
  .xl\:mb-auto {
    margin-bottom: auto;
  }
  .xl\:ml-auto {
    margin-left: auto;
  }
}
.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.inset-auto {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
}

.top-auto {
  top: auto;
}

.top-0 {
  top: 0;
}

.top-1 {
  top: var(--space-1);
}

.\-top-1 {
  top: calc(var(--space-1) * -1);
}

.top-2 {
  top: var(--space-2);
}

.\-top-2 {
  top: calc(var(--space-2) * -1);
}

.top-3 {
  top: var(--space-3);
}

.\-top-3 {
  top: calc(var(--space-3) * -1);
}

.top-4 {
  top: var(--space-4);
}

.\-top-4 {
  top: calc(var(--space-4) * -1);
}

.top-5 {
  top: var(--space-5);
}

.\-top-5 {
  top: calc(var(--space-5) * -1);
}

.top-6 {
  top: var(--space-6);
}

.\-top-6 {
  top: calc(var(--space-6) * -1);
}

.top-8 {
  top: var(--space-8);
}

.\-top-8 {
  top: calc(var(--space-8) * -1);
}

.top-10 {
  top: var(--space-10);
}

.\-top-10 {
  top: calc(var(--space-10) * -1);
}

.top-12 {
  top: var(--space-12);
}

.\-top-12 {
  top: calc(var(--space-12) * -1);
}

.top-16 {
  top: var(--space-16);
}

.\-top-16 {
  top: calc(var(--space-16) * -1);
}

.top-20 {
  top: var(--space-20);
}

.\-top-20 {
  top: calc(var(--space-20) * -1);
}

.top-24 {
  top: var(--space-20);
}

.\-top-24 {
  top: calc(var(--space-20) * -1);
}

.top-50 {
  top: 50%;
}

.top-100 {
  top: 100%;
}

.right-auto {
  right: auto;
}

.right-0 {
  right: 0;
}

.right-1 {
  right: var(--space-1);
}

.\-right-1 {
  right: calc(var(--space-1) * -1);
}

.right-2 {
  right: var(--space-2);
}

.\-right-2 {
  right: calc(var(--space-2) * -1);
}

.right-3 {
  right: var(--space-3);
}

.\-right-3 {
  right: calc(var(--space-3) * -1);
}

.right-4 {
  right: var(--space-4);
}

.\-right-4 {
  right: calc(var(--space-4) * -1);
}

.right-5 {
  right: var(--space-5);
}

.\-right-5 {
  right: calc(var(--space-5) * -1);
}

.right-6 {
  right: var(--space-6);
}

.\-right-6 {
  right: calc(var(--space-6) * -1);
}

.right-8 {
  right: var(--space-8);
}

.\-right-8 {
  right: calc(var(--space-8) * -1);
}

.right-10 {
  right: var(--space-10);
}

.\-right-10 {
  right: calc(var(--space-10) * -1);
}

.right-12 {
  right: var(--space-12);
}

.\-right-12 {
  right: calc(var(--space-12) * -1);
}

.right-16 {
  right: var(--space-16);
}

.\-right-16 {
  right: calc(var(--space-16) * -1);
}

.right-20 {
  right: var(--space-20);
}

.\-right-20 {
  right: calc(var(--space-20) * -1);
}

.right-24 {
  right: var(--space-20);
}

.\-right-24 {
  right: calc(var(--space-20) * -1);
}

.right-50 {
  right: 50%;
}

.right-100 {
  right: 100%;
}

.bottom-auto {
  bottom: auto;
}

.bottom-0 {
  bottom: 0;
}

.bottom-1 {
  bottom: var(--space-1);
}

.\-bottom-1 {
  bottom: calc(var(--space-1) * -1);
}

.bottom-2 {
  bottom: var(--space-2);
}

.\-bottom-2 {
  bottom: calc(var(--space-2) * -1);
}

.bottom-3 {
  bottom: var(--space-3);
}

.\-bottom-3 {
  bottom: calc(var(--space-3) * -1);
}

.bottom-4 {
  bottom: var(--space-4);
}

.\-bottom-4 {
  bottom: calc(var(--space-4) * -1);
}

.bottom-5 {
  bottom: var(--space-5);
}

.\-bottom-5 {
  bottom: calc(var(--space-5) * -1);
}

.bottom-6 {
  bottom: var(--space-6);
}

.\-bottom-6 {
  bottom: calc(var(--space-6) * -1);
}

.bottom-8 {
  bottom: var(--space-8);
}

.\-bottom-8 {
  bottom: calc(var(--space-8) * -1);
}

.bottom-10 {
  bottom: var(--space-10);
}

.\-bottom-10 {
  bottom: calc(var(--space-10) * -1);
}

.bottom-12 {
  bottom: var(--space-12);
}

.\-bottom-12 {
  bottom: calc(var(--space-12) * -1);
}

.bottom-16 {
  bottom: var(--space-16);
}

.\-bottom-16 {
  bottom: calc(var(--space-16) * -1);
}

.bottom-20 {
  bottom: var(--space-20);
}

.\-bottom-20 {
  bottom: calc(var(--space-20) * -1);
}

.bottom-24 {
  bottom: var(--space-20);
}

.\-bottom-24 {
  bottom: calc(var(--space-20) * -1);
}

.bottom-50 {
  bottom: 50%;
}

.bottom-100 {
  bottom: 100%;
}

.left-auto {
  left: auto;
}

.left-0 {
  left: 0;
}

.left-1 {
  left: var(--space-1);
}

.\-left-1 {
  left: calc(var(--space-1) * -1);
}

.left-2 {
  left: var(--space-2);
}

.\-left-2 {
  left: calc(var(--space-2) * -1);
}

.left-3 {
  left: var(--space-3);
}

.\-left-3 {
  left: calc(var(--space-3) * -1);
}

.left-4 {
  left: var(--space-4);
}

.\-left-4 {
  left: calc(var(--space-4) * -1);
}

.left-5 {
  left: var(--space-5);
}

.\-left-5 {
  left: calc(var(--space-5) * -1);
}

.left-6 {
  left: var(--space-6);
}

.\-left-6 {
  left: calc(var(--space-6) * -1);
}

.left-8 {
  left: var(--space-8);
}

.\-left-8 {
  left: calc(var(--space-8) * -1);
}

.left-10 {
  left: var(--space-10);
}

.\-left-10 {
  left: calc(var(--space-10) * -1);
}

.left-12 {
  left: var(--space-12);
}

.\-left-12 {
  left: calc(var(--space-12) * -1);
}

.left-16 {
  left: var(--space-16);
}

.\-left-16 {
  left: calc(var(--space-16) * -1);
}

.left-20 {
  left: var(--space-20);
}

.\-left-20 {
  left: calc(var(--space-20) * -1);
}

.left-24 {
  left: var(--space-20);
}

.\-left-24 {
  left: calc(var(--space-20) * -1);
}

.left-50 {
  left: 50%;
}

.left-100 {
  left: 100%;
}

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

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

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

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

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

.z-9998 {
  z-index: 9998;
}

.z-9999 {
  z-index: 9999;
}

.z-auto {
  z-index: auto;
}

.z-popup {
  z-index: var(--z-popup);
}

.z-sticky {
  z-index: var(--z-sticky);
}

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

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

.z-popover {
  z-index: var(--z-popover);
}

.z-tooltip {
  z-index: var(--z-tooltip);
}

.z-max {
  z-index: var(--z-max);
}

.center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.center-x {
  left: 50%;
  transform: translateX(-50%);
}

.center-y {
  top: 50%;
  transform: translateY(-50%);
}

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

.transform-none {
  transform: none;
}

.translate-x-0 {
  --transform-translate-x: 0;
}

.translate-x-1 {
  --transform-translate-x: var(--space-1);
}

.\-translate-x-1 {
  --transform-translate-x: calc(var(--space-1) * -1);
}

.translate-x-2 {
  --transform-translate-x: var(--space-2);
}

.\-translate-x-2 {
  --transform-translate-x: calc(var(--space-2) * -1);
}

.translate-x-4 {
  --transform-translate-x: var(--space-4);
}

.\-translate-x-4 {
  --transform-translate-x: calc(var(--space-4) * -1);
}

.translate-x-full {
  --transform-translate-x: 100%;
}

.\-translate-x-full {
  --transform-translate-x: -100%;
}

.translate-x-n50 {
  --transform-translate-x: -50%;
}

.translate-y-0 {
  --transform-translate-y: 0;
}

.translate-y-1 {
  --transform-translate-y: var(--space-1);
}

.\-translate-y-1 {
  --transform-translate-y: calc(var(--space-1) * -1);
}

.translate-y-2 {
  --transform-translate-y: var(--space-2);
}

.\-translate-y-2 {
  --transform-translate-y: calc(var(--space-2) * -1);
}

.translate-y-4 {
  --transform-translate-y: var(--space-4);
}

.\-translate-y-4 {
  --transform-translate-y: calc(var(--space-4) * -1);
}

.translate-y-full {
  --transform-translate-y: 100%;
}

.\-translate-y-full {
  --transform-translate-y: -100%;
}

.translate-y-n50 {
  --transform-translate-y: -50%;
}

.overlay-full {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
}

@media (min-width: 640px) {
  .sm:static {
    position: static;
  }
  .sm:fixed {
    position: fixed;
  }
  .sm:absolute {
    position: absolute;
  }
  .sm:relative {
    position: relative;
  }
  .sm:sticky {
    position: sticky;
  }
  .sm:inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .sm:inset-auto {
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
  }
  .sm:top-auto {
    top: auto;
  }
  .sm:top-0 {
    top: 0;
  }
  .sm:top-1 {
    top: var(--space-1);
  }
  .sm:top-2 {
    top: var(--space-2);
  }
  .sm:top-3 {
    top: var(--space-3);
  }
  .sm:top-4 {
    top: var(--space-4);
  }
  .sm:top-6 {
    top: var(--space-6);
  }
  .sm:top-8 {
    top: var(--space-8);
  }
  .sm:top-12 {
    top: var(--space-12);
  }
  .sm:top-16 {
    top: var(--space-16);
  }
  .sm:top-50 {
    top: 50%;
  }
  .sm:top-100 {
    top: 100%;
  }
  .sm:right-auto {
    right: auto;
  }
  .sm:right-0 {
    right: 0;
  }
  .sm:right-1 {
    right: var(--space-1);
  }
  .sm:right-2 {
    right: var(--space-2);
  }
  .sm:right-3 {
    right: var(--space-3);
  }
  .sm:right-4 {
    right: var(--space-4);
  }
  .sm:right-6 {
    right: var(--space-6);
  }
  .sm:right-8 {
    right: var(--space-8);
  }
  .sm:right-12 {
    right: var(--space-12);
  }
  .sm:right-16 {
    right: var(--space-16);
  }
  .sm:right-50 {
    right: 50%;
  }
  .sm:right-100 {
    right: 100%;
  }
  .sm:bottom-auto {
    bottom: auto;
  }
  .sm:bottom-0 {
    bottom: 0;
  }
  .sm:bottom-1 {
    bottom: var(--space-1);
  }
  .sm:bottom-2 {
    bottom: var(--space-2);
  }
  .sm:bottom-3 {
    bottom: var(--space-3);
  }
  .sm:bottom-4 {
    bottom: var(--space-4);
  }
  .sm:bottom-6 {
    bottom: var(--space-6);
  }
  .sm:bottom-8 {
    bottom: var(--space-8);
  }
  .sm:bottom-12 {
    bottom: var(--space-12);
  }
  .sm:bottom-16 {
    bottom: var(--space-16);
  }
  .sm:bottom-50 {
    bottom: 50%;
  }
  .sm:bottom-100 {
    bottom: 100%;
  }
  .sm:left-auto {
    left: auto;
  }
  .sm:left-0 {
    left: 0;
  }
  .sm:left-1 {
    left: var(--space-1);
  }
  .sm:left-2 {
    left: var(--space-2);
  }
  .sm:left-3 {
    left: var(--space-3);
  }
  .sm:left-4 {
    left: var(--space-4);
  }
  .sm:left-6 {
    left: var(--space-6);
  }
  .sm:left-8 {
    left: var(--space-8);
  }
  .sm:left-12 {
    left: var(--space-12);
  }
  .sm:left-16 {
    left: var(--space-16);
  }
  .sm:left-50 {
    left: 50%;
  }
  .sm:left-100 {
    left: 100%;
  }
  .sm:z-0 {
    z-index: 0;
  }
  .sm:z-10 {
    z-index: 10;
  }
  .sm:z-20 {
    z-index: 20;
  }
  .sm:z-30 {
    z-index: 30;
  }
  .sm:z-40 {
    z-index: 40;
  }
  .sm:z-50 {
    z-index: 50;
  }
  .sm:z-9998 {
    z-index: 9998;
  }
  .sm:z-9999 {
    z-index: 9999;
  }
  .sm:z-auto {
    z-index: auto;
  }
  .sm:z-popup {
    z-index: var(--z-popup);
  }
  .sm:z-modal {
    z-index: var(--z-modal);
  }
  .sm:z-tooltip {
    z-index: var(--z-tooltip);
  }
  .sm:z-modal-content {
    z-index: var(--z-modal-content);
  }
  .sm:z-popover {
    z-index: var(--z-popover);
  }
  .sm:z-modal-above {
    z-index: calc(var(--z-modal-content) + 10);
  }
  .sm:z-popup-above {
    z-index: calc(var(--z-popup) + 10);
  }
  .sm:translate-x-0 {
    --transform-translate-x: 0;
  }
  .sm:translate-x-1 {
    --transform-translate-x: var(--space-1);
  }
  .sm:translate-x-2 {
    --transform-translate-x: var(--space-2);
  }
  .sm:translate-x-4 {
    --transform-translate-x: var(--space-4);
  }
  .sm:translate-x-full {
    --transform-translate-x: 100%;
  }
  .sm:translate-y-0 {
    --transform-translate-y: 0;
  }
  .sm:translate-y-1 {
    --transform-translate-y: var(--space-1);
  }
  .sm:translate-y-2 {
    --transform-translate-y: var(--space-2);
  }
  .sm:translate-y-4 {
    --transform-translate-y: var(--space-4);
  }
  .sm:translate-y-full {
    --transform-translate-y: 100%;
  }
  .sm:center-absolute {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .sm:center-x {
    left: 50%;
    transform: translateX(-50%);
  }
  .sm:center-y {
    top: 50%;
    transform: translateY(-50%);
  }
}
@media (min-width: 768px) {
  .md:static {
    position: static;
  }
  .md:fixed {
    position: fixed;
  }
  .md:absolute {
    position: absolute;
  }
  .md:relative {
    position: relative;
  }
  .md:sticky {
    position: sticky;
  }
  .md:inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .md:inset-auto {
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
  }
  .md:top-auto {
    top: auto;
  }
  .md:top-0 {
    top: 0;
  }
  .md:top-1 {
    top: var(--space-1);
  }
  .md:top-2 {
    top: var(--space-2);
  }
  .md:top-3 {
    top: var(--space-3);
  }
  .md:top-4 {
    top: var(--space-4);
  }
  .md:top-6 {
    top: var(--space-6);
  }
  .md:top-8 {
    top: var(--space-8);
  }
  .md:top-12 {
    top: var(--space-12);
  }
  .md:top-16 {
    top: var(--space-16);
  }
  .md:top-50 {
    top: 50%;
  }
  .md:top-100 {
    top: 100%;
  }
  .md:right-auto {
    right: auto;
  }
  .md:right-0 {
    right: 0;
  }
  .md:right-1 {
    right: var(--space-1);
  }
  .md:right-2 {
    right: var(--space-2);
  }
  .md:right-3 {
    right: var(--space-3);
  }
  .md:right-4 {
    right: var(--space-4);
  }
  .md:right-6 {
    right: var(--space-6);
  }
  .md:right-8 {
    right: var(--space-8);
  }
  .md:right-12 {
    right: var(--space-12);
  }
  .md:right-16 {
    right: var(--space-16);
  }
  .md:right-50 {
    right: 50%;
  }
  .md:right-100 {
    right: 100%;
  }
  .md:bottom-auto {
    bottom: auto;
  }
  .md:bottom-0 {
    bottom: 0;
  }
  .md:bottom-1 {
    bottom: var(--space-1);
  }
  .md:bottom-2 {
    bottom: var(--space-2);
  }
  .md:bottom-3 {
    bottom: var(--space-3);
  }
  .md:bottom-4 {
    bottom: var(--space-4);
  }
  .md:bottom-6 {
    bottom: var(--space-6);
  }
  .md:bottom-8 {
    bottom: var(--space-8);
  }
  .md:bottom-12 {
    bottom: var(--space-12);
  }
  .md:bottom-16 {
    bottom: var(--space-16);
  }
  .md:bottom-50 {
    bottom: 50%;
  }
  .md:bottom-100 {
    bottom: 100%;
  }
  .md:left-auto {
    left: auto;
  }
  .md:left-0 {
    left: 0;
  }
  .md:left-1 {
    left: var(--space-1);
  }
  .md:left-2 {
    left: var(--space-2);
  }
  .md:left-3 {
    left: var(--space-3);
  }
  .md:left-4 {
    left: var(--space-4);
  }
  .md:left-6 {
    left: var(--space-6);
  }
  .md:left-8 {
    left: var(--space-8);
  }
  .md:left-12 {
    left: var(--space-12);
  }
  .md:left-16 {
    left: var(--space-16);
  }
  .md:left-50 {
    left: 50%;
  }
  .md:left-100 {
    left: 100%;
  }
  .md:z-0 {
    z-index: 0;
  }
  .md:z-10 {
    z-index: 10;
  }
  .md:z-20 {
    z-index: 20;
  }
  .md:z-30 {
    z-index: 30;
  }
  .md:z-40 {
    z-index: 40;
  }
  .md:z-50 {
    z-index: 50;
  }
  .md:z-9998 {
    z-index: 9998;
  }
  .md:z-9999 {
    z-index: 9999;
  }
  .md:z-auto {
    z-index: auto;
  }
  .md:z-popup {
    z-index: var(--z-popup);
  }
  .md:z-modal {
    z-index: var(--z-modal);
  }
  .md:z-tooltip {
    z-index: var(--z-tooltip);
  }
  .md:z-modal-content {
    z-index: var(--z-modal-content);
  }
  .md:z-popover {
    z-index: var(--z-popover);
  }
  .md:z-modal-above {
    z-index: calc(var(--z-modal-content) + 10);
  }
  .md:z-popup-above {
    z-index: calc(var(--z-popup) + 10);
  }
  .md:translate-x-0 {
    --transform-translate-x: 0;
  }
  .md:translate-x-1 {
    --transform-translate-x: var(--space-1);
  }
  .md:translate-x-2 {
    --transform-translate-x: var(--space-2);
  }
  .md:translate-x-4 {
    --transform-translate-x: var(--space-4);
  }
  .md:translate-x-full {
    --transform-translate-x: 100%;
  }
  .md:translate-y-0 {
    --transform-translate-y: 0;
  }
  .md:translate-y-1 {
    --transform-translate-y: var(--space-1);
  }
  .md:translate-y-2 {
    --transform-translate-y: var(--space-2);
  }
  .md:translate-y-4 {
    --transform-translate-y: var(--space-4);
  }
  .md:translate-y-full {
    --transform-translate-y: 100%;
  }
  .md:center-absolute {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .md:center-x {
    left: 50%;
    transform: translateX(-50%);
  }
  .md:center-y {
    top: 50%;
    transform: translateY(-50%);
  }
}
@media (min-width: 1024px) {
  .lg:static {
    position: static;
  }
  .lg:fixed {
    position: fixed;
  }
  .lg:absolute {
    position: absolute;
  }
  .lg:relative {
    position: relative;
  }
  .lg:sticky {
    position: sticky;
  }
  .lg:inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .lg:inset-auto {
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
  }
  .lg:top-auto {
    top: auto;
  }
  .lg:top-0 {
    top: 0;
  }
  .lg:top-1 {
    top: var(--space-1);
  }
  .lg:top-2 {
    top: var(--space-2);
  }
  .lg:top-3 {
    top: var(--space-3);
  }
  .lg:top-4 {
    top: var(--space-4);
  }
  .lg:top-6 {
    top: var(--space-6);
  }
  .lg:top-8 {
    top: var(--space-8);
  }
  .lg:top-12 {
    top: var(--space-12);
  }
  .lg:top-16 {
    top: var(--space-16);
  }
  .lg:top-50 {
    top: 50%;
  }
  .lg:top-100 {
    top: 100%;
  }
  .lg:right-auto {
    right: auto;
  }
  .lg:right-0 {
    right: 0;
  }
  .lg:right-1 {
    right: var(--space-1);
  }
  .lg:right-2 {
    right: var(--space-2);
  }
  .lg:right-3 {
    right: var(--space-3);
  }
  .lg:right-4 {
    right: var(--space-4);
  }
  .lg:right-6 {
    right: var(--space-6);
  }
  .lg:right-8 {
    right: var(--space-8);
  }
  .lg:right-12 {
    right: var(--space-12);
  }
  .lg:right-16 {
    right: var(--space-16);
  }
  .lg:right-50 {
    right: 50%;
  }
  .lg:right-100 {
    right: 100%;
  }
  .lg:bottom-auto {
    bottom: auto;
  }
  .lg:bottom-0 {
    bottom: 0;
  }
  .lg:bottom-1 {
    bottom: var(--space-1);
  }
  .lg:bottom-2 {
    bottom: var(--space-2);
  }
  .lg:bottom-3 {
    bottom: var(--space-3);
  }
  .lg:bottom-4 {
    bottom: var(--space-4);
  }
  .lg:bottom-6 {
    bottom: var(--space-6);
  }
  .lg:bottom-8 {
    bottom: var(--space-8);
  }
  .lg:bottom-12 {
    bottom: var(--space-12);
  }
  .lg:bottom-16 {
    bottom: var(--space-16);
  }
  .lg:bottom-50 {
    bottom: 50%;
  }
  .lg:bottom-100 {
    bottom: 100%;
  }
  .lg:left-auto {
    left: auto;
  }
  .lg:left-0 {
    left: 0;
  }
  .lg:left-1 {
    left: var(--space-1);
  }
  .lg:left-2 {
    left: var(--space-2);
  }
  .lg:left-3 {
    left: var(--space-3);
  }
  .lg:left-4 {
    left: var(--space-4);
  }
  .lg:left-6 {
    left: var(--space-6);
  }
  .lg:left-8 {
    left: var(--space-8);
  }
  .lg:left-12 {
    left: var(--space-12);
  }
  .lg:left-16 {
    left: var(--space-16);
  }
  .lg:left-50 {
    left: 50%;
  }
  .lg:left-100 {
    left: 100%;
  }
  .lg:z-0 {
    z-index: 0;
  }
  .lg:z-10 {
    z-index: 10;
  }
  .lg:z-20 {
    z-index: 20;
  }
  .lg:z-30 {
    z-index: 30;
  }
  .lg:z-40 {
    z-index: 40;
  }
  .lg:z-50 {
    z-index: 50;
  }
  .lg:z-9998 {
    z-index: 9998;
  }
  .lg:z-9999 {
    z-index: 9999;
  }
  .lg:z-auto {
    z-index: auto;
  }
  .lg:z-popup {
    z-index: var(--z-popup);
  }
  .lg:z-modal {
    z-index: var(--z-modal);
  }
  .lg:z-tooltip {
    z-index: var(--z-tooltip);
  }
  .lg:z-modal-content {
    z-index: var(--z-modal-content);
  }
  .lg:z-popover {
    z-index: var(--z-popover);
  }
  .lg:z-modal-above {
    z-index: calc(var(--z-modal-content) + 10);
  }
  .lg:z-popup-above {
    z-index: calc(var(--z-popup) + 10);
  }
  .lg:translate-x-0 {
    --transform-translate-x: 0;
  }
  .lg:translate-x-1 {
    --transform-translate-x: var(--space-1);
  }
  .lg:translate-x-2 {
    --transform-translate-x: var(--space-2);
  }
  .lg:translate-x-4 {
    --transform-translate-x: var(--space-4);
  }
  .lg:translate-x-full {
    --transform-translate-x: 100%;
  }
  .lg:translate-y-0 {
    --transform-translate-y: 0;
  }
  .lg:translate-y-1 {
    --transform-translate-y: var(--space-1);
  }
  .lg:translate-y-2 {
    --transform-translate-y: var(--space-2);
  }
  .lg:translate-y-4 {
    --transform-translate-y: var(--space-4);
  }
  .lg:translate-y-full {
    --transform-translate-y: 100%;
  }
  .lg:center-absolute {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .lg:center-x {
    left: 50%;
    transform: translateX(-50%);
  }
  .lg:center-y {
    top: 50%;
    transform: translateY(-50%);
  }
}
@media (min-width: 1280px) {
  .xl:static {
    position: static;
  }
  .xl:fixed {
    position: fixed;
  }
  .xl:absolute {
    position: absolute;
  }
  .xl:relative {
    position: relative;
  }
  .xl:sticky {
    position: sticky;
  }
  .xl:inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .xl:inset-auto {
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
  }
  .xl:top-auto {
    top: auto;
  }
  .xl:top-0 {
    top: 0;
  }
  .xl:top-1 {
    top: var(--space-1);
  }
  .xl:top-2 {
    top: var(--space-2);
  }
  .xl:top-3 {
    top: var(--space-3);
  }
  .xl:top-4 {
    top: var(--space-4);
  }
  .xl:top-6 {
    top: var(--space-6);
  }
  .xl:top-8 {
    top: var(--space-8);
  }
  .xl:top-12 {
    top: var(--space-12);
  }
  .xl:top-16 {
    top: var(--space-16);
  }
  .xl:top-50 {
    top: 50%;
  }
  .xl:top-100 {
    top: 100%;
  }
  .xl:right-auto {
    right: auto;
  }
  .xl:right-0 {
    right: 0;
  }
  .xl:right-1 {
    right: var(--space-1);
  }
  .xl:right-2 {
    right: var(--space-2);
  }
  .xl:right-3 {
    right: var(--space-3);
  }
  .xl:right-4 {
    right: var(--space-4);
  }
  .xl:right-6 {
    right: var(--space-6);
  }
  .xl:right-8 {
    right: var(--space-8);
  }
  .xl:right-12 {
    right: var(--space-12);
  }
  .xl:right-16 {
    right: var(--space-16);
  }
  .xl:right-50 {
    right: 50%;
  }
  .xl:right-100 {
    right: 100%;
  }
  .xl:bottom-auto {
    bottom: auto;
  }
  .xl:bottom-0 {
    bottom: 0;
  }
  .xl:bottom-1 {
    bottom: var(--space-1);
  }
  .xl:bottom-2 {
    bottom: var(--space-2);
  }
  .xl:bottom-3 {
    bottom: var(--space-3);
  }
  .xl:bottom-4 {
    bottom: var(--space-4);
  }
  .xl:bottom-6 {
    bottom: var(--space-6);
  }
  .xl:bottom-8 {
    bottom: var(--space-8);
  }
  .xl:bottom-12 {
    bottom: var(--space-12);
  }
  .xl:bottom-16 {
    bottom: var(--space-16);
  }
  .xl:bottom-50 {
    bottom: 50%;
  }
  .xl:bottom-100 {
    bottom: 100%;
  }
  .xl:left-auto {
    left: auto;
  }
  .xl:left-0 {
    left: 0;
  }
  .xl:left-1 {
    left: var(--space-1);
  }
  .xl:left-2 {
    left: var(--space-2);
  }
  .xl:left-3 {
    left: var(--space-3);
  }
  .xl:left-4 {
    left: var(--space-4);
  }
  .xl:left-6 {
    left: var(--space-6);
  }
  .xl:left-8 {
    left: var(--space-8);
  }
  .xl:left-12 {
    left: var(--space-12);
  }
  .xl:left-16 {
    left: var(--space-16);
  }
  .xl:left-50 {
    left: 50%;
  }
  .xl:left-100 {
    left: 100%;
  }
  .xl:z-0 {
    z-index: 0;
  }
  .xl:z-10 {
    z-index: 10;
  }
  .xl:z-20 {
    z-index: 20;
  }
  .xl:z-30 {
    z-index: 30;
  }
  .xl:z-40 {
    z-index: 40;
  }
  .xl:z-50 {
    z-index: 50;
  }
  .xl:z-9998 {
    z-index: 9998;
  }
  .xl:z-9999 {
    z-index: 9999;
  }
  .xl:z-auto {
    z-index: auto;
  }
  .xl:z-popup {
    z-index: var(--z-popup);
  }
  .xl:z-modal {
    z-index: var(--z-modal);
  }
  .xl:z-tooltip {
    z-index: var(--z-tooltip);
  }
  .xl:z-modal-content {
    z-index: var(--z-modal-content);
  }
  .xl:z-popover {
    z-index: var(--z-popover);
  }
  .xl:z-modal-above {
    z-index: calc(var(--z-modal-content) + 10);
  }
  .xl:z-popup-above {
    z-index: calc(var(--z-popup) + 10);
  }
  .xl:translate-x-0 {
    --transform-translate-x: 0;
  }
  .xl:translate-x-1 {
    --transform-translate-x: var(--space-1);
  }
  .xl:translate-x-2 {
    --transform-translate-x: var(--space-2);
  }
  .xl:translate-x-4 {
    --transform-translate-x: var(--space-4);
  }
  .xl:translate-x-full {
    --transform-translate-x: 100%;
  }
  .xl:translate-y-0 {
    --transform-translate-y: 0;
  }
  .xl:translate-y-1 {
    --transform-translate-y: var(--space-1);
  }
  .xl:translate-y-2 {
    --transform-translate-y: var(--space-2);
  }
  .xl:translate-y-4 {
    --transform-translate-y: var(--space-4);
  }
  .xl:translate-y-full {
    --transform-translate-y: 100%;
  }
  .xl:center-absolute {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .xl:center-x {
    left: 50%;
    transform: translateX(-50%);
  }
  .xl:center-y {
    top: 50%;
    transform: translateY(-50%);
  }
}
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--space-4);
  padding-left: var(--space-4);
}
.container-sm {
  max-width: var(--content-max-width-sm);
}
.container-md {
  max-width: var(--content-max-width-md);
}
.container-lg {
  max-width: var(--content-max-width-lg);
}
.container-xl {
  max-width: var(--content-max-width-xl);
}
.container-2xl {
  max-width: var(--content-max-width-2xl);
}
.container-fluid {
  max-width: none;
}
.container-centered {
  text-align: center;
}

.spacing {
  padding: var(--space-6);
}
.spacing-compact {
  padding: var(--space-2);
}
.spacing-dense {
  padding: var(--space-3);
}
.spacing-normal {
  padding: var(--space-4);
}
.spacing-spacious {
  padding: var(--space-6);
}
.spacing-v {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}
.spacing-h {
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}
@media (max-width: 767px) {
  .spacing {
    padding: var(--space-4);
  }
  .spacing-v {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }
  .spacing-h {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

.header-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  background: none;
  border: none;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
}
.header-toggle:hover {
  background: var(--color-surface-elevated);
}
.header-title-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}
.header-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0;
}
.header-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}
.header-action {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  text-decoration: none;
  color: var(--color-text);
}
.sidebar-logo:hover {
  color: var(--color-primary);
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2) 0;
}
.sidebar-footer {
  padding: var(--space-4);
  border-top: 1px solid var(--color-border);
  margin-top: auto;
}

.aspect-auto {
  aspect-ratio: auto;
}

.aspect-square {
  aspect-ratio: 1;
}

.aspect-video {
  aspect-ratio: 1.7777777778;
}

.aspect-golden {
  aspect-ratio: 1.618;
}

.aspect-golden-vertical {
  aspect-ratio: 0.6180469716;
}

.aspect-1 {
  aspect-ratio: 1;
}

.aspect-2 {
  aspect-ratio: 2;
}

.aspect-3 {
  aspect-ratio: 3;
}

.aspect-4 {
  aspect-ratio: 4;
}

.aspect-5 {
  aspect-ratio: 5;
}

.aspect-6 {
  aspect-ratio: 6;
}

.aspect-7 {
  aspect-ratio: 7;
}

.aspect-8 {
  aspect-ratio: 8;
}

.aspect-9 {
  aspect-ratio: 9;
}

.aspect-10 {
  aspect-ratio: 10;
}

.aspect-11 {
  aspect-ratio: 11;
}

.aspect-12 {
  aspect-ratio: 12;
}

.aspect-13 {
  aspect-ratio: 13;
}

.aspect-14 {
  aspect-ratio: 14;
}

.aspect-15 {
  aspect-ratio: 15;
}

.aspect-16 {
  aspect-ratio: 16;
}

.aspect-1-2 {
  aspect-ratio: 0.5;
}

.aspect-1-3 {
  aspect-ratio: 0.3333333333;
}

.aspect-1-4 {
  aspect-ratio: 0.25;
}

.aspect-1-5 {
  aspect-ratio: 0.2;
}

.aspect-1-6 {
  aspect-ratio: 0.1666666667;
}

.aspect-2-3 {
  aspect-ratio: 0.6666666667;
}

.aspect-3-2 {
  aspect-ratio: 1.5;
}

.aspect-3-4 {
  aspect-ratio: 0.75;
}

.aspect-3-5 {
  aspect-ratio: 0.6;
}

.aspect-4-3 {
  aspect-ratio: 1.3333333333;
}

.aspect-4-5 {
  aspect-ratio: 0.8;
}

.aspect-5-3 {
  aspect-ratio: 1.6666666667;
}

.aspect-5-4 {
  aspect-ratio: 1.25;
}

.aspect-9-16 {
  aspect-ratio: 0.5625;
}

.aspect-9-21 {
  aspect-ratio: 0.4285714286;
}

.aspect-16-9 {
  aspect-ratio: 1.7777777778;
}

.aspect-16-10 {
  aspect-ratio: 1.6;
}

.aspect-21-9 {
  aspect-ratio: 2.3333333333;
}

.aspect-container {
  position: relative;
  width: 100%;
}
.aspect-container::before {
  content: "";
  display: block;
  padding-bottom: 56.25%;
}
.aspect-container > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  width: 100%;
  height: 100%;
}
.aspect-container-aspect-container-square::before {
  padding-bottom: 100%;
}
.aspect-container-aspect-container-4\/3::before {
  padding-bottom: 75%;
}
.aspect-container-aspect-container-3\/2::before {
  padding-bottom: 66.666%;
}
.aspect-container-aspect-container-16\/10::before {
  padding-bottom: 62.5%;
}
.aspect-container-aspect-container-21\/9::before {
  padding-bottom: 42.857%;
}

.columns-1 {
  columns: 1;
}

.columns-2 {
  columns: 2;
}

.columns-3 {
  columns: 3;
}

.columns-4 {
  columns: 4;
}

.columns-5 {
  columns: 5;
}

.columns-6 {
  columns: 6;
}

.columns-7 {
  columns: 7;
}

.columns-8 {
  columns: 8;
}

.columns-9 {
  columns: 9;
}

.columns-10 {
  columns: 10;
}

.columns-11 {
  columns: 11;
}

.columns-12 {
  columns: 12;
}

.columns-auto {
  columns: auto;
}

.column-gap-0 {
  column-gap: 0;
}

.column-gap-1 {
  column-gap: var(--space-1);
}

.column-gap-2 {
  column-gap: var(--space-2);
}

.column-gap-3 {
  column-gap: var(--space-3);
}

.column-gap-4 {
  column-gap: var(--space-4);
}

.column-gap-5 {
  column-gap: var(--space-5);
}

.column-gap-6 {
  column-gap: var(--space-6);
}

.column-gap-8 {
  column-gap: var(--space-8);
}

.column-gap-10 {
  column-gap: var(--space-10);
}

.column-gap-12 {
  column-gap: var(--space-12);
}

.column-gap-16 {
  column-gap: var(--space-16);
}

.column-gap-20 {
  column-gap: var(--space-20);
}

.column-gap-24 {
  column-gap: var(--space-20);
}

.masonry {
  column-count: 1;
  column-gap: var(--space-4);
}
@media (min-width: 768px) {
  .masonry {
    column-count: 2;
  }
}
@media (min-width: 1024px) {
  .masonry {
    column-count: 3;
  }
}
.masonry > * {
  break-inside: avoid;
  margin-bottom: var(--space-4);
}

.newspaper {
  columns: 1;
  column-gap: var(--space-4);
  column-rule: 1px solid var(--color-border);
  text-align: justify;
}
@media (min-width: 768px) {
  .newspaper {
    columns: 2;
    column-gap: var(--space-4);
  }
}
@media (min-width: 1024px) {
  .newspaper {
    columns: 3;
    column-gap: var(--space-6);
  }
}
.newspaper p:first-child::first-letter {
  font-size: var(--text-3xl);
  font-weight: 700;
  float: left;
  line-height: 1;
  margin-right: var(--space-2);
}

.card-columns {
  column-count: 1;
  column-gap: var(--space-4);
  orphans: 1;
  widows: 1;
}
@media (min-width: 768px) {
  .card-columns {
    column-count: 2;
  }
}
@media (min-width: 1280px) {
  .card-columns {
    column-count: 3;
  }
}
.card-columns > .card {
  display: inline-block;
  width: 100%;
  margin-bottom: var(--space-4);
}

.section {
  margin-bottom: var(--space-6);
}
@media (max-width: 767px) {
  .section {
    margin-bottom: var(--space-4);
  }
}
.section-header {
  margin-bottom: var(--space-4);
}
@media (max-width: 767px) {
  .section-header {
    margin-bottom: var(--space-3);
  }
}

.info-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: var(--border-1) solid var(--color-border);
}

.info-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.info-item:last-child {
  margin-bottom: 0;
}

.meta-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  flex-direction: column;
}
@media (min-width: 768px) {
  .meta-info {
    flex-direction: row;
  }
}

.action-bar {
  display: flex;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: var(--border-1) solid var(--color-border);
  margin-top: auto;
  flex-direction: column;
}
@media (min-width: 768px) {
  .action-bar {
    flex-direction: row;
    gap: var(--space-4);
  }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.container {
  width: 100%;
  max-width: var(--content-max-width-xl);
  margin: 0 auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
@media (min-width: 768px) {
  .container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}
@media (min-width: 1024px) {
  .container {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}

.container-sm {
  max-width: var(--breakpoint-sm);
}

.container-md {
  max-width: var(--breakpoint-md);
}

.container-lg {
  max-width: var(--breakpoint-lg);
}

.container-xl {
  max-width: var(--breakpoint-xl);
}

.container-2xl {
  max-width: var(--breakpoint-2xl);
}

.container-full {
  max-width: 100%;
}

.container-prose {
  max-width: 65ch;
}

.container-px-0 {
  padding-left: 0;
  padding-right: 0;
}

.container-px-2 {
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

.container-px-4 {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.container-px-6 {
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

.container-px-8 {
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}

.container-px-10 {
  padding-left: var(--space-10);
  padding-right: var(--space-10);
}

.container-px-12 {
  padding-left: var(--space-12);
  padding-right: var(--space-12);
}

.container-fluid {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
@media (min-width: 768px) {
  .container-fluid {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}
@media (min-width: 1024px) {
  .container-fluid {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}

.section-container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding: var(--space-16) var(--space-4);
}
@media (min-width: 768px) {
  .section-container {
    padding: var(--space-20) var(--space-6);
  }
}
@media (min-width: 1024px) {
  .section-container {
    padding: var(--space-20) var(--space-8);
  }
}

.article-container {
  width: 100%;
  max-width: 65ch;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--space-4);
  padding-left: var(--space-4);
  line-height: var(--leading-relaxed);
}
@media (min-width: 768px) {
  .article-container {
    padding-right: var(--space-6);
    padding-left: var(--space-6);
  }
}

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

.main-container {
  flex: 1;
  width: 100%;
  max-width: 100%;
  padding: var(--space-4);
}
@media (min-width: 768px) {
  .main-container {
    padding: var(--space-6);
  }
}
@media (min-width: 1024px) {
  .main-container {
    padding: var(--space-8);
  }
}
@media (min-width: 1024px) {
  .main-container-with-sidebar {
    margin-left: var(--sidebar-width);
  }
}

.modal-container {
  width: 100%;
  max-width: var(--breakpoint-md);
  margin: var(--space-4);
}
.modal-container-sm {
  max-width: 560px;
}
.modal-container-lg {
  max-width: var(--breakpoint-lg);
}
.modal-container-xl {
  max-width: var(--breakpoint-xl);
}
.modal-container-full {
  max-width: calc(100vw - var(--space-8));
  max-height: calc(100vh - var(--space-8));
}

.container-bleed {
  margin-left: calc(var(--space-4) * -1);
  margin-right: calc(var(--space-4) * -1);
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
@media (min-width: 768px) {
  .container-bleed {
    margin-left: calc(var(--space-6) * -1);
    margin-right: calc(var(--space-6) * -1);
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

.page-content {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}
.page-content-constrained {
  max-width: 1200px;
}
.page-content-wide {
  max-width: 1400px;
}
.page-content-full {
  max-width: 100%;
}
.page-content-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 768px) {
  .page-content {
    padding: var(--space-8) var(--space-6);
  }
}

.max-w-95vw {
  max-width: 95vw;
}

.max-h-90vh {
  max-height: 90vh;
}

.max-h-95vh {
  max-height: 95vh;
}

.max-w-screen-sm {
  max-width: var(--breakpoint-sm);
}

.max-w-screen-md {
  max-width: var(--breakpoint-md);
}

.max-w-screen-lg {
  max-width: var(--breakpoint-lg);
}

.max-w-screen-xl {
  max-width: var(--breakpoint-xl);
}

.max-w-screen-2xl {
  max-width: var(--breakpoint-2xl);
}

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

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

.ma-auto {
  margin: auto;
}

.grid-dropdown-safe {
  overflow: visible;
  position: relative;
  z-index: var(--z-base);
}
.grid-dropdown-safe > * {
  overflow: visible;
}

.text-primary {
  color: var(--color-text);
}
.text-secondary {
  color: var(--color-text-muted);
}
.text-tertiary {
  color: var(--color-text-subtle);
}
.text-interactive {
  color: var(--color-primary);
}
.text-accent {
  color: var(--color-primary);
}
.text-inverse {
  color: var(--color-surface);
}
.text-muted {
  color: var(--color-text-muted);
}
.text-disabled {
  color: var(--color-text-subtle);
}
.text-success {
  color: var(--color-success);
}
.text-warning {
  color: var(--color-warning);
}
.text-error {
  color: var(--color-error);
}
.text-info {
  color: var(--color-info);
}
.text-on-primary {
  color: var(--color-surface);
}
.text-on-secondary {
  color: var(--color-surface);
}
.text-on-success {
  color: var(--color-text-on-success);
}
.text-on-warning {
  color: var(--color-text-on-warning);
}
.text-on-error {
  color: var(--color-text-on-error);
}
.text-on-info {
  color: var(--color-text-on-info);
}
.text-on-surface {
  color: var(--color-text);
}
.text-on-surface-variant {
  color: var(--color-text-subtle);
}

.list-none {
  list-style: none;
}

.list-disc {
  list-style: disc;
}

.list-decimal {
  list-style: decimal;
}

.text-2xs {
  font-size: var(--text-2xs);
}
.text-xs {
  font-size: var(--text-xs);
}
.text-sm {
  font-size: var(--text-sm);
}
.text-base {
  font-size: var(--text-base);
}
.text-lg {
  font-size: var(--text-lg);
}
.text-xl {
  font-size: var(--text-xl);
}
.text-2xl {
  font-size: var(--text-2xl);
}
.text-3xl {
  font-size: var(--text-3xl);
}
.text-4xl {
  font-size: var(--text-4xl);
}
.text-5xl {
  font-size: var(--text-5xl);
}
.text-6xl {
  font-size: var(--text-6xl);
}
.text-7xl {
  font-size: var(--text-7xl);
}
.text-8xl {
  font-size: var(--text-8xl);
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-justify {
  text-align: justify;
}
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-clip {
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.line-clamp-none {
  overflow: visible;
  display: block;
  -webkit-box-orient: horizontal;
  -webkit-line-clamp: none;
}

.text-h1 {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
}
.text-h2 {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
}
.text-h3 {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
}
.text-h4 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
}
.text-h5 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}
.text-h6 {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
}
.text-subtitle-1 {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
}
.text-subtitle-2 {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
}
.text-body-1 {
  font-size: var(--text-base);
  font-weight: var(--font-normal);
}
.text-body-2 {
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
}
.text-body {
  font-size: var(--text-base);
  font-weight: var(--font-normal);
}
.text-caption {
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
}
.text-overline {
  font-size: var(--text-2xs);
  font-weight: var(--font-medium);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.text-transform-uppercase {
  text-transform: uppercase;
}
.text-transform-lowercase {
  text-transform: lowercase;
}
.text-transform-capitalize {
  text-transform: capitalize;
}
.text-transform-none {
  text-transform: none;
}

.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre {
  white-space: pre;
}
.whitespace-pre-line {
  white-space: pre-line;
}
.whitespace-normal {
  white-space: normal;
}

.whitespace-pre-wrap {
  white-space: pre-wrap;
}

.text-decoration-none {
  text-decoration: none;
}
.text-decoration-underline {
  text-decoration: underline;
}
.text-decoration-line-through {
  text-decoration: line-through;
}
.text-shadow-none {
  text-shadow: none;
}
.text-shadow-sm {
  text-shadow: var(--text-shadow-sm);
}
.text-shadow-md {
  text-shadow: var(--text-shadow-md);
}
.text-shadow-lg {
  text-shadow: var(--text-shadow-lg);
}
.text-shadow-xl {
  text-shadow: 0 8px 16px var(--overlay-heavy);
}
.text-shadow-dark {
  text-shadow: var(--text-shadow-lg);
}
.text-shadow-light {
  text-shadow: var(--text-shadow-sm);
}

.font-thin {
  font-weight: var(--font-thin);
}
.font-extralight {
  font-weight: var(--font-extralight);
}
.font-light {
  font-weight: var(--font-light);
}
.font-normal {
  font-weight: var(--font-normal);
}
.font-medium {
  font-weight: var(--font-medium);
}
.font-semibold {
  font-weight: var(--font-semibold);
}
.font-bold {
  font-weight: var(--font-bold);
}
.font-extrabold {
  font-weight: var(--font-extrabold);
}
.font-black {
  font-weight: var(--font-black);
}

.currency {
  font-variant-numeric: tabular-nums;
}
.currency-large {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}
.currency-medium {
  font-size: var(--text-lg);
  font-weight: 600;
}
.currency-small {
  font-size: var(--text-sm);
  font-weight: 500;
}
.currency-positive {
  color: var(--color-success);
}
.currency-negative {
  color: var(--color-error);
}
.currency-neutral {
  color: var(--color-text);
}

.leading-none {
  line-height: 1;
}
.leading-tight {
  line-height: var(--leading-tight);
}
.leading-snug {
  line-height: var(--leading-snug);
}
.leading-normal {
  line-height: var(--leading-normal);
}
.leading-relaxed {
  line-height: var(--leading-relaxed);
}
.leading-loose {
  line-height: var(--leading-loose);
}

.tracking-tighter {
  letter-spacing: var(--tracking-tighter);
}
.tracking-tight {
  letter-spacing: var(--tracking-tight);
}
.tracking-normal {
  letter-spacing: var(--tracking-normal);
}
.tracking-wide {
  letter-spacing: var(--tracking-wide);
}
.tracking-wider {
  letter-spacing: var(--tracking-wider);
}
.tracking-widest {
  letter-spacing: var(--tracking-widest);
}

@media (min-width: 640px) {
  .sm\\:text-sm {
    font-size: var(--text-sm);
  }
  .sm\\:text-base {
    font-size: var(--text-base);
  }
  .sm\\:text-lg {
    font-size: var(--text-lg);
  }
  .sm\\:text-xl {
    font-size: var(--text-xl);
  }
  .sm\\:text-2xl {
    font-size: var(--text-2xl);
  }
  .sm\\:text-3xl {
    font-size: var(--text-3xl);
  }
  .sm\\:text-left {
    text-align: left;
  }
  .sm\\:text-center {
    text-align: center;
  }
  .sm\\:text-right {
    text-align: right;
  }
  .sm\\:font-normal {
    font-weight: var(--font-normal);
  }
  .sm\\:font-medium {
    font-weight: var(--font-medium);
  }
  .sm\\:font-semibold {
    font-weight: var(--font-semibold);
  }
  .sm\\:font-bold {
    font-weight: var(--font-bold);
  }
  .sm\\:text-h1 {
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
  }
  .sm\\:text-h2 {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
  }
  .sm\\:text-h3 {
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
  }
  .sm\\:text-h4 {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
  }
  .sm\\:text-subtitle-1 {
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    line-height: var(--leading-tight);
  }
  .sm\\:text-subtitle-2 {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    line-height: var(--leading-normal);
  }
}
@media (min-width: 768px) {
  .md\\:text-sm {
    font-size: var(--text-sm);
  }
  .md\\:text-base {
    font-size: var(--text-base);
  }
  .md\\:text-lg {
    font-size: var(--text-lg);
  }
  .md\\:text-xl {
    font-size: var(--text-xl);
  }
  .md\\:text-2xl {
    font-size: var(--text-2xl);
  }
  .md\\:text-3xl {
    font-size: var(--text-3xl);
  }
  .md\\:text-left {
    text-align: left;
  }
  .md\\:text-center {
    text-align: center;
  }
  .md\\:text-right {
    text-align: right;
  }
  .md\\:font-normal {
    font-weight: var(--font-normal);
  }
  .md\\:font-medium {
    font-weight: var(--font-medium);
  }
  .md\\:font-semibold {
    font-weight: var(--font-semibold);
  }
  .md\\:font-bold {
    font-weight: var(--font-bold);
  }
  .md\\:text-h1 {
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
  }
  .md\\:text-h2 {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
  }
  .md\\:text-h3 {
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
  }
  .md\\:text-h4 {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
  }
  .md\\:text-subtitle-1 {
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    line-height: var(--leading-tight);
  }
  .md\\:text-subtitle-2 {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    line-height: var(--leading-normal);
  }
}
@media (min-width: 1024px) {
  .lg\\:text-sm {
    font-size: var(--text-sm);
  }
  .lg\\:text-base {
    font-size: var(--text-base);
  }
  .lg\\:text-lg {
    font-size: var(--text-lg);
  }
  .lg\\:text-xl {
    font-size: var(--text-xl);
  }
  .lg\\:text-2xl {
    font-size: var(--text-2xl);
  }
  .lg\\:text-3xl {
    font-size: var(--text-3xl);
  }
  .lg\\:text-left {
    text-align: left;
  }
  .lg\\:text-center {
    text-align: center;
  }
  .lg\\:text-right {
    text-align: right;
  }
  .lg\\:font-normal {
    font-weight: var(--font-normal);
  }
  .lg\\:font-medium {
    font-weight: var(--font-medium);
  }
  .lg\\:font-semibold {
    font-weight: var(--font-semibold);
  }
  .lg\\:font-bold {
    font-weight: var(--font-bold);
  }
  .lg\\:text-h1 {
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
  }
  .lg\\:text-h2 {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
  }
  .lg\\:text-h3 {
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
  }
  .lg\\:text-h4 {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
  }
  .lg\\:text-subtitle-1 {
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    line-height: var(--leading-tight);
  }
  .lg\\:text-subtitle-2 {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    line-height: var(--leading-normal);
  }
}
@media (min-width: 1280px) {
  .xl\\:text-sm {
    font-size: var(--text-sm);
  }
  .xl\\:text-base {
    font-size: var(--text-base);
  }
  .xl\\:text-lg {
    font-size: var(--text-lg);
  }
  .xl\\:text-xl {
    font-size: var(--text-xl);
  }
  .xl\\:text-2xl {
    font-size: var(--text-2xl);
  }
  .xl\\:text-3xl {
    font-size: var(--text-3xl);
  }
  .xl\\:text-left {
    text-align: left;
  }
  .xl\\:text-center {
    text-align: center;
  }
  .xl\\:text-right {
    text-align: right;
  }
  .xl\\:font-normal {
    font-weight: var(--font-normal);
  }
  .xl\\:font-medium {
    font-weight: var(--font-medium);
  }
  .xl\\:font-semibold {
    font-weight: var(--font-semibold);
  }
  .xl\\:font-bold {
    font-weight: var(--font-bold);
  }
  .xl\\:text-h1 {
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
  }
  .xl\\:text-h2 {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
  }
  .xl\\:text-h3 {
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
  }
  .xl\\:text-h4 {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
  }
  .xl\\:text-subtitle-1 {
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    line-height: var(--leading-tight);
  }
  .xl\\:text-subtitle-2 {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    line-height: var(--leading-normal);
  }
}
.font-monospace {
  font-family: var(--font-family-mono);
}

.border {
  border: var(--border-1) solid var(--color-border);
}

.border-0, .border-none {
  border: none;
}

.border-2 {
  border-width: var(--border-2);
}

.border-3 {
  border-width: calc(var(--border-2) + var(--border-1));
}

.border-4 {
  border-width: var(--space-1);
}

.border-transparent {
  border-color: transparent;
}

.border-current {
  border-color: currentColor;
}

.border-light {
  border-color: var(--color-border-light);
}

.border-dark {
  border-color: var(--color-border-dark);
}

.border-medium {
  border-color: var(--color-border);
}

.border-strong {
  border-color: var(--color-border);
}

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

.border-secondary {
  border-color: var(--color-primary);
}

.border-success {
  border-color: var(--color-success);
}

.border-warning {
  border-color: var(--color-warning);
}

.border-error {
  border-color: var(--color-error);
}

.border-info {
  border-color: var(--color-info);
}

.border-surface {
  border-color: var(--color-surface-elevated);
}

.border-outline {
  border-color: var(--color-border);
}

.border-t {
  border-top: var(--border-1) solid var(--color-border);
}

.border-t-0 {
  border-top-width: 0;
}

.border-t-2 {
  border-top-width: var(--border-2);
}

.border-t-3 {
  border-top-width: calc(var(--border-2) + var(--border-1));
}

.border-t-4 {
  border-top-width: var(--space-1);
}

.border-t-transparent {
  border-top-color: transparent;
}

.border-t-current {
  border-top-color: currentColor;
}

.border-t-light {
  border-top-color: var(--color-border-light);
}

.border-t-dark {
  border-top-color: var(--color-border-dark);
}

.border-t-medium {
  border-top-color: var(--color-border);
}

.border-t-strong {
  border-top-color: var(--color-border);
}

.border-t-primary {
  border-top-color: var(--color-primary);
}

.border-t-secondary {
  border-top-color: var(--color-primary);
}

.border-t-success {
  border-top-color: var(--color-success);
}

.border-t-warning {
  border-top-color: var(--color-warning);
}

.border-t-error {
  border-top-color: var(--color-error);
}

.border-t-info {
  border-top-color: var(--color-info);
}

.border-t-surface {
  border-top-color: var(--color-surface-elevated);
}

.border-t-outline {
  border-top-color: var(--color-border);
}

.border-r {
  border-right: var(--border-1) solid var(--color-border);
}

.border-r-0 {
  border-right-width: 0;
}

.border-r-2 {
  border-right-width: var(--border-2);
}

.border-r-3 {
  border-right-width: calc(var(--border-2) + var(--border-1));
}

.border-r-4 {
  border-right-width: var(--space-1);
}

.border-r-transparent {
  border-right-color: transparent;
}

.border-r-current {
  border-right-color: currentColor;
}

.border-r-light {
  border-right-color: var(--color-border-light);
}

.border-r-dark {
  border-right-color: var(--color-border-dark);
}

.border-r-medium {
  border-right-color: var(--color-border);
}

.border-r-strong {
  border-right-color: var(--color-border);
}

.border-r-primary {
  border-right-color: var(--color-primary);
}

.border-r-secondary {
  border-right-color: var(--color-primary);
}

.border-r-success {
  border-right-color: var(--color-success);
}

.border-r-warning {
  border-right-color: var(--color-warning);
}

.border-r-error {
  border-right-color: var(--color-error);
}

.border-r-info {
  border-right-color: var(--color-info);
}

.border-r-surface {
  border-right-color: var(--color-surface-elevated);
}

.border-r-outline {
  border-right-color: var(--color-border);
}

.border-b {
  border-bottom: var(--border-1) solid var(--color-border);
}

.border-b-0 {
  border-bottom-width: 0;
}

.border-b-2 {
  border-bottom-width: var(--border-2);
}

.border-b-3 {
  border-bottom-width: calc(var(--border-2) + var(--border-1));
}

.border-b-4 {
  border-bottom-width: var(--space-1);
}

.border-b-transparent {
  border-bottom-color: transparent;
}

.border-b-current {
  border-bottom-color: currentColor;
}

.border-b-light {
  border-bottom-color: var(--color-border-light);
}

.border-b-dark {
  border-bottom-color: var(--color-border-dark);
}

.border-b-medium {
  border-bottom-color: var(--color-border);
}

.border-b-strong {
  border-bottom-color: var(--color-border);
}

.border-b-primary {
  border-bottom-color: var(--color-primary);
}

.border-b-secondary {
  border-bottom-color: var(--color-primary);
}

.border-b-success {
  border-bottom-color: var(--color-success);
}

.border-b-warning {
  border-bottom-color: var(--color-warning);
}

.border-b-error {
  border-bottom-color: var(--color-error);
}

.border-b-info {
  border-bottom-color: var(--color-info);
}

.border-b-surface {
  border-bottom-color: var(--color-surface-elevated);
}

.border-b-outline {
  border-bottom-color: var(--color-border);
}

.border-l {
  border-left: var(--border-1) solid var(--color-border);
}

.border-l-0 {
  border-left-width: 0;
}

.border-l-2 {
  border-left-width: var(--border-2);
}

.border-l-3 {
  border-left-width: calc(var(--border-2) + var(--border-1));
}

.border-l-4 {
  border-left-width: var(--space-1);
}

.border-l-transparent {
  border-left-color: transparent;
}

.border-l-current {
  border-left-color: currentColor;
}

.border-l-light {
  border-left-color: var(--color-border-light);
}

.border-l-dark {
  border-left-color: var(--color-border-dark);
}

.border-l-medium {
  border-left-color: var(--color-border);
}

.border-l-strong {
  border-left-color: var(--color-border);
}

.border-l-primary {
  border-left-color: var(--color-primary);
}

.border-l-secondary {
  border-left-color: var(--color-primary);
}

.border-l-success {
  border-left-color: var(--color-success);
}

.border-l-warning {
  border-left-color: var(--color-warning);
}

.border-l-error {
  border-left-color: var(--color-error);
}

.border-l-info {
  border-left-color: var(--color-info);
}

.border-l-surface {
  border-left-color: var(--color-surface-elevated);
}

.border-l-outline {
  border-left-color: var(--color-border);
}

.border-x-0 {
  border-left-width: 0;
  border-right-width: 0;
}

.border-y-0 {
  border-top-width: 0;
  border-bottom-width: 0;
}

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

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

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

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

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

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

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

.border-button-glass {
  border-color: var(--glass-border-light);
}

.hover\:border-button-secondary-hover:hover {
  border-color: color-mix(in srgb, var(--color-border) 60%, var(--color-text-muted));
}

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

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

.border-dotted {
  border-style: dotted;
}

.border-none {
  border-style: none;
}

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

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

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

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

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

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

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

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

.rounded-t-none {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.rounded-t-sm {
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
}

.rounded-t {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

.rounded-t-md {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

.rounded-t-lg {
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

.rounded-b-none {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.rounded-b-sm {
  border-bottom-left-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}

.rounded-b {
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

.rounded-b-md {
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

.rounded-b-lg {
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

.rounded-l-none {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.rounded-l-sm {
  border-top-left-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
}

.rounded-l {
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}

.rounded-l-md {
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}

.rounded-l-lg {
  border-top-left-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-lg);
}

.rounded-r-none {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.rounded-r-sm {
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}

.rounded-r {
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

.rounded-r-md {
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

.rounded-r-lg {
  border-top-right-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

.rounded-tl-none {
  border-top-left-radius: 0;
}

.rounded-tl-sm {
  border-top-left-radius: var(--radius-sm);
}

.rounded-tl {
  border-top-left-radius: var(--radius-md);
}

.rounded-tl-md {
  border-top-left-radius: var(--radius-md);
}

.rounded-tl-lg {
  border-top-left-radius: var(--radius-lg);
}

.rounded-tr-none {
  border-top-right-radius: 0;
}

.rounded-tr-sm {
  border-top-right-radius: var(--radius-sm);
}

.rounded-tr {
  border-top-right-radius: var(--radius-md);
}

.rounded-tr-md {
  border-top-right-radius: var(--radius-md);
}

.rounded-tr-lg {
  border-top-right-radius: var(--radius-lg);
}

.rounded-bl-none {
  border-bottom-left-radius: 0;
}

.rounded-bl-sm {
  border-bottom-left-radius: var(--radius-sm);
}

.rounded-bl {
  border-bottom-left-radius: var(--radius-md);
}

.rounded-bl-md {
  border-bottom-left-radius: var(--radius-md);
}

.rounded-bl-lg {
  border-bottom-left-radius: var(--radius-lg);
}

.rounded-br-none {
  border-bottom-right-radius: 0;
}

.rounded-br-sm {
  border-bottom-right-radius: var(--radius-sm);
}

.rounded-br {
  border-bottom-right-radius: var(--radius-md);
}

.rounded-br-md {
  border-bottom-right-radius: var(--radius-md);
}

.rounded-br-lg {
  border-bottom-right-radius: var(--radius-lg);
}

.border-collapse {
  border-collapse: collapse;
}

.border-separate {
  border-collapse: separate;
}

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

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

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

.bg-transparent {
  background-color: transparent;
}
.bg-current {
  background-color: currentColor;
}
.bg-canvas {
  background-color: var(--color-canvas);
}
.bg-surface {
  background-color: var(--color-surface);
}
.bg-surface-elevated {
  background-color: var(--color-surface-elevated);
}
.bg-primary {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.bg-primary-light {
  background-color: var(--color-primary-light);
}
.bg-primary-medium {
  background-color: var(--color-primary-medium);
}
.bg-success {
  background: var(--gradient-success);
  color: var(--color-text-inverse);
}
.bg-success-light {
  background: var(--bg-gradient-success);
}
.bg-success-medium {
  background-color: color-mix(in srgb, var(--color-success) 20%, var(--color-surface));
}
.bg-warning {
  background: var(--gradient-warning);
  color: var(--color-text-inverse);
}
.bg-warning-light {
  background: var(--bg-gradient-warning);
}
.bg-warning-medium {
  background-color: color-mix(in srgb, var(--color-warning) 20%, var(--color-surface));
}
.bg-error {
  background: var(--gradient-error);
  color: var(--color-text-inverse);
}
.bg-error-light {
  background: var(--bg-gradient-error);
}
.bg-error-medium {
  background-color: color-mix(in srgb, var(--color-error) 20%, var(--color-surface));
}
.bg-info {
  background: var(--gradient-info);
  color: var(--color-text-inverse);
}
.bg-info-light {
  background: var(--bg-gradient-info);
}
.bg-info-medium {
  background-color: color-mix(in srgb, var(--color-info) 20%, var(--color-surface));
}
.bg-danger {
  background: var(--gradient-error);
  color: var(--color-text-inverse);
}
.bg-modal {
  background-color: var(--color-surface-elevated);
}
.bg-overlay {
  background-color: var(--overlay-medium);
}
.bg-overlay-light {
  background-color: var(--overlay-light);
}
.bg-disabled {
  background-color: var(--color-surface);
}

.bg-gradient-primary {
  background: var(--bg-gradient-primary);
}

.bg-gradient-success {
  background: var(--bg-gradient-success);
}

.bg-gradient-warning {
  background: var(--bg-gradient-warning);
}

.bg-gradient-error {
  background: var(--bg-gradient-error);
}

.bg-gradient-info {
  background: var(--bg-gradient-info);
}

.bg-gradient-subtle {
  background: var(--gradient-subtle);
}

.bg-gradient-neutral {
  background: var(--gradient-neutral);
}

.bg-gradient-surface {
  background: var(--gradient-surface);
}

.focus\\:bg-surface:focus {
  background-color: var(--color-surface);
}

.icon-bg-primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.icon-bg-success {
  background: var(--color-success);
  color: var(--color-text-inverse);
}
.icon-bg-warning {
  background: var(--color-warning);
  color: var(--color-text-inverse);
}
.icon-bg-error, .icon-bg-danger {
  background: var(--color-error);
  color: var(--color-text-inverse);
}
.icon-bg-info {
  background: var(--color-info);
  color: var(--color-text-inverse);
}

.ring-0 {
  box-shadow: none;
}

.ring-1 {
  box-shadow: 0 0 0 1px var(--color-focus);
}

.ring-2 {
  box-shadow: 0 0 0 2px var(--color-focus);
}

.ring-3 {
  box-shadow: 0 0 0 3px var(--color-focus);
}

.ring-4 {
  box-shadow: 0 0 0 4px var(--color-focus);
}

.ring-primary {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.ring-success {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-success) 40%, transparent);
}

.ring-warning {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-warning) 40%, transparent);
}

.ring-error {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-error) 40%, transparent);
}

.opacity-0 {
  opacity: var(--opacity-0);
}

.opacity-5 {
  opacity: var(--opacity-5);
}

.opacity-10 {
  opacity: var(--opacity-10);
}

.opacity-20 {
  opacity: var(--opacity-20);
}

.opacity-25 {
  opacity: var(--opacity-25);
}

.opacity-30 {
  opacity: var(--opacity-30);
}

.opacity-40 {
  opacity: var(--opacity-40);
}

.opacity-50 {
  opacity: var(--opacity-50);
}

.opacity-60 {
  opacity: var(--opacity-60);
}

.opacity-70 {
  opacity: var(--opacity-70);
}

.opacity-75 {
  opacity: var(--opacity-75);
}

.opacity-80 {
  opacity: var(--opacity-80);
}

.opacity-90 {
  opacity: var(--opacity-90);
}

.opacity-95 {
  opacity: var(--opacity-95);
}

.opacity-100 {
  opacity: var(--opacity-100);
}

.backdrop-blur-none {
  backdrop-filter: none;
}

.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}

.backdrop-blur {
  backdrop-filter: blur(8px);
}

.backdrop-blur-md {
  backdrop-filter: blur(12px);
}

.backdrop-blur-lg {
  backdrop-filter: blur(16px);
}

.backdrop-blur-xl {
  backdrop-filter: blur(24px);
}

.backdrop-blur-2xl {
  backdrop-filter: blur(40px);
}

.backdrop-blur-3xl {
  backdrop-filter: blur(64px);
}

.backdrop-brightness-0 {
  backdrop-filter: brightness(0);
}

.backdrop-brightness-50 {
  backdrop-filter: brightness(0.5);
}

.backdrop-brightness-75 {
  backdrop-filter: brightness(0.75);
}

.backdrop-brightness-90 {
  backdrop-filter: brightness(0.9);
}

.backdrop-brightness-95 {
  backdrop-filter: brightness(0.95);
}

.backdrop-brightness-100 {
  backdrop-filter: brightness(1);
}

.backdrop-brightness-105 {
  backdrop-filter: brightness(1.05);
}

.backdrop-brightness-110 {
  backdrop-filter: brightness(1.1);
}

.backdrop-brightness-125 {
  backdrop-filter: brightness(1.25);
}

.backdrop-brightness-150 {
  backdrop-filter: brightness(1.5);
}

.backdrop-brightness-200 {
  backdrop-filter: brightness(2);
}

.backdrop-contrast-0 {
  backdrop-filter: contrast(0);
}

.backdrop-contrast-50 {
  backdrop-filter: contrast(0.5);
}

.backdrop-contrast-75 {
  backdrop-filter: contrast(0.75);
}

.backdrop-contrast-100 {
  backdrop-filter: contrast(1);
}

.backdrop-contrast-125 {
  backdrop-filter: contrast(1.25);
}

.backdrop-contrast-150 {
  backdrop-filter: contrast(1.5);
}

.backdrop-contrast-200 {
  backdrop-filter: contrast(2);
}

.backdrop-grayscale-0 {
  backdrop-filter: grayscale(0);
}

.backdrop-grayscale {
  backdrop-filter: grayscale(1);
}

.backdrop-hue-rotate-0 {
  backdrop-filter: hue-rotate(0deg);
}

.backdrop-hue-rotate-15 {
  backdrop-filter: hue-rotate(15deg);
}

.backdrop-hue-rotate-30 {
  backdrop-filter: hue-rotate(30deg);
}

.backdrop-hue-rotate-60 {
  backdrop-filter: hue-rotate(60deg);
}

.backdrop-hue-rotate-90 {
  backdrop-filter: hue-rotate(90deg);
}

.backdrop-hue-rotate-180 {
  backdrop-filter: hue-rotate(180deg);
}

.backdrop-invert-0 {
  backdrop-filter: invert(0);
}

.backdrop-invert {
  backdrop-filter: invert(1);
}

.backdrop-saturate-0 {
  backdrop-filter: saturate(0);
}

.backdrop-saturate-50 {
  backdrop-filter: saturate(0.5);
}

.backdrop-saturate-100 {
  backdrop-filter: saturate(1);
}

.backdrop-saturate-150 {
  backdrop-filter: saturate(1.5);
}

.backdrop-saturate-200 {
  backdrop-filter: saturate(2);
}

.backdrop-sepia-0 {
  backdrop-filter: sepia(0);
}

.backdrop-sepia {
  backdrop-filter: sepia(1);
}

.drop-shadow-none {
  filter: drop-shadow(0 0 transparent);
}

.drop-shadow-sm {
  filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--color-text) var(--opacity-5), transparent));
}

.drop-shadow-md {
  filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--color-text) var(--opacity-10), transparent));
}

.drop-shadow-lg {
  filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--color-text) var(--opacity-20), transparent));
}

.drop-shadow-xl {
  filter: drop-shadow(0 8px 16px color-mix(in srgb, var(--color-text) var(--opacity-25), transparent));
}

.drop-shadow-2xl {
  filter: drop-shadow(0 16px 32px color-mix(in srgb, var(--color-text) var(--opacity-30), transparent));
}

.shadow-none {
  box-shadow: none;
}

.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.shadow-md {
  box-shadow: var(--shadow-md);
}

.shadow-lg {
  box-shadow: var(--shadow-lg);
}

.shadow-xl {
  box-shadow: var(--shadow-xl);
}

.shadow-2xl {
  box-shadow: var(--shadow-2xl);
}

.shadow-inner {
  box-shadow: inset 0 2px 4px 0 color-mix(in srgb, var(--color-text) var(--opacity-5), transparent);
}

.shadow-primary {
  box-shadow: 0 4px 16px rgba(var(--color-primary), calc(25% / 100));
}

.shadow-secondary {
  box-shadow: 0 4px 16px rgba(var(--color-secondary), calc(25% / 100));
}

.shadow-success {
  box-shadow: 0 4px 16px rgba(var(--color-success), calc(25% / 100));
}

.shadow-warning {
  box-shadow: 0 4px 16px rgba(var(--color-warning), calc(25% / 100));
}

.shadow-error {
  box-shadow: 0 4px 16px rgba(var(--color-error), calc(25% / 100));
}

.shadow-info {
  box-shadow: 0 4px 16px rgba(var(--color-info), calc(25% / 100));
}

.shadow-0 {
  box-shadow: none;
  transition: var(--transition-fast);
}

.shadow-1 {
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}

.shadow-2 {
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}

.shadow-3 {
  box-shadow: var(--shadow-md);
  transition: var(--transition-fast);
}

.shadow-4 {
  box-shadow: var(--shadow-md);
  transition: var(--transition-fast);
}

.shadow-5 {
  box-shadow: var(--shadow-lg);
  transition: var(--transition-fast);
}

.shadow-6 {
  box-shadow: var(--shadow-lg);
  transition: var(--transition-fast);
}

.shadow-8 {
  box-shadow: var(--shadow-lg);
  transition: var(--transition-fast);
}

.shadow-12 {
  box-shadow: var(--shadow-xl);
  transition: var(--transition-fast);
}

.shadow-16 {
  box-shadow: var(--shadow-xl);
  transition: var(--transition-fast);
}

.shadow-20 {
  box-shadow: var(--shadow-2xl);
  transition: var(--transition-fast);
}

.shadow-24 {
  box-shadow: var(--shadow-2xl);
  transition: var(--transition-fast);
}

.elevation-lift {
  transition: var(--transition-fast);
}

.elevation-lift-sm {
  transition: var(--transition-fast);
}

.elevation-lift-lg {
  transition: var(--transition-fast);
}

.gpu-accelerated {
  transform: translateZ(0);
  will-change: transform;
}

.gpu-layer {
  transform: translateZ(0);
}

@media (min-width: 640px) {
  .sm:opacity-0 {
    opacity: var(--opacity-0);
  }
  .sm:opacity-5 {
    opacity: var(--opacity-5);
  }
  .sm:opacity-10 {
    opacity: var(--opacity-10);
  }
  .sm:opacity-20 {
    opacity: var(--opacity-20);
  }
  .sm:opacity-25 {
    opacity: var(--opacity-25);
  }
  .sm:opacity-30 {
    opacity: var(--opacity-30);
  }
  .sm:opacity-40 {
    opacity: var(--opacity-40);
  }
  .sm:opacity-50 {
    opacity: var(--opacity-50);
  }
  .sm:opacity-60 {
    opacity: var(--opacity-60);
  }
  .sm:opacity-70 {
    opacity: var(--opacity-70);
  }
  .sm:opacity-75 {
    opacity: var(--opacity-75);
  }
  .sm:opacity-80 {
    opacity: var(--opacity-80);
  }
  .sm:opacity-90 {
    opacity: var(--opacity-90);
  }
  .sm:opacity-95 {
    opacity: var(--opacity-95);
  }
  .sm:opacity-100 {
    opacity: var(--opacity-100);
  }
  .sm:shadow-none {
    box-shadow: none;
  }
  .sm:shadow-sm {
    box-shadow: var(--shadow-sm);
  }
  .sm:shadow-md {
    box-shadow: var(--shadow-md);
  }
  .sm:shadow-lg {
    box-shadow: var(--shadow-lg);
  }
  .sm:shadow-xl {
    box-shadow: var(--shadow-xl);
  }
  .sm:shadow-2xl {
    box-shadow: var(--shadow-2xl);
  }
  .sm:shadow-inner {
    box-shadow: inset 0 2px 4px 0 color-mix(in srgb, var(--color-text) var(--opacity-5), transparent);
  }
  .sm:shadow-primary {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-primary) 25%, transparent);
  }
  .sm:shadow-secondary {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-secondary) 25%, transparent);
  }
  .sm:shadow-success {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-success) 25%, transparent);
  }
  .sm:shadow-warning {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-warning) 25%, transparent);
  }
  .sm:shadow-error {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-error) 25%, transparent);
  }
  .sm:shadow-info {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-info) 25%, transparent);
  }
  .sm:elevation-0 {
    box-shadow: none;
    transition: var(--transition-fast);
  }
  .sm:elevation-1 {
    box-shadow: var(--shadow-sm);
    transition: var(--transition-fast);
  }
  .sm:elevation-2 {
    box-shadow: var(--shadow-sm);
    transition: var(--transition-fast);
  }
  .sm:elevation-3 {
    box-shadow: var(--shadow-md);
    transition: var(--transition-fast);
  }
  .sm:elevation-4 {
    box-shadow: var(--shadow-md);
    transition: var(--transition-fast);
  }
  .sm:elevation-5 {
    box-shadow: var(--shadow-lg);
    transition: var(--transition-fast);
  }
  .sm:elevation-6 {
    box-shadow: var(--shadow-lg);
    transition: var(--transition-fast);
  }
  .sm:elevation-8 {
    box-shadow: var(--shadow-lg);
    transition: var(--transition-fast);
  }
  .sm:elevation-12 {
    box-shadow: var(--shadow-xl);
    transition: var(--transition-fast);
  }
  .sm:elevation-16 {
    box-shadow: var(--shadow-xl);
    transition: var(--transition-fast);
  }
  .sm:elevation-20 {
    box-shadow: var(--shadow-2xl);
    transition: var(--transition-fast);
  }
  .sm:elevation-24 {
    box-shadow: var(--shadow-2xl);
    transition: var(--transition-fast);
  }
  sm:backdrop-blur-none {
    backdrop-filter: none;
  }
  sm:backdrop-blur-sm {
    backdrop-filter: blur(4px);
  }
  sm:backdrop-blur {
    backdrop-filter: blur(8px);
  }
  sm:backdrop-blur-md {
    backdrop-filter: blur(12px);
  }
  sm:backdrop-blur-lg {
    backdrop-filter: blur(16px);
  }
  sm:backdrop-blur-xl {
    backdrop-filter: blur(24px);
  }
  sm:backdrop-blur-2xl {
    backdrop-filter: blur(40px);
  }
  sm:backdrop-blur-3xl {
    backdrop-filter: blur(64px);
  }
  .sm:ring-0 {
    box-shadow: none;
  }
  .sm:ring-1 {
    box-shadow: 0 0 0 1px var(--color-focus);
  }
  .sm:ring-2 {
    box-shadow: 0 0 0 2px var(--color-focus);
  }
  .sm:ring-3 {
    box-shadow: 0 0 0 3px var(--color-focus);
  }
  .sm:ring-4 {
    box-shadow: 0 0 0 4px var(--color-focus);
  }
  .sm:ring-primary {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 40%, transparent);
  }
  .sm:ring-success {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-success) 40%, transparent);
  }
  .sm:ring-warning {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-warning) 40%, transparent);
  }
  .sm:ring-error {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-error) 40%, transparent);
  }
  .sm:drop-shadow-none {
    filter: drop-shadow(0 0 transparent);
  }
  .sm:drop-shadow-sm {
    filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--color-text) var(--opacity-5), transparent));
  }
  .sm:drop-shadow-md {
    filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--color-text) var(--opacity-10), transparent));
  }
  .sm:drop-shadow-lg {
    filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--color-text) var(--opacity-20), transparent));
  }
  .sm:drop-shadow-xl {
    filter: drop-shadow(0 8px 16px color-mix(in srgb, var(--color-text) var(--opacity-25), transparent));
  }
  .sm:drop-shadow-2xl {
    filter: drop-shadow(0 16px 32px color-mix(in srgb, var(--color-text) var(--opacity-30), transparent));
  }
}
@media (min-width: 768px) {
  .md:opacity-0 {
    opacity: var(--opacity-0);
  }
  .md:opacity-5 {
    opacity: var(--opacity-5);
  }
  .md:opacity-10 {
    opacity: var(--opacity-10);
  }
  .md:opacity-20 {
    opacity: var(--opacity-20);
  }
  .md:opacity-25 {
    opacity: var(--opacity-25);
  }
  .md:opacity-30 {
    opacity: var(--opacity-30);
  }
  .md:opacity-40 {
    opacity: var(--opacity-40);
  }
  .md:opacity-50 {
    opacity: var(--opacity-50);
  }
  .md:opacity-60 {
    opacity: var(--opacity-60);
  }
  .md:opacity-70 {
    opacity: var(--opacity-70);
  }
  .md:opacity-75 {
    opacity: var(--opacity-75);
  }
  .md:opacity-80 {
    opacity: var(--opacity-80);
  }
  .md:opacity-90 {
    opacity: var(--opacity-90);
  }
  .md:opacity-95 {
    opacity: var(--opacity-95);
  }
  .md:opacity-100 {
    opacity: var(--opacity-100);
  }
  .md:shadow-none {
    box-shadow: none;
  }
  .md:shadow-sm {
    box-shadow: var(--shadow-sm);
  }
  .md:shadow-md {
    box-shadow: var(--shadow-md);
  }
  .md:shadow-lg {
    box-shadow: var(--shadow-lg);
  }
  .md:shadow-xl {
    box-shadow: var(--shadow-xl);
  }
  .md:shadow-2xl {
    box-shadow: var(--shadow-2xl);
  }
  .md:shadow-inner {
    box-shadow: inset 0 2px 4px 0 color-mix(in srgb, var(--color-text) var(--opacity-5), transparent);
  }
  .md:shadow-primary {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-primary) 25%, transparent);
  }
  .md:shadow-secondary {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-secondary) 25%, transparent);
  }
  .md:shadow-success {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-success) 25%, transparent);
  }
  .md:shadow-warning {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-warning) 25%, transparent);
  }
  .md:shadow-error {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-error) 25%, transparent);
  }
  .md:shadow-info {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-info) 25%, transparent);
  }
  .md:elevation-0 {
    box-shadow: none;
    transition: var(--transition-fast);
  }
  .md:elevation-1 {
    box-shadow: var(--shadow-sm);
    transition: var(--transition-fast);
  }
  .md:elevation-2 {
    box-shadow: var(--shadow-sm);
    transition: var(--transition-fast);
  }
  .md:elevation-3 {
    box-shadow: var(--shadow-md);
    transition: var(--transition-fast);
  }
  .md:elevation-4 {
    box-shadow: var(--shadow-md);
    transition: var(--transition-fast);
  }
  .md:elevation-5 {
    box-shadow: var(--shadow-lg);
    transition: var(--transition-fast);
  }
  .md:elevation-6 {
    box-shadow: var(--shadow-lg);
    transition: var(--transition-fast);
  }
  .md:elevation-8 {
    box-shadow: var(--shadow-lg);
    transition: var(--transition-fast);
  }
  .md:elevation-12 {
    box-shadow: var(--shadow-xl);
    transition: var(--transition-fast);
  }
  .md:elevation-16 {
    box-shadow: var(--shadow-xl);
    transition: var(--transition-fast);
  }
  .md:elevation-20 {
    box-shadow: var(--shadow-2xl);
    transition: var(--transition-fast);
  }
  .md:elevation-24 {
    box-shadow: var(--shadow-2xl);
    transition: var(--transition-fast);
  }
  md:backdrop-blur-none {
    backdrop-filter: none;
  }
  md:backdrop-blur-sm {
    backdrop-filter: blur(4px);
  }
  md:backdrop-blur {
    backdrop-filter: blur(8px);
  }
  md:backdrop-blur-md {
    backdrop-filter: blur(12px);
  }
  md:backdrop-blur-lg {
    backdrop-filter: blur(16px);
  }
  md:backdrop-blur-xl {
    backdrop-filter: blur(24px);
  }
  md:backdrop-blur-2xl {
    backdrop-filter: blur(40px);
  }
  md:backdrop-blur-3xl {
    backdrop-filter: blur(64px);
  }
  .md:ring-0 {
    box-shadow: none;
  }
  .md:ring-1 {
    box-shadow: 0 0 0 1px var(--color-focus);
  }
  .md:ring-2 {
    box-shadow: 0 0 0 2px var(--color-focus);
  }
  .md:ring-3 {
    box-shadow: 0 0 0 3px var(--color-focus);
  }
  .md:ring-4 {
    box-shadow: 0 0 0 4px var(--color-focus);
  }
  .md:ring-primary {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 40%, transparent);
  }
  .md:ring-success {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-success) 40%, transparent);
  }
  .md:ring-warning {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-warning) 40%, transparent);
  }
  .md:ring-error {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-error) 40%, transparent);
  }
  .md:drop-shadow-none {
    filter: drop-shadow(0 0 transparent);
  }
  .md:drop-shadow-sm {
    filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--color-text) var(--opacity-5), transparent));
  }
  .md:drop-shadow-md {
    filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--color-text) var(--opacity-10), transparent));
  }
  .md:drop-shadow-lg {
    filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--color-text) var(--opacity-20), transparent));
  }
  .md:drop-shadow-xl {
    filter: drop-shadow(0 8px 16px color-mix(in srgb, var(--color-text) var(--opacity-25), transparent));
  }
  .md:drop-shadow-2xl {
    filter: drop-shadow(0 16px 32px color-mix(in srgb, var(--color-text) var(--opacity-30), transparent));
  }
}
@media (min-width: 1024px) {
  .lg:opacity-0 {
    opacity: var(--opacity-0);
  }
  .lg:opacity-5 {
    opacity: var(--opacity-5);
  }
  .lg:opacity-10 {
    opacity: var(--opacity-10);
  }
  .lg:opacity-20 {
    opacity: var(--opacity-20);
  }
  .lg:opacity-25 {
    opacity: var(--opacity-25);
  }
  .lg:opacity-30 {
    opacity: var(--opacity-30);
  }
  .lg:opacity-40 {
    opacity: var(--opacity-40);
  }
  .lg:opacity-50 {
    opacity: var(--opacity-50);
  }
  .lg:opacity-60 {
    opacity: var(--opacity-60);
  }
  .lg:opacity-70 {
    opacity: var(--opacity-70);
  }
  .lg:opacity-75 {
    opacity: var(--opacity-75);
  }
  .lg:opacity-80 {
    opacity: var(--opacity-80);
  }
  .lg:opacity-90 {
    opacity: var(--opacity-90);
  }
  .lg:opacity-95 {
    opacity: var(--opacity-95);
  }
  .lg:opacity-100 {
    opacity: var(--opacity-100);
  }
  .lg:shadow-none {
    box-shadow: none;
  }
  .lg:shadow-sm {
    box-shadow: var(--shadow-sm);
  }
  .lg:shadow-md {
    box-shadow: var(--shadow-md);
  }
  .lg:shadow-lg {
    box-shadow: var(--shadow-lg);
  }
  .lg:shadow-xl {
    box-shadow: var(--shadow-xl);
  }
  .lg:shadow-2xl {
    box-shadow: var(--shadow-2xl);
  }
  .lg:shadow-inner {
    box-shadow: inset 0 2px 4px 0 color-mix(in srgb, var(--color-text) var(--opacity-5), transparent);
  }
  .lg:shadow-primary {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-primary) 25%, transparent);
  }
  .lg:shadow-secondary {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-secondary) 25%, transparent);
  }
  .lg:shadow-success {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-success) 25%, transparent);
  }
  .lg:shadow-warning {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-warning) 25%, transparent);
  }
  .lg:shadow-error {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-error) 25%, transparent);
  }
  .lg:shadow-info {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-info) 25%, transparent);
  }
  .lg:elevation-0 {
    box-shadow: none;
    transition: var(--transition-fast);
  }
  .lg:elevation-1 {
    box-shadow: var(--shadow-sm);
    transition: var(--transition-fast);
  }
  .lg:elevation-2 {
    box-shadow: var(--shadow-sm);
    transition: var(--transition-fast);
  }
  .lg:elevation-3 {
    box-shadow: var(--shadow-md);
    transition: var(--transition-fast);
  }
  .lg:elevation-4 {
    box-shadow: var(--shadow-md);
    transition: var(--transition-fast);
  }
  .lg:elevation-5 {
    box-shadow: var(--shadow-lg);
    transition: var(--transition-fast);
  }
  .lg:elevation-6 {
    box-shadow: var(--shadow-lg);
    transition: var(--transition-fast);
  }
  .lg:elevation-8 {
    box-shadow: var(--shadow-lg);
    transition: var(--transition-fast);
  }
  .lg:elevation-12 {
    box-shadow: var(--shadow-xl);
    transition: var(--transition-fast);
  }
  .lg:elevation-16 {
    box-shadow: var(--shadow-xl);
    transition: var(--transition-fast);
  }
  .lg:elevation-20 {
    box-shadow: var(--shadow-2xl);
    transition: var(--transition-fast);
  }
  .lg:elevation-24 {
    box-shadow: var(--shadow-2xl);
    transition: var(--transition-fast);
  }
  lg:backdrop-blur-none {
    backdrop-filter: none;
  }
  lg:backdrop-blur-sm {
    backdrop-filter: blur(4px);
  }
  lg:backdrop-blur {
    backdrop-filter: blur(8px);
  }
  lg:backdrop-blur-md {
    backdrop-filter: blur(12px);
  }
  lg:backdrop-blur-lg {
    backdrop-filter: blur(16px);
  }
  lg:backdrop-blur-xl {
    backdrop-filter: blur(24px);
  }
  lg:backdrop-blur-2xl {
    backdrop-filter: blur(40px);
  }
  lg:backdrop-blur-3xl {
    backdrop-filter: blur(64px);
  }
  .lg:ring-0 {
    box-shadow: none;
  }
  .lg:ring-1 {
    box-shadow: 0 0 0 1px var(--color-focus);
  }
  .lg:ring-2 {
    box-shadow: 0 0 0 2px var(--color-focus);
  }
  .lg:ring-3 {
    box-shadow: 0 0 0 3px var(--color-focus);
  }
  .lg:ring-4 {
    box-shadow: 0 0 0 4px var(--color-focus);
  }
  .lg:ring-primary {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 40%, transparent);
  }
  .lg:ring-success {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-success) 40%, transparent);
  }
  .lg:ring-warning {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-warning) 40%, transparent);
  }
  .lg:ring-error {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-error) 40%, transparent);
  }
  .lg:drop-shadow-none {
    filter: drop-shadow(0 0 transparent);
  }
  .lg:drop-shadow-sm {
    filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--color-text) var(--opacity-5), transparent));
  }
  .lg:drop-shadow-md {
    filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--color-text) var(--opacity-10), transparent));
  }
  .lg:drop-shadow-lg {
    filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--color-text) var(--opacity-20), transparent));
  }
  .lg:drop-shadow-xl {
    filter: drop-shadow(0 8px 16px color-mix(in srgb, var(--color-text) var(--opacity-25), transparent));
  }
  .lg:drop-shadow-2xl {
    filter: drop-shadow(0 16px 32px color-mix(in srgb, var(--color-text) var(--opacity-30), transparent));
  }
}
@media (min-width: 1280px) {
  .xl:opacity-0 {
    opacity: var(--opacity-0);
  }
  .xl:opacity-5 {
    opacity: var(--opacity-5);
  }
  .xl:opacity-10 {
    opacity: var(--opacity-10);
  }
  .xl:opacity-20 {
    opacity: var(--opacity-20);
  }
  .xl:opacity-25 {
    opacity: var(--opacity-25);
  }
  .xl:opacity-30 {
    opacity: var(--opacity-30);
  }
  .xl:opacity-40 {
    opacity: var(--opacity-40);
  }
  .xl:opacity-50 {
    opacity: var(--opacity-50);
  }
  .xl:opacity-60 {
    opacity: var(--opacity-60);
  }
  .xl:opacity-70 {
    opacity: var(--opacity-70);
  }
  .xl:opacity-75 {
    opacity: var(--opacity-75);
  }
  .xl:opacity-80 {
    opacity: var(--opacity-80);
  }
  .xl:opacity-90 {
    opacity: var(--opacity-90);
  }
  .xl:opacity-95 {
    opacity: var(--opacity-95);
  }
  .xl:opacity-100 {
    opacity: var(--opacity-100);
  }
  .xl:shadow-none {
    box-shadow: none;
  }
  .xl:shadow-sm {
    box-shadow: var(--shadow-sm);
  }
  .xl:shadow-md {
    box-shadow: var(--shadow-md);
  }
  .xl:shadow-lg {
    box-shadow: var(--shadow-lg);
  }
  .xl:shadow-xl {
    box-shadow: var(--shadow-xl);
  }
  .xl:shadow-2xl {
    box-shadow: var(--shadow-2xl);
  }
  .xl:shadow-inner {
    box-shadow: inset 0 2px 4px 0 color-mix(in srgb, var(--color-text) var(--opacity-5), transparent);
  }
  .xl:shadow-primary {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-primary) 25%, transparent);
  }
  .xl:shadow-secondary {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-secondary) 25%, transparent);
  }
  .xl:shadow-success {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-success) 25%, transparent);
  }
  .xl:shadow-warning {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-warning) 25%, transparent);
  }
  .xl:shadow-error {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-error) 25%, transparent);
  }
  .xl:shadow-info {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-info) 25%, transparent);
  }
  .xl:elevation-0 {
    box-shadow: none;
    transition: var(--transition-fast);
  }
  .xl:elevation-1 {
    box-shadow: var(--shadow-sm);
    transition: var(--transition-fast);
  }
  .xl:elevation-2 {
    box-shadow: var(--shadow-sm);
    transition: var(--transition-fast);
  }
  .xl:elevation-3 {
    box-shadow: var(--shadow-md);
    transition: var(--transition-fast);
  }
  .xl:elevation-4 {
    box-shadow: var(--shadow-md);
    transition: var(--transition-fast);
  }
  .xl:elevation-5 {
    box-shadow: var(--shadow-lg);
    transition: var(--transition-fast);
  }
  .xl:elevation-6 {
    box-shadow: var(--shadow-lg);
    transition: var(--transition-fast);
  }
  .xl:elevation-8 {
    box-shadow: var(--shadow-lg);
    transition: var(--transition-fast);
  }
  .xl:elevation-12 {
    box-shadow: var(--shadow-xl);
    transition: var(--transition-fast);
  }
  .xl:elevation-16 {
    box-shadow: var(--shadow-xl);
    transition: var(--transition-fast);
  }
  .xl:elevation-20 {
    box-shadow: var(--shadow-2xl);
    transition: var(--transition-fast);
  }
  .xl:elevation-24 {
    box-shadow: var(--shadow-2xl);
    transition: var(--transition-fast);
  }
  xl:backdrop-blur-none {
    backdrop-filter: none;
  }
  xl:backdrop-blur-sm {
    backdrop-filter: blur(4px);
  }
  xl:backdrop-blur {
    backdrop-filter: blur(8px);
  }
  xl:backdrop-blur-md {
    backdrop-filter: blur(12px);
  }
  xl:backdrop-blur-lg {
    backdrop-filter: blur(16px);
  }
  xl:backdrop-blur-xl {
    backdrop-filter: blur(24px);
  }
  xl:backdrop-blur-2xl {
    backdrop-filter: blur(40px);
  }
  xl:backdrop-blur-3xl {
    backdrop-filter: blur(64px);
  }
  .xl:ring-0 {
    box-shadow: none;
  }
  .xl:ring-1 {
    box-shadow: 0 0 0 1px var(--color-focus);
  }
  .xl:ring-2 {
    box-shadow: 0 0 0 2px var(--color-focus);
  }
  .xl:ring-3 {
    box-shadow: 0 0 0 3px var(--color-focus);
  }
  .xl:ring-4 {
    box-shadow: 0 0 0 4px var(--color-focus);
  }
  .xl:ring-primary {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 40%, transparent);
  }
  .xl:ring-success {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-success) 40%, transparent);
  }
  .xl:ring-warning {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-warning) 40%, transparent);
  }
  .xl:ring-error {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-error) 40%, transparent);
  }
  .xl:drop-shadow-none {
    filter: drop-shadow(0 0 transparent);
  }
  .xl:drop-shadow-sm {
    filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--color-text) var(--opacity-5), transparent));
  }
  .xl:drop-shadow-md {
    filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--color-text) var(--opacity-10), transparent));
  }
  .xl:drop-shadow-lg {
    filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--color-text) var(--opacity-20), transparent));
  }
  .xl:drop-shadow-xl {
    filter: drop-shadow(0 8px 16px color-mix(in srgb, var(--color-text) var(--opacity-25), transparent));
  }
  .xl:drop-shadow-2xl {
    filter: drop-shadow(0 16px 32px color-mix(in srgb, var(--color-text) var(--opacity-30), transparent));
  }
}
.glass-frost {
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  border-color: var(--glass-border-frost);
  box-shadow: var(--shadow-xl);
}
.glass-interactive {
  transition: all var(--duration-fast) var(--ease-out);
}
.glass-interactive:hover {
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow: var(--shadow-md);
}
.glass-badge {
  backdrop-filter: blur(4px) saturate(110%);
  -webkit-backdrop-filter: blur(4px) saturate(110%);
}
.glass-card {
  box-shadow: var(--shadow-md);
}

.gradient {
  background: var(--gradient-primary, var(--color-primary));
  color: var(--color-text-inverse);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all var(--duration-normal) var(--ease-out);
}
.gradient .card-title, .gradient h1, .gradient h2, .gradient h3, .gradient h4, .gradient h5, .gradient h6 {
  color: var(--color-text-inverse);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.gradient:hover {
  filter: brightness(1.1) saturate(1.1);
  transform: translateY(-1px);
  box-shadow: 0 8px 25px 0 rgba(31, 38, 135, 0.25);
}
.gradient-success {
  background: var(--gradient-success, var(--color-success));
  color: var(--color-text-inverse);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all var(--duration-normal) var(--ease-out);
}
.gradient-success .card-title, .gradient-success h1, .gradient-success h2, .gradient-success h3, .gradient-success h4, .gradient-success h5, .gradient-success h6 {
  color: var(--color-text-inverse);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.gradient-success:hover {
  filter: brightness(1.1) saturate(1.1);
  transform: translateY(-1px);
  box-shadow: 0 8px 25px 0 rgba(31, 38, 135, 0.25);
}
.gradient-warning {
  background: var(--gradient-warning, var(--color-warning));
  color: var(--color-text-inverse);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all var(--duration-normal) var(--ease-out);
}
.gradient-warning .card-title, .gradient-warning h1, .gradient-warning h2, .gradient-warning h3, .gradient-warning h4, .gradient-warning h5, .gradient-warning h6 {
  color: var(--color-text-inverse);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.gradient-warning:hover {
  filter: brightness(1.1) saturate(1.1);
  transform: translateY(-1px);
  box-shadow: 0 8px 25px 0 rgba(31, 38, 135, 0.25);
}
.gradient-error {
  background: var(--gradient-error, var(--color-error));
  color: var(--color-text-inverse);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all var(--duration-normal) var(--ease-out);
}
.gradient-error .card-title, .gradient-error h1, .gradient-error h2, .gradient-error h3, .gradient-error h4, .gradient-error h5, .gradient-error h6 {
  color: var(--color-text-inverse);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.gradient-error:hover {
  filter: brightness(1.1) saturate(1.1);
  transform: translateY(-1px);
  box-shadow: 0 8px 25px 0 rgba(31, 38, 135, 0.25);
}
.gradient-info {
  background: var(--gradient-info, var(--color-info));
  color: var(--color-text-inverse);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all var(--duration-normal) var(--ease-out);
}
.gradient-info .card-title, .gradient-info h1, .gradient-info h2, .gradient-info h3, .gradient-info h4, .gradient-info h5, .gradient-info h6 {
  color: var(--color-text-inverse);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.gradient-info:hover {
  filter: brightness(1.1) saturate(1.1);
  transform: translateY(-1px);
  box-shadow: 0 8px 25px 0 rgba(31, 38, 135, 0.25);
}

.glass-gradient {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 12%, transparent) 0%, color-mix(in srgb, var(--color-primary) 5%, transparent) 100%);
  backdrop-filter: blur(16px) saturate(130%) brightness(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(130%) brightness(1.1);
}
.glass-gradient {
  border: 1px solid var(--glass-border-light);
  color: var(--color-text);
  transition: all var(--duration-normal) var(--ease-out);
}
.glass-gradient .card-title, .glass-gradient h1, .glass-gradient h2, .glass-gradient h3, .glass-gradient h4, .glass-gradient h5, .glass-gradient h6 {
  color: var(--color-text);
  text-shadow: var(--text-shadow-sm);
}
.glass-gradient .card-body, .glass-gradient .modal-body, .glass-gradient .dropdown-content {
  color: var(--color-text-muted);
}
.glass-gradient:hover {
  backdrop-filter: blur(20px) saturate(140%) brightness(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(140%) brightness(1.15);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.3);
}
.glass-gradient-success {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-success) 12%, transparent) 0%, color-mix(in srgb, var(--color-success) 5%, transparent) 100%);
  backdrop-filter: blur(16px) saturate(130%) brightness(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(130%) brightness(1.1);
}
.glass-gradient-success {
  border: 1px solid var(--glass-border-light);
  color: var(--color-text);
  transition: all var(--duration-normal) var(--ease-out);
}
.glass-gradient-success .card-title, .glass-gradient-success h1, .glass-gradient-success h2, .glass-gradient-success h3, .glass-gradient-success h4, .glass-gradient-success h5, .glass-gradient-success h6 {
  color: var(--color-text);
  text-shadow: var(--text-shadow-sm);
}
.glass-gradient-success .card-body, .glass-gradient-success .modal-body, .glass-gradient-success .dropdown-content {
  color: var(--color-text-muted);
}
.glass-gradient-success:hover {
  backdrop-filter: blur(20px) saturate(140%) brightness(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(140%) brightness(1.15);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.3);
}
.glass-gradient-warning {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-warning) 12%, transparent) 0%, color-mix(in srgb, var(--color-warning) 5%, transparent) 100%);
  backdrop-filter: blur(16px) saturate(130%) brightness(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(130%) brightness(1.1);
}
.glass-gradient-warning {
  border: 1px solid var(--glass-border-light);
  color: var(--color-text);
  transition: all var(--duration-normal) var(--ease-out);
}
.glass-gradient-warning .card-title, .glass-gradient-warning h1, .glass-gradient-warning h2, .glass-gradient-warning h3, .glass-gradient-warning h4, .glass-gradient-warning h5, .glass-gradient-warning h6 {
  color: var(--color-text);
  text-shadow: var(--text-shadow-sm);
}
.glass-gradient-warning .card-body, .glass-gradient-warning .modal-body, .glass-gradient-warning .dropdown-content {
  color: var(--color-text-muted);
}
.glass-gradient-warning:hover {
  backdrop-filter: blur(20px) saturate(140%) brightness(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(140%) brightness(1.15);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.3);
}
.glass-gradient-error {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-error) 12%, transparent) 0%, color-mix(in srgb, var(--color-error) 5%, transparent) 100%);
  backdrop-filter: blur(16px) saturate(130%) brightness(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(130%) brightness(1.1);
}
.glass-gradient-error {
  border: 1px solid var(--glass-border-light);
  color: var(--color-text);
  transition: all var(--duration-normal) var(--ease-out);
}
.glass-gradient-error .card-title, .glass-gradient-error h1, .glass-gradient-error h2, .glass-gradient-error h3, .glass-gradient-error h4, .glass-gradient-error h5, .glass-gradient-error h6 {
  color: var(--color-text);
  text-shadow: var(--text-shadow-sm);
}
.glass-gradient-error .card-body, .glass-gradient-error .modal-body, .glass-gradient-error .dropdown-content {
  color: var(--color-text-muted);
}
.glass-gradient-error:hover {
  backdrop-filter: blur(20px) saturate(140%) brightness(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(140%) brightness(1.15);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.3);
}
.glass-gradient-info {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-info) 12%, transparent) 0%, color-mix(in srgb, var(--color-info) 5%, transparent) 100%);
  backdrop-filter: blur(16px) saturate(130%) brightness(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(130%) brightness(1.1);
}
.glass-gradient-info {
  border: 1px solid var(--glass-border-light);
  color: var(--color-text);
  transition: all var(--duration-normal) var(--ease-out);
}
.glass-gradient-info .card-title, .glass-gradient-info h1, .glass-gradient-info h2, .glass-gradient-info h3, .glass-gradient-info h4, .glass-gradient-info h5, .glass-gradient-info h6 {
  color: var(--color-text);
  text-shadow: var(--text-shadow-sm);
}
.glass-gradient-info .card-body, .glass-gradient-info .modal-body, .glass-gradient-info .dropdown-content {
  color: var(--color-text-muted);
}
.glass-gradient-info:hover {
  backdrop-filter: blur(20px) saturate(140%) brightness(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(140%) brightness(1.15);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.3);
}
.glass-gradient-light {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, transparent) 0%, color-mix(in srgb, var(--color-primary) 3%, transparent) 100%);
  backdrop-filter: blur(12px) saturate(120%) brightness(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(120%) brightness(1.05);
}
.glass-gradient-light {
  border: 1px solid var(--glass-border-light);
  color: var(--color-text);
  transition: all var(--duration-normal) var(--ease-out);
}
.glass-gradient-light .card-title, .glass-gradient-light h1, .glass-gradient-light h2, .glass-gradient-light h3, .glass-gradient-light h4, .glass-gradient-light h5, .glass-gradient-light h6 {
  color: var(--color-text);
  text-shadow: var(--text-shadow-sm);
}
.glass-gradient-light .card-body, .glass-gradient-light .modal-body, .glass-gradient-light .dropdown-content {
  color: var(--color-text-muted);
}
.glass-gradient-light:hover {
  backdrop-filter: blur(16px) saturate(130%) brightness(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(130%) brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.3);
}
.glass-gradient-light-success {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-success) 8%, transparent) 0%, color-mix(in srgb, var(--color-success) 3%, transparent) 100%);
  backdrop-filter: blur(12px) saturate(120%) brightness(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(120%) brightness(1.05);
}
.glass-gradient-light-success {
  border: 1px solid var(--glass-border-light);
  color: var(--color-text);
  transition: all var(--duration-normal) var(--ease-out);
}
.glass-gradient-light-success .card-title, .glass-gradient-light-success h1, .glass-gradient-light-success h2, .glass-gradient-light-success h3, .glass-gradient-light-success h4, .glass-gradient-light-success h5, .glass-gradient-light-success h6 {
  color: var(--color-text);
  text-shadow: var(--text-shadow-sm);
}
.glass-gradient-light-success .card-body, .glass-gradient-light-success .modal-body, .glass-gradient-light-success .dropdown-content {
  color: var(--color-text-muted);
}
.glass-gradient-light-success:hover {
  backdrop-filter: blur(16px) saturate(130%) brightness(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(130%) brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.3);
}
.glass-gradient-light-warning {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-warning) 8%, transparent) 0%, color-mix(in srgb, var(--color-warning) 3%, transparent) 100%);
  backdrop-filter: blur(12px) saturate(120%) brightness(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(120%) brightness(1.05);
}
.glass-gradient-light-warning {
  border: 1px solid var(--glass-border-light);
  color: var(--color-text);
  transition: all var(--duration-normal) var(--ease-out);
}
.glass-gradient-light-warning .card-title, .glass-gradient-light-warning h1, .glass-gradient-light-warning h2, .glass-gradient-light-warning h3, .glass-gradient-light-warning h4, .glass-gradient-light-warning h5, .glass-gradient-light-warning h6 {
  color: var(--color-text);
  text-shadow: var(--text-shadow-sm);
}
.glass-gradient-light-warning .card-body, .glass-gradient-light-warning .modal-body, .glass-gradient-light-warning .dropdown-content {
  color: var(--color-text-muted);
}
.glass-gradient-light-warning:hover {
  backdrop-filter: blur(16px) saturate(130%) brightness(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(130%) brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.3);
}
.glass-gradient-light-error {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-error) 8%, transparent) 0%, color-mix(in srgb, var(--color-error) 3%, transparent) 100%);
  backdrop-filter: blur(12px) saturate(120%) brightness(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(120%) brightness(1.05);
}
.glass-gradient-light-error {
  border: 1px solid var(--glass-border-light);
  color: var(--color-text);
  transition: all var(--duration-normal) var(--ease-out);
}
.glass-gradient-light-error .card-title, .glass-gradient-light-error h1, .glass-gradient-light-error h2, .glass-gradient-light-error h3, .glass-gradient-light-error h4, .glass-gradient-light-error h5, .glass-gradient-light-error h6 {
  color: var(--color-text);
  text-shadow: var(--text-shadow-sm);
}
.glass-gradient-light-error .card-body, .glass-gradient-light-error .modal-body, .glass-gradient-light-error .dropdown-content {
  color: var(--color-text-muted);
}
.glass-gradient-light-error:hover {
  backdrop-filter: blur(16px) saturate(130%) brightness(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(130%) brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.3);
}
.glass-gradient-light-info {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-info) 8%, transparent) 0%, color-mix(in srgb, var(--color-info) 3%, transparent) 100%);
  backdrop-filter: blur(12px) saturate(120%) brightness(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(120%) brightness(1.05);
}
.glass-gradient-light-info {
  border: 1px solid var(--glass-border-light);
  color: var(--color-text);
  transition: all var(--duration-normal) var(--ease-out);
}
.glass-gradient-light-info .card-title, .glass-gradient-light-info h1, .glass-gradient-light-info h2, .glass-gradient-light-info h3, .glass-gradient-light-info h4, .glass-gradient-light-info h5, .glass-gradient-light-info h6 {
  color: var(--color-text);
  text-shadow: var(--text-shadow-sm);
}
.glass-gradient-light-info .card-body, .glass-gradient-light-info .modal-body, .glass-gradient-light-info .dropdown-content {
  color: var(--color-text-muted);
}
.glass-gradient-light-info:hover {
  backdrop-filter: blur(16px) saturate(130%) brightness(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(130%) brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.3);
}
.glass-gradient-heavy {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 15%, transparent) 0%, color-mix(in srgb, var(--color-primary) 8%, transparent) 100%);
  backdrop-filter: blur(20px) saturate(140%) brightness(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(140%) brightness(1.15);
}
.glass-gradient-heavy {
  border: 1px solid var(--glass-border-light);
  color: var(--color-text);
  transition: all var(--duration-normal) var(--ease-out);
}
.glass-gradient-heavy .card-title, .glass-gradient-heavy h1, .glass-gradient-heavy h2, .glass-gradient-heavy h3, .glass-gradient-heavy h4, .glass-gradient-heavy h5, .glass-gradient-heavy h6 {
  color: var(--color-text);
  text-shadow: var(--text-shadow-sm);
}
.glass-gradient-heavy .card-body, .glass-gradient-heavy .modal-body, .glass-gradient-heavy .dropdown-content {
  color: var(--color-text-muted);
}
.glass-gradient-heavy:hover {
  backdrop-filter: blur(24px) saturate(150%) brightness(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(150%) brightness(1.2);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.3);
}
.glass-gradient-heavy-success {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-success) 15%, transparent) 0%, color-mix(in srgb, var(--color-success) 8%, transparent) 100%);
  backdrop-filter: blur(20px) saturate(140%) brightness(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(140%) brightness(1.15);
}
.glass-gradient-heavy-success {
  border: 1px solid var(--glass-border-light);
  color: var(--color-text);
  transition: all var(--duration-normal) var(--ease-out);
}
.glass-gradient-heavy-success .card-title, .glass-gradient-heavy-success h1, .glass-gradient-heavy-success h2, .glass-gradient-heavy-success h3, .glass-gradient-heavy-success h4, .glass-gradient-heavy-success h5, .glass-gradient-heavy-success h6 {
  color: var(--color-text);
  text-shadow: var(--text-shadow-sm);
}
.glass-gradient-heavy-success .card-body, .glass-gradient-heavy-success .modal-body, .glass-gradient-heavy-success .dropdown-content {
  color: var(--color-text-muted);
}
.glass-gradient-heavy-success:hover {
  backdrop-filter: blur(24px) saturate(150%) brightness(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(150%) brightness(1.2);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.3);
}
.glass-gradient-heavy-warning {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-warning) 15%, transparent) 0%, color-mix(in srgb, var(--color-warning) 8%, transparent) 100%);
  backdrop-filter: blur(20px) saturate(140%) brightness(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(140%) brightness(1.15);
}
.glass-gradient-heavy-warning {
  border: 1px solid var(--glass-border-light);
  color: var(--color-text);
  transition: all var(--duration-normal) var(--ease-out);
}
.glass-gradient-heavy-warning .card-title, .glass-gradient-heavy-warning h1, .glass-gradient-heavy-warning h2, .glass-gradient-heavy-warning h3, .glass-gradient-heavy-warning h4, .glass-gradient-heavy-warning h5, .glass-gradient-heavy-warning h6 {
  color: var(--color-text);
  text-shadow: var(--text-shadow-sm);
}
.glass-gradient-heavy-warning .card-body, .glass-gradient-heavy-warning .modal-body, .glass-gradient-heavy-warning .dropdown-content {
  color: var(--color-text-muted);
}
.glass-gradient-heavy-warning:hover {
  backdrop-filter: blur(24px) saturate(150%) brightness(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(150%) brightness(1.2);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.3);
}
.glass-gradient-heavy-error {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-error) 15%, transparent) 0%, color-mix(in srgb, var(--color-error) 8%, transparent) 100%);
  backdrop-filter: blur(20px) saturate(140%) brightness(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(140%) brightness(1.15);
}
.glass-gradient-heavy-error {
  border: 1px solid var(--glass-border-light);
  color: var(--color-text);
  transition: all var(--duration-normal) var(--ease-out);
}
.glass-gradient-heavy-error .card-title, .glass-gradient-heavy-error h1, .glass-gradient-heavy-error h2, .glass-gradient-heavy-error h3, .glass-gradient-heavy-error h4, .glass-gradient-heavy-error h5, .glass-gradient-heavy-error h6 {
  color: var(--color-text);
  text-shadow: var(--text-shadow-sm);
}
.glass-gradient-heavy-error .card-body, .glass-gradient-heavy-error .modal-body, .glass-gradient-heavy-error .dropdown-content {
  color: var(--color-text-muted);
}
.glass-gradient-heavy-error:hover {
  backdrop-filter: blur(24px) saturate(150%) brightness(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(150%) brightness(1.2);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.3);
}
.glass-gradient-heavy-info {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-info) 15%, transparent) 0%, color-mix(in srgb, var(--color-info) 8%, transparent) 100%);
  backdrop-filter: blur(20px) saturate(140%) brightness(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(140%) brightness(1.15);
}
.glass-gradient-heavy-info {
  border: 1px solid var(--glass-border-light);
  color: var(--color-text);
  transition: all var(--duration-normal) var(--ease-out);
}
.glass-gradient-heavy-info .card-title, .glass-gradient-heavy-info h1, .glass-gradient-heavy-info h2, .glass-gradient-heavy-info h3, .glass-gradient-heavy-info h4, .glass-gradient-heavy-info h5, .glass-gradient-heavy-info h6 {
  color: var(--color-text);
  text-shadow: var(--text-shadow-sm);
}
.glass-gradient-heavy-info .card-body, .glass-gradient-heavy-info .modal-body, .glass-gradient-heavy-info .dropdown-content {
  color: var(--color-text-muted);
}
.glass-gradient-heavy-info:hover {
  backdrop-filter: blur(24px) saturate(150%) brightness(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(150%) brightness(1.2);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.3);
}

.backdrop-blur-none {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.backdrop-blur-xs {
  backdrop-filter: blur(var(--blur-xs));
  -webkit-backdrop-filter: blur(var(--blur-xs));
}
.backdrop-blur-sm {
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
}
.backdrop-blur-md {
  backdrop-filter: var(--glass-blur-md);
  -webkit-backdrop-filter: var(--glass-blur-md);
}
.backdrop-blur-lg {
  backdrop-filter: var(--glass-blur-lg);
  -webkit-backdrop-filter: var(--glass-blur-lg);
}
.backdrop-blur-xl {
  backdrop-filter: var(--glass-blur-xl);
  -webkit-backdrop-filter: var(--glass-blur-xl);
}

.design-glass-primary {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-primary);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  transition: var(--transition-normal);
  position: relative;
}
.design-glass-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent);
  border-radius: inherit;
  pointer-events: none;
}
.design-glass-primary:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-glass-primary:active {
  transform: scale(0.98);
}

.design-glass-primary-light {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-primary);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  transition: var(--transition-normal);
  position: relative;
}
.design-glass-primary-light::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent);
  border-radius: inherit;
  pointer-events: none;
}
.design-glass-primary-light:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-glass-primary-light:active {
  transform: scale(0.98);
}

.design-glass-primary-heavy {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-primary);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  transition: var(--transition-normal);
  position: relative;
}
.design-glass-primary-heavy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent);
  border-radius: inherit;
  pointer-events: none;
}
.design-glass-primary-heavy:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-glass-primary-heavy:active {
  transform: scale(0.98);
}

.design-glass-primary-minimal {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-primary);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  transition: var(--transition-normal);
  position: relative;
}
.design-glass-primary-minimal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent);
  border-radius: inherit;
  pointer-events: none;
}
.design-glass-primary-minimal:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-glass-primary-minimal:active {
  transform: scale(0.98);
}

.design-glass-secondary {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-secondary);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  transition: var(--transition-normal);
  position: relative;
}
.design-glass-secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-secondary) 10%, transparent), transparent);
  border-radius: inherit;
  pointer-events: none;
}
.design-glass-secondary:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-glass-secondary:active {
  transform: scale(0.98);
}

.design-glass-secondary-light {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-secondary);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  transition: var(--transition-normal);
  position: relative;
}
.design-glass-secondary-light::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-secondary) 10%, transparent), transparent);
  border-radius: inherit;
  pointer-events: none;
}
.design-glass-secondary-light:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-glass-secondary-light:active {
  transform: scale(0.98);
}

.design-glass-secondary-heavy {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-secondary);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  transition: var(--transition-normal);
  position: relative;
}
.design-glass-secondary-heavy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-secondary) 10%, transparent), transparent);
  border-radius: inherit;
  pointer-events: none;
}
.design-glass-secondary-heavy:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-glass-secondary-heavy:active {
  transform: scale(0.98);
}

.design-glass-secondary-minimal {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-secondary);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  transition: var(--transition-normal);
  position: relative;
}
.design-glass-secondary-minimal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-secondary) 10%, transparent), transparent);
  border-radius: inherit;
  pointer-events: none;
}
.design-glass-secondary-minimal:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-glass-secondary-minimal:active {
  transform: scale(0.98);
}

.design-glass-success {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-success);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  transition: var(--transition-normal);
  position: relative;
}
.design-glass-success::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-success) 10%, transparent), transparent);
  border-radius: inherit;
  pointer-events: none;
}
.design-glass-success:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-glass-success:active {
  transform: scale(0.98);
}

.design-glass-success-light {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-success);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  transition: var(--transition-normal);
  position: relative;
}
.design-glass-success-light::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-success) 10%, transparent), transparent);
  border-radius: inherit;
  pointer-events: none;
}
.design-glass-success-light:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-glass-success-light:active {
  transform: scale(0.98);
}

.design-glass-success-heavy {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-success);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  transition: var(--transition-normal);
  position: relative;
}
.design-glass-success-heavy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-success) 10%, transparent), transparent);
  border-radius: inherit;
  pointer-events: none;
}
.design-glass-success-heavy:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-glass-success-heavy:active {
  transform: scale(0.98);
}

.design-glass-success-minimal {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-success);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  transition: var(--transition-normal);
  position: relative;
}
.design-glass-success-minimal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-success) 10%, transparent), transparent);
  border-radius: inherit;
  pointer-events: none;
}
.design-glass-success-minimal:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-glass-success-minimal:active {
  transform: scale(0.98);
}

.design-glass-warning {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-warning);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  transition: var(--transition-normal);
  position: relative;
}
.design-glass-warning::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-warning) 10%, transparent), transparent);
  border-radius: inherit;
  pointer-events: none;
}
.design-glass-warning:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-glass-warning:active {
  transform: scale(0.98);
}

.design-glass-warning-light {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-warning);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  transition: var(--transition-normal);
  position: relative;
}
.design-glass-warning-light::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-warning) 10%, transparent), transparent);
  border-radius: inherit;
  pointer-events: none;
}
.design-glass-warning-light:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-glass-warning-light:active {
  transform: scale(0.98);
}

.design-glass-warning-heavy {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-warning);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  transition: var(--transition-normal);
  position: relative;
}
.design-glass-warning-heavy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-warning) 10%, transparent), transparent);
  border-radius: inherit;
  pointer-events: none;
}
.design-glass-warning-heavy:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-glass-warning-heavy:active {
  transform: scale(0.98);
}

.design-glass-warning-minimal {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-warning);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  transition: var(--transition-normal);
  position: relative;
}
.design-glass-warning-minimal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-warning) 10%, transparent), transparent);
  border-radius: inherit;
  pointer-events: none;
}
.design-glass-warning-minimal:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-glass-warning-minimal:active {
  transform: scale(0.98);
}

.design-glass-error {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-error);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  transition: var(--transition-normal);
  position: relative;
}
.design-glass-error::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-error) 10%, transparent), transparent);
  border-radius: inherit;
  pointer-events: none;
}
.design-glass-error:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-glass-error:active {
  transform: scale(0.98);
}

.design-glass-error-light {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-error);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  transition: var(--transition-normal);
  position: relative;
}
.design-glass-error-light::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-error) 10%, transparent), transparent);
  border-radius: inherit;
  pointer-events: none;
}
.design-glass-error-light:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-glass-error-light:active {
  transform: scale(0.98);
}

.design-glass-error-heavy {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-error);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  transition: var(--transition-normal);
  position: relative;
}
.design-glass-error-heavy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-error) 10%, transparent), transparent);
  border-radius: inherit;
  pointer-events: none;
}
.design-glass-error-heavy:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-glass-error-heavy:active {
  transform: scale(0.98);
}

.design-glass-error-minimal {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-error);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  transition: var(--transition-normal);
  position: relative;
}
.design-glass-error-minimal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-error) 10%, transparent), transparent);
  border-radius: inherit;
  pointer-events: none;
}
.design-glass-error-minimal:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-glass-error-minimal:active {
  transform: scale(0.98);
}

.design-glass-danger {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-danger);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  transition: var(--transition-normal);
  position: relative;
}
.design-glass-danger::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-danger) 10%, transparent), transparent);
  border-radius: inherit;
  pointer-events: none;
}
.design-glass-danger:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-glass-danger:active {
  transform: scale(0.98);
}

.design-glass-danger-light {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-danger);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  transition: var(--transition-normal);
  position: relative;
}
.design-glass-danger-light::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-danger) 10%, transparent), transparent);
  border-radius: inherit;
  pointer-events: none;
}
.design-glass-danger-light:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-glass-danger-light:active {
  transform: scale(0.98);
}

.design-glass-danger-heavy {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-danger);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  transition: var(--transition-normal);
  position: relative;
}
.design-glass-danger-heavy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-danger) 10%, transparent), transparent);
  border-radius: inherit;
  pointer-events: none;
}
.design-glass-danger-heavy:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-glass-danger-heavy:active {
  transform: scale(0.98);
}

.design-glass-danger-minimal {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-danger);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  transition: var(--transition-normal);
  position: relative;
}
.design-glass-danger-minimal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-danger) 10%, transparent), transparent);
  border-radius: inherit;
  pointer-events: none;
}
.design-glass-danger-minimal:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-glass-danger-minimal:active {
  transform: scale(0.98);
}

.design-glass-info {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-info);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  transition: var(--transition-normal);
  position: relative;
}
.design-glass-info::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-info) 10%, transparent), transparent);
  border-radius: inherit;
  pointer-events: none;
}
.design-glass-info:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-glass-info:active {
  transform: scale(0.98);
}

.design-glass-info-light {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-info);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  transition: var(--transition-normal);
  position: relative;
}
.design-glass-info-light::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-info) 10%, transparent), transparent);
  border-radius: inherit;
  pointer-events: none;
}
.design-glass-info-light:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-glass-info-light:active {
  transform: scale(0.98);
}

.design-glass-info-heavy {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-info);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  transition: var(--transition-normal);
  position: relative;
}
.design-glass-info-heavy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-info) 10%, transparent), transparent);
  border-radius: inherit;
  pointer-events: none;
}
.design-glass-info-heavy:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-glass-info-heavy:active {
  transform: scale(0.98);
}

.design-glass-info-minimal {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-info);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  transition: var(--transition-normal);
  position: relative;
}
.design-glass-info-minimal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-info) 10%, transparent), transparent);
  border-radius: inherit;
  pointer-events: none;
}
.design-glass-info-minimal:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-glass-info-minimal:active {
  transform: scale(0.98);
}

.design-neumorphism-primary {
  background: var(--color-surface-elevated);
  color: var(--color-primary);
  border: none;
  position: relative;
  box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.15), -6px -6px 12px rgba(255, 255, 255, 0.7);
  transition: var(--transition-fast);
}
.design-neumorphism-primary:hover {
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 7px 7px 14px rgba(0, 0, 0, 0.15), -7px -7px 14px rgba(255, 255, 255, 0.7);
}
.design-neumorphism-primary:active {
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset -2px -2px 4px rgba(255, 255, 255, 0.7);
}

.design-neumorphism-primary-light {
  background: var(--color-surface-elevated);
  color: var(--color-primary);
  border: none;
  position: relative;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.15), -4px -4px 8px rgba(255, 255, 255, 0.7);
  transition: var(--transition-fast);
}
.design-neumorphism-primary-light:hover {
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15), -5px -5px 10px rgba(255, 255, 255, 0.7);
}
.design-neumorphism-primary-light:active {
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset -2px -2px 4px rgba(255, 255, 255, 0.7);
}

.design-neumorphism-primary-heavy {
  background: var(--color-surface-elevated);
  color: var(--color-primary);
  border: none;
  position: relative;
  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.15), -8px -8px 16px rgba(255, 255, 255, 0.7);
  transition: var(--transition-fast);
}
.design-neumorphism-primary-heavy:hover {
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 9px 9px 18px rgba(0, 0, 0, 0.15), -9px -9px 18px rgba(255, 255, 255, 0.7);
}
.design-neumorphism-primary-heavy:active {
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset -2px -2px 4px rgba(255, 255, 255, 0.7);
}

.design-neumorphism-primary-minimal {
  background: var(--color-surface-elevated);
  color: var(--color-primary);
  border: none;
  position: relative;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.15), -4px -4px 8px rgba(255, 255, 255, 0.7);
  transition: var(--transition-fast);
}
.design-neumorphism-primary-minimal:hover {
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15), -5px -5px 10px rgba(255, 255, 255, 0.7);
}
.design-neumorphism-primary-minimal:active {
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset -2px -2px 4px rgba(255, 255, 255, 0.7);
}

.design-neumorphism-secondary {
  background: var(--color-surface-elevated);
  color: var(--color-secondary);
  border: none;
  position: relative;
  box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.15), -6px -6px 12px rgba(255, 255, 255, 0.7);
  transition: var(--transition-fast);
}
.design-neumorphism-secondary:hover {
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 7px 7px 14px rgba(0, 0, 0, 0.15), -7px -7px 14px rgba(255, 255, 255, 0.7);
}
.design-neumorphism-secondary:active {
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset -2px -2px 4px rgba(255, 255, 255, 0.7);
}

.design-neumorphism-secondary-light {
  background: var(--color-surface-elevated);
  color: var(--color-secondary);
  border: none;
  position: relative;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.15), -4px -4px 8px rgba(255, 255, 255, 0.7);
  transition: var(--transition-fast);
}
.design-neumorphism-secondary-light:hover {
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15), -5px -5px 10px rgba(255, 255, 255, 0.7);
}
.design-neumorphism-secondary-light:active {
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset -2px -2px 4px rgba(255, 255, 255, 0.7);
}

.design-neumorphism-secondary-heavy {
  background: var(--color-surface-elevated);
  color: var(--color-secondary);
  border: none;
  position: relative;
  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.15), -8px -8px 16px rgba(255, 255, 255, 0.7);
  transition: var(--transition-fast);
}
.design-neumorphism-secondary-heavy:hover {
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 9px 9px 18px rgba(0, 0, 0, 0.15), -9px -9px 18px rgba(255, 255, 255, 0.7);
}
.design-neumorphism-secondary-heavy:active {
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset -2px -2px 4px rgba(255, 255, 255, 0.7);
}

.design-neumorphism-secondary-minimal {
  background: var(--color-surface-elevated);
  color: var(--color-secondary);
  border: none;
  position: relative;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.15), -4px -4px 8px rgba(255, 255, 255, 0.7);
  transition: var(--transition-fast);
}
.design-neumorphism-secondary-minimal:hover {
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15), -5px -5px 10px rgba(255, 255, 255, 0.7);
}
.design-neumorphism-secondary-minimal:active {
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset -2px -2px 4px rgba(255, 255, 255, 0.7);
}

.design-neumorphism-success {
  background: var(--color-surface-elevated);
  color: var(--color-success);
  border: none;
  position: relative;
  box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.15), -6px -6px 12px rgba(255, 255, 255, 0.7);
  transition: var(--transition-fast);
}
.design-neumorphism-success:hover {
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 7px 7px 14px rgba(0, 0, 0, 0.15), -7px -7px 14px rgba(255, 255, 255, 0.7);
}
.design-neumorphism-success:active {
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset -2px -2px 4px rgba(255, 255, 255, 0.7);
}

.design-neumorphism-success-light {
  background: var(--color-surface-elevated);
  color: var(--color-success);
  border: none;
  position: relative;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.15), -4px -4px 8px rgba(255, 255, 255, 0.7);
  transition: var(--transition-fast);
}
.design-neumorphism-success-light:hover {
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15), -5px -5px 10px rgba(255, 255, 255, 0.7);
}
.design-neumorphism-success-light:active {
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset -2px -2px 4px rgba(255, 255, 255, 0.7);
}

.design-neumorphism-success-heavy {
  background: var(--color-surface-elevated);
  color: var(--color-success);
  border: none;
  position: relative;
  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.15), -8px -8px 16px rgba(255, 255, 255, 0.7);
  transition: var(--transition-fast);
}
.design-neumorphism-success-heavy:hover {
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 9px 9px 18px rgba(0, 0, 0, 0.15), -9px -9px 18px rgba(255, 255, 255, 0.7);
}
.design-neumorphism-success-heavy:active {
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset -2px -2px 4px rgba(255, 255, 255, 0.7);
}

.design-neumorphism-success-minimal {
  background: var(--color-surface-elevated);
  color: var(--color-success);
  border: none;
  position: relative;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.15), -4px -4px 8px rgba(255, 255, 255, 0.7);
  transition: var(--transition-fast);
}
.design-neumorphism-success-minimal:hover {
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15), -5px -5px 10px rgba(255, 255, 255, 0.7);
}
.design-neumorphism-success-minimal:active {
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset -2px -2px 4px rgba(255, 255, 255, 0.7);
}

.design-neumorphism-warning {
  background: var(--color-surface-elevated);
  color: var(--color-warning);
  border: none;
  position: relative;
  box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.15), -6px -6px 12px rgba(255, 255, 255, 0.7);
  transition: var(--transition-fast);
}
.design-neumorphism-warning:hover {
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 7px 7px 14px rgba(0, 0, 0, 0.15), -7px -7px 14px rgba(255, 255, 255, 0.7);
}
.design-neumorphism-warning:active {
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset -2px -2px 4px rgba(255, 255, 255, 0.7);
}

.design-neumorphism-warning-light {
  background: var(--color-surface-elevated);
  color: var(--color-warning);
  border: none;
  position: relative;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.15), -4px -4px 8px rgba(255, 255, 255, 0.7);
  transition: var(--transition-fast);
}
.design-neumorphism-warning-light:hover {
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15), -5px -5px 10px rgba(255, 255, 255, 0.7);
}
.design-neumorphism-warning-light:active {
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset -2px -2px 4px rgba(255, 255, 255, 0.7);
}

.design-neumorphism-warning-heavy {
  background: var(--color-surface-elevated);
  color: var(--color-warning);
  border: none;
  position: relative;
  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.15), -8px -8px 16px rgba(255, 255, 255, 0.7);
  transition: var(--transition-fast);
}
.design-neumorphism-warning-heavy:hover {
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 9px 9px 18px rgba(0, 0, 0, 0.15), -9px -9px 18px rgba(255, 255, 255, 0.7);
}
.design-neumorphism-warning-heavy:active {
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset -2px -2px 4px rgba(255, 255, 255, 0.7);
}

.design-neumorphism-warning-minimal {
  background: var(--color-surface-elevated);
  color: var(--color-warning);
  border: none;
  position: relative;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.15), -4px -4px 8px rgba(255, 255, 255, 0.7);
  transition: var(--transition-fast);
}
.design-neumorphism-warning-minimal:hover {
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15), -5px -5px 10px rgba(255, 255, 255, 0.7);
}
.design-neumorphism-warning-minimal:active {
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset -2px -2px 4px rgba(255, 255, 255, 0.7);
}

.design-neumorphism-error {
  background: var(--color-surface-elevated);
  color: var(--color-error);
  border: none;
  position: relative;
  box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.15), -6px -6px 12px rgba(255, 255, 255, 0.7);
  transition: var(--transition-fast);
}
.design-neumorphism-error:hover {
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 7px 7px 14px rgba(0, 0, 0, 0.15), -7px -7px 14px rgba(255, 255, 255, 0.7);
}
.design-neumorphism-error:active {
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset -2px -2px 4px rgba(255, 255, 255, 0.7);
}

.design-neumorphism-error-light {
  background: var(--color-surface-elevated);
  color: var(--color-error);
  border: none;
  position: relative;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.15), -4px -4px 8px rgba(255, 255, 255, 0.7);
  transition: var(--transition-fast);
}
.design-neumorphism-error-light:hover {
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15), -5px -5px 10px rgba(255, 255, 255, 0.7);
}
.design-neumorphism-error-light:active {
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset -2px -2px 4px rgba(255, 255, 255, 0.7);
}

.design-neumorphism-error-heavy {
  background: var(--color-surface-elevated);
  color: var(--color-error);
  border: none;
  position: relative;
  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.15), -8px -8px 16px rgba(255, 255, 255, 0.7);
  transition: var(--transition-fast);
}
.design-neumorphism-error-heavy:hover {
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 9px 9px 18px rgba(0, 0, 0, 0.15), -9px -9px 18px rgba(255, 255, 255, 0.7);
}
.design-neumorphism-error-heavy:active {
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset -2px -2px 4px rgba(255, 255, 255, 0.7);
}

.design-neumorphism-error-minimal {
  background: var(--color-surface-elevated);
  color: var(--color-error);
  border: none;
  position: relative;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.15), -4px -4px 8px rgba(255, 255, 255, 0.7);
  transition: var(--transition-fast);
}
.design-neumorphism-error-minimal:hover {
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15), -5px -5px 10px rgba(255, 255, 255, 0.7);
}
.design-neumorphism-error-minimal:active {
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset -2px -2px 4px rgba(255, 255, 255, 0.7);
}

.design-neumorphism-danger {
  background: var(--color-surface-elevated);
  color: var(--color-danger);
  border: none;
  position: relative;
  box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.15), -6px -6px 12px rgba(255, 255, 255, 0.7);
  transition: var(--transition-fast);
}
.design-neumorphism-danger:hover {
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 7px 7px 14px rgba(0, 0, 0, 0.15), -7px -7px 14px rgba(255, 255, 255, 0.7);
}
.design-neumorphism-danger:active {
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset -2px -2px 4px rgba(255, 255, 255, 0.7);
}

.design-neumorphism-danger-light {
  background: var(--color-surface-elevated);
  color: var(--color-danger);
  border: none;
  position: relative;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.15), -4px -4px 8px rgba(255, 255, 255, 0.7);
  transition: var(--transition-fast);
}
.design-neumorphism-danger-light:hover {
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15), -5px -5px 10px rgba(255, 255, 255, 0.7);
}
.design-neumorphism-danger-light:active {
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset -2px -2px 4px rgba(255, 255, 255, 0.7);
}

.design-neumorphism-danger-heavy {
  background: var(--color-surface-elevated);
  color: var(--color-danger);
  border: none;
  position: relative;
  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.15), -8px -8px 16px rgba(255, 255, 255, 0.7);
  transition: var(--transition-fast);
}
.design-neumorphism-danger-heavy:hover {
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 9px 9px 18px rgba(0, 0, 0, 0.15), -9px -9px 18px rgba(255, 255, 255, 0.7);
}
.design-neumorphism-danger-heavy:active {
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset -2px -2px 4px rgba(255, 255, 255, 0.7);
}

.design-neumorphism-danger-minimal {
  background: var(--color-surface-elevated);
  color: var(--color-danger);
  border: none;
  position: relative;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.15), -4px -4px 8px rgba(255, 255, 255, 0.7);
  transition: var(--transition-fast);
}
.design-neumorphism-danger-minimal:hover {
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15), -5px -5px 10px rgba(255, 255, 255, 0.7);
}
.design-neumorphism-danger-minimal:active {
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset -2px -2px 4px rgba(255, 255, 255, 0.7);
}

.design-neumorphism-info {
  background: var(--color-surface-elevated);
  color: var(--color-info);
  border: none;
  position: relative;
  box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.15), -6px -6px 12px rgba(255, 255, 255, 0.7);
  transition: var(--transition-fast);
}
.design-neumorphism-info:hover {
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 7px 7px 14px rgba(0, 0, 0, 0.15), -7px -7px 14px rgba(255, 255, 255, 0.7);
}
.design-neumorphism-info:active {
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset -2px -2px 4px rgba(255, 255, 255, 0.7);
}

.design-neumorphism-info-light {
  background: var(--color-surface-elevated);
  color: var(--color-info);
  border: none;
  position: relative;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.15), -4px -4px 8px rgba(255, 255, 255, 0.7);
  transition: var(--transition-fast);
}
.design-neumorphism-info-light:hover {
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15), -5px -5px 10px rgba(255, 255, 255, 0.7);
}
.design-neumorphism-info-light:active {
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset -2px -2px 4px rgba(255, 255, 255, 0.7);
}

.design-neumorphism-info-heavy {
  background: var(--color-surface-elevated);
  color: var(--color-info);
  border: none;
  position: relative;
  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.15), -8px -8px 16px rgba(255, 255, 255, 0.7);
  transition: var(--transition-fast);
}
.design-neumorphism-info-heavy:hover {
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 9px 9px 18px rgba(0, 0, 0, 0.15), -9px -9px 18px rgba(255, 255, 255, 0.7);
}
.design-neumorphism-info-heavy:active {
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset -2px -2px 4px rgba(255, 255, 255, 0.7);
}

.design-neumorphism-info-minimal {
  background: var(--color-surface-elevated);
  color: var(--color-info);
  border: none;
  position: relative;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.15), -4px -4px 8px rgba(255, 255, 255, 0.7);
  transition: var(--transition-fast);
}
.design-neumorphism-info-minimal:hover {
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15), -5px -5px 10px rgba(255, 255, 255, 0.7);
}
.design-neumorphism-info-minimal:active {
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset -2px -2px 4px rgba(255, 255, 255, 0.7);
}

.design-gradient-primary {
  background: var(--gradient-primary, linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 70%, black)));
  color: var(--color-text-inverse);
  border: none;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}
.design-gradient-primary:hover {
  filter: brightness(1.15);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: var(--shadow-md);
}

.design-gradient-primary-light {
  background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 80%, white));
  color: var(--color-text-inverse);
  border: none;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}
.design-gradient-primary-light:hover {
  filter: brightness(1.15);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: var(--shadow-md);
}

.design-gradient-primary-heavy {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 90%, black), var(--color-primary), color-mix(in srgb, var(--color-primary) 80%, white));
  color: var(--color-text-inverse);
  border: none;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}
.design-gradient-primary-heavy:hover {
  filter: brightness(1.15);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: var(--shadow-md);
}

.design-gradient-primary-minimal {
  background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 80%, white));
  color: var(--color-text-inverse);
  border: none;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}
.design-gradient-primary-minimal:hover {
  filter: brightness(1.15);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: var(--shadow-md);
}

.design-gradient-secondary {
  background: var(--gradient-secondary, linear-gradient(135deg, var(--color-secondary), color-mix(in srgb, var(--color-secondary) 70%, black)));
  color: var(--color-text-inverse);
  border: none;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}
.design-gradient-secondary:hover {
  filter: brightness(1.15);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: var(--shadow-md);
}

.design-gradient-secondary-light {
  background: linear-gradient(135deg, var(--color-secondary), color-mix(in srgb, var(--color-secondary) 80%, white));
  color: var(--color-text-inverse);
  border: none;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}
.design-gradient-secondary-light:hover {
  filter: brightness(1.15);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: var(--shadow-md);
}

.design-gradient-secondary-heavy {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-secondary) 90%, black), var(--color-secondary), color-mix(in srgb, var(--color-secondary) 80%, white));
  color: var(--color-text-inverse);
  border: none;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}
.design-gradient-secondary-heavy:hover {
  filter: brightness(1.15);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: var(--shadow-md);
}

.design-gradient-secondary-minimal {
  background: linear-gradient(135deg, var(--color-secondary), color-mix(in srgb, var(--color-secondary) 80%, white));
  color: var(--color-text-inverse);
  border: none;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}
.design-gradient-secondary-minimal:hover {
  filter: brightness(1.15);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: var(--shadow-md);
}

.design-gradient-success {
  background: var(--gradient-success, linear-gradient(135deg, var(--color-success), color-mix(in srgb, var(--color-success) 70%, black)));
  color: var(--color-text-inverse);
  border: none;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}
.design-gradient-success:hover {
  filter: brightness(1.15);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: var(--shadow-md);
}

.design-gradient-success-light {
  background: linear-gradient(135deg, var(--color-success), color-mix(in srgb, var(--color-success) 80%, white));
  color: var(--color-text-inverse);
  border: none;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}
.design-gradient-success-light:hover {
  filter: brightness(1.15);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: var(--shadow-md);
}

.design-gradient-success-heavy {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-success) 90%, black), var(--color-success), color-mix(in srgb, var(--color-success) 80%, white));
  color: var(--color-text-inverse);
  border: none;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}
.design-gradient-success-heavy:hover {
  filter: brightness(1.15);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: var(--shadow-md);
}

.design-gradient-success-minimal {
  background: linear-gradient(135deg, var(--color-success), color-mix(in srgb, var(--color-success) 80%, white));
  color: var(--color-text-inverse);
  border: none;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}
.design-gradient-success-minimal:hover {
  filter: brightness(1.15);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: var(--shadow-md);
}

.design-gradient-warning {
  background: var(--gradient-warning, linear-gradient(135deg, var(--color-warning), color-mix(in srgb, var(--color-warning) 70%, black)));
  color: var(--color-text-inverse);
  border: none;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}
.design-gradient-warning:hover {
  filter: brightness(1.15);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: var(--shadow-md);
}

.design-gradient-warning-light {
  background: linear-gradient(135deg, var(--color-warning), color-mix(in srgb, var(--color-warning) 80%, white));
  color: var(--color-text-inverse);
  border: none;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}
.design-gradient-warning-light:hover {
  filter: brightness(1.15);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: var(--shadow-md);
}

.design-gradient-warning-heavy {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-warning) 90%, black), var(--color-warning), color-mix(in srgb, var(--color-warning) 80%, white));
  color: var(--color-text-inverse);
  border: none;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}
.design-gradient-warning-heavy:hover {
  filter: brightness(1.15);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: var(--shadow-md);
}

.design-gradient-warning-minimal {
  background: linear-gradient(135deg, var(--color-warning), color-mix(in srgb, var(--color-warning) 80%, white));
  color: var(--color-text-inverse);
  border: none;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}
.design-gradient-warning-minimal:hover {
  filter: brightness(1.15);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: var(--shadow-md);
}

.design-gradient-error {
  background: var(--gradient-error, linear-gradient(135deg, var(--color-error), color-mix(in srgb, var(--color-error) 70%, black)));
  color: var(--color-text-inverse);
  border: none;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}
.design-gradient-error:hover {
  filter: brightness(1.15);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: var(--shadow-md);
}

.design-gradient-error-light {
  background: linear-gradient(135deg, var(--color-error), color-mix(in srgb, var(--color-error) 80%, white));
  color: var(--color-text-inverse);
  border: none;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}
.design-gradient-error-light:hover {
  filter: brightness(1.15);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: var(--shadow-md);
}

.design-gradient-error-heavy {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-error) 90%, black), var(--color-error), color-mix(in srgb, var(--color-error) 80%, white));
  color: var(--color-text-inverse);
  border: none;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}
.design-gradient-error-heavy:hover {
  filter: brightness(1.15);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: var(--shadow-md);
}

.design-gradient-error-minimal {
  background: linear-gradient(135deg, var(--color-error), color-mix(in srgb, var(--color-error) 80%, white));
  color: var(--color-text-inverse);
  border: none;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}
.design-gradient-error-minimal:hover {
  filter: brightness(1.15);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: var(--shadow-md);
}

.design-gradient-danger {
  background: var(--gradient-danger, linear-gradient(135deg, var(--color-danger), color-mix(in srgb, var(--color-danger) 70%, black)));
  color: var(--color-text-inverse);
  border: none;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}
.design-gradient-danger:hover {
  filter: brightness(1.15);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: var(--shadow-md);
}

.design-gradient-danger-light {
  background: linear-gradient(135deg, var(--color-danger), color-mix(in srgb, var(--color-danger) 80%, white));
  color: var(--color-text-inverse);
  border: none;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}
.design-gradient-danger-light:hover {
  filter: brightness(1.15);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: var(--shadow-md);
}

.design-gradient-danger-heavy {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-danger) 90%, black), var(--color-danger), color-mix(in srgb, var(--color-danger) 80%, white));
  color: var(--color-text-inverse);
  border: none;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}
.design-gradient-danger-heavy:hover {
  filter: brightness(1.15);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: var(--shadow-md);
}

.design-gradient-danger-minimal {
  background: linear-gradient(135deg, var(--color-danger), color-mix(in srgb, var(--color-danger) 80%, white));
  color: var(--color-text-inverse);
  border: none;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}
.design-gradient-danger-minimal:hover {
  filter: brightness(1.15);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: var(--shadow-md);
}

.design-gradient-info {
  background: var(--gradient-info, linear-gradient(135deg, var(--color-info), color-mix(in srgb, var(--color-info) 70%, black)));
  color: var(--color-text-inverse);
  border: none;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}
.design-gradient-info:hover {
  filter: brightness(1.15);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: var(--shadow-md);
}

.design-gradient-info-light {
  background: linear-gradient(135deg, var(--color-info), color-mix(in srgb, var(--color-info) 80%, white));
  color: var(--color-text-inverse);
  border: none;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}
.design-gradient-info-light:hover {
  filter: brightness(1.15);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: var(--shadow-md);
}

.design-gradient-info-heavy {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-info) 90%, black), var(--color-info), color-mix(in srgb, var(--color-info) 80%, white));
  color: var(--color-text-inverse);
  border: none;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}
.design-gradient-info-heavy:hover {
  filter: brightness(1.15);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: var(--shadow-md);
}

.design-gradient-info-minimal {
  background: linear-gradient(135deg, var(--color-info), color-mix(in srgb, var(--color-info) 80%, white));
  color: var(--color-text-inverse);
  border: none;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}
.design-gradient-info-minimal:hover {
  filter: brightness(1.15);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: var(--shadow-md);
}

.design-outlined-primary {
  background: transparent;
  color: var(--color-primary);
  border: var(--border-width-regular) solid var(--color-primary);
  transition: var(--transition-fast);
}
.design-outlined-primary:hover {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  box-shadow: 0 0 0 1px var(--color-primary);
}
.design-outlined-primary:active {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.design-outlined-primary-light {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  transition: var(--transition-fast);
}
.design-outlined-primary-light:hover {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  box-shadow: 0 0 0 1px var(--color-primary);
}
.design-outlined-primary-light:active {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.design-outlined-primary-heavy {
  background: transparent;
  color: var(--color-primary);
  border: 3px solid var(--color-primary);
  transition: var(--transition-fast);
}
.design-outlined-primary-heavy:hover {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  box-shadow: 0 0 0 1px var(--color-primary);
}
.design-outlined-primary-heavy:active {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.design-outlined-primary-minimal {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  transition: var(--transition-fast);
}
.design-outlined-primary-minimal:hover {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  box-shadow: 0 0 0 1px var(--color-primary);
}
.design-outlined-primary-minimal:active {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.design-outlined-secondary {
  background: transparent;
  color: var(--color-secondary);
  border: var(--border-width-regular) solid var(--color-secondary);
  transition: var(--transition-fast);
}
.design-outlined-secondary:hover {
  background: color-mix(in srgb, var(--color-secondary) 10%, transparent);
  box-shadow: 0 0 0 1px var(--color-secondary);
}
.design-outlined-secondary:active {
  background: color-mix(in srgb, var(--color-secondary) 15%, transparent);
}

.design-outlined-secondary-light {
  background: transparent;
  color: var(--color-secondary);
  border: 1px solid var(--color-secondary);
  transition: var(--transition-fast);
}
.design-outlined-secondary-light:hover {
  background: color-mix(in srgb, var(--color-secondary) 10%, transparent);
  box-shadow: 0 0 0 1px var(--color-secondary);
}
.design-outlined-secondary-light:active {
  background: color-mix(in srgb, var(--color-secondary) 15%, transparent);
}

.design-outlined-secondary-heavy {
  background: transparent;
  color: var(--color-secondary);
  border: 3px solid var(--color-secondary);
  transition: var(--transition-fast);
}
.design-outlined-secondary-heavy:hover {
  background: color-mix(in srgb, var(--color-secondary) 10%, transparent);
  box-shadow: 0 0 0 1px var(--color-secondary);
}
.design-outlined-secondary-heavy:active {
  background: color-mix(in srgb, var(--color-secondary) 15%, transparent);
}

.design-outlined-secondary-minimal {
  background: transparent;
  color: var(--color-secondary);
  border: 1px solid var(--color-secondary);
  transition: var(--transition-fast);
}
.design-outlined-secondary-minimal:hover {
  background: color-mix(in srgb, var(--color-secondary) 10%, transparent);
  box-shadow: 0 0 0 1px var(--color-secondary);
}
.design-outlined-secondary-minimal:active {
  background: color-mix(in srgb, var(--color-secondary) 15%, transparent);
}

.design-outlined-success {
  background: transparent;
  color: var(--color-success);
  border: var(--border-width-regular) solid var(--color-success);
  transition: var(--transition-fast);
}
.design-outlined-success:hover {
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  box-shadow: 0 0 0 1px var(--color-success);
}
.design-outlined-success:active {
  background: color-mix(in srgb, var(--color-success) 15%, transparent);
}

.design-outlined-success-light {
  background: transparent;
  color: var(--color-success);
  border: 1px solid var(--color-success);
  transition: var(--transition-fast);
}
.design-outlined-success-light:hover {
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  box-shadow: 0 0 0 1px var(--color-success);
}
.design-outlined-success-light:active {
  background: color-mix(in srgb, var(--color-success) 15%, transparent);
}

.design-outlined-success-heavy {
  background: transparent;
  color: var(--color-success);
  border: 3px solid var(--color-success);
  transition: var(--transition-fast);
}
.design-outlined-success-heavy:hover {
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  box-shadow: 0 0 0 1px var(--color-success);
}
.design-outlined-success-heavy:active {
  background: color-mix(in srgb, var(--color-success) 15%, transparent);
}

.design-outlined-success-minimal {
  background: transparent;
  color: var(--color-success);
  border: 1px solid var(--color-success);
  transition: var(--transition-fast);
}
.design-outlined-success-minimal:hover {
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  box-shadow: 0 0 0 1px var(--color-success);
}
.design-outlined-success-minimal:active {
  background: color-mix(in srgb, var(--color-success) 15%, transparent);
}

.design-outlined-warning {
  background: transparent;
  color: var(--color-warning);
  border: var(--border-width-regular) solid var(--color-warning);
  transition: var(--transition-fast);
}
.design-outlined-warning:hover {
  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
  box-shadow: 0 0 0 1px var(--color-warning);
}
.design-outlined-warning:active {
  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
}

.design-outlined-warning-light {
  background: transparent;
  color: var(--color-warning);
  border: 1px solid var(--color-warning);
  transition: var(--transition-fast);
}
.design-outlined-warning-light:hover {
  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
  box-shadow: 0 0 0 1px var(--color-warning);
}
.design-outlined-warning-light:active {
  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
}

.design-outlined-warning-heavy {
  background: transparent;
  color: var(--color-warning);
  border: 3px solid var(--color-warning);
  transition: var(--transition-fast);
}
.design-outlined-warning-heavy:hover {
  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
  box-shadow: 0 0 0 1px var(--color-warning);
}
.design-outlined-warning-heavy:active {
  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
}

.design-outlined-warning-minimal {
  background: transparent;
  color: var(--color-warning);
  border: 1px solid var(--color-warning);
  transition: var(--transition-fast);
}
.design-outlined-warning-minimal:hover {
  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
  box-shadow: 0 0 0 1px var(--color-warning);
}
.design-outlined-warning-minimal:active {
  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
}

.design-outlined-error {
  background: transparent;
  color: var(--color-error);
  border: var(--border-width-regular) solid var(--color-error);
  transition: var(--transition-fast);
}
.design-outlined-error:hover {
  background: color-mix(in srgb, var(--color-error) 10%, transparent);
  box-shadow: 0 0 0 1px var(--color-error);
}
.design-outlined-error:active {
  background: color-mix(in srgb, var(--color-error) 15%, transparent);
}

.design-outlined-error-light {
  background: transparent;
  color: var(--color-error);
  border: 1px solid var(--color-error);
  transition: var(--transition-fast);
}
.design-outlined-error-light:hover {
  background: color-mix(in srgb, var(--color-error) 10%, transparent);
  box-shadow: 0 0 0 1px var(--color-error);
}
.design-outlined-error-light:active {
  background: color-mix(in srgb, var(--color-error) 15%, transparent);
}

.design-outlined-error-heavy {
  background: transparent;
  color: var(--color-error);
  border: 3px solid var(--color-error);
  transition: var(--transition-fast);
}
.design-outlined-error-heavy:hover {
  background: color-mix(in srgb, var(--color-error) 10%, transparent);
  box-shadow: 0 0 0 1px var(--color-error);
}
.design-outlined-error-heavy:active {
  background: color-mix(in srgb, var(--color-error) 15%, transparent);
}

.design-outlined-error-minimal {
  background: transparent;
  color: var(--color-error);
  border: 1px solid var(--color-error);
  transition: var(--transition-fast);
}
.design-outlined-error-minimal:hover {
  background: color-mix(in srgb, var(--color-error) 10%, transparent);
  box-shadow: 0 0 0 1px var(--color-error);
}
.design-outlined-error-minimal:active {
  background: color-mix(in srgb, var(--color-error) 15%, transparent);
}

.design-outlined-danger {
  background: transparent;
  color: var(--color-danger);
  border: var(--border-width-regular) solid var(--color-danger);
  transition: var(--transition-fast);
}
.design-outlined-danger:hover {
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
  box-shadow: 0 0 0 1px var(--color-danger);
}
.design-outlined-danger:active {
  background: color-mix(in srgb, var(--color-danger) 15%, transparent);
}

.design-outlined-danger-light {
  background: transparent;
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
  transition: var(--transition-fast);
}
.design-outlined-danger-light:hover {
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
  box-shadow: 0 0 0 1px var(--color-danger);
}
.design-outlined-danger-light:active {
  background: color-mix(in srgb, var(--color-danger) 15%, transparent);
}

.design-outlined-danger-heavy {
  background: transparent;
  color: var(--color-danger);
  border: 3px solid var(--color-danger);
  transition: var(--transition-fast);
}
.design-outlined-danger-heavy:hover {
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
  box-shadow: 0 0 0 1px var(--color-danger);
}
.design-outlined-danger-heavy:active {
  background: color-mix(in srgb, var(--color-danger) 15%, transparent);
}

.design-outlined-danger-minimal {
  background: transparent;
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
  transition: var(--transition-fast);
}
.design-outlined-danger-minimal:hover {
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
  box-shadow: 0 0 0 1px var(--color-danger);
}
.design-outlined-danger-minimal:active {
  background: color-mix(in srgb, var(--color-danger) 15%, transparent);
}

.design-outlined-info {
  background: transparent;
  color: var(--color-info);
  border: var(--border-width-regular) solid var(--color-info);
  transition: var(--transition-fast);
}
.design-outlined-info:hover {
  background: color-mix(in srgb, var(--color-info) 10%, transparent);
  box-shadow: 0 0 0 1px var(--color-info);
}
.design-outlined-info:active {
  background: color-mix(in srgb, var(--color-info) 15%, transparent);
}

.design-outlined-info-light {
  background: transparent;
  color: var(--color-info);
  border: 1px solid var(--color-info);
  transition: var(--transition-fast);
}
.design-outlined-info-light:hover {
  background: color-mix(in srgb, var(--color-info) 10%, transparent);
  box-shadow: 0 0 0 1px var(--color-info);
}
.design-outlined-info-light:active {
  background: color-mix(in srgb, var(--color-info) 15%, transparent);
}

.design-outlined-info-heavy {
  background: transparent;
  color: var(--color-info);
  border: 3px solid var(--color-info);
  transition: var(--transition-fast);
}
.design-outlined-info-heavy:hover {
  background: color-mix(in srgb, var(--color-info) 10%, transparent);
  box-shadow: 0 0 0 1px var(--color-info);
}
.design-outlined-info-heavy:active {
  background: color-mix(in srgb, var(--color-info) 15%, transparent);
}

.design-outlined-info-minimal {
  background: transparent;
  color: var(--color-info);
  border: 1px solid var(--color-info);
  transition: var(--transition-fast);
}
.design-outlined-info-minimal:hover {
  background: color-mix(in srgb, var(--color-info) 10%, transparent);
  box-shadow: 0 0 0 1px var(--color-info);
}
.design-outlined-info-minimal:active {
  background: color-mix(in srgb, var(--color-info) 15%, transparent);
}

.design-ghost-primary {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--color-primary);
  border: var(--border-1) solid transparent;
  transition: var(--transition-fast);
}
.design-ghost-primary:hover {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.design-ghost-primary:active {
  transform: scale(0.97);
}

.design-ghost-primary-light {
  background: color-mix(in srgb, var(--color-primary) 5%, transparent);
  color: var(--color-primary);
  border: var(--border-1) solid transparent;
  transition: var(--transition-fast);
}
.design-ghost-primary-light:hover {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.design-ghost-primary-light:active {
  transform: scale(0.97);
}

.design-ghost-primary-heavy {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
  border: var(--border-1) solid transparent;
  transition: var(--transition-fast);
}
.design-ghost-primary-heavy:hover {
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.design-ghost-primary-heavy:active {
  transform: scale(0.97);
}

.design-ghost-primary-minimal {
  background: color-mix(in srgb, var(--color-primary) 5%, transparent);
  color: var(--color-primary);
  border: var(--border-1) solid transparent;
  transition: var(--transition-fast);
}
.design-ghost-primary-minimal:hover {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.design-ghost-primary-minimal:active {
  transform: scale(0.97);
}

.design-ghost-secondary {
  background: color-mix(in srgb, var(--color-secondary) 8%, transparent);
  color: var(--color-secondary);
  border: var(--border-1) solid transparent;
  transition: var(--transition-fast);
}
.design-ghost-secondary:hover {
  background: color-mix(in srgb, var(--color-secondary) 15%, transparent);
  border-color: color-mix(in srgb, var(--color-secondary) 20%, transparent);
}
.design-ghost-secondary:active {
  transform: scale(0.97);
}

.design-ghost-secondary-light {
  background: color-mix(in srgb, var(--color-secondary) 5%, transparent);
  color: var(--color-secondary);
  border: var(--border-1) solid transparent;
  transition: var(--transition-fast);
}
.design-ghost-secondary-light:hover {
  background: color-mix(in srgb, var(--color-secondary) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-secondary) 20%, transparent);
}
.design-ghost-secondary-light:active {
  transform: scale(0.97);
}

.design-ghost-secondary-heavy {
  background: color-mix(in srgb, var(--color-secondary) 12%, transparent);
  color: var(--color-secondary);
  border: var(--border-1) solid transparent;
  transition: var(--transition-fast);
}
.design-ghost-secondary-heavy:hover {
  background: color-mix(in srgb, var(--color-secondary) 20%, transparent);
  border-color: color-mix(in srgb, var(--color-secondary) 20%, transparent);
}
.design-ghost-secondary-heavy:active {
  transform: scale(0.97);
}

.design-ghost-secondary-minimal {
  background: color-mix(in srgb, var(--color-secondary) 5%, transparent);
  color: var(--color-secondary);
  border: var(--border-1) solid transparent;
  transition: var(--transition-fast);
}
.design-ghost-secondary-minimal:hover {
  background: color-mix(in srgb, var(--color-secondary) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-secondary) 20%, transparent);
}
.design-ghost-secondary-minimal:active {
  transform: scale(0.97);
}

.design-ghost-success {
  background: color-mix(in srgb, var(--color-success) 8%, transparent);
  color: var(--color-success);
  border: var(--border-1) solid transparent;
  transition: var(--transition-fast);
}
.design-ghost-success:hover {
  background: color-mix(in srgb, var(--color-success) 15%, transparent);
  border-color: color-mix(in srgb, var(--color-success) 20%, transparent);
}
.design-ghost-success:active {
  transform: scale(0.97);
}

.design-ghost-success-light {
  background: color-mix(in srgb, var(--color-success) 5%, transparent);
  color: var(--color-success);
  border: var(--border-1) solid transparent;
  transition: var(--transition-fast);
}
.design-ghost-success-light:hover {
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-success) 20%, transparent);
}
.design-ghost-success-light:active {
  transform: scale(0.97);
}

.design-ghost-success-heavy {
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  color: var(--color-success);
  border: var(--border-1) solid transparent;
  transition: var(--transition-fast);
}
.design-ghost-success-heavy:hover {
  background: color-mix(in srgb, var(--color-success) 20%, transparent);
  border-color: color-mix(in srgb, var(--color-success) 20%, transparent);
}
.design-ghost-success-heavy:active {
  transform: scale(0.97);
}

.design-ghost-success-minimal {
  background: color-mix(in srgb, var(--color-success) 5%, transparent);
  color: var(--color-success);
  border: var(--border-1) solid transparent;
  transition: var(--transition-fast);
}
.design-ghost-success-minimal:hover {
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-success) 20%, transparent);
}
.design-ghost-success-minimal:active {
  transform: scale(0.97);
}

.design-ghost-warning {
  background: color-mix(in srgb, var(--color-warning) 8%, transparent);
  color: var(--color-warning);
  border: var(--border-1) solid transparent;
  transition: var(--transition-fast);
}
.design-ghost-warning:hover {
  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
  border-color: color-mix(in srgb, var(--color-warning) 20%, transparent);
}
.design-ghost-warning:active {
  transform: scale(0.97);
}

.design-ghost-warning-light {
  background: color-mix(in srgb, var(--color-warning) 5%, transparent);
  color: var(--color-warning);
  border: var(--border-1) solid transparent;
  transition: var(--transition-fast);
}
.design-ghost-warning-light:hover {
  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-warning) 20%, transparent);
}
.design-ghost-warning-light:active {
  transform: scale(0.97);
}

.design-ghost-warning-heavy {
  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
  color: var(--color-warning);
  border: var(--border-1) solid transparent;
  transition: var(--transition-fast);
}
.design-ghost-warning-heavy:hover {
  background: color-mix(in srgb, var(--color-warning) 20%, transparent);
  border-color: color-mix(in srgb, var(--color-warning) 20%, transparent);
}
.design-ghost-warning-heavy:active {
  transform: scale(0.97);
}

.design-ghost-warning-minimal {
  background: color-mix(in srgb, var(--color-warning) 5%, transparent);
  color: var(--color-warning);
  border: var(--border-1) solid transparent;
  transition: var(--transition-fast);
}
.design-ghost-warning-minimal:hover {
  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-warning) 20%, transparent);
}
.design-ghost-warning-minimal:active {
  transform: scale(0.97);
}

.design-ghost-error {
  background: color-mix(in srgb, var(--color-error) 8%, transparent);
  color: var(--color-error);
  border: var(--border-1) solid transparent;
  transition: var(--transition-fast);
}
.design-ghost-error:hover {
  background: color-mix(in srgb, var(--color-error) 15%, transparent);
  border-color: color-mix(in srgb, var(--color-error) 20%, transparent);
}
.design-ghost-error:active {
  transform: scale(0.97);
}

.design-ghost-error-light {
  background: color-mix(in srgb, var(--color-error) 5%, transparent);
  color: var(--color-error);
  border: var(--border-1) solid transparent;
  transition: var(--transition-fast);
}
.design-ghost-error-light:hover {
  background: color-mix(in srgb, var(--color-error) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-error) 20%, transparent);
}
.design-ghost-error-light:active {
  transform: scale(0.97);
}

.design-ghost-error-heavy {
  background: color-mix(in srgb, var(--color-error) 12%, transparent);
  color: var(--color-error);
  border: var(--border-1) solid transparent;
  transition: var(--transition-fast);
}
.design-ghost-error-heavy:hover {
  background: color-mix(in srgb, var(--color-error) 20%, transparent);
  border-color: color-mix(in srgb, var(--color-error) 20%, transparent);
}
.design-ghost-error-heavy:active {
  transform: scale(0.97);
}

.design-ghost-error-minimal {
  background: color-mix(in srgb, var(--color-error) 5%, transparent);
  color: var(--color-error);
  border: var(--border-1) solid transparent;
  transition: var(--transition-fast);
}
.design-ghost-error-minimal:hover {
  background: color-mix(in srgb, var(--color-error) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-error) 20%, transparent);
}
.design-ghost-error-minimal:active {
  transform: scale(0.97);
}

.design-ghost-danger {
  background: color-mix(in srgb, var(--color-danger) 8%, transparent);
  color: var(--color-danger);
  border: var(--border-1) solid transparent;
  transition: var(--transition-fast);
}
.design-ghost-danger:hover {
  background: color-mix(in srgb, var(--color-danger) 15%, transparent);
  border-color: color-mix(in srgb, var(--color-danger) 20%, transparent);
}
.design-ghost-danger:active {
  transform: scale(0.97);
}

.design-ghost-danger-light {
  background: color-mix(in srgb, var(--color-danger) 5%, transparent);
  color: var(--color-danger);
  border: var(--border-1) solid transparent;
  transition: var(--transition-fast);
}
.design-ghost-danger-light:hover {
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-danger) 20%, transparent);
}
.design-ghost-danger-light:active {
  transform: scale(0.97);
}

.design-ghost-danger-heavy {
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
  color: var(--color-danger);
  border: var(--border-1) solid transparent;
  transition: var(--transition-fast);
}
.design-ghost-danger-heavy:hover {
  background: color-mix(in srgb, var(--color-danger) 20%, transparent);
  border-color: color-mix(in srgb, var(--color-danger) 20%, transparent);
}
.design-ghost-danger-heavy:active {
  transform: scale(0.97);
}

.design-ghost-danger-minimal {
  background: color-mix(in srgb, var(--color-danger) 5%, transparent);
  color: var(--color-danger);
  border: var(--border-1) solid transparent;
  transition: var(--transition-fast);
}
.design-ghost-danger-minimal:hover {
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-danger) 20%, transparent);
}
.design-ghost-danger-minimal:active {
  transform: scale(0.97);
}

.design-ghost-info {
  background: color-mix(in srgb, var(--color-info) 8%, transparent);
  color: var(--color-info);
  border: var(--border-1) solid transparent;
  transition: var(--transition-fast);
}
.design-ghost-info:hover {
  background: color-mix(in srgb, var(--color-info) 15%, transparent);
  border-color: color-mix(in srgb, var(--color-info) 20%, transparent);
}
.design-ghost-info:active {
  transform: scale(0.97);
}

.design-ghost-info-light {
  background: color-mix(in srgb, var(--color-info) 5%, transparent);
  color: var(--color-info);
  border: var(--border-1) solid transparent;
  transition: var(--transition-fast);
}
.design-ghost-info-light:hover {
  background: color-mix(in srgb, var(--color-info) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-info) 20%, transparent);
}
.design-ghost-info-light:active {
  transform: scale(0.97);
}

.design-ghost-info-heavy {
  background: color-mix(in srgb, var(--color-info) 12%, transparent);
  color: var(--color-info);
  border: var(--border-1) solid transparent;
  transition: var(--transition-fast);
}
.design-ghost-info-heavy:hover {
  background: color-mix(in srgb, var(--color-info) 20%, transparent);
  border-color: color-mix(in srgb, var(--color-info) 20%, transparent);
}
.design-ghost-info-heavy:active {
  transform: scale(0.97);
}

.design-ghost-info-minimal {
  background: color-mix(in srgb, var(--color-info) 5%, transparent);
  color: var(--color-info);
  border: var(--border-1) solid transparent;
  transition: var(--transition-fast);
}
.design-ghost-info-minimal:hover {
  background: color-mix(in srgb, var(--color-info) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-info) 20%, transparent);
}
.design-ghost-info-minimal:active {
  transform: scale(0.97);
}

.design-neon-primary {
  background: transparent;
  color: var(--color-primary);
  border: var(--border-width-regular) solid var(--color-primary);
  position: relative;
  box-shadow: 0 0 10px var(--color-primary), 0 0 20px var(--color-primary), 0 0 30px var(--color-primary), inset 0 0 10px var(--color-primary);
  text-shadow: 0 0 10px currentColor;
  transition: var(--transition-normal);
}
.design-neon-primary:hover {
  box-shadow: 0 0 25px var(--color-primary), 0 0 50px color-mix(in srgb, var(--color-primary) 60%, transparent), inset 0 0 20px color-mix(in srgb, var(--color-surface) 40%, transparent);
  transform: translateY(calc(var(--offset-2) * -1));
}

.design-neon-primary-light {
  background: transparent;
  color: var(--color-primary);
  border: var(--border-width-regular) solid var(--color-primary);
  position: relative;
  box-shadow: 0 0 5px var(--color-primary), 0 0 10px var(--color-primary), inset 0 0 5px var(--color-primary);
  text-shadow: 0 0 5px currentColor;
  transition: var(--transition-normal);
}
.design-neon-primary-light:hover {
  box-shadow: 0 0 15px var(--color-primary), inset 0 0 15px color-mix(in srgb, var(--color-surface) 30%, transparent);
  transform: translateY(calc(var(--offset-2) * -1));
}

.design-neon-primary-heavy {
  background: transparent;
  color: var(--color-primary);
  border: var(--border-width-regular) solid var(--color-primary);
  position: relative;
  box-shadow: 0 0 15px var(--color-primary), 0 0 30px var(--color-primary), 0 0 45px var(--color-primary), 0 0 60px var(--color-primary), inset 0 0 15px var(--color-primary);
  text-shadow: 0 0 15px currentColor;
  transition: var(--transition-normal);
}
.design-neon-primary-heavy:hover {
  box-shadow: 0 0 30px var(--color-primary), 0 0 60px var(--color-primary), 0 0 80px color-mix(in srgb, var(--color-primary) 60%, transparent), inset 0 0 25px color-mix(in srgb, var(--color-surface) 50%, transparent);
  transform: translateY(calc(var(--offset-2) * -1));
}

.design-neon-primary-minimal {
  background: transparent;
  color: var(--color-primary);
  border: var(--border-width-regular) solid var(--color-primary);
  position: relative;
  box-shadow: 0 0 5px var(--color-primary), 0 0 10px var(--color-primary), inset 0 0 5px var(--color-primary);
  text-shadow: 0 0 5px currentColor;
  transition: var(--transition-normal);
}
.design-neon-primary-minimal:hover {
  box-shadow: 0 0 15px var(--color-primary), inset 0 0 15px color-mix(in srgb, var(--color-surface) 30%, transparent);
  transform: translateY(calc(var(--offset-2) * -1));
}

.design-neon-secondary {
  background: transparent;
  color: var(--color-secondary);
  border: var(--border-width-regular) solid var(--color-secondary);
  position: relative;
  box-shadow: 0 0 10px var(--color-secondary), 0 0 20px var(--color-secondary), 0 0 30px var(--color-secondary), inset 0 0 10px var(--color-secondary);
  text-shadow: 0 0 10px currentColor;
  transition: var(--transition-normal);
}
.design-neon-secondary:hover {
  box-shadow: 0 0 25px var(--color-secondary), 0 0 50px color-mix(in srgb, var(--color-secondary) 60%, transparent), inset 0 0 20px color-mix(in srgb, var(--color-surface) 40%, transparent);
  transform: translateY(calc(var(--offset-2) * -1));
}

.design-neon-secondary-light {
  background: transparent;
  color: var(--color-secondary);
  border: var(--border-width-regular) solid var(--color-secondary);
  position: relative;
  box-shadow: 0 0 5px var(--color-secondary), 0 0 10px var(--color-secondary), inset 0 0 5px var(--color-secondary);
  text-shadow: 0 0 5px currentColor;
  transition: var(--transition-normal);
}
.design-neon-secondary-light:hover {
  box-shadow: 0 0 15px var(--color-secondary), inset 0 0 15px color-mix(in srgb, var(--color-surface) 30%, transparent);
  transform: translateY(calc(var(--offset-2) * -1));
}

.design-neon-secondary-heavy {
  background: transparent;
  color: var(--color-secondary);
  border: var(--border-width-regular) solid var(--color-secondary);
  position: relative;
  box-shadow: 0 0 15px var(--color-secondary), 0 0 30px var(--color-secondary), 0 0 45px var(--color-secondary), 0 0 60px var(--color-secondary), inset 0 0 15px var(--color-secondary);
  text-shadow: 0 0 15px currentColor;
  transition: var(--transition-normal);
}
.design-neon-secondary-heavy:hover {
  box-shadow: 0 0 30px var(--color-secondary), 0 0 60px var(--color-secondary), 0 0 80px color-mix(in srgb, var(--color-secondary) 60%, transparent), inset 0 0 25px color-mix(in srgb, var(--color-surface) 50%, transparent);
  transform: translateY(calc(var(--offset-2) * -1));
}

.design-neon-secondary-minimal {
  background: transparent;
  color: var(--color-secondary);
  border: var(--border-width-regular) solid var(--color-secondary);
  position: relative;
  box-shadow: 0 0 5px var(--color-secondary), 0 0 10px var(--color-secondary), inset 0 0 5px var(--color-secondary);
  text-shadow: 0 0 5px currentColor;
  transition: var(--transition-normal);
}
.design-neon-secondary-minimal:hover {
  box-shadow: 0 0 15px var(--color-secondary), inset 0 0 15px color-mix(in srgb, var(--color-surface) 30%, transparent);
  transform: translateY(calc(var(--offset-2) * -1));
}

.design-neon-success {
  background: transparent;
  color: var(--color-success);
  border: var(--border-width-regular) solid var(--color-success);
  position: relative;
  box-shadow: 0 0 10px var(--color-success), 0 0 20px var(--color-success), 0 0 30px var(--color-success), inset 0 0 10px var(--color-success);
  text-shadow: 0 0 10px currentColor;
  transition: var(--transition-normal);
}
.design-neon-success:hover {
  box-shadow: 0 0 25px var(--color-success), 0 0 50px color-mix(in srgb, var(--color-success) 60%, transparent), inset 0 0 20px color-mix(in srgb, var(--color-surface) 40%, transparent);
  transform: translateY(calc(var(--offset-2) * -1));
}

.design-neon-success-light {
  background: transparent;
  color: var(--color-success);
  border: var(--border-width-regular) solid var(--color-success);
  position: relative;
  box-shadow: 0 0 5px var(--color-success), 0 0 10px var(--color-success), inset 0 0 5px var(--color-success);
  text-shadow: 0 0 5px currentColor;
  transition: var(--transition-normal);
}
.design-neon-success-light:hover {
  box-shadow: 0 0 15px var(--color-success), inset 0 0 15px color-mix(in srgb, var(--color-surface) 30%, transparent);
  transform: translateY(calc(var(--offset-2) * -1));
}

.design-neon-success-heavy {
  background: transparent;
  color: var(--color-success);
  border: var(--border-width-regular) solid var(--color-success);
  position: relative;
  box-shadow: 0 0 15px var(--color-success), 0 0 30px var(--color-success), 0 0 45px var(--color-success), 0 0 60px var(--color-success), inset 0 0 15px var(--color-success);
  text-shadow: 0 0 15px currentColor;
  transition: var(--transition-normal);
}
.design-neon-success-heavy:hover {
  box-shadow: 0 0 30px var(--color-success), 0 0 60px var(--color-success), 0 0 80px color-mix(in srgb, var(--color-success) 60%, transparent), inset 0 0 25px color-mix(in srgb, var(--color-surface) 50%, transparent);
  transform: translateY(calc(var(--offset-2) * -1));
}

.design-neon-success-minimal {
  background: transparent;
  color: var(--color-success);
  border: var(--border-width-regular) solid var(--color-success);
  position: relative;
  box-shadow: 0 0 5px var(--color-success), 0 0 10px var(--color-success), inset 0 0 5px var(--color-success);
  text-shadow: 0 0 5px currentColor;
  transition: var(--transition-normal);
}
.design-neon-success-minimal:hover {
  box-shadow: 0 0 15px var(--color-success), inset 0 0 15px color-mix(in srgb, var(--color-surface) 30%, transparent);
  transform: translateY(calc(var(--offset-2) * -1));
}

.design-neon-warning {
  background: transparent;
  color: var(--color-warning);
  border: var(--border-width-regular) solid var(--color-warning);
  position: relative;
  box-shadow: 0 0 10px var(--color-warning), 0 0 20px var(--color-warning), 0 0 30px var(--color-warning), inset 0 0 10px var(--color-warning);
  text-shadow: 0 0 10px currentColor;
  transition: var(--transition-normal);
}
.design-neon-warning:hover {
  box-shadow: 0 0 25px var(--color-warning), 0 0 50px color-mix(in srgb, var(--color-warning) 60%, transparent), inset 0 0 20px color-mix(in srgb, var(--color-surface) 40%, transparent);
  transform: translateY(calc(var(--offset-2) * -1));
}

.design-neon-warning-light {
  background: transparent;
  color: var(--color-warning);
  border: var(--border-width-regular) solid var(--color-warning);
  position: relative;
  box-shadow: 0 0 5px var(--color-warning), 0 0 10px var(--color-warning), inset 0 0 5px var(--color-warning);
  text-shadow: 0 0 5px currentColor;
  transition: var(--transition-normal);
}
.design-neon-warning-light:hover {
  box-shadow: 0 0 15px var(--color-warning), inset 0 0 15px color-mix(in srgb, var(--color-surface) 30%, transparent);
  transform: translateY(calc(var(--offset-2) * -1));
}

.design-neon-warning-heavy {
  background: transparent;
  color: var(--color-warning);
  border: var(--border-width-regular) solid var(--color-warning);
  position: relative;
  box-shadow: 0 0 15px var(--color-warning), 0 0 30px var(--color-warning), 0 0 45px var(--color-warning), 0 0 60px var(--color-warning), inset 0 0 15px var(--color-warning);
  text-shadow: 0 0 15px currentColor;
  transition: var(--transition-normal);
}
.design-neon-warning-heavy:hover {
  box-shadow: 0 0 30px var(--color-warning), 0 0 60px var(--color-warning), 0 0 80px color-mix(in srgb, var(--color-warning) 60%, transparent), inset 0 0 25px color-mix(in srgb, var(--color-surface) 50%, transparent);
  transform: translateY(calc(var(--offset-2) * -1));
}

.design-neon-warning-minimal {
  background: transparent;
  color: var(--color-warning);
  border: var(--border-width-regular) solid var(--color-warning);
  position: relative;
  box-shadow: 0 0 5px var(--color-warning), 0 0 10px var(--color-warning), inset 0 0 5px var(--color-warning);
  text-shadow: 0 0 5px currentColor;
  transition: var(--transition-normal);
}
.design-neon-warning-minimal:hover {
  box-shadow: 0 0 15px var(--color-warning), inset 0 0 15px color-mix(in srgb, var(--color-surface) 30%, transparent);
  transform: translateY(calc(var(--offset-2) * -1));
}

.design-neon-error {
  background: transparent;
  color: var(--color-error);
  border: var(--border-width-regular) solid var(--color-error);
  position: relative;
  box-shadow: 0 0 10px var(--color-error), 0 0 20px var(--color-error), 0 0 30px var(--color-error), inset 0 0 10px var(--color-error);
  text-shadow: 0 0 10px currentColor;
  transition: var(--transition-normal);
}
.design-neon-error:hover {
  box-shadow: 0 0 25px var(--color-error), 0 0 50px color-mix(in srgb, var(--color-error) 60%, transparent), inset 0 0 20px color-mix(in srgb, var(--color-surface) 40%, transparent);
  transform: translateY(calc(var(--offset-2) * -1));
}

.design-neon-error-light {
  background: transparent;
  color: var(--color-error);
  border: var(--border-width-regular) solid var(--color-error);
  position: relative;
  box-shadow: 0 0 5px var(--color-error), 0 0 10px var(--color-error), inset 0 0 5px var(--color-error);
  text-shadow: 0 0 5px currentColor;
  transition: var(--transition-normal);
}
.design-neon-error-light:hover {
  box-shadow: 0 0 15px var(--color-error), inset 0 0 15px color-mix(in srgb, var(--color-surface) 30%, transparent);
  transform: translateY(calc(var(--offset-2) * -1));
}

.design-neon-error-heavy {
  background: transparent;
  color: var(--color-error);
  border: var(--border-width-regular) solid var(--color-error);
  position: relative;
  box-shadow: 0 0 15px var(--color-error), 0 0 30px var(--color-error), 0 0 45px var(--color-error), 0 0 60px var(--color-error), inset 0 0 15px var(--color-error);
  text-shadow: 0 0 15px currentColor;
  transition: var(--transition-normal);
}
.design-neon-error-heavy:hover {
  box-shadow: 0 0 30px var(--color-error), 0 0 60px var(--color-error), 0 0 80px color-mix(in srgb, var(--color-error) 60%, transparent), inset 0 0 25px color-mix(in srgb, var(--color-surface) 50%, transparent);
  transform: translateY(calc(var(--offset-2) * -1));
}

.design-neon-error-minimal {
  background: transparent;
  color: var(--color-error);
  border: var(--border-width-regular) solid var(--color-error);
  position: relative;
  box-shadow: 0 0 5px var(--color-error), 0 0 10px var(--color-error), inset 0 0 5px var(--color-error);
  text-shadow: 0 0 5px currentColor;
  transition: var(--transition-normal);
}
.design-neon-error-minimal:hover {
  box-shadow: 0 0 15px var(--color-error), inset 0 0 15px color-mix(in srgb, var(--color-surface) 30%, transparent);
  transform: translateY(calc(var(--offset-2) * -1));
}

.design-neon-danger {
  background: transparent;
  color: var(--color-danger);
  border: var(--border-width-regular) solid var(--color-danger);
  position: relative;
  box-shadow: 0 0 10px var(--color-danger), 0 0 20px var(--color-danger), 0 0 30px var(--color-danger), inset 0 0 10px var(--color-danger);
  text-shadow: 0 0 10px currentColor;
  transition: var(--transition-normal);
}
.design-neon-danger:hover {
  box-shadow: 0 0 25px var(--color-danger), 0 0 50px color-mix(in srgb, var(--color-danger) 60%, transparent), inset 0 0 20px color-mix(in srgb, var(--color-surface) 40%, transparent);
  transform: translateY(calc(var(--offset-2) * -1));
}

.design-neon-danger-light {
  background: transparent;
  color: var(--color-danger);
  border: var(--border-width-regular) solid var(--color-danger);
  position: relative;
  box-shadow: 0 0 5px var(--color-danger), 0 0 10px var(--color-danger), inset 0 0 5px var(--color-danger);
  text-shadow: 0 0 5px currentColor;
  transition: var(--transition-normal);
}
.design-neon-danger-light:hover {
  box-shadow: 0 0 15px var(--color-danger), inset 0 0 15px color-mix(in srgb, var(--color-surface) 30%, transparent);
  transform: translateY(calc(var(--offset-2) * -1));
}

.design-neon-danger-heavy {
  background: transparent;
  color: var(--color-danger);
  border: var(--border-width-regular) solid var(--color-danger);
  position: relative;
  box-shadow: 0 0 15px var(--color-danger), 0 0 30px var(--color-danger), 0 0 45px var(--color-danger), 0 0 60px var(--color-danger), inset 0 0 15px var(--color-danger);
  text-shadow: 0 0 15px currentColor;
  transition: var(--transition-normal);
}
.design-neon-danger-heavy:hover {
  box-shadow: 0 0 30px var(--color-danger), 0 0 60px var(--color-danger), 0 0 80px color-mix(in srgb, var(--color-danger) 60%, transparent), inset 0 0 25px color-mix(in srgb, var(--color-surface) 50%, transparent);
  transform: translateY(calc(var(--offset-2) * -1));
}

.design-neon-danger-minimal {
  background: transparent;
  color: var(--color-danger);
  border: var(--border-width-regular) solid var(--color-danger);
  position: relative;
  box-shadow: 0 0 5px var(--color-danger), 0 0 10px var(--color-danger), inset 0 0 5px var(--color-danger);
  text-shadow: 0 0 5px currentColor;
  transition: var(--transition-normal);
}
.design-neon-danger-minimal:hover {
  box-shadow: 0 0 15px var(--color-danger), inset 0 0 15px color-mix(in srgb, var(--color-surface) 30%, transparent);
  transform: translateY(calc(var(--offset-2) * -1));
}

.design-neon-info {
  background: transparent;
  color: var(--color-info);
  border: var(--border-width-regular) solid var(--color-info);
  position: relative;
  box-shadow: 0 0 10px var(--color-info), 0 0 20px var(--color-info), 0 0 30px var(--color-info), inset 0 0 10px var(--color-info);
  text-shadow: 0 0 10px currentColor;
  transition: var(--transition-normal);
}
.design-neon-info:hover {
  box-shadow: 0 0 25px var(--color-info), 0 0 50px color-mix(in srgb, var(--color-info) 60%, transparent), inset 0 0 20px color-mix(in srgb, var(--color-surface) 40%, transparent);
  transform: translateY(calc(var(--offset-2) * -1));
}

.design-neon-info-light {
  background: transparent;
  color: var(--color-info);
  border: var(--border-width-regular) solid var(--color-info);
  position: relative;
  box-shadow: 0 0 5px var(--color-info), 0 0 10px var(--color-info), inset 0 0 5px var(--color-info);
  text-shadow: 0 0 5px currentColor;
  transition: var(--transition-normal);
}
.design-neon-info-light:hover {
  box-shadow: 0 0 15px var(--color-info), inset 0 0 15px color-mix(in srgb, var(--color-surface) 30%, transparent);
  transform: translateY(calc(var(--offset-2) * -1));
}

.design-neon-info-heavy {
  background: transparent;
  color: var(--color-info);
  border: var(--border-width-regular) solid var(--color-info);
  position: relative;
  box-shadow: 0 0 15px var(--color-info), 0 0 30px var(--color-info), 0 0 45px var(--color-info), 0 0 60px var(--color-info), inset 0 0 15px var(--color-info);
  text-shadow: 0 0 15px currentColor;
  transition: var(--transition-normal);
}
.design-neon-info-heavy:hover {
  box-shadow: 0 0 30px var(--color-info), 0 0 60px var(--color-info), 0 0 80px color-mix(in srgb, var(--color-info) 60%, transparent), inset 0 0 25px color-mix(in srgb, var(--color-surface) 50%, transparent);
  transform: translateY(calc(var(--offset-2) * -1));
}

.design-neon-info-minimal {
  background: transparent;
  color: var(--color-info);
  border: var(--border-width-regular) solid var(--color-info);
  position: relative;
  box-shadow: 0 0 5px var(--color-info), 0 0 10px var(--color-info), inset 0 0 5px var(--color-info);
  text-shadow: 0 0 5px currentColor;
  transition: var(--transition-normal);
}
.design-neon-info-minimal:hover {
  box-shadow: 0 0 15px var(--color-info), inset 0 0 15px color-mix(in srgb, var(--color-surface) 30%, transparent);
  transform: translateY(calc(var(--offset-2) * -1));
}

.design-shimmer-primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}
.design-shimmer-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 1.5s infinite;
}

.design-shimmer-primary-light {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}
.design-shimmer-primary-light::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

.design-shimmer-primary-heavy {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}
.design-shimmer-primary-heavy::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 1s infinite;
}

.design-shimmer-primary-minimal {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}
.design-shimmer-primary-minimal::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

.design-shimmer-secondary {
  background: var(--color-secondary);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}
.design-shimmer-secondary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 1.5s infinite;
}

.design-shimmer-secondary-light {
  background: var(--color-secondary);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}
.design-shimmer-secondary-light::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

.design-shimmer-secondary-heavy {
  background: var(--color-secondary);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}
.design-shimmer-secondary-heavy::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 1s infinite;
}

.design-shimmer-secondary-minimal {
  background: var(--color-secondary);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}
.design-shimmer-secondary-minimal::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

.design-shimmer-success {
  background: var(--color-success);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}
.design-shimmer-success::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 1.5s infinite;
}

.design-shimmer-success-light {
  background: var(--color-success);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}
.design-shimmer-success-light::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

.design-shimmer-success-heavy {
  background: var(--color-success);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}
.design-shimmer-success-heavy::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 1s infinite;
}

.design-shimmer-success-minimal {
  background: var(--color-success);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}
.design-shimmer-success-minimal::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

.design-shimmer-warning {
  background: var(--color-warning);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}
.design-shimmer-warning::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 1.5s infinite;
}

.design-shimmer-warning-light {
  background: var(--color-warning);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}
.design-shimmer-warning-light::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

.design-shimmer-warning-heavy {
  background: var(--color-warning);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}
.design-shimmer-warning-heavy::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 1s infinite;
}

.design-shimmer-warning-minimal {
  background: var(--color-warning);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}
.design-shimmer-warning-minimal::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

.design-shimmer-error {
  background: var(--color-error);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}
.design-shimmer-error::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 1.5s infinite;
}

.design-shimmer-error-light {
  background: var(--color-error);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}
.design-shimmer-error-light::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

.design-shimmer-error-heavy {
  background: var(--color-error);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}
.design-shimmer-error-heavy::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 1s infinite;
}

.design-shimmer-error-minimal {
  background: var(--color-error);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}
.design-shimmer-error-minimal::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

.design-shimmer-danger {
  background: var(--color-danger);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}
.design-shimmer-danger::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 1.5s infinite;
}

.design-shimmer-danger-light {
  background: var(--color-danger);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}
.design-shimmer-danger-light::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

.design-shimmer-danger-heavy {
  background: var(--color-danger);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}
.design-shimmer-danger-heavy::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 1s infinite;
}

.design-shimmer-danger-minimal {
  background: var(--color-danger);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}
.design-shimmer-danger-minimal::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

.design-shimmer-info {
  background: var(--color-info);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}
.design-shimmer-info::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 1.5s infinite;
}

.design-shimmer-info-light {
  background: var(--color-info);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}
.design-shimmer-info-light::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

.design-shimmer-info-heavy {
  background: var(--color-info);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}
.design-shimmer-info-heavy::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 1s infinite;
}

.design-shimmer-info-minimal {
  background: var(--color-info);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}
.design-shimmer-info-minimal::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

.design-enterprise-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 95%, white), var(--color-primary), color-mix(in srgb, var(--color-primary) 90%, black));
  color: var(--color-text-inverse);
  border: 1px solid color-mix(in srgb, var(--color-primary) 80%, black);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: var(--transition-fast);
}
.design-enterprise-primary:hover {
  filter: brightness(1.05);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.design-enterprise-primary:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.design-enterprise-primary-light {
  background: linear-gradient(180deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 95%, black));
  color: var(--color-text-inverse);
  border: 1px solid color-mix(in srgb, var(--color-primary) 80%, black);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: var(--transition-fast);
}
.design-enterprise-primary-light:hover {
  filter: brightness(1.05);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.design-enterprise-primary-light:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.design-enterprise-primary-heavy {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 90%, white), var(--color-primary), color-mix(in srgb, var(--color-primary) 85%, black));
  color: var(--color-text-inverse);
  border: 1px solid color-mix(in srgb, var(--color-primary) 80%, black);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: var(--transition-fast);
}
.design-enterprise-primary-heavy:hover {
  filter: brightness(1.05);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.design-enterprise-primary-heavy:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.design-enterprise-primary-minimal {
  background: linear-gradient(180deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 95%, black));
  color: var(--color-text-inverse);
  border: 1px solid color-mix(in srgb, var(--color-primary) 80%, black);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: var(--transition-fast);
}
.design-enterprise-primary-minimal:hover {
  filter: brightness(1.05);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.design-enterprise-primary-minimal:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.design-enterprise-secondary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-secondary) 95%, white), var(--color-secondary), color-mix(in srgb, var(--color-secondary) 90%, black));
  color: var(--color-text-inverse);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 80%, black);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: var(--transition-fast);
}
.design-enterprise-secondary:hover {
  filter: brightness(1.05);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.design-enterprise-secondary:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.design-enterprise-secondary-light {
  background: linear-gradient(180deg, var(--color-secondary), color-mix(in srgb, var(--color-secondary) 95%, black));
  color: var(--color-text-inverse);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 80%, black);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: var(--transition-fast);
}
.design-enterprise-secondary-light:hover {
  filter: brightness(1.05);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.design-enterprise-secondary-light:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.design-enterprise-secondary-heavy {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-secondary) 90%, white), var(--color-secondary), color-mix(in srgb, var(--color-secondary) 85%, black));
  color: var(--color-text-inverse);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 80%, black);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: var(--transition-fast);
}
.design-enterprise-secondary-heavy:hover {
  filter: brightness(1.05);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.design-enterprise-secondary-heavy:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.design-enterprise-secondary-minimal {
  background: linear-gradient(180deg, var(--color-secondary), color-mix(in srgb, var(--color-secondary) 95%, black));
  color: var(--color-text-inverse);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 80%, black);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: var(--transition-fast);
}
.design-enterprise-secondary-minimal:hover {
  filter: brightness(1.05);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.design-enterprise-secondary-minimal:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.design-enterprise-success {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-success) 95%, white), var(--color-success), color-mix(in srgb, var(--color-success) 90%, black));
  color: var(--color-text-inverse);
  border: 1px solid color-mix(in srgb, var(--color-success) 80%, black);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: var(--transition-fast);
}
.design-enterprise-success:hover {
  filter: brightness(1.05);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.design-enterprise-success:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.design-enterprise-success-light {
  background: linear-gradient(180deg, var(--color-success), color-mix(in srgb, var(--color-success) 95%, black));
  color: var(--color-text-inverse);
  border: 1px solid color-mix(in srgb, var(--color-success) 80%, black);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: var(--transition-fast);
}
.design-enterprise-success-light:hover {
  filter: brightness(1.05);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.design-enterprise-success-light:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.design-enterprise-success-heavy {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-success) 90%, white), var(--color-success), color-mix(in srgb, var(--color-success) 85%, black));
  color: var(--color-text-inverse);
  border: 1px solid color-mix(in srgb, var(--color-success) 80%, black);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: var(--transition-fast);
}
.design-enterprise-success-heavy:hover {
  filter: brightness(1.05);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.design-enterprise-success-heavy:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.design-enterprise-success-minimal {
  background: linear-gradient(180deg, var(--color-success), color-mix(in srgb, var(--color-success) 95%, black));
  color: var(--color-text-inverse);
  border: 1px solid color-mix(in srgb, var(--color-success) 80%, black);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: var(--transition-fast);
}
.design-enterprise-success-minimal:hover {
  filter: brightness(1.05);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.design-enterprise-success-minimal:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.design-enterprise-warning {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-warning) 95%, white), var(--color-warning), color-mix(in srgb, var(--color-warning) 90%, black));
  color: var(--color-text-inverse);
  border: 1px solid color-mix(in srgb, var(--color-warning) 80%, black);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: var(--transition-fast);
}
.design-enterprise-warning:hover {
  filter: brightness(1.05);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.design-enterprise-warning:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.design-enterprise-warning-light {
  background: linear-gradient(180deg, var(--color-warning), color-mix(in srgb, var(--color-warning) 95%, black));
  color: var(--color-text-inverse);
  border: 1px solid color-mix(in srgb, var(--color-warning) 80%, black);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: var(--transition-fast);
}
.design-enterprise-warning-light:hover {
  filter: brightness(1.05);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.design-enterprise-warning-light:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.design-enterprise-warning-heavy {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-warning) 90%, white), var(--color-warning), color-mix(in srgb, var(--color-warning) 85%, black));
  color: var(--color-text-inverse);
  border: 1px solid color-mix(in srgb, var(--color-warning) 80%, black);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: var(--transition-fast);
}
.design-enterprise-warning-heavy:hover {
  filter: brightness(1.05);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.design-enterprise-warning-heavy:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.design-enterprise-warning-minimal {
  background: linear-gradient(180deg, var(--color-warning), color-mix(in srgb, var(--color-warning) 95%, black));
  color: var(--color-text-inverse);
  border: 1px solid color-mix(in srgb, var(--color-warning) 80%, black);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: var(--transition-fast);
}
.design-enterprise-warning-minimal:hover {
  filter: brightness(1.05);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.design-enterprise-warning-minimal:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.design-enterprise-error {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-error) 95%, white), var(--color-error), color-mix(in srgb, var(--color-error) 90%, black));
  color: var(--color-text-inverse);
  border: 1px solid color-mix(in srgb, var(--color-error) 80%, black);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: var(--transition-fast);
}
.design-enterprise-error:hover {
  filter: brightness(1.05);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.design-enterprise-error:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.design-enterprise-error-light {
  background: linear-gradient(180deg, var(--color-error), color-mix(in srgb, var(--color-error) 95%, black));
  color: var(--color-text-inverse);
  border: 1px solid color-mix(in srgb, var(--color-error) 80%, black);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: var(--transition-fast);
}
.design-enterprise-error-light:hover {
  filter: brightness(1.05);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.design-enterprise-error-light:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.design-enterprise-error-heavy {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-error) 90%, white), var(--color-error), color-mix(in srgb, var(--color-error) 85%, black));
  color: var(--color-text-inverse);
  border: 1px solid color-mix(in srgb, var(--color-error) 80%, black);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: var(--transition-fast);
}
.design-enterprise-error-heavy:hover {
  filter: brightness(1.05);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.design-enterprise-error-heavy:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.design-enterprise-error-minimal {
  background: linear-gradient(180deg, var(--color-error), color-mix(in srgb, var(--color-error) 95%, black));
  color: var(--color-text-inverse);
  border: 1px solid color-mix(in srgb, var(--color-error) 80%, black);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: var(--transition-fast);
}
.design-enterprise-error-minimal:hover {
  filter: brightness(1.05);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.design-enterprise-error-minimal:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.design-enterprise-danger {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-danger) 95%, white), var(--color-danger), color-mix(in srgb, var(--color-danger) 90%, black));
  color: var(--color-text-inverse);
  border: 1px solid color-mix(in srgb, var(--color-danger) 80%, black);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: var(--transition-fast);
}
.design-enterprise-danger:hover {
  filter: brightness(1.05);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.design-enterprise-danger:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.design-enterprise-danger-light {
  background: linear-gradient(180deg, var(--color-danger), color-mix(in srgb, var(--color-danger) 95%, black));
  color: var(--color-text-inverse);
  border: 1px solid color-mix(in srgb, var(--color-danger) 80%, black);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: var(--transition-fast);
}
.design-enterprise-danger-light:hover {
  filter: brightness(1.05);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.design-enterprise-danger-light:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.design-enterprise-danger-heavy {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-danger) 90%, white), var(--color-danger), color-mix(in srgb, var(--color-danger) 85%, black));
  color: var(--color-text-inverse);
  border: 1px solid color-mix(in srgb, var(--color-danger) 80%, black);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: var(--transition-fast);
}
.design-enterprise-danger-heavy:hover {
  filter: brightness(1.05);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.design-enterprise-danger-heavy:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.design-enterprise-danger-minimal {
  background: linear-gradient(180deg, var(--color-danger), color-mix(in srgb, var(--color-danger) 95%, black));
  color: var(--color-text-inverse);
  border: 1px solid color-mix(in srgb, var(--color-danger) 80%, black);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: var(--transition-fast);
}
.design-enterprise-danger-minimal:hover {
  filter: brightness(1.05);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.design-enterprise-danger-minimal:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.design-enterprise-info {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-info) 95%, white), var(--color-info), color-mix(in srgb, var(--color-info) 90%, black));
  color: var(--color-text-inverse);
  border: 1px solid color-mix(in srgb, var(--color-info) 80%, black);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: var(--transition-fast);
}
.design-enterprise-info:hover {
  filter: brightness(1.05);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.design-enterprise-info:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.design-enterprise-info-light {
  background: linear-gradient(180deg, var(--color-info), color-mix(in srgb, var(--color-info) 95%, black));
  color: var(--color-text-inverse);
  border: 1px solid color-mix(in srgb, var(--color-info) 80%, black);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: var(--transition-fast);
}
.design-enterprise-info-light:hover {
  filter: brightness(1.05);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.design-enterprise-info-light:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.design-enterprise-info-heavy {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-info) 90%, white), var(--color-info), color-mix(in srgb, var(--color-info) 85%, black));
  color: var(--color-text-inverse);
  border: 1px solid color-mix(in srgb, var(--color-info) 80%, black);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: var(--transition-fast);
}
.design-enterprise-info-heavy:hover {
  filter: brightness(1.05);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.design-enterprise-info-heavy:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.design-enterprise-info-minimal {
  background: linear-gradient(180deg, var(--color-info), color-mix(in srgb, var(--color-info) 95%, black));
  color: var(--color-text-inverse);
  border: 1px solid color-mix(in srgb, var(--color-info) 80%, black);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: var(--transition-fast);
}
.design-enterprise-info-minimal:hover {
  filter: brightness(1.05);
  transform: translateY(var(--transform-offset-hover-y));
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.design-enterprise-info-minimal:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.design-elevated-primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  position: relative;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateY(calc(var(--offset-2) * -1));
  transition: var(--transition-normal);
}
.design-elevated-primary:hover {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  transform: translateY(-4px);
}
.design-elevated-primary:active {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateY(var(--transform-offset-hover-y));
}

.design-elevated-primary-light {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateY(0);
  transition: var(--transition-normal);
}
.design-elevated-primary-light:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-elevated-primary-light:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateY(0);
}

.design-elevated-primary-heavy {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  position: relative;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  transform: translateY(-4px);
  transition: var(--transition-normal);
}
.design-elevated-primary-heavy:hover {
  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
  transform: translateY(-6px);
}
.design-elevated-primary-heavy:active {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateY(calc(var(--offset-2) * -1));
}

.design-elevated-primary-minimal {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateY(0);
  transition: var(--transition-normal);
}
.design-elevated-primary-minimal:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-elevated-primary-minimal:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateY(0);
}

.design-elevated-secondary {
  background: var(--color-secondary);
  color: var(--color-text-inverse);
  border: none;
  position: relative;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateY(calc(var(--offset-2) * -1));
  transition: var(--transition-normal);
}
.design-elevated-secondary:hover {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  transform: translateY(-4px);
}
.design-elevated-secondary:active {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateY(var(--transform-offset-hover-y));
}

.design-elevated-secondary-light {
  background: var(--color-secondary);
  color: var(--color-text-inverse);
  border: none;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateY(0);
  transition: var(--transition-normal);
}
.design-elevated-secondary-light:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-elevated-secondary-light:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateY(0);
}

.design-elevated-secondary-heavy {
  background: var(--color-secondary);
  color: var(--color-text-inverse);
  border: none;
  position: relative;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  transform: translateY(-4px);
  transition: var(--transition-normal);
}
.design-elevated-secondary-heavy:hover {
  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
  transform: translateY(-6px);
}
.design-elevated-secondary-heavy:active {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateY(calc(var(--offset-2) * -1));
}

.design-elevated-secondary-minimal {
  background: var(--color-secondary);
  color: var(--color-text-inverse);
  border: none;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateY(0);
  transition: var(--transition-normal);
}
.design-elevated-secondary-minimal:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-elevated-secondary-minimal:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateY(0);
}

.design-elevated-success {
  background: var(--color-success);
  color: var(--color-text-inverse);
  border: none;
  position: relative;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateY(calc(var(--offset-2) * -1));
  transition: var(--transition-normal);
}
.design-elevated-success:hover {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  transform: translateY(-4px);
}
.design-elevated-success:active {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateY(var(--transform-offset-hover-y));
}

.design-elevated-success-light {
  background: var(--color-success);
  color: var(--color-text-inverse);
  border: none;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateY(0);
  transition: var(--transition-normal);
}
.design-elevated-success-light:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-elevated-success-light:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateY(0);
}

.design-elevated-success-heavy {
  background: var(--color-success);
  color: var(--color-text-inverse);
  border: none;
  position: relative;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  transform: translateY(-4px);
  transition: var(--transition-normal);
}
.design-elevated-success-heavy:hover {
  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
  transform: translateY(-6px);
}
.design-elevated-success-heavy:active {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateY(calc(var(--offset-2) * -1));
}

.design-elevated-success-minimal {
  background: var(--color-success);
  color: var(--color-text-inverse);
  border: none;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateY(0);
  transition: var(--transition-normal);
}
.design-elevated-success-minimal:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-elevated-success-minimal:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateY(0);
}

.design-elevated-warning {
  background: var(--color-warning);
  color: var(--color-text-inverse);
  border: none;
  position: relative;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateY(calc(var(--offset-2) * -1));
  transition: var(--transition-normal);
}
.design-elevated-warning:hover {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  transform: translateY(-4px);
}
.design-elevated-warning:active {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateY(var(--transform-offset-hover-y));
}

.design-elevated-warning-light {
  background: var(--color-warning);
  color: var(--color-text-inverse);
  border: none;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateY(0);
  transition: var(--transition-normal);
}
.design-elevated-warning-light:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-elevated-warning-light:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateY(0);
}

.design-elevated-warning-heavy {
  background: var(--color-warning);
  color: var(--color-text-inverse);
  border: none;
  position: relative;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  transform: translateY(-4px);
  transition: var(--transition-normal);
}
.design-elevated-warning-heavy:hover {
  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
  transform: translateY(-6px);
}
.design-elevated-warning-heavy:active {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateY(calc(var(--offset-2) * -1));
}

.design-elevated-warning-minimal {
  background: var(--color-warning);
  color: var(--color-text-inverse);
  border: none;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateY(0);
  transition: var(--transition-normal);
}
.design-elevated-warning-minimal:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-elevated-warning-minimal:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateY(0);
}

.design-elevated-error {
  background: var(--color-error);
  color: var(--color-text-inverse);
  border: none;
  position: relative;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateY(calc(var(--offset-2) * -1));
  transition: var(--transition-normal);
}
.design-elevated-error:hover {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  transform: translateY(-4px);
}
.design-elevated-error:active {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateY(var(--transform-offset-hover-y));
}

.design-elevated-error-light {
  background: var(--color-error);
  color: var(--color-text-inverse);
  border: none;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateY(0);
  transition: var(--transition-normal);
}
.design-elevated-error-light:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-elevated-error-light:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateY(0);
}

.design-elevated-error-heavy {
  background: var(--color-error);
  color: var(--color-text-inverse);
  border: none;
  position: relative;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  transform: translateY(-4px);
  transition: var(--transition-normal);
}
.design-elevated-error-heavy:hover {
  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
  transform: translateY(-6px);
}
.design-elevated-error-heavy:active {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateY(calc(var(--offset-2) * -1));
}

.design-elevated-error-minimal {
  background: var(--color-error);
  color: var(--color-text-inverse);
  border: none;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateY(0);
  transition: var(--transition-normal);
}
.design-elevated-error-minimal:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-elevated-error-minimal:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateY(0);
}

.design-elevated-danger {
  background: var(--color-danger);
  color: var(--color-text-inverse);
  border: none;
  position: relative;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateY(calc(var(--offset-2) * -1));
  transition: var(--transition-normal);
}
.design-elevated-danger:hover {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  transform: translateY(-4px);
}
.design-elevated-danger:active {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateY(var(--transform-offset-hover-y));
}

.design-elevated-danger-light {
  background: var(--color-danger);
  color: var(--color-text-inverse);
  border: none;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateY(0);
  transition: var(--transition-normal);
}
.design-elevated-danger-light:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-elevated-danger-light:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateY(0);
}

.design-elevated-danger-heavy {
  background: var(--color-danger);
  color: var(--color-text-inverse);
  border: none;
  position: relative;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  transform: translateY(-4px);
  transition: var(--transition-normal);
}
.design-elevated-danger-heavy:hover {
  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
  transform: translateY(-6px);
}
.design-elevated-danger-heavy:active {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateY(calc(var(--offset-2) * -1));
}

.design-elevated-danger-minimal {
  background: var(--color-danger);
  color: var(--color-text-inverse);
  border: none;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateY(0);
  transition: var(--transition-normal);
}
.design-elevated-danger-minimal:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-elevated-danger-minimal:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateY(0);
}

.design-elevated-info {
  background: var(--color-info);
  color: var(--color-text-inverse);
  border: none;
  position: relative;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateY(calc(var(--offset-2) * -1));
  transition: var(--transition-normal);
}
.design-elevated-info:hover {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  transform: translateY(-4px);
}
.design-elevated-info:active {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateY(var(--transform-offset-hover-y));
}

.design-elevated-info-light {
  background: var(--color-info);
  color: var(--color-text-inverse);
  border: none;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateY(0);
  transition: var(--transition-normal);
}
.design-elevated-info-light:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-elevated-info-light:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateY(0);
}

.design-elevated-info-heavy {
  background: var(--color-info);
  color: var(--color-text-inverse);
  border: none;
  position: relative;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  transform: translateY(-4px);
  transition: var(--transition-normal);
}
.design-elevated-info-heavy:hover {
  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
  transform: translateY(-6px);
}
.design-elevated-info-heavy:active {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateY(calc(var(--offset-2) * -1));
}

.design-elevated-info-minimal {
  background: var(--color-info);
  color: var(--color-text-inverse);
  border: none;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateY(0);
  transition: var(--transition-normal);
}
.design-elevated-info-minimal:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateY(calc(var(--offset-2) * -1));
}
.design-elevated-info-minimal:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateY(0);
}

.design-flat-primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  box-shadow: none;
  transition: var(--transition-fast);
}
.design-flat-primary:hover {
  filter: brightness(0.9);
}
.design-flat-primary:active {
  transform: scale(0.97);
}

.design-flat-primary-light {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  box-shadow: none;
  transition: var(--transition-fast);
}
.design-flat-primary-light:hover {
  filter: brightness(0.95);
}
.design-flat-primary-light:active {
  transform: scale(0.97);
}

.design-flat-primary-heavy {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  box-shadow: none;
  transition: var(--transition-fast);
}
.design-flat-primary-heavy:hover {
  filter: brightness(0.85);
}
.design-flat-primary-heavy:active {
  transform: scale(0.97);
}

.design-flat-primary-minimal {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  box-shadow: none;
  transition: var(--transition-fast);
}
.design-flat-primary-minimal:hover {
  filter: brightness(0.95);
}
.design-flat-primary-minimal:active {
  transform: scale(0.97);
}

.design-flat-secondary {
  background: var(--color-secondary);
  color: var(--color-text-inverse);
  border: none;
  box-shadow: none;
  transition: var(--transition-fast);
}
.design-flat-secondary:hover {
  filter: brightness(0.9);
}
.design-flat-secondary:active {
  transform: scale(0.97);
}

.design-flat-secondary-light {
  background: var(--color-secondary);
  color: var(--color-text-inverse);
  border: none;
  box-shadow: none;
  transition: var(--transition-fast);
}
.design-flat-secondary-light:hover {
  filter: brightness(0.95);
}
.design-flat-secondary-light:active {
  transform: scale(0.97);
}

.design-flat-secondary-heavy {
  background: var(--color-secondary);
  color: var(--color-text-inverse);
  border: none;
  box-shadow: none;
  transition: var(--transition-fast);
}
.design-flat-secondary-heavy:hover {
  filter: brightness(0.85);
}
.design-flat-secondary-heavy:active {
  transform: scale(0.97);
}

.design-flat-secondary-minimal {
  background: var(--color-secondary);
  color: var(--color-text-inverse);
  border: none;
  box-shadow: none;
  transition: var(--transition-fast);
}
.design-flat-secondary-minimal:hover {
  filter: brightness(0.95);
}
.design-flat-secondary-minimal:active {
  transform: scale(0.97);
}

.design-flat-success {
  background: var(--color-success);
  color: var(--color-text-inverse);
  border: none;
  box-shadow: none;
  transition: var(--transition-fast);
}
.design-flat-success:hover {
  filter: brightness(0.9);
}
.design-flat-success:active {
  transform: scale(0.97);
}

.design-flat-success-light {
  background: var(--color-success);
  color: var(--color-text-inverse);
  border: none;
  box-shadow: none;
  transition: var(--transition-fast);
}
.design-flat-success-light:hover {
  filter: brightness(0.95);
}
.design-flat-success-light:active {
  transform: scale(0.97);
}

.design-flat-success-heavy {
  background: var(--color-success);
  color: var(--color-text-inverse);
  border: none;
  box-shadow: none;
  transition: var(--transition-fast);
}
.design-flat-success-heavy:hover {
  filter: brightness(0.85);
}
.design-flat-success-heavy:active {
  transform: scale(0.97);
}

.design-flat-success-minimal {
  background: var(--color-success);
  color: var(--color-text-inverse);
  border: none;
  box-shadow: none;
  transition: var(--transition-fast);
}
.design-flat-success-minimal:hover {
  filter: brightness(0.95);
}
.design-flat-success-minimal:active {
  transform: scale(0.97);
}

.design-flat-warning {
  background: var(--color-warning);
  color: var(--color-text-inverse);
  border: none;
  box-shadow: none;
  transition: var(--transition-fast);
}
.design-flat-warning:hover {
  filter: brightness(0.9);
}
.design-flat-warning:active {
  transform: scale(0.97);
}

.design-flat-warning-light {
  background: var(--color-warning);
  color: var(--color-text-inverse);
  border: none;
  box-shadow: none;
  transition: var(--transition-fast);
}
.design-flat-warning-light:hover {
  filter: brightness(0.95);
}
.design-flat-warning-light:active {
  transform: scale(0.97);
}

.design-flat-warning-heavy {
  background: var(--color-warning);
  color: var(--color-text-inverse);
  border: none;
  box-shadow: none;
  transition: var(--transition-fast);
}
.design-flat-warning-heavy:hover {
  filter: brightness(0.85);
}
.design-flat-warning-heavy:active {
  transform: scale(0.97);
}

.design-flat-warning-minimal {
  background: var(--color-warning);
  color: var(--color-text-inverse);
  border: none;
  box-shadow: none;
  transition: var(--transition-fast);
}
.design-flat-warning-minimal:hover {
  filter: brightness(0.95);
}
.design-flat-warning-minimal:active {
  transform: scale(0.97);
}

.design-flat-error {
  background: var(--color-error);
  color: var(--color-text-inverse);
  border: none;
  box-shadow: none;
  transition: var(--transition-fast);
}
.design-flat-error:hover {
  filter: brightness(0.9);
}
.design-flat-error:active {
  transform: scale(0.97);
}

.design-flat-error-light {
  background: var(--color-error);
  color: var(--color-text-inverse);
  border: none;
  box-shadow: none;
  transition: var(--transition-fast);
}
.design-flat-error-light:hover {
  filter: brightness(0.95);
}
.design-flat-error-light:active {
  transform: scale(0.97);
}

.design-flat-error-heavy {
  background: var(--color-error);
  color: var(--color-text-inverse);
  border: none;
  box-shadow: none;
  transition: var(--transition-fast);
}
.design-flat-error-heavy:hover {
  filter: brightness(0.85);
}
.design-flat-error-heavy:active {
  transform: scale(0.97);
}

.design-flat-error-minimal {
  background: var(--color-error);
  color: var(--color-text-inverse);
  border: none;
  box-shadow: none;
  transition: var(--transition-fast);
}
.design-flat-error-minimal:hover {
  filter: brightness(0.95);
}
.design-flat-error-minimal:active {
  transform: scale(0.97);
}

.design-flat-danger {
  background: var(--color-danger);
  color: var(--color-text-inverse);
  border: none;
  box-shadow: none;
  transition: var(--transition-fast);
}
.design-flat-danger:hover {
  filter: brightness(0.9);
}
.design-flat-danger:active {
  transform: scale(0.97);
}

.design-flat-danger-light {
  background: var(--color-danger);
  color: var(--color-text-inverse);
  border: none;
  box-shadow: none;
  transition: var(--transition-fast);
}
.design-flat-danger-light:hover {
  filter: brightness(0.95);
}
.design-flat-danger-light:active {
  transform: scale(0.97);
}

.design-flat-danger-heavy {
  background: var(--color-danger);
  color: var(--color-text-inverse);
  border: none;
  box-shadow: none;
  transition: var(--transition-fast);
}
.design-flat-danger-heavy:hover {
  filter: brightness(0.85);
}
.design-flat-danger-heavy:active {
  transform: scale(0.97);
}

.design-flat-danger-minimal {
  background: var(--color-danger);
  color: var(--color-text-inverse);
  border: none;
  box-shadow: none;
  transition: var(--transition-fast);
}
.design-flat-danger-minimal:hover {
  filter: brightness(0.95);
}
.design-flat-danger-minimal:active {
  transform: scale(0.97);
}

.design-flat-info {
  background: var(--color-info);
  color: var(--color-text-inverse);
  border: none;
  box-shadow: none;
  transition: var(--transition-fast);
}
.design-flat-info:hover {
  filter: brightness(0.9);
}
.design-flat-info:active {
  transform: scale(0.97);
}

.design-flat-info-light {
  background: var(--color-info);
  color: var(--color-text-inverse);
  border: none;
  box-shadow: none;
  transition: var(--transition-fast);
}
.design-flat-info-light:hover {
  filter: brightness(0.95);
}
.design-flat-info-light:active {
  transform: scale(0.97);
}

.design-flat-info-heavy {
  background: var(--color-info);
  color: var(--color-text-inverse);
  border: none;
  box-shadow: none;
  transition: var(--transition-fast);
}
.design-flat-info-heavy:hover {
  filter: brightness(0.85);
}
.design-flat-info-heavy:active {
  transform: scale(0.97);
}

.design-flat-info-minimal {
  background: var(--color-info);
  color: var(--color-text-inverse);
  border: none;
  box-shadow: none;
  transition: var(--transition-fast);
}
.design-flat-info-minimal:hover {
  filter: brightness(0.95);
}
.design-flat-info-minimal:active {
  transform: scale(0.97);
}

.design-frosted-primary {
  background: color-mix(in srgb, white 70%, var(--color-primary) 30%);
  backdrop-filter: blur(30px) saturate(140%);
  -webkit-backdrop-filter: blur(30px) saturate(140%);
  color: var(--color-primary);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: var(--transition-normal);
}
.design-frosted-primary:hover {
  background: color-mix(in srgb, white 65%, var(--color-primary) 35%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.design-frosted-primary-light {
  background: color-mix(in srgb, white 80%, var(--color-primary) 20%);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  color: var(--color-primary);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: var(--transition-normal);
}
.design-frosted-primary-light:hover {
  background: color-mix(in srgb, white 65%, var(--color-primary) 35%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.design-frosted-primary-heavy {
  background: color-mix(in srgb, white 60%, var(--color-primary) 40%);
  backdrop-filter: blur(40px) saturate(160%);
  -webkit-backdrop-filter: blur(40px) saturate(160%);
  color: var(--color-primary);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: var(--transition-normal);
}
.design-frosted-primary-heavy:hover {
  background: color-mix(in srgb, white 65%, var(--color-primary) 35%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.design-frosted-primary-minimal {
  background: color-mix(in srgb, white 80%, var(--color-primary) 20%);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  color: var(--color-primary);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: var(--transition-normal);
}
.design-frosted-primary-minimal:hover {
  background: color-mix(in srgb, white 65%, var(--color-primary) 35%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.design-frosted-secondary {
  background: color-mix(in srgb, white 70%, var(--color-secondary) 30%);
  backdrop-filter: blur(30px) saturate(140%);
  -webkit-backdrop-filter: blur(30px) saturate(140%);
  color: var(--color-secondary);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: var(--transition-normal);
}
.design-frosted-secondary:hover {
  background: color-mix(in srgb, white 65%, var(--color-secondary) 35%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.design-frosted-secondary-light {
  background: color-mix(in srgb, white 80%, var(--color-secondary) 20%);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  color: var(--color-secondary);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: var(--transition-normal);
}
.design-frosted-secondary-light:hover {
  background: color-mix(in srgb, white 65%, var(--color-secondary) 35%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.design-frosted-secondary-heavy {
  background: color-mix(in srgb, white 60%, var(--color-secondary) 40%);
  backdrop-filter: blur(40px) saturate(160%);
  -webkit-backdrop-filter: blur(40px) saturate(160%);
  color: var(--color-secondary);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: var(--transition-normal);
}
.design-frosted-secondary-heavy:hover {
  background: color-mix(in srgb, white 65%, var(--color-secondary) 35%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.design-frosted-secondary-minimal {
  background: color-mix(in srgb, white 80%, var(--color-secondary) 20%);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  color: var(--color-secondary);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: var(--transition-normal);
}
.design-frosted-secondary-minimal:hover {
  background: color-mix(in srgb, white 65%, var(--color-secondary) 35%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.design-frosted-success {
  background: color-mix(in srgb, white 70%, var(--color-success) 30%);
  backdrop-filter: blur(30px) saturate(140%);
  -webkit-backdrop-filter: blur(30px) saturate(140%);
  color: var(--color-success);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: var(--transition-normal);
}
.design-frosted-success:hover {
  background: color-mix(in srgb, white 65%, var(--color-success) 35%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.design-frosted-success-light {
  background: color-mix(in srgb, white 80%, var(--color-success) 20%);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  color: var(--color-success);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: var(--transition-normal);
}
.design-frosted-success-light:hover {
  background: color-mix(in srgb, white 65%, var(--color-success) 35%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.design-frosted-success-heavy {
  background: color-mix(in srgb, white 60%, var(--color-success) 40%);
  backdrop-filter: blur(40px) saturate(160%);
  -webkit-backdrop-filter: blur(40px) saturate(160%);
  color: var(--color-success);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: var(--transition-normal);
}
.design-frosted-success-heavy:hover {
  background: color-mix(in srgb, white 65%, var(--color-success) 35%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.design-frosted-success-minimal {
  background: color-mix(in srgb, white 80%, var(--color-success) 20%);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  color: var(--color-success);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: var(--transition-normal);
}
.design-frosted-success-minimal:hover {
  background: color-mix(in srgb, white 65%, var(--color-success) 35%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.design-frosted-warning {
  background: color-mix(in srgb, white 70%, var(--color-warning) 30%);
  backdrop-filter: blur(30px) saturate(140%);
  -webkit-backdrop-filter: blur(30px) saturate(140%);
  color: var(--color-warning);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: var(--transition-normal);
}
.design-frosted-warning:hover {
  background: color-mix(in srgb, white 65%, var(--color-warning) 35%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.design-frosted-warning-light {
  background: color-mix(in srgb, white 80%, var(--color-warning) 20%);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  color: var(--color-warning);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: var(--transition-normal);
}
.design-frosted-warning-light:hover {
  background: color-mix(in srgb, white 65%, var(--color-warning) 35%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.design-frosted-warning-heavy {
  background: color-mix(in srgb, white 60%, var(--color-warning) 40%);
  backdrop-filter: blur(40px) saturate(160%);
  -webkit-backdrop-filter: blur(40px) saturate(160%);
  color: var(--color-warning);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: var(--transition-normal);
}
.design-frosted-warning-heavy:hover {
  background: color-mix(in srgb, white 65%, var(--color-warning) 35%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.design-frosted-warning-minimal {
  background: color-mix(in srgb, white 80%, var(--color-warning) 20%);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  color: var(--color-warning);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: var(--transition-normal);
}
.design-frosted-warning-minimal:hover {
  background: color-mix(in srgb, white 65%, var(--color-warning) 35%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.design-frosted-error {
  background: color-mix(in srgb, white 70%, var(--color-error) 30%);
  backdrop-filter: blur(30px) saturate(140%);
  -webkit-backdrop-filter: blur(30px) saturate(140%);
  color: var(--color-error);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: var(--transition-normal);
}
.design-frosted-error:hover {
  background: color-mix(in srgb, white 65%, var(--color-error) 35%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.design-frosted-error-light {
  background: color-mix(in srgb, white 80%, var(--color-error) 20%);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  color: var(--color-error);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: var(--transition-normal);
}
.design-frosted-error-light:hover {
  background: color-mix(in srgb, white 65%, var(--color-error) 35%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.design-frosted-error-heavy {
  background: color-mix(in srgb, white 60%, var(--color-error) 40%);
  backdrop-filter: blur(40px) saturate(160%);
  -webkit-backdrop-filter: blur(40px) saturate(160%);
  color: var(--color-error);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: var(--transition-normal);
}
.design-frosted-error-heavy:hover {
  background: color-mix(in srgb, white 65%, var(--color-error) 35%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.design-frosted-error-minimal {
  background: color-mix(in srgb, white 80%, var(--color-error) 20%);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  color: var(--color-error);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: var(--transition-normal);
}
.design-frosted-error-minimal:hover {
  background: color-mix(in srgb, white 65%, var(--color-error) 35%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.design-frosted-danger {
  background: color-mix(in srgb, white 70%, var(--color-danger) 30%);
  backdrop-filter: blur(30px) saturate(140%);
  -webkit-backdrop-filter: blur(30px) saturate(140%);
  color: var(--color-danger);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: var(--transition-normal);
}
.design-frosted-danger:hover {
  background: color-mix(in srgb, white 65%, var(--color-danger) 35%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.design-frosted-danger-light {
  background: color-mix(in srgb, white 80%, var(--color-danger) 20%);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  color: var(--color-danger);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: var(--transition-normal);
}
.design-frosted-danger-light:hover {
  background: color-mix(in srgb, white 65%, var(--color-danger) 35%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.design-frosted-danger-heavy {
  background: color-mix(in srgb, white 60%, var(--color-danger) 40%);
  backdrop-filter: blur(40px) saturate(160%);
  -webkit-backdrop-filter: blur(40px) saturate(160%);
  color: var(--color-danger);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: var(--transition-normal);
}
.design-frosted-danger-heavy:hover {
  background: color-mix(in srgb, white 65%, var(--color-danger) 35%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.design-frosted-danger-minimal {
  background: color-mix(in srgb, white 80%, var(--color-danger) 20%);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  color: var(--color-danger);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: var(--transition-normal);
}
.design-frosted-danger-minimal:hover {
  background: color-mix(in srgb, white 65%, var(--color-danger) 35%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.design-frosted-info {
  background: color-mix(in srgb, white 70%, var(--color-info) 30%);
  backdrop-filter: blur(30px) saturate(140%);
  -webkit-backdrop-filter: blur(30px) saturate(140%);
  color: var(--color-info);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: var(--transition-normal);
}
.design-frosted-info:hover {
  background: color-mix(in srgb, white 65%, var(--color-info) 35%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.design-frosted-info-light {
  background: color-mix(in srgb, white 80%, var(--color-info) 20%);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  color: var(--color-info);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: var(--transition-normal);
}
.design-frosted-info-light:hover {
  background: color-mix(in srgb, white 65%, var(--color-info) 35%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.design-frosted-info-heavy {
  background: color-mix(in srgb, white 60%, var(--color-info) 40%);
  backdrop-filter: blur(40px) saturate(160%);
  -webkit-backdrop-filter: blur(40px) saturate(160%);
  color: var(--color-info);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: var(--transition-normal);
}
.design-frosted-info-heavy:hover {
  background: color-mix(in srgb, white 65%, var(--color-info) 35%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.design-frosted-info-minimal {
  background: color-mix(in srgb, white 80%, var(--color-info) 20%);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  color: var(--color-info);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: var(--transition-normal);
}
.design-frosted-info-minimal:hover {
  background: color-mix(in srgb, white 65%, var(--color-info) 35%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.design-outlined {
  background: transparent;
  color: var(--color-primary);
  border: var(--border-width-regular) solid var(--color-primary);
  transition: var(--transition-fast);
}
.design-outlined:hover {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  box-shadow: 0 0 0 1px var(--color-primary);
}
.design-outlined:active {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.design-ghost {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--color-primary);
  border: var(--border-1) solid transparent;
  transition: var(--transition-fast);
}
.design-ghost:hover {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.design-ghost:active {
  transform: scale(0.97);
}

.design-mode-interactive {
  cursor: pointer;
  user-select: none;
}
.design-mode-disabled {
  opacity: 0.6;
  pointer-events: none;
  cursor: not-allowed;
}

.duration-100 {
  transition-duration: var(--duration-ultra-fast);
}

.duration-200 {
  transition-duration: var(--duration-fast);
}

.duration-300 {
  transition-duration: var(--duration-normal);
}

.duration-500 {
  transition-duration: var(--duration-slow);
}

.duration-1000 {
  transition-duration: var(--duration-very-slow);
}

.ease-linear {
  transition-timing-function: var(--ease-linear);
}

.ease-in {
  transition-timing-function: var(--ease-in);
}

.ease-out {
  transition-timing-function: var(--ease-out);
}

.ease-in-out {
  transition-timing-function: var(--ease-in-out);
}

.animate-none {
  animation: none;
}

.animate-spin {
  animation: spin var(--duration-very-slow) linear infinite;
}

.animate-ping {
  animation: ping var(--duration-very-slow) cubic-bezier(0, 0, 0.2, 1) infinite;
}

.animate-pulse {
  animation: pulse calc(var(--duration-very-slow) * 2) cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-bounce {
  animation: bounce var(--duration-very-slow) infinite;
}

.animate-shake {
  animation: shake calc(var(--duration-slow) + var(--duration-fast)) ease-in-out;
}

.animate-fade-in {
  animation: fadeIn var(--duration-slow) ease-out;
}

.animate-fade-out {
  animation: fadeOut var(--duration-slow) ease-out;
}

.animate-scale-in {
  animation: scaleIn var(--duration-normal) ease-out;
}

.animate-scale-out {
  animation: scaleOut var(--duration-normal) ease-out;
}

.animate-slide-in-down {
  animation: slideInDown var(--duration-slow) ease-out;
}

.animate-slide-in-top {
  animation: slideInTop var(--duration-slow) ease-out;
}

.animate-slide-in-bottom {
  animation: slideInBottom var(--duration-slow) ease-out;
}

.animate-slide-in-left {
  animation: slideInLeft var(--duration-slow) ease-out;
}

.animate-slide-in-right {
  animation: slideInRight var(--duration-slow) ease-out;
}

.animate-slide-up {
  animation: slideUp var(--duration-slow) ease-out;
}

.animate-breathe {
  animation: breathe calc(var(--duration-very-slow) * 3) ease-in-out infinite;
}

.animate-error-pulse {
  animation: errorPulse calc(var(--duration-slow) * 2) ease-out;
}

.animate-success-fade-in {
  animation: successFadeIn calc(var(--duration-fast) + var(--duration-slow)) ease-out;
}

.delay-100 {
  transition-delay: var(--duration-ultra-fast);
}

.delay-200 {
  transition-delay: var(--duration-fast);
}

.delay-300 {
  transition-delay: var(--duration-normal);
}

.delay-500 {
  transition-delay: var(--duration-slow);
}

.delay-1000 {
  transition-delay: var(--duration-very-slow);
}

.animation-fill-none {
  animation-fill-mode: none;
}

.animation-fill-forwards {
  animation-fill-mode: forwards;
}

.animation-fill-backwards {
  animation-fill-mode: backwards;
}

.animation-fill-both {
  animation-fill-mode: both;
}

.animation-direction-normal {
  animation-direction: normal;
}

.animation-direction-reverse {
  animation-direction: reverse;
}

.animation-direction-alternate {
  animation-direction: alternate;
}

.animation-direction-alternate-reverse {
  animation-direction: alternate-reverse;
}

.animation-play {
  animation-play-state: running;
}

.animation-pause {
  animation-play-state: paused;
}

.animation-iteration-1 {
  animation-iteration-count: 1;
}

.animation-iteration-infinite {
  animation-iteration-count: infinite;
}

.animate-fade-in {
  animation: fadeIn var(--duration-normal) var(--ease-out);
}

.animate-fade-out {
  animation: fadeOut var(--duration-normal) var(--ease-out);
}

.animate-scale-in {
  animation: scaleIn var(--duration-normal) var(--ease-out);
}

.animate-scale-out {
  animation: scaleOut var(--duration-normal) var(--ease-out);
}

.animate-slide-in-top {
  animation: slideDown var(--duration-normal) var(--ease-out);
}

.animate-slide-in-bottom {
  animation: slideUp var(--duration-normal) var(--ease-out);
}

.animate-slide-in-left {
  animation: slideLeft var(--duration-normal) var(--ease-out);
}

.animate-slide-in-right {
  animation: slideRight var(--duration-normal) var(--ease-out);
}

.animate-shake {
  animation: shake var(--duration-normal) var(--ease-in-out);
}

.hover\:animate-spin:hover {
  animation: spin var(--duration-very-slow) linear infinite;
}

.hover\:animate-ping:hover {
  animation: ping var(--duration-very-slow) cubic-bezier(0, 0, 0.2, 1) infinite;
}

.hover\:animate-pulse:hover {
  animation: pulse calc(var(--duration-very-slow) * 2) cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.hover\:animate-bounce:hover {
  animation: bounce 1s infinite;
}

.group:hover .group-hover\:animate-spin {
  animation: spin var(--duration-very-slow) linear infinite;
}

.group:hover .group-hover\:animate-ping {
  animation: ping var(--duration-very-slow) cubic-bezier(0, 0, 0.2, 1) infinite;
}

.group:hover .group-hover\:animate-pulse {
  animation: pulse calc(var(--duration-very-slow) * 2) cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.group:hover .group-hover\:animate-bounce {
  animation: bounce 1s infinite;
}

.skeleton-loading {
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-text) 5%, var(--color-surface)) 25%, color-mix(in srgb, var(--color-text) 10%, var(--color-surface)) 50%, color-mix(in srgb, var(--color-text) 5%, var(--color-surface)) 75%);
  background-size: 200% 100%;
  animation: breathe calc(var(--duration-very-slow) * 1.5) ease-in-out infinite;
}

.ripple {
  position: relative;
  overflow: hidden;
}
.ripple::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: var(--color-glass-light);
  transform: translate(-50%, -50%);
  transition: width var(--duration-slow), height var(--duration-slow);
}
.ripple:active::before {
  width: var(--space-300);
  height: var(--space-300);
}

.input-focus-animate:focus {
  animation: scaleIn var(--duration-normal) ease-out;
}

.input-error-animate {
  animation: shake calc(var(--duration-slow) + var(--duration-fast)) ease-in-out, errorPulse calc(var(--duration-slow) * 2) ease-out;
}

.input-success-animate {
  animation: successFadeIn calc(var(--duration-fast) + var(--duration-slow)) ease-out;
}

.label-float-animate {
  transition: all var(--duration-normal) var(--ease-out);
}
.label-float-animate-is-floating {
  animation: fadeInUp var(--duration-slow) ease-out;
}

.glass-animate {
  transition: all var(--duration-normal) var(--ease-out);
}
.glass-animate:hover {
  animation: none;
  transition: all var(--duration-fast) var(--ease-out);
}
.glass-animate:focus {
  animation: scaleIn var(--duration-normal) ease-out;
}

.hover-lift {
  transition: transform var(--duration-fast) var(--ease-out);
}
.hover-lift:hover {
  transform: translateY(-1px);
}

.hover-lift-lg {
  transition: transform var(--duration-fast) var(--ease-out);
}
.hover-lift-lg:hover {
  transform: translateY(-2px);
}

.hover-scale {
  transition: transform var(--duration-fast) var(--ease-out);
}
.hover-scale:hover {
  transform: scale(1.02);
}

.focus-ring-animate:focus {
  animation: pulseRing calc(var(--duration-slow) * 2) ease-out;
}

.focus\:ring-primary:focus {
  box-shadow: 0 0 0 2px var(--color-primary);
}

.focus\:ring-secondary:focus {
  box-shadow: 0 0 0 2px var(--color-secondary);
}

.focus\:ring-success:focus {
  box-shadow: 0 0 0 2px var(--color-success);
}

.focus\:ring-warning:focus {
  box-shadow: 0 0 0 2px var(--color-warning);
}

.focus\:ring-error:focus {
  box-shadow: 0 0 0 2px var(--color-error);
}

.focus\:ring-info:focus {
  box-shadow: 0 0 0 2px var(--color-info);
}

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

.pointer-events-auto {
  pointer-events: auto;
}

.pointer-events-all {
  pointer-events: all;
}

.hover\:bg-primary:hover {
  background-color: var(--color-canvas);
  transition: background-color var(--duration-fast) var(--ease-out);
}
.hover\:bg-secondary:hover {
  background-color: var(--color-surface);
  transition: background-color var(--duration-fast) var(--ease-out);
}
.hover\:bg-elevated:hover {
  background-color: var(--color-surface-elevated);
  transition: background-color var(--duration-fast) var(--ease-out);
}
.hover\:bg-interactive:hover {
  background-color: var(--color-primary);
  transition: background-color var(--duration-fast) var(--ease-out);
}
.hover\:bg-success:hover {
  background-color: var(--color-success);
  transition: background-color var(--duration-fast) var(--ease-out);
}
.hover\:bg-warning:hover {
  background-color: var(--color-warning);
  transition: background-color var(--duration-fast) var(--ease-out);
}
.hover\:bg-error:hover {
  background-color: var(--color-error);
  transition: background-color var(--duration-fast) var(--ease-out);
}
.hover\:bg-light:hover {
  background-color: var(--color-secondary);
  transition: background-color var(--duration-fast) var(--ease-out);
}
.hover\:bg-overlay:hover {
  background-color: var(--color-surface-elevated);
  transition: background-color var(--duration-fast) var(--ease-out);
}

.hover\:text-primary:hover {
  color: var(--color-text);
  transition: color var(--duration-fast) var(--ease-out);
}
.hover\:text-secondary:hover {
  color: var(--color-text-muted);
  transition: color var(--duration-fast) var(--ease-out);
}
.hover\:text-interactive:hover {
  color: var(--color-primary);
  transition: color var(--duration-fast) var(--ease-out);
}
.hover\:text-success:hover {
  color: var(--color-success);
  transition: color var(--duration-fast) var(--ease-out);
}
.hover\:text-warning:hover {
  color: var(--color-warning);
  transition: color var(--duration-fast) var(--ease-out);
}
.hover\:text-error:hover {
  color: var(--color-error);
  transition: color var(--duration-fast) var(--ease-out);
}
.hover\:text-accent:hover {
  color: var(--color-primary);
  transition: color var(--duration-fast) var(--ease-out);
}

.hover\:border-primary:hover {
  border-color: var(--color-primary);
  transition: border-color var(--duration-fast) var(--ease-out);
}
.hover\:border-secondary:hover {
  border-color: var(--color-border);
  transition: border-color var(--duration-fast) var(--ease-out);
}
.hover\:border-success:hover {
  border-color: var(--color-success);
  transition: border-color var(--duration-fast) var(--ease-out);
}
.hover\:border-warning:hover {
  border-color: var(--color-warning);
  transition: border-color var(--duration-fast) var(--ease-out);
}
.hover\:border-error:hover {
  border-color: var(--color-error);
  transition: border-color var(--duration-fast) var(--ease-out);
}
.hover\:opacity-75:hover {
  opacity: 0.75;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.hover\:opacity-50:hover {
  opacity: 0.5;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.hover\:opacity-100:hover {
  opacity: 1;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.hover\:scale-105:hover {
  transform: scale(1.05);
  transition: transform var(--duration-fast) var(--ease-out);
}
.hover\:scale-110:hover {
  transform: scale(1.1);
  transition: transform var(--duration-fast) var(--ease-out);
}
.hover\:scale-95:hover {
  transform: scale(0.95);
  transition: transform var(--duration-fast) var(--ease-out);
}
.hover\:rotate-3:hover {
  transform: rotate(3deg);
  transition: transform var(--duration-fast) var(--ease-out);
}
.hover\:-rotate-3:hover {
  transform: rotate(-3deg);
  transition: transform var(--duration-fast) var(--ease-out);
}
.hover\:translate-y-1:hover {
  transform: translateY(-0.25rem);
  transition: transform var(--duration-fast) var(--ease-out);
}
.hover\:translate-y-2:hover {
  transform: translateY(-0.5rem);
  transition: transform var(--duration-fast) var(--ease-out);
}
.hover\:shadow-sm:hover {
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-fast) var(--ease-out);
}
.hover\:shadow-md:hover {
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--duration-fast) var(--ease-out);
}
.hover\:shadow-lg:hover {
  box-shadow: var(--shadow-lg);
  transition: box-shadow var(--duration-fast) var(--ease-out);
}
.hover\:shadow-xl:hover {
  box-shadow: var(--shadow-xl);
  transition: box-shadow var(--duration-fast) var(--ease-out);
}
.hover\:shadow-none:hover {
  box-shadow: none;
  transition: box-shadow var(--duration-fast) var(--ease-out);
}
.hover\:brightness-110:hover {
  filter: brightness(1.1);
  transition: filter var(--duration-fast) var(--ease-out);
}
.hover\:brightness-125:hover {
  filter: brightness(1.25);
  transition: filter var(--duration-fast) var(--ease-out);
}
.hover\:brightness-90:hover {
  filter: brightness(0.9);
  transition: filter var(--duration-fast) var(--ease-out);
}
.hover\:underline:hover {
  text-decoration: underline;
  transition: text-decoration var(--duration-fast) var(--ease-out);
}
.hover\:overline:hover {
  text-decoration: overline;
  transition: text-decoration var(--duration-fast) var(--ease-out);
}
.hover\:line-through:hover {
  text-decoration: line-through;
  transition: text-decoration var(--duration-fast) var(--ease-out);
}
.hover\:no-underline:hover {
  text-decoration: none;
  transition: text-decoration var(--duration-fast) var(--ease-out);
}

.active\:scale-95:active {
  transform: scale(0.95);
}

.active\:scale-98:active {
  transform: scale(0.98);
}

.active\:bg-primary:active {
  background-color: var(--color-primary-active);
}

.active\:bg-secondary:active {
  background-color: var(--color-surface-dark);
}

.active\:shadow-inner:active {
  box-shadow: var(--shadow-inset-button);
}

.active\:shadow-none:active {
  box-shadow: none;
}

.group:hover .group-hover\:visible {
  visibility: visible;
}

.group:hover .group-hover\:invisible {
  visibility: hidden;
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.group:hover .group-hover\:opacity-0 {
  opacity: 0;
}

.group:hover .group-hover\:scale-105 {
  transform: scale(1.05);
}

.group:hover .group-hover\:translate-y-1 {
  transform: translateY(-0.25rem);
}

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

.group:hover .group-hover\:bg-secondary {
  background-color: var(--color-surface);
}

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

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

.action-zone {
  position: relative;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  border-radius: var(--radius-md);
}
.action-zone:hover {
  background: var(--color-surface-elevated);
  transform: translateY(calc(-1 * var(--space-0-5)));
}
.action-zone:active {
  transform: translateY(0);
}
.action-zone-clickable:hover .action-zone-overlay {
  opacity: 1;
}
.action-zone-overlay {
  position: absolute;
  inset: 0;
  background: var(--color-focus);
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
  pointer-events: none;
}

@media (max-width: 767px) {
  .quick-actions {
    opacity: 1;
  }
  .action-zone:hover {
    transform: none;
  }
}
.disabled\:bg-gray:disabled {
  background-color: var(--color-surface);
  opacity: var(--opacity-disabled);
}

.disabled\:text-gray:disabled {
  color: var(--color-text-subtle);
}

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

.pointer-events-auto {
  pointer-events: auto;
}

.pointer-events-all {
  pointer-events: all;
}

.resize {
  resize: both;
}
.resize-none {
  resize: none;
}
.resize-y {
  resize: vertical;
}
.resize-x {
  resize: horizontal;
}

.scroll-auto {
  scroll-behavior: auto;
}

.scroll-smooth {
  scroll-behavior: smooth;
}

.scrolling-touch {
  -webkit-overflow-scrolling: touch;
}

.scrolling-auto {
  -webkit-overflow-scrolling: auto;
}

.scroll-m-0 {
  scroll-margin: var(--space-0);
}

.scroll-m-1 {
  scroll-margin: var(--space-1);
}

.scroll-m-2 {
  scroll-margin: var(--space-2);
}

.scroll-m-3 {
  scroll-margin: var(--space-3);
}

.scroll-m-4 {
  scroll-margin: var(--space-4);
}

.scroll-m-5 {
  scroll-margin: var(--space-5);
}

.scroll-m-6 {
  scroll-margin: var(--space-6);
}

.scroll-m-8 {
  scroll-margin: var(--space-8);
}

.scroll-m-10 {
  scroll-margin: var(--space-10);
}

.scroll-m-12 {
  scroll-margin: var(--space-12);
}

.scroll-m-16 {
  scroll-margin: var(--space-16);
}

.scroll-m-20 {
  scroll-margin: var(--space-20);
}

.scroll-m-24 {
  scroll-margin: var(--space-24);
}

.scroll-mt-0 {
  scroll-margin-top: var(--space-0);
}

.scroll-mt-1 {
  scroll-margin-top: var(--space-1);
}

.scroll-mt-2 {
  scroll-margin-top: var(--space-2);
}

.scroll-mt-3 {
  scroll-margin-top: var(--space-3);
}

.scroll-mt-4 {
  scroll-margin-top: var(--space-4);
}

.scroll-mt-5 {
  scroll-margin-top: var(--space-5);
}

.scroll-mt-6 {
  scroll-margin-top: var(--space-6);
}

.scroll-mt-8 {
  scroll-margin-top: var(--space-8);
}

.scroll-mt-10 {
  scroll-margin-top: var(--space-10);
}

.scroll-mt-12 {
  scroll-margin-top: var(--space-12);
}

.scroll-mt-16 {
  scroll-margin-top: var(--space-16);
}

.scroll-mt-20 {
  scroll-margin-top: var(--space-20);
}

.scroll-mt-24 {
  scroll-margin-top: var(--space-24);
}

.scroll-mb-0 {
  scroll-margin-bottom: var(--space-0);
}

.scroll-mb-1 {
  scroll-margin-bottom: var(--space-1);
}

.scroll-mb-2 {
  scroll-margin-bottom: var(--space-2);
}

.scroll-mb-3 {
  scroll-margin-bottom: var(--space-3);
}

.scroll-mb-4 {
  scroll-margin-bottom: var(--space-4);
}

.scroll-mb-5 {
  scroll-margin-bottom: var(--space-5);
}

.scroll-mb-6 {
  scroll-margin-bottom: var(--space-6);
}

.scroll-mb-8 {
  scroll-margin-bottom: var(--space-8);
}

.scroll-mb-10 {
  scroll-margin-bottom: var(--space-10);
}

.scroll-mb-12 {
  scroll-margin-bottom: var(--space-12);
}

.scroll-mb-16 {
  scroll-margin-bottom: var(--space-16);
}

.scroll-mb-20 {
  scroll-margin-bottom: var(--space-20);
}

.scroll-mb-24 {
  scroll-margin-bottom: var(--space-24);
}

.scroll-ml-0 {
  scroll-margin-left: var(--space-0);
}

.scroll-ml-1 {
  scroll-margin-left: var(--space-1);
}

.scroll-ml-2 {
  scroll-margin-left: var(--space-2);
}

.scroll-ml-3 {
  scroll-margin-left: var(--space-3);
}

.scroll-ml-4 {
  scroll-margin-left: var(--space-4);
}

.scroll-ml-5 {
  scroll-margin-left: var(--space-5);
}

.scroll-ml-6 {
  scroll-margin-left: var(--space-6);
}

.scroll-ml-8 {
  scroll-margin-left: var(--space-8);
}

.scroll-ml-10 {
  scroll-margin-left: var(--space-10);
}

.scroll-ml-12 {
  scroll-margin-left: var(--space-12);
}

.scroll-ml-16 {
  scroll-margin-left: var(--space-16);
}

.scroll-ml-20 {
  scroll-margin-left: var(--space-20);
}

.scroll-ml-24 {
  scroll-margin-left: var(--space-24);
}

.scroll-mr-0 {
  scroll-margin-right: var(--space-0);
}

.scroll-mr-1 {
  scroll-margin-right: var(--space-1);
}

.scroll-mr-2 {
  scroll-margin-right: var(--space-2);
}

.scroll-mr-3 {
  scroll-margin-right: var(--space-3);
}

.scroll-mr-4 {
  scroll-margin-right: var(--space-4);
}

.scroll-mr-5 {
  scroll-margin-right: var(--space-5);
}

.scroll-mr-6 {
  scroll-margin-right: var(--space-6);
}

.scroll-mr-8 {
  scroll-margin-right: var(--space-8);
}

.scroll-mr-10 {
  scroll-margin-right: var(--space-10);
}

.scroll-mr-12 {
  scroll-margin-right: var(--space-12);
}

.scroll-mr-16 {
  scroll-margin-right: var(--space-16);
}

.scroll-mr-20 {
  scroll-margin-right: var(--space-20);
}

.scroll-mr-24 {
  scroll-margin-right: var(--space-24);
}

.scroll-mx-0 {
  scroll-margin-left: var(--space-0);
  scroll-margin-right: var(--space-0);
}

.scroll-my-0 {
  scroll-margin-top: var(--space-0);
  scroll-margin-bottom: var(--space-0);
}

.scroll-mx-1 {
  scroll-margin-left: var(--space-1);
  scroll-margin-right: var(--space-1);
}

.scroll-my-1 {
  scroll-margin-top: var(--space-1);
  scroll-margin-bottom: var(--space-1);
}

.scroll-mx-2 {
  scroll-margin-left: var(--space-2);
  scroll-margin-right: var(--space-2);
}

.scroll-my-2 {
  scroll-margin-top: var(--space-2);
  scroll-margin-bottom: var(--space-2);
}

.scroll-mx-3 {
  scroll-margin-left: var(--space-3);
  scroll-margin-right: var(--space-3);
}

.scroll-my-3 {
  scroll-margin-top: var(--space-3);
  scroll-margin-bottom: var(--space-3);
}

.scroll-mx-4 {
  scroll-margin-left: var(--space-4);
  scroll-margin-right: var(--space-4);
}

.scroll-my-4 {
  scroll-margin-top: var(--space-4);
  scroll-margin-bottom: var(--space-4);
}

.scroll-mx-5 {
  scroll-margin-left: var(--space-5);
  scroll-margin-right: var(--space-5);
}

.scroll-my-5 {
  scroll-margin-top: var(--space-5);
  scroll-margin-bottom: var(--space-5);
}

.scroll-mx-6 {
  scroll-margin-left: var(--space-6);
  scroll-margin-right: var(--space-6);
}

.scroll-my-6 {
  scroll-margin-top: var(--space-6);
  scroll-margin-bottom: var(--space-6);
}

.scroll-mx-8 {
  scroll-margin-left: var(--space-8);
  scroll-margin-right: var(--space-8);
}

.scroll-my-8 {
  scroll-margin-top: var(--space-8);
  scroll-margin-bottom: var(--space-8);
}

.scroll-mx-10 {
  scroll-margin-left: var(--space-10);
  scroll-margin-right: var(--space-10);
}

.scroll-my-10 {
  scroll-margin-top: var(--space-10);
  scroll-margin-bottom: var(--space-10);
}

.scroll-mx-12 {
  scroll-margin-left: var(--space-12);
  scroll-margin-right: var(--space-12);
}

.scroll-my-12 {
  scroll-margin-top: var(--space-12);
  scroll-margin-bottom: var(--space-12);
}

.scroll-p-0 {
  scroll-padding: var(--space-0);
}

.scroll-p-1 {
  scroll-padding: var(--space-1);
}

.scroll-p-2 {
  scroll-padding: var(--space-2);
}

.scroll-p-3 {
  scroll-padding: var(--space-3);
}

.scroll-p-4 {
  scroll-padding: var(--space-4);
}

.scroll-p-5 {
  scroll-padding: var(--space-5);
}

.scroll-p-6 {
  scroll-padding: var(--space-6);
}

.scroll-p-8 {
  scroll-padding: var(--space-8);
}

.scroll-p-10 {
  scroll-padding: var(--space-10);
}

.scroll-p-12 {
  scroll-padding: var(--space-12);
}

.scroll-p-16 {
  scroll-padding: var(--space-16);
}

.scroll-p-20 {
  scroll-padding: var(--space-20);
}

.scroll-p-24 {
  scroll-padding: var(--space-24);
}

.snap-none {
  scroll-snap-type: none;
}

.snap-x {
  scroll-snap-type: x mandatory;
}

.snap-y {
  scroll-snap-type: y mandatory;
}

.snap-both {
  scroll-snap-type: both mandatory;
}

.snap-start {
  scroll-snap-align: start;
}

.snap-end {
  scroll-snap-align: end;
}

.snap-center {
  scroll-snap-align: center;
}

.snap-align-none {
  scroll-snap-align: none;
}

.snap-normal {
  scroll-snap-stop: normal;
}

.snap-always {
  scroll-snap-stop: always;
}

.snap-mandatory {
  scroll-snap-type: inherit;
}

.snap-proximity {
  scroll-snap-type: inherit;
}

.overscroll-auto {
  overscroll-behavior: auto;
}

.overscroll-contain {
  overscroll-behavior: contain;
}

.overscroll-none {
  overscroll-behavior: none;
}

.overscroll-y-auto {
  overscroll-behavior-y: auto;
}

.overscroll-y-contain {
  overscroll-behavior-y: contain;
}

.overscroll-y-none {
  overscroll-behavior-y: none;
}

.overscroll-x-auto {
  overscroll-behavior-x: auto;
}

.overscroll-x-contain {
  overscroll-behavior-x: contain;
}

.overscroll-x-none {
  overscroll-behavior-x: none;
}

.scrollbar-thin {
  scrollbar-width: thin;
}

.scrollbar-none {
  scrollbar-width: none;
}
.scrollbar-none::-webkit-scrollbar {
  display: none;
}

.scrollbar-auto {
  scrollbar-width: auto;
}

.scrollbar-custom {
  scrollbar-width: thin;
  scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
}
.scrollbar-custom::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.scrollbar-custom::-webkit-scrollbar-track {
  background: var(--color-scrollbar-track);
  border-radius: var(--radius-sm);
}
.scrollbar-custom::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar-thumb);
  border-radius: var(--radius-sm);
}
.scrollbar-custom::-webkit-scrollbar-thumb:hover {
  background: var(--color-scrollbar-thumb-hover);
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.scroll-container {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.scroll-container-x {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.scroll-container-y {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.scroll-mobile-optimized {
  -webkit-overflow-scrolling: touch;
  transform: translateZ(0);
  will-change: transform;
}

@media (min-width: 640px) {
  .sm\:scroll-auto {
    scroll-behavior: auto;
  }
  .sm\:scroll-smooth {
    scroll-behavior: smooth;
  }
  .sm\:scrolling-touch {
    -webkit-overflow-scrolling: touch;
  }
  .sm\:scrolling-auto {
    -webkit-overflow-scrolling: auto;
  }
  .sm\:snap-none {
    scroll-snap-type: none;
  }
  .sm\:snap-x {
    scroll-snap-type: x mandatory;
  }
  .sm\:snap-y {
    scroll-snap-type: y mandatory;
  }
  .sm\:snap-start {
    scroll-snap-align: start;
  }
  .sm\:snap-end {
    scroll-snap-align: end;
  }
  .sm\:snap-center {
    scroll-snap-align: center;
  }
  .sm\:overscroll-auto {
    overscroll-behavior: auto;
  }
  .sm\:overscroll-contain {
    overscroll-behavior: contain;
  }
  .sm\:overscroll-none {
    overscroll-behavior: none;
  }
  .sm\:scrollbar-thin {
    scrollbar-width: thin;
  }
  .sm\:scrollbar-none {
    scrollbar-width: none;
  }
  .sm\:scrollbar-none::-webkit-scrollbar {
    display: none;
  }
  .sm\:scrollbar-auto {
    scrollbar-width: auto;
  }
  .sm\:scroll-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  .sm\:scroll-container-x {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  .sm\:scroll-container-y {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
}
@media (min-width: 768px) {
  .md\:scroll-auto {
    scroll-behavior: auto;
  }
  .md\:scroll-smooth {
    scroll-behavior: smooth;
  }
  .md\:scrolling-touch {
    -webkit-overflow-scrolling: touch;
  }
  .md\:scrolling-auto {
    -webkit-overflow-scrolling: auto;
  }
  .md\:snap-none {
    scroll-snap-type: none;
  }
  .md\:snap-x {
    scroll-snap-type: x mandatory;
  }
  .md\:snap-y {
    scroll-snap-type: y mandatory;
  }
  .md\:snap-start {
    scroll-snap-align: start;
  }
  .md\:snap-end {
    scroll-snap-align: end;
  }
  .md\:snap-center {
    scroll-snap-align: center;
  }
  .md\:overscroll-auto {
    overscroll-behavior: auto;
  }
  .md\:overscroll-contain {
    overscroll-behavior: contain;
  }
  .md\:overscroll-none {
    overscroll-behavior: none;
  }
  .md\:scrollbar-thin {
    scrollbar-width: thin;
  }
  .md\:scrollbar-none {
    scrollbar-width: none;
  }
  .md\:scrollbar-none::-webkit-scrollbar {
    display: none;
  }
  .md\:scrollbar-auto {
    scrollbar-width: auto;
  }
  .md\:scroll-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  .md\:scroll-container-x {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  .md\:scroll-container-y {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
}
@media (min-width: 1024px) {
  .lg\:scroll-auto {
    scroll-behavior: auto;
  }
  .lg\:scroll-smooth {
    scroll-behavior: smooth;
  }
  .lg\:scrolling-touch {
    -webkit-overflow-scrolling: touch;
  }
  .lg\:scrolling-auto {
    -webkit-overflow-scrolling: auto;
  }
  .lg\:snap-none {
    scroll-snap-type: none;
  }
  .lg\:snap-x {
    scroll-snap-type: x mandatory;
  }
  .lg\:snap-y {
    scroll-snap-type: y mandatory;
  }
  .lg\:snap-start {
    scroll-snap-align: start;
  }
  .lg\:snap-end {
    scroll-snap-align: end;
  }
  .lg\:snap-center {
    scroll-snap-align: center;
  }
  .lg\:overscroll-auto {
    overscroll-behavior: auto;
  }
  .lg\:overscroll-contain {
    overscroll-behavior: contain;
  }
  .lg\:overscroll-none {
    overscroll-behavior: none;
  }
  .lg\:scrollbar-thin {
    scrollbar-width: thin;
  }
  .lg\:scrollbar-none {
    scrollbar-width: none;
  }
  .lg\:scrollbar-none::-webkit-scrollbar {
    display: none;
  }
  .lg\:scrollbar-auto {
    scrollbar-width: auto;
  }
  .lg\:scroll-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  .lg\:scroll-container-x {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  .lg\:scroll-container-y {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
}
@media (min-width: 1280px) {
  .xl\:scroll-auto {
    scroll-behavior: auto;
  }
  .xl\:scroll-smooth {
    scroll-behavior: smooth;
  }
  .xl\:scrolling-touch {
    -webkit-overflow-scrolling: touch;
  }
  .xl\:scrolling-auto {
    -webkit-overflow-scrolling: auto;
  }
  .xl\:snap-none {
    scroll-snap-type: none;
  }
  .xl\:snap-x {
    scroll-snap-type: x mandatory;
  }
  .xl\:snap-y {
    scroll-snap-type: y mandatory;
  }
  .xl\:snap-start {
    scroll-snap-align: start;
  }
  .xl\:snap-end {
    scroll-snap-align: end;
  }
  .xl\:snap-center {
    scroll-snap-align: center;
  }
  .xl\:overscroll-auto {
    overscroll-behavior: auto;
  }
  .xl\:overscroll-contain {
    overscroll-behavior: contain;
  }
  .xl\:overscroll-none {
    overscroll-behavior: none;
  }
  .xl\:scrollbar-thin {
    scrollbar-width: thin;
  }
  .xl\:scrollbar-none {
    scrollbar-width: none;
  }
  .xl\:scrollbar-none::-webkit-scrollbar {
    display: none;
  }
  .xl\:scrollbar-auto {
    scrollbar-width: auto;
  }
  .xl\:scroll-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  .xl\:scroll-container-x {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  .xl\:scroll-container-y {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
}
.state-active {
  color: var(--color-primary);
  font-weight: var(--font-semibold);
}
.state-active-indicator::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: var(--space-1);
  height: 70%;
  background: var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.state-inactive {
  opacity: 0.6;
  filter: grayscale(30%);
}
.state-disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(20%);
}
.state-processing {
  position: relative;
  overflow: hidden;
}
.state-processing::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--color-focus), transparent);
  animation: shimmer 1.5s infinite;
}
.state-clickable {
  cursor: pointer;
  transition: var(--transition-normal);
}
.state-clickable:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.state-clickable:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}
.state-selected {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
  position: relative;
}
.state-selected::before {
  content: "";
  position: absolute;
  inset: -2px;
  border: var(--border-2) solid var(--color-primary);
  border-radius: inherit;
  pointer-events: none;
}
.state-selected-light {
  background-color: var(--color-surface-elevated);
  color: var(--color-primary);
}
.state-selected-light::before {
  display: none;
}
.state-focused {
  outline: none;
  box-shadow: 0 0 0 var(--space-1) var(--color-focus);
}
.state-hidden {
  display: none;
}

@layer utilities {
  @media (min-width: 0) {
    .xs\:block {
      display: block;
    }
    .xs\:inline {
      display: inline;
    }
    .xs\:inline-block {
      display: inline-block;
    }
    .xs\:hidden {
      display: none;
    }
    .xs\:flex {
      display: flex;
    }
    .xs\:inline-flex {
      display: inline-flex;
    }
    .xs\:grid {
      display: grid;
    }
    .xs\:w-auto {
      width: auto;
    }
    .xs\:w-full {
      width: 100%;
    }
    .xs\:w-1\/2 {
      width: 50%;
    }
    .xs\:w-1\/3 {
      width: 33.333333%;
    }
    .xs\:w-2\/3 {
      width: 66.666667%;
    }
    .xs\:w-1\/4 {
      width: 25%;
    }
    .xs\:w-3\/4 {
      width: 75%;
    }
    .xs\:h-auto {
      height: auto;
    }
    .xs\:h-full {
      height: 100%;
    }
    .xs\:h-screen {
      height: 100vh;
    }
    .xs\:text-left {
      text-align: left;
    }
    .xs\:text-center {
      text-align: center;
    }
    .xs\:text-right {
      text-align: right;
    }
    .xs\:text-justify {
      text-align: justify;
    }
  }
  @media (min-width: 640px) {
    .sm\:block {
      display: block;
    }
    .sm\:inline {
      display: inline;
    }
    .sm\:inline-block {
      display: inline-block;
    }
    .sm\:hidden {
      display: none;
    }
    .sm\:flex {
      display: flex;
    }
    .sm\:inline-flex {
      display: inline-flex;
    }
    .sm\:grid {
      display: grid;
    }
    .sm\:w-auto {
      width: auto;
    }
    .sm\:w-full {
      width: 100%;
    }
    .sm\:w-1\/2 {
      width: 50%;
    }
    .sm\:w-1\/3 {
      width: 33.333333%;
    }
    .sm\:w-2\/3 {
      width: 66.666667%;
    }
    .sm\:w-1\/4 {
      width: 25%;
    }
    .sm\:w-3\/4 {
      width: 75%;
    }
    .sm\:h-auto {
      height: auto;
    }
    .sm\:h-full {
      height: 100%;
    }
    .sm\:h-screen {
      height: 100vh;
    }
    .sm\:text-left {
      text-align: left;
    }
    .sm\:text-center {
      text-align: center;
    }
    .sm\:text-right {
      text-align: right;
    }
    .sm\:text-justify {
      text-align: justify;
    }
  }
  @media (min-width: 768px) {
    .md\:block {
      display: block;
    }
    .md\:inline {
      display: inline;
    }
    .md\:inline-block {
      display: inline-block;
    }
    .md\:hidden {
      display: none;
    }
    .md\:flex {
      display: flex;
    }
    .md\:inline-flex {
      display: inline-flex;
    }
    .md\:grid {
      display: grid;
    }
    .md\:w-auto {
      width: auto;
    }
    .md\:w-full {
      width: 100%;
    }
    .md\:w-1\/2 {
      width: 50%;
    }
    .md\:w-1\/3 {
      width: 33.333333%;
    }
    .md\:w-2\/3 {
      width: 66.666667%;
    }
    .md\:w-1\/4 {
      width: 25%;
    }
    .md\:w-3\/4 {
      width: 75%;
    }
    .md\:h-auto {
      height: auto;
    }
    .md\:h-full {
      height: 100%;
    }
    .md\:h-screen {
      height: 100vh;
    }
    .md\:text-left {
      text-align: left;
    }
    .md\:text-center {
      text-align: center;
    }
    .md\:text-right {
      text-align: right;
    }
    .md\:text-justify {
      text-align: justify;
    }
  }
  @media (min-width: 1024px) {
    .lg\:block {
      display: block;
    }
    .lg\:inline {
      display: inline;
    }
    .lg\:inline-block {
      display: inline-block;
    }
    .lg\:hidden {
      display: none;
    }
    .lg\:flex {
      display: flex;
    }
    .lg\:inline-flex {
      display: inline-flex;
    }
    .lg\:grid {
      display: grid;
    }
    .lg\:w-auto {
      width: auto;
    }
    .lg\:w-full {
      width: 100%;
    }
    .lg\:w-1\/2 {
      width: 50%;
    }
    .lg\:w-1\/3 {
      width: 33.333333%;
    }
    .lg\:w-2\/3 {
      width: 66.666667%;
    }
    .lg\:w-1\/4 {
      width: 25%;
    }
    .lg\:w-3\/4 {
      width: 75%;
    }
    .lg\:h-auto {
      height: auto;
    }
    .lg\:h-full {
      height: 100%;
    }
    .lg\:h-screen {
      height: 100vh;
    }
    .lg\:text-left {
      text-align: left;
    }
    .lg\:text-center {
      text-align: center;
    }
    .lg\:text-right {
      text-align: right;
    }
    .lg\:text-justify {
      text-align: justify;
    }
  }
  @media (min-width: 1280px) {
    .xl\:block {
      display: block;
    }
    .xl\:inline {
      display: inline;
    }
    .xl\:inline-block {
      display: inline-block;
    }
    .xl\:hidden {
      display: none;
    }
    .xl\:flex {
      display: flex;
    }
    .xl\:inline-flex {
      display: inline-flex;
    }
    .xl\:grid {
      display: grid;
    }
    .xl\:w-auto {
      width: auto;
    }
    .xl\:w-full {
      width: 100%;
    }
    .xl\:w-1\/2 {
      width: 50%;
    }
    .xl\:w-1\/3 {
      width: 33.333333%;
    }
    .xl\:w-2\/3 {
      width: 66.666667%;
    }
    .xl\:w-1\/4 {
      width: 25%;
    }
    .xl\:w-3\/4 {
      width: 75%;
    }
    .xl\:h-auto {
      height: auto;
    }
    .xl\:h-full {
      height: 100%;
    }
    .xl\:h-screen {
      height: 100vh;
    }
    .xl\:text-left {
      text-align: left;
    }
    .xl\:text-center {
      text-align: center;
    }
    .xl\:text-right {
      text-align: right;
    }
    .xl\:text-justify {
      text-align: justify;
    }
  }
  @media (min-width: 1536px) {
    .xxl\:block {
      display: block;
    }
    .xxl\:inline {
      display: inline;
    }
    .xxl\:inline-block {
      display: inline-block;
    }
    .xxl\:hidden {
      display: none;
    }
    .xxl\:flex {
      display: flex;
    }
    .xxl\:inline-flex {
      display: inline-flex;
    }
    .xxl\:grid {
      display: grid;
    }
    .xxl\:w-auto {
      width: auto;
    }
    .xxl\:w-full {
      width: 100%;
    }
    .xxl\:w-1\/2 {
      width: 50%;
    }
    .xxl\:w-1\/3 {
      width: 33.333333%;
    }
    .xxl\:w-2\/3 {
      width: 66.666667%;
    }
    .xxl\:w-1\/4 {
      width: 25%;
    }
    .xxl\:w-3\/4 {
      width: 75%;
    }
    .xxl\:h-auto {
      height: auto;
    }
    .xxl\:h-full {
      height: 100%;
    }
    .xxl\:h-screen {
      height: 100vh;
    }
    .xxl\:text-left {
      text-align: left;
    }
    .xxl\:text-center {
      text-align: center;
    }
    .xxl\:text-right {
      text-align: right;
    }
    .xxl\:text-justify {
      text-align: justify;
    }
  }
  .flex-mobile-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  @media (min-width: 768px) {
    .flex-mobile-col {
      flex-direction: row;
      gap: var(--space-4);
    }
  }
  .grid-mobile-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  @media (min-width: 768px) {
    .grid-mobile-stack {
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: var(--space-4);
    }
  }
  .gap-responsive {
    gap: var(--space-2);
  }
  @media (min-width: 768px) {
    .gap-responsive {
      gap: var(--space-4);
    }
  }
  .pa-responsive {
    padding: var(--space-3);
  }
  @media (min-width: 768px) {
    .pa-responsive {
      padding: var(--space-6);
    }
  }
  @media (min-width: 768px) {
    .mobile-only {
      display: none;
    }
  }
  .mobile-hidden {
    display: none;
  }
  @media (min-width: 768px) {
    .mobile-hidden {
      display: revert;
    }
  }
  .tablet-up {
    display: none;
  }
  @media (min-width: 768px) {
    .tablet-up {
      display: revert;
    }
  }
  .desktop-up {
    display: none;
  }
  @media (min-width: 1024px) {
    .desktop-up {
      display: revert;
    }
  }
  .text-responsive {
    font-size: clamp(0.875rem, 2vw, 1rem);
    line-height: 1.5;
  }
  .text-responsive-lg {
    font-size: clamp(1.125rem, 3vw, 1.5rem);
    line-height: 1.4;
  }
  .text-responsive-xl {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    line-height: 1.3;
  }
  .container-responsive {
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--space-4);
  }
  @media (min-width: 768px) {
    .container-responsive {
      max-width: 768px;
      padding: 0 var(--space-6);
    }
  }
  @media (min-width: 1024px) {
    .container-responsive {
      max-width: 1024px;
      padding: 0 var(--space-8);
    }
  }
  @media (min-width: 1280px) {
    .container-responsive {
      max-width: 1280px;
    }
  }
  .swipe-enabled {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .swipe-enabled > * {
    scroll-snap-align: start;
  }
  .mobile-optimized {
    transform: translateZ(0);
    will-change: transform;
    touch-action: manipulation;
  }
  @media print {
    .no-print {
      display: none;
    }
    .page-content {
      padding: 0;
    }
  }
}
.sr-only, .icon-button-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:focus, .skip-link:focus, .sr-only-focusable:active, .skip-link:active {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-tooltip);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface-elevated);
  color: var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
  font-weight: var(--font-semibold);
}
.skip-link:focus {
  outline: none;
}

.focus-ring:focus {
  outline: none;
}
.focus-ring-inset:focus {
  outline-offset: -2px;
}
.focus-ring-thick:focus {
  outline-width: 3px;
}
.focus-ring-white:focus {
  outline-color: var(--color-surface);
}

.focus\:ring-button-primary-focus:focus {
  outline: none;
}

.focus\:ring-button-danger-focus:focus {
  outline: none;
}

.focus\:ring-button-success-focus:focus {
  outline: none;
}

.focus\:ring-button-warning-focus:focus {
  outline: none;
}

.focus\:outline-none:focus {
  outline: none;
}

.focus\:ring-0:focus {
  box-shadow: none;
}

.focus\:ring-1:focus {
  box-shadow: none;
}

.focus\:ring-2:focus {
  box-shadow: none;
}

.focus\:ring-3:focus {
  box-shadow: none;
}

.focus\:ring-4:focus {
  box-shadow: none;
}

.focus\:ring-offset-2:focus {
  box-shadow: none;
}

.focus\:ring-primary:focus {
  box-shadow: none;
}

.focus\:ring-success:focus {
  box-shadow: none;
}

.focus\:ring-warning:focus {
  box-shadow: none;
}

.focus\:ring-error:focus {
  box-shadow: none;
}

.focus\:bg-primary:focus {
  background-color: var(--color-canvas);
}

.focus\:bg-secondary:focus {
  background-color: var(--color-surface);
}

.focus\:bg-elevated:focus {
  background-color: var(--color-surface-elevated);
}

.focus\:bg-surface:focus {
  background-color: var(--color-surface);
}

.focus\:border-primary:focus {
  border-color: var(--color-primary);
}

.focus\:border-secondary:focus {
  border-color: var(--color-border);
}

.focus\:border-error:focus {
  border-color: var(--color-error);
}

.focus\:border-success:focus {
  border-color: var(--color-success);
}

.focus-within\:ring-2:focus-within {
  box-shadow: none;
}

.focus-within\:border-primary:focus-within {
  border-color: transparent;
}

.focus-within\:shadow-lg:focus-within {
  box-shadow: var(--shadow-lg);
}

@media (prefers-contrast: high) {
  .high-contrast-border {
    border: var(--border-2) solid currentColor;
  }
}

@media (prefers-contrast: high) {
  .high-contrast-outline {
    outline: var(--border-2) solid currentColor;
  }
}

@media (prefers-contrast: high) {
  .high-contrast-text {
    color: CanvasText;
  }
}

@media (prefers-contrast: high) {
  .high-contrast-bg {
    background-color: Canvas;
    color: CanvasText;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .motion-safe\:animate-spin {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-safe\:animate-ping {
    animation: none;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .motion-safe\:animate-bounce {
    animation: none;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .motion-reduce\:transform-none {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .motion-safe-transition {
    transition: var(--transition-normal);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .motion-safe-animate {
    animation-duration: var(--duration-slow);
  }
}

.aria-live-polite, .aria-live-assertive {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.keyboard-only:focus {
  outline: none;
}

.keyboard-navigation .button:focus,
.keyboard-navigation .nav-item:focus {
  outline: none;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible,
[tabindex]:focus-visible,
[role=button]:focus-visible,
[role=link]:focus-visible {
  outline: none;
  box-shadow: none;
}

.focus-visible-enhanced:focus-visible {
  outline: none;
  box-shadow: none;
}
.focus-visible-enhanced button:focus-visible,
.focus-visible-enhanced [role=button]:focus-visible,
.focus-visible-enhanced a:focus-visible,
.focus-visible-enhanced input:focus-visible,
.focus-visible-enhanced select:focus-visible,
.focus-visible-enhanced textarea:focus-visible,
.focus-visible-enhanced [tabindex]:not([tabindex="-1"]):focus-visible,
.focus-visible-enhanced .btn:focus-visible,
.focus-visible-enhanced .nav-item:focus-visible,
.focus-visible-enhanced .dropdown-item:focus-visible,
.focus-visible-enhanced .card-clickable:focus-visible,
.focus-visible-enhanced .list-item:focus-visible,
.focus-visible-enhanced .tab-item:focus-visible {
  outline: none;
  box-shadow: none;
}
.focus-visible-enhanced button:focus:not(:focus-visible),
.focus-visible-enhanced [role=button]:focus:not(:focus-visible),
.focus-visible-enhanced a:focus:not(:focus-visible),
.focus-visible-enhanced input:focus:not(:focus-visible),
.focus-visible-enhanced select:focus:not(:focus-visible),
.focus-visible-enhanced textarea:focus:not(:focus-visible),
.focus-visible-enhanced [tabindex]:not([tabindex="-1"]):focus:not(:focus-visible),
.focus-visible-enhanced .btn:focus:not(:focus-visible),
.focus-visible-enhanced .nav-item:focus:not(:focus-visible),
.focus-visible-enhanced .dropdown-item:focus:not(:focus-visible),
.focus-visible-enhanced .card-clickable:focus:not(:focus-visible),
.focus-visible-enhanced .list-item:focus:not(:focus-visible),
.focus-visible-enhanced .tab-item:focus:not(:focus-visible) {
  outline: none;
}
.focus-visible-enhanced [class*=button]:focus-visible,
.focus-visible-enhanced [class*=card]:focus-visible,
.focus-visible-enhanced [class*=chip]:focus-visible,
.focus-visible-enhanced [class*=badge]:focus-visible,
.focus-visible-enhanced [class*=nav]:focus-visible,
.focus-visible-enhanced [class*=dropdown]:focus-visible,
.focus-visible-enhanced [class*=checkbox]:focus-visible,
.focus-visible-enhanced [class*=radio]:focus-visible,
.focus-visible-enhanced [class*=toggle]:focus-visible,
.focus-visible-enhanced [class*=tabs]:focus-visible,
.focus-visible-enhanced [class*=modal]:focus-visible,
.focus-visible-enhanced [class*=action]:focus-visible {
  outline: none;
  box-shadow: none;
}
.focus-visible-enhanced input:focus-visible,
.focus-visible-enhanced select:focus-visible,
.focus-visible-enhanced textarea:focus-visible {
  outline: none;
  box-shadow: none;
}
.focus-visible-enhanced .btn-danger:focus-visible,
.focus-visible-enhanced .button-danger:focus-visible,
.focus-visible-enhanced [class*=danger]:focus-visible {
  outline: none;
  box-shadow: none;
}
.focus-visible-enhanced .btn-success:focus-visible,
.focus-visible-enhanced .button-success:focus-visible,
.focus-visible-enhanced [class*=success]:focus-visible {
  outline: none;
  box-shadow: none;
}
.focus-visible-enhanced .btn-warning:focus-visible,
.focus-visible-enhanced .button-warning:focus-visible,
.focus-visible-enhanced [class*=warning]:focus-visible {
  outline: none;
  box-shadow: none;
}
.focus-visible-enhanced .skip-link:focus-visible {
  outline: none;
  box-shadow: none;
}
.focus-visible-enhanced .modal:focus-visible,
.focus-visible-enhanced .dialog:focus-visible,
.focus-visible-enhanced [role=dialog]:focus-visible,
.focus-visible-enhanced [role=alertdialog]:focus-visible {
  outline: none;
  box-shadow: none;
}
.focus-visible-enhanced .nav-item:focus-visible,
.focus-visible-enhanced .navigation-item:focus-visible,
.focus-visible-enhanced .menu-item:focus-visible {
  outline: none;
  box-shadow: none;
}

button.touch-target,
a.touch-target,
[role=button].touch-target,
.btn.touch-target,
input[type=button].touch-target,
input[type=submit].touch-target,
input[type=reset].touch-target {
  position: relative;
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
}
button.touch-target:focus-visible,
a.touch-target:focus-visible,
[role=button].touch-target:focus-visible,
.btn.touch-target:focus-visible,
input[type=button].touch-target:focus-visible,
input[type=submit].touch-target:focus-visible,
input[type=reset].touch-target:focus-visible {
  outline: none;
}
button.touch-target::before,
a.touch-target::before,
[role=button].touch-target::before,
.btn.touch-target::before,
input[type=button].touch-target::before,
input[type=submit].touch-target::before,
input[type=reset].touch-target::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 44px);
  height: max(100%, 44px);
  pointer-events: none;
}
button.touch-target > *,
a.touch-target > *,
[role=button].touch-target > *,
.btn.touch-target > *,
input[type=button].touch-target > *,
input[type=submit].touch-target > *,
input[type=reset].touch-target > * {
  min-height: initial;
}
button.touch-target-lg,
a.touch-target-lg,
[role=button].touch-target-lg,
.btn.touch-target-lg,
input[type=button].touch-target-lg,
input[type=submit].touch-target-lg,
input[type=reset].touch-target-lg {
  min-height: 48px;
  min-width: 48px;
  padding: var(--space-3) var(--space-4);
}
button.touch-target-lg:focus-visible,
a.touch-target-lg:focus-visible,
[role=button].touch-target-lg:focus-visible,
.btn.touch-target-lg:focus-visible,
input[type=button].touch-target-lg:focus-visible,
input[type=submit].touch-target-lg:focus-visible,
input[type=reset].touch-target-lg:focus-visible {
  outline: none;
}
button.touch-target-lg::before,
a.touch-target-lg::before,
[role=button].touch-target-lg::before,
.btn.touch-target-lg::before,
input[type=button].touch-target-lg::before,
input[type=submit].touch-target-lg::before,
input[type=reset].touch-target-lg::before {
  width: max(100%, 48px);
  height: max(100%, 48px);
}
button.touch-target-lg > *,
a.touch-target-lg > *,
[role=button].touch-target-lg > *,
.btn.touch-target-lg > *,
input[type=button].touch-target-lg > *,
input[type=submit].touch-target-lg > *,
input[type=reset].touch-target-lg > * {
  min-height: initial;
}

button.touch-friendly,
a.touch-friendly,
[role=button].touch-friendly,
.btn.touch-friendly,
input[type=button].touch-friendly,
input[type=submit].touch-friendly,
input[type=reset].touch-friendly {
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
button.touch-friendly:focus-visible,
a.touch-friendly:focus-visible,
[role=button].touch-friendly:focus-visible,
.btn.touch-friendly:focus-visible,
input[type=button].touch-friendly:focus-visible,
input[type=submit].touch-friendly:focus-visible,
input[type=reset].touch-friendly:focus-visible {
  outline: none;
}
button.touch-friendly > *,
a.touch-friendly > *,
[role=button].touch-friendly > *,
.btn.touch-friendly > *,
input[type=button].touch-friendly > *,
input[type=submit].touch-friendly > *,
input[type=reset].touch-friendly > * {
  min-height: initial;
}

.touch-none {
  touch-action: none;
}

.touch-auto {
  touch-action: auto;
}

.touch-pan-x {
  touch-action: pan-x;
}

.touch-pan-y {
  touch-action: pan-y;
}

.touch-pan-left {
  touch-action: pan-left;
}

.touch-pan-right {
  touch-action: pan-right;
}

.touch-pan-up {
  touch-action: pan-up;
}

.touch-pan-down {
  touch-action: pan-down;
}

.touch-pinch-zoom {
  touch-action: pinch-zoom;
}

.touch-manipulation {
  touch-action: manipulation;
}

.contrast-high {
  color: var(--color-text);
  background-color: var(--color-surface-elevated);
}

.contrast-low {
  opacity: 0.9;
}

.readable {
  line-height: var(--leading-relaxed);
  letter-spacing: calc(var(--base-unit) * 0.015);
  font-size: max(var(--text-base), 16px);
}

.focus-trap {
  position: relative;
}
.focus-trap:focus-within {
  box-shadow: none;
}

[role=status]:empty,
[role=alert]:empty {
  display: none;
}

[data-high-contrast=true] {
  --color-text: var(--theme-text);
  --color-text-muted: var(--theme-text-muted);
  --color-text-subtle: var(--theme-text-subtle);
  --color-canvas: var(--theme-canvas);
  --color-surface: var(--theme-surface);
  --color-surface-elevated: var(--theme-surface-elevated);
  --color-border: var(--theme-border);
  --color-primary: var(--theme-primary);
  --color-primary-hover: var(--theme-primary-hover);
  --color-error: var(--theme-error);
  --color-success: var(--theme-success);
  --color-warning: var(--theme-warning);
  --hc-shadow-sm: 0 0 0 1px var(--theme-border);
  --hc-shadow-md: 0 0 0 2px var(--theme-border);
  --hc-shadow-lg: 0 0 0 3px var(--theme-border);
}
[data-high-contrast=true] * {
  border-color: currentColor;
}

@media (prefers-color-scheme: dark) {
  [data-high-contrast=true] {
    --color-text: var(--theme-text);
    --color-text-muted: var(--theme-text-muted);
    --color-text-subtle: var(--theme-text-subtle);
    --color-canvas: var(--theme-canvas);
    --color-surface: var(--theme-surface);
    --color-surface-elevated: var(--theme-surface-elevated);
    --color-border: var(--theme-text);
    --color-primary: var(--theme-primary);
    --color-primary-hover: var(--theme-primary-hover);
    --color-error: var(--theme-error);
    --color-success: var(--theme-success);
    --color-warning: var(--theme-warning);
  }
}
.app-shell {
  --container-padding: var(--space-md);
  --container-gap: var(--space-sm);
}
@media (max-width: 767px) {
  .app-shell {
    --container-padding: calc(var(--container-padding) * 0.75);
    --container-gap: calc(var(--container-gap) * 0.75);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .app-shell {
    --container-padding: calc(var(--container-padding) * 0.875);
  }
}

.sidebar {
  --container-padding: var(--space-sm);
  --container-gap: var(--space-xs);
}
.sidebar[data-collapsed=true] {
  --container-padding: var(--space-xs);
  --container-gap: 0;
}

.main-content {
  --container-padding: var(--space-lg);
  --container-gap: var(--space-md);
}
@media (max-width: 767px) {
  .main-content {
    --container-padding: var(--space-md);
    --container-gap: var(--space-sm);
  }
}

.header {
  --container-padding: var(--space-md);
  --container-gap: var(--space-sm);
}

.app-sidebar-logo {
  display: flex;
  align-items: center;
  padding: var(--space-4);
  border-bottom: var(--border-1) solid var(--color-border);
}
.app-sidebar-brand {
  font-weight: var(--font-bold);
  font-size: var(--text-lg);
  color: var(--color-text);
}
.app-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2) 0;
}
.app-sidebar-footer {
  border-top: var(--border-1) solid var(--color-border);
  margin-top: auto;
}

.app-header-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-10);
  height: var(--space-10);
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}
.app-header-toggle:hover {
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-surface) 95%, var(--color-text));
}
.app-header-title-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.app-header-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0;
  line-height: 1.2;
}
.app-header-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.2;
}
.app-header-action {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.app-header-height {
  height: var(--header-height);
}

.app-content-offset {
  padding-top: var(--header-height);
}

@media (max-width: 767px) {
  .mobile-shell-stack {
    flex-direction: column;
    gap: var(--space-2);
  }
}

.shell-backdrop {
  background: var(--color-canvas);
  opacity: var(--opacity-80);
  z-index: var(--z-overlay);
  backdrop-filter: blur(var(--blur-sm, 2px));
}

.shell-transition {
  transition: var(--app-shell-transition);
}

.shell-transition-fast {
  transition: all var(--shell-transition-fast) var(--ease-out);
}

.container-aware {
  padding: var(--container-padding, var(--space-6));
  gap: var(--container-gap, var(--space-4));
}

@media (max-width: 767px) {
  .container-responsive {
    --container-padding: calc(var(--container-padding) * 0.75);
    --container-gap: calc(var(--container-gap) * 0.75);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .container-responsive {
    --container-padding: calc(var(--container-padding) * 0.875);
  }
}

@media print {
  .print-hide-shell {
    display: none;
  }
  .print-show-content {
    margin: 0;
    padding: 0;
    width: 100%;
  }
}
.icon-dynamic {
  font-size: var(--icon-font-size, var(--text-base));
  color: var(--color-primary, var(--color-text));
  width: var(--icon-size, 1em);
  height: var(--icon-size, 1em);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-container-dynamic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size, 2rem);
  height: var(--icon-size, 2rem);
  border-radius: var(--radius-md);
  background: var(--icon-background, transparent);
}
.icon-container-dynamic .icon,
.icon-container-dynamic i {
  color: var(--color-primary);
  flex-shrink: 0;
  font-size: var(--icon-base);
  margin-right: var(--space-2);
}
.icon-container-dynamic .icon,
.icon-container-dynamic i {
  font-size: var(--icon-font-size, var(--text-xl));
  color: var(--color-primary, var(--color-text));
}

.value-dynamic {
  color: var(--color-text);
  font-weight: var(--value-weight, var(--font-semibold));
  font-size: var(--value-size, var(--text-base));
}

.size-dynamic {
  width: auto;
  height: auto;
}

.fill-dynamic {
  background: var(--color-primary);
  transition: background var(--duration-normal) var(--ease-out);
}

@media (min-width: 640px) {
  .sm\:icon-dynamic {
    font-size: var(--icon-font-size, var(--text-base));
    color: var(--color-primary, var(--color-text));
  }
  .sm\:value-dynamic {
    color: var(--color-text);
  }
  .sm\:size-dynamic {
    width: auto;
    height: auto;
  }
}
@media (min-width: 768px) {
  .md\:icon-dynamic {
    font-size: var(--icon-font-size, var(--text-base));
    color: var(--color-primary, var(--color-text));
  }
  .md\:value-dynamic {
    color: var(--color-text);
  }
  .md\:size-dynamic {
    width: auto;
    height: auto;
  }
}
@media (min-width: 1024px) {
  .lg\:icon-dynamic {
    font-size: var(--icon-font-size, var(--text-base));
    color: var(--color-primary, var(--color-text));
  }
  .lg\:value-dynamic {
    color: var(--color-text);
  }
  .lg\:size-dynamic {
    width: auto;
    height: auto;
  }
}
@media (min-width: 1280px) {
  .xl\:icon-dynamic {
    font-size: var(--icon-font-size, var(--text-base));
    color: var(--color-primary, var(--color-text));
  }
  .xl\:value-dynamic {
    color: var(--color-text);
  }
  .xl\:size-dynamic {
    width: auto;
    height: auto;
  }
}
@media (min-width: 640px) {
  .sm\\:progress-dynamic {
    width: var(--progress-width, 0%);
  }
  .sm\\:icon-dynamic {
    font-size: var(--icon-font-size, var(--text-base));
    color: var(--color-primary, var(--color-text));
  }
  .sm\\:value-dynamic {
    color: var(--color-text);
  }
  .sm\\:size-dynamic {
    width: auto;
    height: auto;
  }
}
@media (min-width: 768px) {
  .md\\:progress-dynamic {
    width: var(--progress-width, 0%);
  }
  .md\\:icon-dynamic {
    font-size: var(--icon-font-size, var(--text-base));
    color: var(--color-primary, var(--color-text));
  }
  .md\\:value-dynamic {
    color: var(--color-text);
  }
  .md\\:size-dynamic {
    width: auto;
    height: auto;
  }
}
@media (min-width: 1024px) {
  .lg\\:progress-dynamic {
    width: var(--progress-width, 0%);
  }
  .lg\\:icon-dynamic {
    font-size: var(--icon-font-size, var(--text-base));
    color: var(--color-primary, var(--color-text));
  }
  .lg\\:value-dynamic {
    color: var(--color-text);
  }
  .lg\\:size-dynamic {
    width: auto;
    height: auto;
  }
}
@media (min-width: 1280px) {
  .xl\\:progress-dynamic {
    width: var(--progress-width, 0%);
  }
  .xl\\:icon-dynamic {
    font-size: var(--icon-font-size, var(--text-base));
    color: var(--color-primary, var(--color-text));
  }
  .xl\\:value-dynamic {
    color: var(--color-text);
  }
  .xl\\:size-dynamic {
    width: auto;
    height: auto;
  }
}
.status-success {
  background: color-mix(in srgb, var(--color-success) 10%, var(--color-surface));
  color: var(--color-success);
  border-color: var(--color-success);
}

.status-success-light {
  background: color-mix(in srgb, var(--color-success) 10%, var(--color-surface));
  color: var(--color-success);
  border-color: var(--color-success);
}

.status-warning {
  background: color-mix(in srgb, var(--color-warning) 10%, var(--color-surface));
  color: var(--color-warning);
  border-color: var(--color-warning);
}

.status-warning-light {
  background: color-mix(in srgb, var(--color-warning) 10%, var(--color-surface));
  color: var(--color-warning);
  border-color: var(--color-warning);
}

.status-error {
  background: color-mix(in srgb, var(--color-error) 10%, var(--color-surface));
  color: var(--color-error);
  border-color: var(--color-error);
}

.status-error-light {
  background: color-mix(in srgb, var(--color-error) 10%, var(--color-surface));
  color: var(--color-error);
  border-color: var(--color-error);
}

.status-info {
  background: color-mix(in srgb, var(--color-info) 10%, var(--color-surface));
  color: var(--color-info);
  border-color: var(--color-info);
}

.status-info-light {
  background: color-mix(in srgb, var(--color-info) 10%, var(--color-surface));
  color: var(--color-info);
  border-color: var(--color-info);
}

.status-pending {
  background: var(--color-surface);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

.status-pending-light {
  background: var(--color-surface);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

.status-active {
  background: color-mix(in srgb, var(--color-success) 10%, var(--color-surface));
  color: var(--color-success);
  border-color: var(--color-success);
}

.status-active-light {
  background: color-mix(in srgb, var(--color-success) 10%, var(--color-surface));
  color: var(--color-success);
  border-color: var(--color-success);
}

.status-inactive {
  background: var(--color-surface);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

.status-inactive-light {
  background: var(--color-surface);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

.status-primary {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.status-primary-light {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.status-dot {
  width: var(--space-2);
  height: var(--space-2);
  background: currentColor;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.status-dot-pulse {
  animation: pulse var(--duration-slow) infinite;
}
.status-dot-success {
  background: var(--color-success);
}
.status-dot-warning {
  background: var(--color-warning);
}
.status-dot-error {
  background: var(--color-error);
}
.status-dot-info {
  background: var(--color-info);
}
.status-dot-pending {
  background: var(--color-text-muted);
}
.status-dot-active {
  background: var(--color-success);
}
.status-dot-inactive {
  background: var(--color-text-muted);
}
.status-dot-primary {
  background: var(--color-primary);
}

.status-text {
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
}
.status-text-success {
  color: var(--color-success);
}
.status-text-warning {
  color: var(--color-warning);
}
.status-text-error {
  color: var(--color-error);
}
.status-text-info {
  color: var(--color-info);
}
.status-text-pending {
  color: var(--color-text-muted);
}
.status-text-active {
  color: var(--color-success);
}
.status-text-inactive {
  color: var(--color-text-muted);
}
.status-text-primary {
  color: var(--color-primary);
}

.size-xs {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  min-height: var(--space-6);
  gap: var(--space-1);
}

.size-sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  min-height: var(--space-8);
  gap: var(--space-1);
}

.size-md {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  min-height: var(--space-10);
  gap: var(--space-2);
}

.size-lg {
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-lg);
  min-height: var(--space-12);
  gap: var(--space-3);
}

.size-xl {
  padding: var(--space-6) var(--space-8);
  font-size: var(--text-xl);
  min-height: var(--space-16);
  gap: var(--space-4);
}

.priority-critical {
  background: color-mix(in srgb, var(--color-error) 10%, var(--color-surface));
  color: var(--color-error-dark);
  border-color: var(--color-error);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.priority-high {
  background: color-mix(in srgb, var(--color-warning) 10%, var(--color-surface));
  color: var(--color-warning-dark);
  border-color: var(--color-warning);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.priority-medium {
  background: color-mix(in srgb, var(--color-info) 10%, var(--color-surface));
  color: var(--color-info-dark);
  border-color: var(--color-info);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.priority-low {
  background: var(--color-surface);
  color: var(--color-text-muted);
  border-color: var(--color-border);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.status-primary\! {
  background: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.status-success\! {
  background: color-mix(in srgb, var(--color-success) 10%, var(--color-surface)) !important;
  color: var(--color-success) !important;
  border-color: var(--color-success) !important;
}

.status-warning\! {
  background: color-mix(in srgb, var(--color-warning) 10%, var(--color-surface)) !important;
  color: var(--color-warning) !important;
  border-color: var(--color-warning) !important;
}

.status-error\! {
  background: color-mix(in srgb, var(--color-error) 10%, var(--color-surface)) !important;
  color: var(--color-error) !important;
  border-color: var(--color-error) !important;
}

:root,
[data-theme=light],
[data-theme=default] {
  --theme-canvas: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  --theme-surface: #fafbfc;
  --theme-surface-elevated: #f4f5f7;
  --theme-text: #0f172a;
  --theme-text-muted: #475569;
  --theme-text-subtle: #94a3b8;
  --theme-border: #e2e8f0;
  --theme-text-inverse: #f8fafc;
  --theme-primary: #4687f1;
  --theme-primary-hover: #2d67e6;
  --theme-primary-active: #1e4dcf;
  --theme-secondary: #4c566a;
  --theme-secondary-hover: #3f4859;
  --theme-secondary-active: #323a48;
  --theme-success: #10b981;
  --theme-warning: #f59e0b;
  --theme-error: #ef4444;
  --theme-info: #06b6d4;
  --theme-primary-gradient: linear-gradient(calc(135deg * var(--φ-inv)), #60a5fa 0%, #3b82f6 61.8%, #2563eb 100%);
  --theme-secondary-gradient: linear-gradient(calc(135deg * var(--φ-inv)), #749dd5 0%, #446ca8 61.8%, #11488b 100%);
  --theme-success-gradient: linear-gradient(calc(135deg * var(--φ-inv)), #34d399 0%, #10b981 61.8%, #059669 100%);
  --theme-warning-gradient: linear-gradient(calc(135deg * var(--φ-inv)), #fbbf24 0%, #f59e0b 61.8%, #d97706 100%);
  --theme-error-gradient: linear-gradient(calc(135deg * var(--φ-inv)), #f87171 0%, #ef4444 61.8%, #dc2626 100%);
  --theme-info-gradient: linear-gradient(calc(135deg * var(--φ-inv)), #22d3ee 0%, #06b6d4 61.8%, #0891b2 100%);
  --theme-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.05);
  --theme-shadow-sm: 0 2px 4px -1px rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04);
  --theme-shadow-md: 0 8px 25px -5px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);
  --theme-shadow-lg: 0 20px 40px -10px rgb(0 0 0 / 0.15), 0 8px 16px -4px rgb(0 0 0 / 0.1);
  --theme-shadow-xl: 0 32px 64px -12px rgb(0 0 0 / 0.25), 0 12px 24px -6px rgb(0 0 0 / 0.15);
  --theme-shadow-2xl: 0 48px 96px -16px rgb(0 0 0 / 0.35), 0 20px 40px -8px rgb(0 0 0 / 0.2);
  --theme-gradient-primary: linear-gradient(135deg, #60a5fa, #3b82f6, #2563eb);
  --theme-gradient-secondary: linear-gradient(135deg, #6f7a91, #4c566a, #2f3645);
  --theme-gradient-success: linear-gradient(135deg, #34d399, #10b981, #059669);
  --theme-gradient-warning: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
  --theme-gradient-error: linear-gradient(135deg, #f87171, #ef4444, #dc2626);
  --theme-gradient-info: linear-gradient(135deg, #22d3ee, #06b6d4, #0891b2);
  --theme-bg-gradient-primary: linear-gradient(135deg, #dbeafe, #bfdbfe, #93c5fd);
  --theme-bg-gradient-secondary: linear-gradient(135deg, #e1e4eb, #cdd2dc, #b8becb);
  --theme-bg-gradient-success: linear-gradient(135deg, #d1fae5, #a7f3d0, #6ee7b7);
  --theme-bg-gradient-warning: linear-gradient(135deg, #fef3c7, #fde68a, #fcd34d);
  --theme-bg-gradient-error: linear-gradient(135deg, #fee2e2, #fecaca, #fca5a5);
  --theme-bg-gradient-info: linear-gradient(135deg, #e0f2fe, #bae6fd, #7dd3fc);
  --theme-gradient-neutral: linear-gradient(180deg,
    var(--theme-surface-elevated) 0%,
    color-mix(in srgb, var(--theme-border) 3%, var(--theme-surface)) 100%);
  --theme-gradient-subtle: linear-gradient(180deg,
    var(--theme-canvas) 0%,
    color-mix(in srgb, var(--theme-border) 2%, var(--theme-canvas)) 100%);
  --theme-gradient-surface: linear-gradient(180deg,
    var(--theme-surface-elevated) 0%,
    var(--theme-surface) 100%);
  --theme-glass-error-bg: color-mix(in srgb, var(--theme-error) 8%, transparent);
  --theme-glass-success-bg: color-mix(in srgb, var(--theme-success) 8%, transparent);
  --theme-glass-border-frost: color-mix(in srgb, var(--theme-border) 40%, transparent);
  --theme-glass-backdrop: color-mix(in srgb, var(--theme-surface) 75%, transparent);
}

[data-theme=dark] {
  --theme-canvas: #1a1f2e;
  --theme-surface: #282b36;
  --theme-surface-elevated: #32363f;
  --theme-text: #f8fafc;
  --theme-text-muted: #cbd5e1;
  --theme-text-subtle: #94a3b8;
  --theme-border: #3f4451;
  --theme-text-inverse: #1a1f2e;
  --theme-primary: #5b8fd9;
  --theme-primary-hover: #4a7bc2;
  --theme-primary-active: #3968ab;
  --theme-secondary: #5d6676;
  --theme-secondary-hover: #4b5362;
  --theme-secondary-active: #3c4350;
  --theme-success: #4aa67a;
  --theme-warning: #c79847;
  --theme-error: #c7686b;
  --theme-info: #4da8bb;
  --theme-primary-gradient: linear-gradient(135deg, #6b9de8 0%, #3968ab 100%);
  --theme-secondary-gradient: linear-gradient(calc(135deg * var(--φ-inv)), #3a4657 0%, #809cc4 61.8%, #1c2430 100%);
  --theme-success-gradient: linear-gradient(135deg, #4aa67a 0%, #3a8060 100%);
  --theme-warning-gradient: linear-gradient(135deg, #c79847 0%, #a67b38 100%);
  --theme-error-gradient: linear-gradient(135deg, #c7686b 0%, #a55458 100%);
  --theme-info-gradient: linear-gradient(135deg, #4da8bb 0%, #3a8a9b 100%);
  --theme-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.08);
  --theme-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
  --theme-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
  --theme-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.12);
  --theme-shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
  --theme-shadow-2xl: 0 16px 64px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.18);
  --theme-gradient-primary: linear-gradient(135deg, #7b9de8, var(--theme-primary), #4a7bc2);
  --theme-gradient-secondary: linear-gradient(135deg, #4d5566, #5d6676, #323845);
  --theme-gradient-success: linear-gradient(135deg, #5fb688, var(--theme-success), #3a8060);
  --theme-gradient-warning: linear-gradient(135deg, #d7a857, var(--theme-warning), #a67b38);
  --theme-gradient-error: linear-gradient(135deg, #d77a7d, var(--theme-error), #a55458);
  --theme-gradient-info: linear-gradient(135deg, #6db8cb, var(--theme-info), #3a8a9b);
  --theme-bg-gradient-primary: linear-gradient(135deg, #1e293b, #334155, #475569);
  --theme-bg-gradient-secondary: linear-gradient(135deg, #1e222c, #282f3a, #343c48);
  --theme-bg-gradient-success: linear-gradient(135deg, #064e3b, #065f46, #047857);
  --theme-bg-gradient-warning: linear-gradient(135deg, #451a03, #92400e, #c2410c);
  --theme-bg-gradient-error: linear-gradient(135deg, #450a0a, #7f1d1d, #991b1b);
  --theme-bg-gradient-info: linear-gradient(135deg, #0c4a6e, #0369a1, #0284c7);
  --theme-gradient-neutral: linear-gradient(180deg,
    var(--theme-surface-elevated) 0%,
    color-mix(in srgb, var(--theme-border) 8%, var(--theme-surface)) 100%);
  --theme-gradient-subtle: linear-gradient(180deg,
    var(--theme-canvas) 0%,
    color-mix(in srgb, var(--theme-border) 5%, var(--theme-canvas)) 100%);
  --theme-gradient-surface: linear-gradient(180deg,
    var(--theme-surface-elevated) 0%,
    var(--theme-surface) 100%);
  --theme-glass-error-bg: color-mix(in srgb, var(--theme-error) 15%, var(--theme-surface-elevated));
  --theme-glass-success-bg: color-mix(in srgb, var(--theme-success) 15%, var(--theme-surface-elevated));
  --theme-glass-border-frost: color-mix(in srgb, var(--theme-border) 60%, transparent);
  --theme-glass-backdrop: color-mix(in srgb, var(--theme-canvas) 85%, transparent);
}
[data-theme=dark] .toast {
  background: color-mix(in srgb, var(--color-surface-elevated) 95%, transparent);
  box-shadow: 0 0 0 1px var(--glass-border-light), var(--theme-shadow-md);
}

[data-theme=light] {
  color-scheme: light;
}

html {
  transition: color-scheme 0.3s ease;
}

*,
*::before,
*::after {
  color-scheme: inherit;
}

@media (prefers-contrast: high) {
  :root {
    --color-border: var(--theme-text);
    --color-text-muted: var(--theme-text);
  }
}
.rr-no-animations,
.rr-no-animations * {
  animation-duration: 0ms;
  animation-delay: 0ms;
  transition-duration: 0ms;
  transition-delay: 0ms;
}

@media (prefers-contrast: high) {
  .nav-item.active {
    outline: none;
    outline-offset: -2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .layout-container,
  .nav-item,
  .nav-item-icon,
  .nav-item-text,
  .user-info,
  .sidebar-backdrop {
    transition: none;
  }
}

[data-high-contrast=true] .toast {
  border: var(--border-2) solid var(--color-text);
  background: var(--color-surface-elevated);
}
[data-high-contrast=true] .toast-close:focus {
  outline: none;
  outline-offset: var(--space-0-5);
}
[data-high-contrast=true] .toast-action:focus {
  outline: none;
  outline-offset: var(--space-0-5);
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    transition: opacity var(--duration-fast) var(--ease-out);
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast-container-top-left .toast-entering, .toast-container-bottom-left .toast-entering, .toast-container-top-right .toast-entering, .toast-container-bottom-right .toast-entering, .toast-container-top-center .toast-entering, .toast-container-bottom-center .toast-entering,
  .toast-container-top-left .toast-exiting,
  .toast-container-bottom-left .toast-exiting,
  .toast-container-top-right .toast-exiting,
  .toast-container-bottom-right .toast-exiting,
  .toast-container-top-center .toast-exiting,
  .toast-container-bottom-center .toast-exiting {
    transform: none;
  }
}

@media (prefers-contrast: high) {
  .rr-datepicker-popup {
    border-width: 2px;
  }
}

@media (prefers-contrast: high) {
  .rr-datepicker-day-selected,
  .rr-datepicker-day-range-start,
  .rr-datepicker-day-range-end {
    outline: 2px solid var(--color-surface);
    outline-offset: -2px;
  }
}

@media (prefers-contrast: high) {
  .rr-datepicker-day-today::after {
    width: 6px;
    height: 6px;
    outline: 1px solid var(--color-canvas);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rr-datepicker-popup {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rr-datepicker-day,
  .rr-datepicker-nav,
  .rr-datepicker-btn {
    transition: none;
  }
}

/*# sourceMappingURL=main.css.map */