@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700;900&display=swap');
/* Design System index: imports only (compat version, без @layer) */
/* DS: reset.css - Minimal CSS reset */
/* layer: reset */
/* Remove default margins and paddings */
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* Honor the [hidden] attribute consistently across layers */
[hidden] {
  display: none !important;
}
/* Remove default margins */
body,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
dl, dd, ol, ul,
figure,
hr,
fieldset, legend {
  margin: 0;
}
/* Remove default padding */
ul,
ol {
  padding: 0;
}
/* Remove list styles */
ul,
ol {
  list-style: none;
}
/* Remove default quotes */
blockquote,
q {
  quotes: none;
}
blockquote::before,
blockquote::after,
q::before,
q::after {
  content: '';
  content: none;
}
/* Remove default table spacing */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* Remove default button/input styles */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
/* Remove default button styles */
button,
input {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
/* Remove default button/input border */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
/* Remove inner border and padding from Firefox */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
/* Remove default fieldset styles */
fieldset {
  padding: 0;
}
/* Remove default link styles */
a {
  text-decoration: none;
  color: inherit;
}
/* Remove default image spacing */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
/* Remove default iframe styles */
iframe {
  border: 0;
}
/* Remove default focus outline */
:focus {
  outline: none;
}
/* DS: backdrop.css - Backdrop effect tokens */
/* layer: tokens */
:root {
  /* Backdrop blur values */
  --ds-backdrop-blur-none: blur(0px);
  --ds-backdrop-blur-xs: blur(4px);
  --ds-backdrop-blur-sm: blur(8px);
  --ds-backdrop-blur-md: blur(12px);
  --ds-backdrop-blur-lg: blur(16px);
  --ds-backdrop-blur-xl: blur(24px);

  /* Backdrop opacity values */
  --ds-backdrop-opacity-subtle: var(--ds-opacity-10);
  --ds-backdrop-opacity-light: var(--ds-opacity-25);
  --ds-backdrop-opacity-medium: var(--ds-opacity-50);
  --ds-backdrop-opacity-heavy: var(--ds-opacity-75);
  --ds-backdrop-opacity-solid: var(--ds-opacity-100);

  /* Backdrop colors */
  --ds-backdrop-color-white: rgba(255, 255, 255, var(--ds-backdrop-opacity-medium));
  --ds-backdrop-color-black: rgba(0, 0, 0, var(--ds-backdrop-opacity-medium));
  --ds-backdrop-color-gray: rgba(0, 0, 0, var(--ds-backdrop-opacity-light));

  /* Modal backdrop */
  --ds-modal-backdrop-blur: var(--ds-backdrop-blur-md);
  --ds-modal-backdrop-color: var(--ds-backdrop-color-black);

  /* Dropdown backdrop */
  --ds-dropdown-backdrop-blur: var(--ds-backdrop-blur-sm);
  --ds-dropdown-backdrop-color: var(--ds-backdrop-color-gray);

  /* Tooltip backdrop */
  --ds-tooltip-backdrop-blur: var(--ds-backdrop-blur-xs);
  --ds-tooltip-backdrop-color: var(--ds-backdrop-color-black);
}
/* DS: blur.css - Blur effect tokens */
/* layer: tokens */
:root {
  /* Blur values */
  --ds-blur-none: blur(0px);
  --ds-blur-xs: blur(2px);
  --ds-blur-sm: blur(4px);
  --ds-blur-md: blur(6px);
  --ds-blur-lg: blur(8px);
  --ds-blur-xl: blur(12px);
  --ds-blur-2xl: blur(16px);
  --ds-blur-3xl: blur(24px);

  /* Component blur values */
  --ds-card-blur: var(--ds-blur-none);
  --ds-modal-blur: var(--ds-blur-none);
  --ds-dropdown-blur: var(--ds-blur-none);
  --ds-tooltip-blur: var(--ds-blur-none);
  --ds-popover-blur: var(--ds-blur-sm);

  /* Filter blur for effects */
  --ds-filter-blur-subtle: var(--ds-blur-xs);
  --ds-filter-blur-normal: var(--ds-blur-sm);
  --ds-filter-blur-strong: var(--ds-blur-md);
}
/* DS skeleton: 01-tokens/borders.css */
/* This file is generated as a placeholder for the design system structure. */
/* layer: tokens */
/* tokens: borders */
:root {
  /* Border radius scale */
  --ds-border-radius-none: 0px;
  --ds-border-radius-2xs: 2px;
  --ds-border-radius-xs: 4px;
  --ds-border-radius-s: 6px;
  --ds-border-radius-m: 8px;
  --ds-border-radius-l: 12px;
  --ds-border-radius-xl: 16px;
  --ds-border-radius-2xl: 24px;
  --ds-border-radius-full: 50%;

  /* Component-specific border radii */
  --ds-border-radius-button: var(--ds-border-radius-2xs);
  --ds-border-radius-input: var(--ds-border-radius-xs);
  --ds-border-radius-card: var(--ds-border-radius-m);
  --ds-border-radius-modal: var(--ds-border-radius-m);
  --ds-border-radius-tooltip: var(--ds-border-radius-xs);
  --ds-border-radius-dropdown: var(--ds-border-radius-xs);
  --ds-border-radius-badge: var(--ds-border-radius-2xl);
  --ds-border-radius-tag: var(--ds-border-radius-xs);
  --ds-border-radius-pill: var(--ds-border-radius-full);

  /* Border width scale */
  --ds-border-width-none: 0px;
  --ds-border-width-thin: 1px;
  --ds-border-width-thick: 2px;
  --ds-border-width-heavy: 3px;

  /* Border style scale */
  --ds-border-style-solid: solid;
  --ds-border-style-dashed: dashed;
  --ds-border-style-dotted: dotted;
  --ds-border-style-double: double;

  /* Border colors */
  --ds-border-color-default: rgba(0, 0, 0, 0.12);
  --ds-border-color-light: rgba(0, 0, 0, 0.06);
  --ds-border-color-dark: rgba(0, 0, 0, 0.24);
  --ds-border-color-accent: rgba(24, 144, 255, 0.2);

  /* Component-specific border colors */
  --ds-border-color-input: rgba(0, 0, 0, 0.12);
  --ds-border-color-input-hover: rgba(0, 0, 0, 0.24);
  --ds-border-color-input-focus: rgba(24, 144, 255, 1);
  --ds-border-color-input-error: rgba(245, 34, 45, 1);
  --ds-border-color-input-disabled: rgba(0, 0, 0, 0.06);

  --ds-border-color-card: rgba(0, 0, 0, 0.06);
  --ds-border-color-divider: rgba(0, 0, 0, 0.06);
  --ds-border-color-modal: rgba(0, 0, 0, 0.12);

  /* Legacy border names */
  --ds-border-radius-sm: var(--ds-border-radius-xs);
  --ds-border-radius-md: var(--ds-border-radius-m);
  --ds-border-radius-lg: var(--ds-border-radius-l);
  --ds-border-radius-xl-legacy: var(--ds-border-radius-xl);
}
/* DS: breakpoints.css - Responsive breakpoints */
/* layer: tokens */
:root {
  /* Breakpoint values */
  --ds-breakpoint-xs: 480px;
  --ds-breakpoint-sm: 640px;
  --ds-breakpoint-md: 768px;
  --ds-breakpoint-lg: 1024px;
  --ds-breakpoint-xl: 1280px;
  --ds-breakpoint-2xl: 1536px;

  /* Container max-widths */
  --ds-container-xs: 100%;
  --ds-container-sm: 100%;
  --ds-container-md: 768px;
  --ds-container-lg: 1024px;
  --ds-container-xl: 1280px;
  --ds-container-2xl: 1536px;

  /* Grid columns */
  --ds-grid-cols: 12;
  --ds-grid-gap-xs: var(--ds-spacing-xs);
  --ds-grid-gap-sm: var(--ds-spacing-s);
  --ds-grid-gap-md: var(--ds-spacing-m);
  --ds-grid-gap-lg: var(--ds-spacing-l);
  --ds-grid-gap-xl: var(--ds-spacing-xl);
}
/* DS: charts.css - Chart visualization tokens */
/* layer: tokens */
:root {
  /* Chart colors - primary palette */
  --ds-chart-color-1: #3b82f6;
  --ds-chart-color-2: #10b981;
  --ds-chart-color-3: #f59e0b;
  --ds-chart-color-4: #ef4444;
  --ds-chart-color-5: #8b5cf6;
  --ds-chart-color-6: #06b6d4;
  --ds-chart-color-7: #84cc16;
  --ds-chart-color-8: #f97316;
  --ds-chart-color-9: #ec4899;
  --ds-chart-color-10: #6b7280;

  /* Chart grid colors */
  --ds-chart-grid-color: rgba(0, 0, 0, 0.06);
  --ds-chart-grid-color-dark: rgba(0, 0, 0, 0.12);

  /* Chart axis colors */
  --ds-chart-axis-color: rgba(0, 0, 0, 0.24);
  --ds-chart-axis-label-color: rgba(0, 0, 0, 0.6);

  /* Chart background */
  --ds-chart-background: #ffffff;
  --ds-chart-background-secondary: #f8fafc;

  /* Chart tooltip */
  --ds-chart-tooltip-background: rgba(0, 0, 0, 0.8);
  --ds-chart-tooltip-color: #ffffff;
  --ds-chart-tooltip-border-radius: var(--ds-border-radius-s);

  /* Chart legend */
  --ds-chart-legend-color: rgba(0, 0, 0, 0.6);
  --ds-chart-legend-hover-color: rgba(0, 0, 0, 0.8);

  /* Chart sizes */
  --ds-chart-line-width-thin: 1px;
  --ds-chart-line-width-normal: 2px;
  --ds-chart-line-width-thick: 3px;

  --ds-chart-point-size-small: 4px;
  --ds-chart-point-size-medium: 6px;
  --ds-chart-point-size-large: 8px;

  --ds-chart-bar-width: 16px;
  --ds-chart-bar-gap: 4px;
}
/* DS skeleton: 01-tokens/colors.css */
/* This file is generated as a placeholder for the design system structure. */
/* layer: tokens */
/* tokens: colors */
:root {
  /* Neutral Gray Scale */
  --ds-color-neutral-50: #f8fafc;
  --ds-color-neutral-100: #f1f5f9;
  --ds-color-neutral-200: #e2e8f0;
  --ds-color-neutral-300: #cbd5e1;
  --ds-color-neutral-400: #94a3b8;
  --ds-color-neutral-500: #64748b;
  --ds-color-neutral-600: #475569;
  --ds-color-neutral-700: #334155;
  --ds-color-neutral-800: #1e293b;
  --ds-color-neutral-900: #0f172a;
  --ds-color-neutral-950: #020617;

  /* Primary Blue Scale */
  --ds-color-blue-50: #eff6ff;
  --ds-color-blue-100: #dbeafe;
  --ds-color-blue-200: #bfdbfe;
  --ds-color-blue-300: #93c5fd;
  --ds-color-blue-400: #60a5fa;
  --ds-color-blue-500: #3b82f6;
  --ds-color-blue-600: #2563eb;
  --ds-color-blue-700: #1d4ed8;
  --ds-color-blue-800: #1e40af;
  --ds-color-blue-900: #1e3a8a;
  --ds-color-blue-950: #172554;

  /* Semantic Colors */
  --ds-color-red-50: #fef2f2;
  --ds-color-red-100: #fee2e2;
  --ds-color-red-200: #fecaca;
  --ds-color-red-300: #fca5a5;
  --ds-color-red-400: #f87171;
  --ds-color-red-500: #ef4444;
  --ds-color-red-600: #dc2626;
  --ds-color-red-700: #b91c1c;
  --ds-color-red-800: #991b1b;
  --ds-color-red-900: #7f1d1d;
  --ds-color-red-950: #450a0a;

  --ds-color-green-50: #f0fdf4;
  --ds-color-green-100: #dcfce7;
  --ds-color-green-200: #bbf7d0;
  --ds-color-green-300: #86efac;
  --ds-color-green-400: #4ade80;
  --ds-color-green-500: #22c55e;
  --ds-color-green-600: #16a34a;
  --ds-color-green-700: #15803d;
  --ds-color-green-800: #166534;
  --ds-color-green-900: #14532d;
  --ds-color-green-950: #052e16;

  --ds-color-yellow-50: #fffbeb;
  --ds-color-yellow-100: #fef3c7;
  --ds-color-yellow-200: #fde68a;
  --ds-color-yellow-300: #fcd34d;
  --ds-color-yellow-400: #fbbf24;
  --ds-color-yellow-500: #f59e0b;
  --ds-color-yellow-600: #d97706;
  --ds-color-yellow-700: #b45309;
  --ds-color-yellow-800: #92400e;
  --ds-color-yellow-900: #78350f;
  --ds-color-yellow-950: #451a03;

  --ds-color-orange-50: #fff7ed;
  --ds-color-orange-100: #ffedd5;
  --ds-color-orange-200: #fed7aa;
  --ds-color-orange-300: #fdba74;
  --ds-color-orange-400: #fb923c;
  --ds-color-orange-500: #f97316;
  --ds-color-orange-600: #ea580c;
  --ds-color-orange-700: #c2410c;
  --ds-color-orange-800: #9a3412;
  --ds-color-orange-900: #7c2d12;
  --ds-color-orange-950: #431407;

  /* Transparent/Alpha variants */
  --ds-color-overlay-light: rgba(255, 255, 255, 0.8);
  --ds-color-overlay-dark: rgba(0, 0, 0, 0.4);
  --ds-color-backdrop: rgba(0, 0, 0, 0.5);

  /* Special colors */
  --ds-color-white: #ffffff;
  --ds-color-black: #000000;
  --ds-color-transparent: transparent;

  /* Status colors (semantic aliases) */
  --ds-color-status-error: var(--ds-color-red-500);
  --ds-color-status-success: var(--ds-color-green-500);
  --ds-color-status-warning: var(--ds-color-yellow-500);
  --ds-color-status-info: var(--ds-color-blue-500);
  --ds-color-status-default: var(--ds-color-neutral-500);
  --ds-color-status-processing: var(--ds-color-blue-500);

  /* Brand colors */
  --ds-color-brand-primary: var(--ds-color-blue-600);
  --ds-color-brand-secondary: var(--ds-color-neutral-700);
  --ds-color-brand-accent: var(--ds-color-blue-500);

  /* Legacy color names for compatibility */
  --ds-color-gray-50: var(--ds-color-neutral-50);
  --ds-color-gray-100: var(--ds-color-neutral-100);
  --ds-color-gray-200: var(--ds-color-neutral-200);
  --ds-color-gray-300: var(--ds-color-neutral-300);
  --ds-color-gray-400: var(--ds-color-neutral-400);
  --ds-color-gray-500: var(--ds-color-neutral-500);
  --ds-color-gray-600: var(--ds-color-neutral-600);
  --ds-color-gray-700: var(--ds-color-neutral-700);
  --ds-color-gray-800: var(--ds-color-neutral-800);
  --ds-color-gray-900: var(--ds-color-neutral-900);
}
/* DS skeleton: 01-tokens/focus.css */
/* This file is generated as a placeholder for the design system structure. */
/* layer: tokens */
/* tokens: focus */
:root {
  /* Focus ring colors */
  --ds-focus-ring-color: rgba(24, 144, 255, 0.6);
  --ds-focus-ring-color-dark: rgba(24, 144, 255, 0.8);
  --ds-focus-ring-color-error: rgba(245, 34, 45, 0.6);
  --ds-focus-ring-color-success: rgba(82, 196, 26, 0.6);
  --ds-focus-ring-color-warning: rgba(250, 173, 20, 0.6);

  /* Focus ring dimensions */
  --ds-focus-ring-width: 2px;
  --ds-focus-ring-width-thick: 3px;
  --ds-focus-ring-offset: 1px;
  --ds-focus-ring-offset-negative: -1px;

  /* Focus ring styles */
  --ds-focus-ring-style: solid;
  --ds-focus-ring-border-radius: var(--ds-border-radius-s);

  /* Focus ring box-shadows */
  --ds-focus-ring-shadow: 0 0 0 var(--ds-focus-ring-width) var(--ds-focus-ring-color);
  --ds-focus-ring-shadow-thick: 0 0 0 var(--ds-focus-ring-width-thick) var(--ds-focus-ring-color);
  --ds-focus-ring-shadow-error: 0 0 0 var(--ds-focus-ring-width) var(--ds-focus-ring-color-error);
  --ds-focus-ring-shadow-success: 0 0 0 var(--ds-focus-ring-width) var(--ds-focus-ring-color-success);
  --ds-focus-ring-shadow-warning: 0 0 0 var(--ds-focus-ring-width) var(--ds-focus-ring-color-warning);

  /* Focus ring with offset */
  --ds-focus-ring-shadow-offset: 0 0 0 var(--ds-focus-ring-width) var(--ds-focus-ring-color),
                                 0 0 0 calc(var(--ds-focus-ring-width) + var(--ds-focus-ring-offset)) transparent;

  /* Component-specific focus rings */
  --ds-focus-ring-button: var(--ds-focus-ring-shadow);
  --ds-focus-ring-input: var(--ds-focus-ring-shadow);
  --ds-focus-ring-select: var(--ds-focus-ring-shadow);
  --ds-focus-ring-checkbox: var(--ds-focus-ring-shadow);
  --ds-focus-ring-radio: var(--ds-focus-ring-shadow);
  --ds-focus-ring-tabs: var(--ds-focus-ring-shadow-offset);
  --ds-focus-ring-dropdown: var(--ds-focus-ring-shadow);
  --ds-focus-ring-modal: var(--ds-focus-ring-shadow-thick);

  /* High contrast focus rings */
  --ds-focus-ring-high-contrast: 0 0 0 2px rgba(255, 255, 255, 1),
                                  0 0 0 4px var(--ds-focus-ring-color);

  /* Keyboard-only focus (no mouse) */
  --ds-focus-ring-keyboard-only: var(--ds-focus-ring-shadow);

  /* Focus visible utilities */
  --ds-focus-visible-outline: 2px solid var(--ds-focus-ring-color);
  --ds-focus-visible-outline-offset: 2px;
  --ds-focus-visible-box-shadow: var(--ds-focus-ring-shadow);

  /* Legacy focus names */
  --ds-focus-outline-color: var(--ds-focus-ring-color);
  --ds-focus-outline-width: var(--ds-focus-ring-width);
  --ds-focus-box-shadow: var(--ds-focus-ring-shadow);
}
/* DS: icons.css - Icon system tokens */
/* layer: tokens */
:root {
  /* Icon sizes */
  --ds-icon-size-3xs: 12px;
  --ds-icon-size-2xs: 14px;
  --ds-icon-size-xs: 16px;
  --ds-icon-size-s: 18px;
  --ds-icon-size-m: 20px;
  --ds-icon-size-l: 24px;
  --ds-icon-size-xl: 28px;
  --ds-icon-size-2xl: 32px;
  --ds-icon-size-3xl: 40px;

  /* Icon colors */
  --ds-icon-color-primary: var(--ds-text-primary);
  --ds-icon-color-secondary: var(--ds-text-secondary);
  --ds-icon-color-tertiary: var(--ds-text-tertiary);
  --ds-icon-color-disabled: var(--ds-text-disabled);

  --ds-icon-color-success: var(--ds-status-success);
  --ds-icon-color-warning: var(--ds-status-warning);
  --ds-icon-color-error: var(--ds-status-error);
  --ds-icon-color-info: var(--ds-status-info);

  /* Icon button colors */
  --ds-icon-button-color: var(--ds-text-secondary);
  --ds-icon-button-color-hover: var(--ds-text-primary);
  --ds-icon-button-color-active: var(--ds-text-primary);
  --ds-icon-button-color-disabled: var(--ds-text-disabled);

  /* Icon spacing */
  --ds-icon-spacing-xs: var(--ds-spacing-3xs);
  --ds-icon-spacing-sm: var(--ds-spacing-2xs);
  --ds-icon-spacing-md: var(--ds-spacing-xs);
  --ds-icon-spacing-lg: var(--ds-spacing-s);

  /* Icon stroke width */
  --ds-icon-stroke-width-thin: 1px;
  --ds-icon-stroke-width-normal: 1.5px;
  --ds-icon-stroke-width-thick: 2px;

  /* Icon opacity */
  --ds-icon-opacity-disabled: 0.4;
  --ds-icon-opacity-subtle: 0.6;
  --ds-icon-opacity-normal: 1;
}
/* DS skeleton: 01-tokens/motion.css */
/* This file is generated as a placeholder for the design system structure. */
/* layer: tokens */
/* tokens: motion */
:root {
  /* Duration scale */
  --ds-motion-duration-instant: 0ms;
  --ds-motion-duration-fast: 150ms;
  --ds-motion-duration-normal: 300ms;
  --ds-motion-duration-slow: 500ms;
  --ds-motion-duration-slower: 700ms;

  /* Easing functions */
  --ds-motion-easing-linear: linear;
  --ds-motion-easing-in: cubic-bezier(0.4, 0, 1, 1);
  --ds-motion-easing-out: cubic-bezier(0, 0, 0.2, 1);
  --ds-motion-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ds-motion-easing-standard: cubic-bezier(0.25, 0.8, 0.25, 1);
  --ds-motion-easing-decelerate: cubic-bezier(0, 0, 0.6, 1);
  --ds-motion-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);

  /* Component-specific motion */
  --ds-motion-duration-button: var(--ds-motion-duration-fast);
  --ds-motion-duration-input: var(--ds-motion-duration-fast);
  --ds-motion-duration-modal: var(--ds-motion-duration-normal);
  --ds-motion-duration-dropdown: var(--ds-motion-duration-fast);
  --ds-motion-duration-tooltip: var(--ds-motion-duration-fast);
  --ds-motion-duration-toast: var(--ds-motion-duration-slow);
  --ds-motion-duration-loading: var(--ds-motion-duration-normal);

  --ds-motion-easing-button: var(--ds-motion-easing-standard);
  --ds-motion-easing-input: var(--ds-motion-easing-standard);
  --ds-motion-easing-modal: var(--ds-motion-easing-out);
  --ds-motion-easing-dropdown: var(--ds-motion-easing-standard);
  --ds-motion-easing-tooltip: var(--ds-motion-easing-standard);
  --ds-motion-easing-toast: var(--ds-motion-easing-out);
  --ds-motion-easing-loading: var(--ds-motion-easing-linear);

  /* Transition properties */
  --ds-motion-transition-all: all var(--ds-motion-duration-normal) var(--ds-motion-easing-standard);
  --ds-motion-transition-colors: color var(--ds-motion-duration-fast) var(--ds-motion-easing-standard),
                                background-color var(--ds-motion-duration-fast) var(--ds-motion-easing-standard),
                                border-color var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  --ds-motion-transition-shadow: box-shadow var(--ds-motion-duration-normal) var(--ds-motion-easing-standard);
  --ds-motion-transition-transform: transform var(--ds-motion-duration-normal) var(--ds-motion-easing-standard);
  --ds-motion-transition-opacity: opacity var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);

  /* Animation keyframes (definitions would go in base/animations.css) */
  --ds-motion-animation-fade-in: fadeIn;
  --ds-motion-animation-fade-out: fadeOut;
  --ds-motion-animation-slide-in-up: slideInUp;
  --ds-motion-animation-slide-in-down: slideInDown;
  --ds-motion-animation-slide-in-left: slideInLeft;
  --ds-motion-animation-slide-in-right: slideInRight;
  --ds-motion-animation-scale-in: scaleIn;
  --ds-motion-animation-scale-out: scaleOut;
  --ds-motion-animation-spin: spin;
  --ds-motion-animation-pulse: pulse;
  --ds-motion-animation-bounce: bounce;

  /* Reduced motion preferences */
  --ds-motion-duration-reduced: var(--ds-motion-duration-instant);
  --ds-motion-easing-reduced: var(--ds-motion-easing-linear);

  /* Legacy motion names */
  --ds-transition-fast: var(--ds-motion-duration-fast);
  --ds-transition-normal: var(--ds-motion-duration-normal);
  --ds-transition-slow: var(--ds-motion-duration-slow);
  --ds-easing-standard: var(--ds-motion-easing-standard);
}
/* DS: opacity.css - Opacity tokens */
/* layer: tokens */
:root {
  /* Opacity scale */
  --ds-opacity-0: 0;
  --ds-opacity-5: 0.05;
  --ds-opacity-10: 0.1;
  --ds-opacity-15: 0.15;
  --ds-opacity-20: 0.2;
  --ds-opacity-25: 0.25;
  --ds-opacity-30: 0.3;
  --ds-opacity-35: 0.35;
  --ds-opacity-40: 0.4;
  --ds-opacity-45: 0.45;
  --ds-opacity-50: 0.5;
  --ds-opacity-55: 0.55;
  --ds-opacity-60: 0.6;
  --ds-opacity-65: 0.65;
  --ds-opacity-70: 0.7;
  --ds-opacity-75: 0.75;
  --ds-opacity-80: 0.8;
  --ds-opacity-85: 0.85;
  --ds-opacity-90: 0.9;
  --ds-opacity-95: 0.95;
  --ds-opacity-100: 1;

  /* Semantic opacity values */
  --ds-opacity-disabled: var(--ds-opacity-40);
  --ds-opacity-subtle: var(--ds-opacity-60);
  --ds-opacity-overlay: var(--ds-opacity-50);
  --ds-opacity-backdrop: var(--ds-opacity-50);
  --ds-opacity-hover: var(--ds-opacity-80);
  --ds-opacity-active: var(--ds-opacity-90);
}
/* DS: tokens/radius.css - Border radius tokens */
/* layer: tokens */
:root {
  /* Border radius scale */
  --ds-border-radius-none: 0;
  --ds-border-radius-2xs: 0.125rem; /* 2px */
  --ds-border-radius-xs: 0.25rem;   /* 4px */
  --ds-border-radius-s: 0.375rem;   /* 6px */
  --ds-border-radius-m: 0.5rem;     /* 8px */
  --ds-border-radius-l: 0.75rem;    /* 12px */
  --ds-border-radius-xl: 1rem;      /* 16px */
  --ds-border-radius-2xl: 1.5rem;   /* 24px */
  --ds-border-radius-3xl: 2rem;     /* 32px */
  --ds-border-radius-full: 9999px;  /* Fully rounded */

  /* Semantic radius tokens */
  --ds-border-radius-button: var(--ds-border-radius-m);
  --ds-border-radius-input: var(--ds-border-radius-m);
  --ds-border-radius-card: var(--ds-border-radius-l);
  --ds-border-radius-modal: var(--ds-border-radius-xl);
  --ds-border-radius-tooltip: var(--ds-border-radius-s);
  --ds-border-radius-badge: var(--ds-border-radius-l);
  --ds-border-radius-avatar: var(--ds-border-radius-full);
  --ds-border-radius-checkbox: var(--ds-border-radius-2xs);
  --ds-border-radius-radio: var(--ds-border-radius-full);
  --ds-border-radius-switch: var(--ds-border-radius-full);
  --ds-border-radius-tab: var(--ds-border-radius-m);
  --ds-border-radius-dropdown: var(--ds-border-radius-m);
  --ds-border-radius-notification: var(--ds-border-radius-m);
  --ds-border-radius-progress: var(--ds-border-radius-full);
  --ds-border-radius-slider: var(--ds-border-radius-full);
  --ds-border-radius-spinner: var(--ds-border-radius-full);

  /* Component-specific radius */
  --ds-border-radius-accordion: var(--ds-border-radius-m);
  --ds-border-radius-alert: var(--ds-border-radius-m);
  --ds-border-radius-banner: var(--ds-border-radius-m);
  --ds-border-radius-breadcrumb: var(--ds-border-radius-2xs);
  --ds-border-radius-callout: var(--ds-border-radius-l);
  --ds-border-radius-collapse: var(--ds-border-radius-m);
  --ds-border-radius-drawer: var(--ds-border-radius-m);
  --ds-border-radius-empty: var(--ds-border-radius-l);
  --ds-border-radius-form: var(--ds-border-radius-m);
  --ds-border-radius-list: var(--ds-border-radius-m);
  --ds-border-radius-navbar: var(--ds-border-radius-m);
  --ds-border-radius-panel: var(--ds-border-radius-m);
  --ds-border-radius-popover: var(--ds-border-radius-m);
  --ds-border-radius-select: var(--ds-border-radius-m);
  --ds-border-radius-sidebar: var(--ds-border-radius-m);
  --ds-border-radius-stepper: var(--ds-border-radius-full);
  --ds-border-radius-table: var(--ds-border-radius-m);
  --ds-border-radius-tabs: var(--ds-border-radius-m);
  --ds-border-radius-toolbar: var(--ds-border-radius-m);
  --ds-border-radius-tree: var(--ds-border-radius-m);
  --ds-border-radius-wizard: var(--ds-border-radius-m);

  /* Interactive element radius */
  --ds-border-radius-hover: var(--ds-border-radius-s);
  --ds-border-radius-active: var(--ds-border-radius-xs);
  --ds-border-radius-focus: var(--ds-border-radius-2xs);
  --ds-border-radius-pressed: var(--ds-border-radius-xs);
}
/* DS: semantic tokens - Our complete design system */
/* Independent semantic tokens with direct values */
/* layer: tokens */
:root {
  /* Text colors - semantic */
  --ds-text-primary: #0f172a;
  --ds-text-secondary: #64748b;
  --ds-text-tertiary: #94a3b8;
  --ds-text-inverse: #ffffff;
  --ds-text-disabled: #cbd5e1;

  /* Status colors */
  --ds-status-error: #ef4444;
  --ds-status-success: #22c55e;
  --ds-status-warning: #f59e0b;
  --ds-status-info: #3b82f6;
  --ds-status-default: #64748b;
  --ds-status-processing: #3b82f6;

  /* Link colors */
  --ds-link-color: #3b82f6;
  --ds-link-color-hover: #2563eb;
  --ds-link-color-visited: #7c3aed;
  --ds-link-color-visited-hover: #6d28d9;
  --ds-link-obscure-color: #64748b;
  --ds-link-obscure-color-hover: #475569;
  --ds-link-obscure-color-disabled: #cbd5e1;
  --ds-link-obscure-color-visited: #64748b;
  --ds-link-obscure-color-visited-hover: #475569;

  /* Surface colors */
  --ds-surface-background: #ffffff;
  --ds-surface-background-inverted: #0f172a;
  --ds-surface-background-secondary: #f8fafc;
  --ds-surface-background-tertiary: #f1f5f9;

  /* Control backgrounds */
  --ds-control-background: #ffffff;
  --ds-control-background-hover: #f8fafc;
  --ds-control-background-active: #f1f5f9;
  --ds-control-background-disabled: #f8fafc;

  /* Border colors */
  --ds-border-color-default: rgba(0, 0, 0, 0.12);
  --ds-border-color-light: rgba(0, 0, 0, 0.06);
  --ds-border-color-dark: rgba(0, 0, 0, 0.24);

  /* Focus colors */
  --ds-focus-outline-color: #3b82f6;

  /* Input colors */
  --ds-input-border: rgba(0, 0, 0, 0.12);
  --ds-input-border-hover: rgba(0, 0, 0, 0.24);
  --ds-input-border-focus: #3b82f6;
  --ds-input-border-active: #3b82f6;
  --ds-input-border-error: #ef4444;
  --ds-input-border-error-hover: #dc2626;
  --ds-input-border-disabled: rgba(0, 0, 0, 0.06);

  --ds-input-text: #0f172a;
  --ds-input-text-disabled: #cbd5e1;
  --ds-input-background: #ffffff;
  --ds-input-background-disabled: #f8fafc;

  --ds-input-placeholder: #94a3b8;
  --ds-input-placeholder-hover: #64748b;
  --ds-input-placeholder-focus: #475569;
  --ds-input-placeholder-disabled: #cbd5e1;

  --ds-input-clear: #64748b;
  --ds-input-clear-hover: #475569;
  --ds-input-clear-focus: #0f172a;
  --ds-input-password-toggle: #64748b;
  --ds-input-password-toggle-hover: #475569;
  --ds-input-password-toggle-focus: #0f172a;

  --ds-input-shadow-active: 0 0 0 2px rgba(59, 130, 246, 0.2);
  --ds-input-shadow-error: 0 0 0 2px rgba(239, 68, 68, 0.2);

  /* Select colors */
  --ds-select-border: rgba(0, 0, 0, 0.12);
  --ds-select-border-hover: rgba(0, 0, 0, 0.24);
  --ds-select-border-pressed: rgba(0, 0, 0, 0.24);
  --ds-select-border-error: #ef4444;
  --ds-select-border-error-hover: #dc2626;
  --ds-select-background: #ffffff;
  --ds-select-background-disabled: #f8fafc;
  --ds-select-borderless-background-hover: #f8fafc;
  --ds-select-borderless-background-error: #fef2f2;
  --ds-select-borderless-background-error-hover: #fee2e2;

  --ds-select-arrow: #64748b;
  --ds-select-arrow-hover: #475569;
  --ds-select-arrow-disabled: #cbd5e1;

  --ds-select-text: #0f172a;
  --ds-select-text-filled: #0f172a;
  --ds-select-text-disabled: #cbd5e1;

  --ds-select-tag-background: #f1f5f9;
  --ds-select-tag-background-disabled: #f8fafc;
  --ds-select-tag-remove: #64748b;
  --ds-select-tag-remove-hover: #475569;
  --ds-select-option-text: #0f172a;
  --ds-select-option-text-secondary: #64748b;
  --ds-select-option-text-checked: #3b82f6;
  --ds-select-option-text-disabled: #cbd5e1;
  --ds-select-option-note: #64748b;
  --ds-select-option-note-disabled: #cbd5e1;
  --ds-select-option-background-hover: #f8fafc;

  --ds-select-clear: #64748b;
  --ds-select-clear-hover: #475569;
  --ds-select-clear-pressed: #0f172a;

  --ds-scrollbar-bg: #f1f5f9;
  --ds-scrollbar-shadow: rgba(0, 0, 0, 0.12);

  --ds-divider-color: rgba(0, 0, 0, 0.06);

  /* Button colors - Primary */
  --ds-button-primary-bg: #3b82f6;
  --ds-button-primary-bg-hover: #2563eb;
  --ds-button-primary-bg-focus: #3b82f6;
  --ds-button-primary-bg-disabled: #cbd5e1;
  --ds-button-primary-border: #3b82f6;
  --ds-button-primary-border-hover: #2563eb;
  --ds-button-primary-border-focus: #3b82f6;
  --ds-button-primary-border-disabled: #cbd5e1;
  --ds-button-primary-fg: #ffffff;
  --ds-button-primary-fg-hover: #ffffff;
  --ds-button-primary-fg-focus: #ffffff;
  --ds-button-primary-fg-disabled: #94a3b8;

  /* Button colors - Secondary */
  --ds-button-secondary-bg: #ffffff;
  --ds-button-secondary-bg-hover: #f8fafc;
  --ds-button-secondary-bg-focus: #ffffff;
  --ds-button-secondary-bg-active: #f1f5f9;
  --ds-button-secondary-bg-disabled: #f8fafc;
  --ds-button-secondary-border: rgba(0, 0, 0, 0.12);
  --ds-button-secondary-border-hover: rgba(0, 0, 0, 0.24);
  --ds-button-secondary-border-focus: rgba(0, 0, 0, 0.24);
  --ds-button-secondary-border-disabled: rgba(0, 0, 0, 0.06);
  --ds-button-secondary-fg: #0f172a;
  --ds-button-secondary-fg-hover: #0f172a;
  --ds-button-secondary-fg-focus: #0f172a;
  --ds-button-secondary-fg-disabled: #cbd5e1;

  /* Button colors - Ghost/Text */
  --ds-button-ghost-bg: transparent;
  --ds-button-ghost-bg-hover: #f8fafc;
  --ds-button-ghost-bg-active: #f1f5f9;
  --ds-button-ghost-bg-focus: transparent;
  --ds-button-ghost-bg-disabled: transparent;
  --ds-button-ghost-border: transparent;
  --ds-button-ghost-border-hover: transparent;
  --ds-button-ghost-border-active: transparent;
  --ds-button-ghost-border-focus: transparent;
  --ds-button-ghost-border-disabled: transparent;
  --ds-button-ghost-fg: #3b82f6;
  --ds-button-ghost-fg-hover: #2563eb;
  --ds-button-ghost-fg-active: #1d4ed8;
  --ds-button-ghost-fg-focus: #3b82f6;
  --ds-button-ghost-fg-disabled: #cbd5e1;
  /* Button colors - Icon/Hamburger */
  --ds-button-icon-bg: transparent;
  --ds-button-icon-bg-hover: #f8fafc;
  --ds-button-icon-bg-active: #f1f5f9;
  --ds-button-icon-bg-focus: transparent;
  --ds-button-icon-bg-disabled: transparent;
  --ds-button-icon-fg: #64748b;
  --ds-button-icon-fg-hover: #475569;
  --ds-button-icon-fg-active: #0f172a;
  --ds-button-icon-fg-focus: #64748b;
  --ds-button-icon-fg-disabled: #cbd5e1;

  --ds-button-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);

  /* Table colors */
  --ds-table-border: rgba(0, 0, 0, 0.06);
  --ds-table-row-hover-bg: #f8fafc;
  --ds-table-header-fg: #0f172a;
  --ds-table-sorter-hover: #64748b;
  --ds-table-filter-hover: #64748b;
  --ds-table-filter-pressed: #475569;
  --ds-table-filter-item-hover-bg: #f8fafc;
  --ds-table-filter-item-selected-bg: #e2e8f0;
  --ds-table-expand-chevron: #64748b;
  --ds-table-expand-chevron-hover: #475569;
  --ds-table-expand-chevron-focus: #3b82f6;
  --ds-table-expand-chevron-shadow-focus: 0 0 0 2px rgba(59, 130, 246, 0.2);
  --ds-table-expand-chevron-icon-hover: #475569;

  /* Alert colors */
  --ds-alert-success-bg: #f0fdf4;
  --ds-alert-success-border: #bbf7d0;
  --ds-alert-success-icon: #16a34a;
  --ds-alert-info-bg: #eff6ff;
  --ds-alert-info-border: #bfdbfe;
  --ds-alert-info-icon: #3b82f6;
  --ds-alert-info-block-bg: #f8fafc;
  --ds-alert-info-block-border: #e2e8f0;
  --ds-alert-warning-bg: #fffbeb;
  --ds-alert-warning-border: #fde68a;
  --ds-alert-warning-icon: #d97706;
  --ds-alert-error-bg: #fef2f2;
  --ds-alert-error-border: #fecaca;
  --ds-alert-error-icon: #dc2626;
  /* Badge colors */
  --ds-badge-bg: #f1f5f9;
  --ds-badge-fg: #475569;
  --ds-badge-bg-disabled: #f8fafc;
  --ds-badge-fg-disabled: #cbd5e1;

  /* Shadow colors */
  --ds-shadow-color: rgba(0, 0, 0, 0.12);
  --ds-shadow-color-secondary: rgba(9, 36, 51, 0.12);

  /* Drawer colors */
  --ds-drawer-bg: #ffffff;
  --ds-drawer-border: rgba(0, 0, 0, 0.12);
  --ds-drawer-back-icon: #64748b;

  /* Notification colors */
  --ds-notification-bg: #ffffff;
  --ds-notification-bg-info: #eff6ff;
  --ds-notification-bg-warning: #fffbeb;
  --ds-notification-bg-error: #fef2f2;
  --ds-notification-bg-success: #f0fdf4;
  --ds-notification-icon: #64748b;
  --ds-notification-icon-info: #3b82f6;
  --ds-notification-icon-warning: #d97706;
  --ds-notification-icon-error: #dc2626;
  --ds-notification-icon-success: #16a34a;

  /* Popover colors */
  --ds-popover-bg: #ffffff;
  --ds-popover-bg-inverted: #0f172a;
  --ds-popover-title: #0f172a;
  --ds-popover-title-inverted: #ffffff;
  --ds-popover-content: #64748b;
  --ds-popover-content-inverted: #cbd5e1;
  --ds-popover-divider: rgba(0, 0, 0, 0.06);
  --ds-popover-divider-inverted: rgba(255, 255, 255, 0.12);

  --ds-popover-link: #3b82f6;
  --ds-popover-link-hover: #2563eb;
  --ds-popover-link-inverted: #60a5fa;
  --ds-popover-link-inverted-hover: #93c5fd;
  --ds-popover-shadow-1: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --ds-popover-shadow-2: 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --ds-popover-arrow-shadow: 0 0 2px rgba(0, 0, 0, 0.1);

  /* Tag colors */
  --ds-tag-bg: #f1f5f9;
  --ds-tag-bg-hover: #e2e8f0;
  --ds-tag-bg-active: #cbd5e1;
  --ds-tag-bg-disabled: #f8fafc;
  --ds-tag-fg: #475569;
  --ds-tag-fg-contrast: #ffffff;
  --ds-tag-fg-disabled: #cbd5e1;
  --ds-tag-close: #64748b;
  --ds-tag-close-hover: #475569;
  --ds-tag-close-red: #dc2626;
  --ds-tag-close-green: #16a34a;
  --ds-tag-close-magenta: #c026d3;
  --ds-tag-close-volcano: #ea580c;
  --ds-tag-close-purple: #7c3aed;
  --ds-tag-close-geekblue: #2563eb;
  --ds-tag-close-red-hover: #b91c1c;
  --ds-tag-close-green-hover: #15803d;
  --ds-tag-close-magenta-hover: #a21caf;
  --ds-tag-close-volcano-hover: #c2410c;
  --ds-tag-close-purple-hover: #6d28d9;
  --ds-tag-close-geekblue-hover: #1d4ed8;
  --ds-tag-border-focus: #3b82f6;

  /* Dropdown colors */
  --ds-dropdown-divider: rgba(0, 0, 0, 0.06);
  --ds-dropdown-item-hover-bg: #f8fafc;
  --ds-dropdown-item-disabled-fg: #cbd5e1;
  --ds-dropdown-item-fg: #0f172a;
  --ds-dropdown-item-focus-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
  --ds-dropdown-shadow-1: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --ds-dropdown-shadow-2: 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* Pagination colors */
  --ds-pagination-item-fg: #0f172a;
  --ds-pagination-item-fg-active: #ffffff;
  --ds-pagination-item-fg-hover: #0f172a;
  --ds-pagination-item-fg-pressed: #0f172a;
  --ds-pagination-item-bg-active: #3b82f6;
  --ds-pagination-item-bg-hover: #f8fafc;
  --ds-pagination-item-bg-pressed: #f1f5f9;
  --ds-pagination-next-fg: #64748b;
  --ds-pagination-next-fg-disabled: #cbd5e1;
  --ds-pagination-input-border: rgba(0, 0, 0, 0.12);
  --ds-pagination-input-border-active: #3b82f6;
  --ds-pagination-input-shadow-active: 0 0 0 2px rgba(59, 130, 246, 0.2);

  /* Progress colors */
  --ds-progress-neutral: #cbd5e1;
  --ds-progress-neutral-bg: #f1f5f9;
  --ds-progress-error: #ef4444;
  --ds-progress-error-bg: #fef2f2;
  --ds-progress-text: #0f172a;

  /* Spinner colors */
  --ds-spinner-fg: #cbd5e1;
  --ds-spinner-bg: #ffffff;

  /* Tabs colors */
  --ds-tabs-tab-fg: #64748b;
  --ds-tabs-tab-fg-hover: #475569;
  --ds-tabs-tab-fg-active: #3b82f6;
  --ds-tabs-tab-fg-disabled: #cbd5e1;
  --ds-tabs-indicator: #3b82f6;
  --ds-tabs-tab-border-focus: #3b82f6;
  --ds-tabs-content-border: rgba(0, 0, 0, 0.06);

  /* Breadcrumbs colors */
  --ds-breadcrumb-fg: #64748b;
  --ds-breadcrumb-fg-disabled: #cbd5e1;
  --ds-breadcrumb-fg-hover: #475569;

  /* Segmented colors */
  --ds-segmented-bg: #f8fafc;
  --ds-segmented-bg-active: #ffffff;
  --ds-segmented-bg-disabled: #f8fafc;
  --ds-segmented-bg-active-disabled: #f8fafc;
  --ds-segmented-fg: #64748b;
  --ds-segmented-fg-active: #0f172a;
  --ds-segmented-fg-disabled: #cbd5e1;
  --ds-segmented-fg-hover: #475569;
  --ds-segmented-border-focus: #3b82f6;

  /* Steps colors */
  --ds-steps-icon-process: #cbd5e1;
  --ds-steps-icon-process-contrast: #ffffff;
  --ds-steps-icon-wait: #cbd5e1;
  --ds-steps-icon-error: #ef4444;
  --ds-steps-title-finish: #64748b;
  --ds-steps-title-process: #0f172a;
  --ds-steps-title-wait: #64748b;
  --ds-steps-title-error: #0f172a;
  --ds-steps-description-finish: #94a3b8;
  --ds-steps-description-process: #64748b;
  --ds-steps-description-wait: #94a3b8;
  --ds-steps-description-error: #64748b;
  --ds-steps-tail-finish: #22c55e;
  --ds-steps-tail-process: #cbd5e1;
  --ds-steps-hover: #f8fafc;
  --ds-steps-stroke-path: #3b82f6;
  --ds-steps-stroke-trail: #cbd5e1;

  /* Collapse colors */
  --ds-collapse-text: #0f172a;
  --ds-collapse-border: rgba(0, 0, 0, 0.06);
  --ds-collapse-divider: rgba(0, 0, 0, 0.06);
  --ds-collapse-divider-hover: rgba(0, 0, 0, 0.12);
  --ds-collapse-chevron: #64748b;
  --ds-collapse-fill: #64748b;
  --ds-collapse-fill-expanded: #64748b;
  --ds-collapse-hover-text: #0f172a;
  --ds-collapse-hover-border: rgba(0, 0, 0, 0.12);
  --ds-collapse-hover-divider: rgba(0, 0, 0, 0.12);
  --ds-collapse-hover-fill: #475569;
  --ds-collapse-hover-chevron: #475569;
  --ds-collapse-disabled-text: #cbd5e1;
  --ds-collapse-disabled-border: rgba(0, 0, 0, 0.06);
  --ds-collapse-disabled-divider: rgba(0, 0, 0, 0.06);
  --ds-collapse-disabled-fill: #cbd5e1;
  --ds-collapse-disabled-chevron: #cbd5e1;
  --ds-collapse-borderless-text-hover: #0f172a;
  --ds-collapse-borderless-text-expanded: #64748b;
  --ds-collapse-icon: #64748b;
  --ds-collapse-icon-hover: #475569;
  --ds-collapse-icon-disabled: #cbd5e1;

  /* Avatar colors */
  --ds-avatar-border: rgba(0, 0, 0, 0.06);
  --ds-avatar-bg: #f1f5f9;
  --ds-avatar-fg: #475569;
  --ds-avatar-bg-red: #fef2f2;
  --ds-avatar-bg-green: #f0fdf4;
  --ds-avatar-bg-magenta: #fdf4ff;
  --ds-avatar-bg-volcano: #fff7ed;
  --ds-avatar-bg-purple: #f3e8ff;
  --ds-avatar-bg-geekblue: #eff6ff;
  --ds-avatar-fg-red: #dc2626;
  --ds-avatar-fg-green: #16a34a;
  --ds-avatar-fg-magenta: #c026d3;
  --ds-avatar-fg-volcano: #ea580c;
  --ds-avatar-fg-purple: #7c3aed;
  --ds-avatar-fg-geekblue: #2563eb;
  --ds-avatar-position-fg: #ffffff;
  --ds-avatar-name-hover: #0f172a;

  /* Tree colors */
  --ds-tree-bg: #ffffff;
  --ds-tree-bg-hover: #f8fafc;
  --ds-tree-fg: #0f172a;
  --ds-tree-fg-disabled: #cbd5e1;
  --ds-tree-fg-checked: #3b82f6;
  --ds-tree-loading: #cbd5e1;
  --ds-tree-switcher: #64748b;
  --ds-tree-switcher-disabled: #cbd5e1;

  /* Timeline colors */
  --ds-timeline-blue: #3b82f6;
  --ds-timeline-red: #ef4444;
  --ds-timeline-green: #22c55e;
  --ds-timeline-gray: #cbd5e1;
  --ds-timeline-spinner: #cbd5e1;
  --ds-timeline-fg: #0f172a;

  /* Statistic colors */
  --ds-statistic-title: #64748b;
  --ds-statistic-value: #0f172a;
  --ds-statistic-suffix: #64748b;

  /* Rate colors */
  --ds-rate-color: #f59e0b;
  --ds-rate-bg: #f1f5f9;

  /* Slider colors */
  --ds-slider-handle-border: rgba(0, 0, 0, 0.12);
  --ds-slider-handle-bg-hover: #ffffff;
  --ds-slider-handle-bg-disabled: #f8fafc;
  --ds-slider-handle-border-disabled: rgba(0, 0, 0, 0.06);
  --ds-slider-handle-bg-disabled-hover: #f8fafc;
  --ds-slider-handle-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  --ds-slider-rail: #cbd5e1;
  --ds-slider-rail-hover: #cbd5e1;
  --ds-slider-rail-disabled: #f1f5f9;
  --ds-slider-rail-disabled-hover: #f1f5f9;
  --ds-slider-track: #3b82f6;
  --ds-slider-track-hover: #2563eb;
  --ds-slider-track-disabled: #cbd5e1;
  --ds-slider-track-disabled-hover: #cbd5e1;
  /* Upload colors */
  --ds-upload-bg: #ffffff;
  --ds-upload-item-border: rgba(0, 0, 0, 0.06);
  --ds-upload-item-delete: #64748b;
  --ds-upload-item-delete-hover: #475569;
  --ds-upload-item-delete-focus: #3b82f6;
  --ds-upload-item-delete-focus-visible: #3b82f6;
  --ds-upload-item-icon: #64748b;
  --ds-upload-item-error: #ef4444;
  --ds-upload-item-bg-hover: #f8fafc;
  --ds-upload-drag-icon: #64748b;
  --ds-upload-drag-bg: #f8fafc;
  --ds-upload-drag-text: #0f172a;
  --ds-upload-drag-hint: #64748b;
  --ds-upload-drag-border: rgba(0, 0, 0, 0.06);
  --ds-upload-drag-border-hover: #3b82f6;
  --ds-upload-percent-bg: #f1f5f9;
  --ds-upload-percent-bg-alt: #e2e8f0;

  /* Tooltip colors */
  --ds-tooltip-bg: #0f172a;
  --ds-tooltip-fg: #ffffff;
  --ds-tooltip-border: #0f172a;
  --ds-tooltip-shadow-1: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --ds-tooltip-shadow-2: 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --ds-tooltip-arrow: #0f172a;
  --ds-tooltip-max-width: 250px;

  /* Message colors */
  --ds-message-fg: #0f172a;
  --ds-message-bg-info: #eff6ff;
  --ds-message-bg-success: #f0fdf4;
  --ds-message-bg-warning: #fffbeb;
  --ds-message-bg-error: #fef2f2;
  --ds-message-icon-info: #3b82f6;
  --ds-message-icon-success: #16a34a;
  --ds-message-icon-warning: #d97706;
  --ds-message-icon-error: #dc2626;

  /* Toast colors */
  --ds-toast-bg: #ffffff;
  --ds-toast-border: rgba(0, 0, 0, 0.12);
  --ds-toast-shadow-1: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --ds-toast-shadow-2: 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --ds-toast-fg: #0f172a;
  --ds-toast-progress: #3b82f6;
  --ds-toast-bg-info: #eff6ff;
  --ds-toast-bg-success: #f0fdf4;
  --ds-toast-bg-warning: #fffbeb;
  --ds-toast-bg-error: #fef2f2;

  /* Modal colors */
  --ds-modal-bg: #ffffff;
  --ds-modal-border: rgba(0, 0, 0, 0.12);
  --ds-modal-shadow-1: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --ds-modal-shadow-2: 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --ds-modal-header-fg: #0f172a;
  --ds-modal-footer-bg: #f8fafc;
  --ds-modal-backdrop: rgba(0, 0, 0, 0.5);

  /* Menu colors */
  --ds-menu-bg: #ffffff;
  --ds-menu-item-fg: #0f172a;
  --ds-menu-item-hover-bg: #f8fafc;
  --ds-menu-item-active-bg: #eff6ff;
  --ds-menu-item-disabled-fg: #cbd5e1;
  --ds-menu-group-title-fg: #64748b;

  /* Navbar colors */
  --ds-navbar-bg: #ffffff;
  --ds-navbar-border: rgba(0, 0, 0, 0.06);
  --ds-navbar-link: #64748b;
  --ds-navbar-link-hover: #475569;
  --ds-navbar-link-active: #3b82f6;
  --ds-navbar-height: 64px;

  /* Sidebar colors */
  --ds-sidebar-bg: #ffffff;
  --ds-sidebar-border: rgba(0, 0, 0, 0.06);
  --ds-sidebar-item-fg: #64748b;
  --ds-sidebar-item-active-bg: #eff6ff;
  --ds-sidebar-collapsed-width: 64px;

  /* Popconfirm colors */
  --ds-popconfirm-bg: #ffffff;
  --ds-popconfirm-fg: #0f172a;
  --ds-popconfirm-border: rgba(0, 0, 0, 0.12);
  --ds-popconfirm-shadow-1: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --ds-popconfirm-shadow-2: 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --ds-popconfirm-icon-warning: #d97706;
}
/* DS: semantic-extra tokens - DatePicker and responsive typography */
/* layer: tokens */
:root {
  /* DatePicker / Calendar / TimePicker / RangePicker colors */
  --ds-datepicker-active-bar-bg: #3b82f6;
  --ds-datepicker-border: rgba(0, 0, 0, 0.12);
  --ds-datepicker-border-disabled: rgba(0, 0, 0, 0.06);
  --ds-datepicker-bg: #ffffff;
  --ds-datepicker-bg-disabled: #f8fafc;
  --ds-datepicker-fg-disabled: #cbd5e1;
  --ds-datepicker-border-error: #ef4444;
  --ds-datepicker-border-error-hover: #dc2626;

  /* Desktop typography font sizes */
  --ds-typography-desktop-body-font-size: 16px;
  --ds-typography-desktop-small-font-size: 14px;
  --ds-typography-desktop-extra-small-font-size: 12px;
  --ds-typography-desktop-h1-font-size: 30px;
  --ds-typography-desktop-h2-font-size: 26px;
  --ds-typography-desktop-h3-font-size: 22px;
  --ds-typography-desktop-h4-font-size: 18px;
  --ds-typography-desktop-monospace-font-size: 16px;
  --ds-typography-desktop-status-font-size: 16px;
  --ds-typography-desktop-error-font-size: 12px;

  /* Tablet typography font sizes */
  --ds-typography-tablet-body-font-size: 14px;
  --ds-typography-tablet-small-font-size: 12px;
  --ds-typography-tablet-extra-small-font-size: 12px;
  --ds-typography-tablet-h1-font-size: 32px;
  --ds-typography-tablet-h2-font-size: 26px;
  --ds-typography-tablet-h3-font-size: 20px;
  --ds-typography-tablet-h4-font-size: 16px;
  --ds-typography-tablet-monospace-font-size: 14px;
  --ds-typography-tablet-status-font-size: 16px;
  --ds-typography-tablet-error-font-size: 12px;

  /* Mobile typography font sizes */
  --ds-typography-mobile-body-font-size: 14px;
  --ds-typography-mobile-small-font-size: 12px;
  --ds-typography-mobile-extra-small-font-size: 12px;
  --ds-typography-mobile-h1-font-size: 24px;
  --ds-typography-mobile-h2-font-size: 20px;
  --ds-typography-mobile-h3-font-size: 18px;
  --ds-typography-mobile-h4-font-size: 16px;
  --ds-typography-mobile-monospace-font-size: 14px;
  --ds-typography-mobile-status-font-size: 12px;
  --ds-typography-mobile-error-font-size: 12px;

  /* Font families */
  --ds-typography-font-family-main: 'Manrope GX', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --ds-typography-font-family-monospace: 'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
}
/* DS skeleton: 01-tokens/shadows.css */
/* This file is generated as a placeholder for the design system structure. */
/* layer: tokens */
/* tokens: shadows */
:root {
  /* Shadow colors */
  --ds-shadow-color: rgba(0, 0, 0, 0.12);
  --ds-shadow-color-secondary: rgba(9, 36, 51, 0.12);
  --ds-shadow-color-focus: rgba(24, 144, 255, 0.2);

  /* Elevation scale */
  --ds-shadow-none: none;
  --ds-shadow-xs: 0 1px 2px var(--ds-shadow-color);
  --ds-shadow-s: 0 1px 3px var(--ds-shadow-color), 0 1px 2px var(--ds-shadow-color-secondary);
  --ds-shadow-m: 0 4px 6px -1px var(--ds-shadow-color), 0 2px 4px -1px var(--ds-shadow-color-secondary);
  --ds-shadow-l: 0 10px 15px -3px var(--ds-shadow-color), 0 4px 6px -2px var(--ds-shadow-color-secondary);
  --ds-shadow-xl: 0 20px 25px -5px var(--ds-shadow-color), 0 10px 10px -5px var(--ds-shadow-color-secondary);
  --ds-shadow-2xl: 0 25px 50px -12px var(--ds-shadow-color);

  /* Component-specific shadows */
  --ds-shadow-card: var(--ds-shadow-s);
  --ds-shadow-modal: var(--ds-shadow-l);
  --ds-shadow-dropdown: 0 8px 16px var(--ds-shadow-color), 0 0 2px var(--ds-shadow-color-secondary);
  --ds-shadow-tooltip: var(--ds-shadow-m);
  --ds-shadow-popover: var(--ds-shadow-dropdown);
  --ds-shadow-drawer: var(--ds-shadow-xl);
  --ds-shadow-notification: var(--ds-shadow-m);
  --ds-shadow-toast: var(--ds-shadow-m);
  --ds-shadow-button-primary: var(--ds-shadow-xs);
  --ds-shadow-button-secondary: none;
  --ds-shadow-input-focus: var(--ds-shadow-focus);
  --ds-shadow-table-sticky: var(--ds-shadow-xs);

  /* Inner shadows for inset effects */
  --ds-shadow-inset-xs: inset 0 1px 2px var(--ds-shadow-color);
  --ds-shadow-inset-s: inset 0 2px 4px var(--ds-shadow-color);

  /* Legacy shadow names for compatibility */
  --ds-shadow-sm: var(--ds-shadow-s);
  --ds-shadow-md: var(--ds-shadow-m);
  --ds-shadow-lg: var(--ds-shadow-l);
  --ds-shadow-xl-legacy: var(--ds-shadow-xl);
  --ds-shadow-2xl-legacy: var(--ds-shadow-2xl);
}
/* DS skeleton: 01-tokens/spacing.css */
/* This file is generated as a placeholder for the design system structure. */
/* layer: tokens */
/* tokens: spacing */
:root {
  /* Spacing scale - geometric progression based on 4px base unit */
  --ds-spacing-3xs: 4px;
  --ds-spacing-2xs: 8px;
  --ds-spacing-xs: 12px;
  --ds-spacing-s: 16px;
  --ds-spacing-m: 24px;
  --ds-spacing-l: 32px;
  --ds-spacing-xl: 40px;
  --ds-spacing-2xl: 48px;
  --ds-spacing-3xl: 64px;
  --ds-spacing-4xl: 96px;

  /* Legacy spacing scale for compatibility */
  --ds-spacing-1: var(--ds-spacing-3xs);
  --ds-spacing-2: var(--ds-spacing-2xs);
  --ds-spacing-3: var(--ds-spacing-xs);
  --ds-spacing-4: var(--ds-spacing-s);
  --ds-spacing-5: var(--ds-spacing-m);
  --ds-spacing-6: var(--ds-spacing-l);
  --ds-spacing-7: var(--ds-spacing-xl);
  --ds-spacing-8: var(--ds-spacing-2xl);
  --ds-spacing-9: var(--ds-spacing-3xl);
  --ds-spacing-10: var(--ds-spacing-4xl);

  /* Additional spacing for specific use cases */
  --ds-spacing-none: 0px;
  --ds-spacing-px: 1px;
  --ds-spacing-half: 2px;

  /* Negative spacing */
  --ds-spacing-3xs-negative: -4px;
  --ds-spacing-2xs-negative: -8px;
  --ds-spacing-xs-negative: -12px;
  --ds-spacing-s-negative: -16px;
  --ds-spacing-m-negative: -24px;
  --ds-spacing-l-negative: -32px;
  --ds-spacing-xl-negative: -40px;
  --ds-spacing-2xl-negative: -48px;
  --ds-spacing-3xl-negative: -64px;
  --ds-spacing-4xl-negative: -96px;

  /* Component-specific spacing */
  --ds-spacing-padding-xs: var(--ds-spacing-2xs);
  --ds-spacing-padding-s: var(--ds-spacing-s);
  --ds-spacing-padding-m: var(--ds-spacing-m);
  --ds-spacing-padding-l: var(--ds-spacing-l);

  --ds-spacing-margin-xs: var(--ds-spacing-2xs);
  --ds-spacing-margin-s: var(--ds-spacing-s);
  --ds-spacing-margin-m: var(--ds-spacing-m);
  --ds-spacing-margin-l: var(--ds-spacing-l);

  --ds-spacing-gap-xs: var(--ds-spacing-2xs);
  --ds-spacing-gap-s: var(--ds-spacing-s);
  --ds-spacing-gap-m: var(--ds-spacing-m);
  --ds-spacing-gap-l: var(--ds-spacing-l);

  /* Layout spacing */
  --ds-spacing-container-padding: var(--ds-spacing-l);
  --ds-spacing-section-margin: var(--ds-spacing-3xl);
  --ds-spacing-card-padding: var(--ds-spacing-l);
  --ds-spacing-modal-padding: var(--ds-spacing-2xl);
}
/* DS skeleton: 01-tokens/typography.css */
/* This file is generated as a placeholder for the design system structure. */
/* layer: tokens */
/* tokens: typography */
:root {
  /* Font families */
  --ds-typography-font-family-main: 'Manrope GX', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --ds-typography-font-family-headings: 'Space Grotesk', sans-serif;
  --ds-typography-font-family-monospace: 'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;

  /* Font weights */
  --ds-typography-font-weight-normal: 400;
  --ds-typography-font-weight-medium: 500;
  --ds-typography-font-weight-semibold: 600;
  --ds-typography-font-weight-bold: 700;

  /* Line heights */
  --ds-typography-line-height-tight: 1.25;
  --ds-typography-line-height-normal: 1.5;
  --ds-typography-line-height-relaxed: 1.75;

  /* Letter spacing */
  --ds-typography-letter-spacing-tight: -0.025em;
  --ds-typography-letter-spacing-normal: 0;
  --ds-typography-letter-spacing-wide: 0.025em;

  /* Desktop typography scale */
  --ds-typography-desktop-h1-font-size: 30px;
  --ds-typography-desktop-h1-line-height: 1.23;
  --ds-typography-desktop-h1-font-weight: 600;

  --ds-typography-desktop-h2-font-size: 26px;
  --ds-typography-desktop-h2-line-height: 1.35;
  --ds-typography-desktop-h2-font-weight: 600;

  --ds-typography-desktop-h3-font-size: 22px;
  --ds-typography-desktop-h3-line-height: 1.35;
  --ds-typography-desktop-h3-font-weight: 600;

  --ds-typography-desktop-h4-font-size: 18px;
  --ds-typography-desktop-h4-line-height: 1.4;
  --ds-typography-desktop-h4-font-weight: 600;

  --ds-typography-desktop-body-font-size: 16px;
  --ds-typography-desktop-body-line-height: 1.5;
  --ds-typography-desktop-body-font-weight: 400;

  --ds-typography-desktop-small-font-size: 14px;
  --ds-typography-desktop-small-line-height: 1.43;
  --ds-typography-desktop-small-font-weight: 400;

  --ds-typography-desktop-extra-small-font-size: 12px;
  --ds-typography-desktop-extra-small-line-height: 1.33;
  --ds-typography-desktop-extra-small-font-weight: 400;

  --ds-typography-desktop-monospace-font-size: 16px;
  --ds-typography-desktop-monospace-line-height: 1.5;
  --ds-typography-desktop-monospace-font-weight: 400;

  --ds-typography-desktop-status-font-size: 16px;
  --ds-typography-desktop-status-line-height: 1.5;
  --ds-typography-desktop-status-font-weight: 400;

  --ds-typography-desktop-error-font-size: 12px;
  --ds-typography-desktop-error-line-height: 1.33;
  --ds-typography-desktop-error-font-weight: 400;

  /* Tablet typography scale */
  --ds-typography-tablet-h1-font-size: 32px;
  --ds-typography-tablet-h1-line-height: 1.25;
  --ds-typography-tablet-h1-font-weight: 600;

  --ds-typography-tablet-h2-font-size: 26px;
  --ds-typography-tablet-h2-line-height: 1.35;
  --ds-typography-tablet-h2-font-weight: 600;

  --ds-typography-tablet-h3-font-size: 20px;
  --ds-typography-tablet-h3-line-height: 1.4;
  --ds-typography-tablet-h3-font-weight: 600;

  --ds-typography-tablet-h4-font-size: 16px;
  --ds-typography-tablet-h4-line-height: 1.5;
  --ds-typography-tablet-h4-font-weight: 600;

  --ds-typography-tablet-body-font-size: 14px;
  --ds-typography-tablet-body-line-height: 1.43;
  --ds-typography-tablet-body-font-weight: 400;

  --ds-typography-tablet-small-font-size: 12px;
  --ds-typography-tablet-small-line-height: 1.33;
  --ds-typography-tablet-small-font-weight: 400;

  --ds-typography-tablet-extra-small-font-size: 12px;
  --ds-typography-tablet-extra-small-line-height: 1.33;
  --ds-typography-tablet-extra-small-font-weight: 400;

  --ds-typography-tablet-monospace-font-size: 14px;
  --ds-typography-tablet-monospace-line-height: 1.43;
  --ds-typography-tablet-monospace-font-weight: 400;

  --ds-typography-tablet-status-font-size: 16px;
  --ds-typography-tablet-status-line-height: 1.5;
  --ds-typography-tablet-status-font-weight: 400;

  --ds-typography-tablet-error-font-size: 12px;
  --ds-typography-tablet-error-line-height: 1.33;
  --ds-typography-tablet-error-font-weight: 400;

  /* Mobile typography scale */
  --ds-typography-mobile-h1-font-size: 24px;
  --ds-typography-mobile-h1-line-height: 1.33;
  --ds-typography-mobile-h1-font-weight: 600;

  --ds-typography-mobile-h2-font-size: 20px;
  --ds-typography-mobile-h2-line-height: 1.4;
  --ds-typography-mobile-h2-font-weight: 600;

  --ds-typography-mobile-h3-font-size: 18px;
  --ds-typography-mobile-h3-line-height: 1.44;
  --ds-typography-mobile-h3-font-weight: 600;

  --ds-typography-mobile-h4-font-size: 16px;
  --ds-typography-mobile-h4-line-height: 1.5;
  --ds-typography-mobile-h4-font-weight: 600;

  --ds-typography-mobile-body-font-size: 14px;
  --ds-typography-mobile-body-line-height: 1.43;
  --ds-typography-mobile-body-font-weight: 400;

  --ds-typography-mobile-small-font-size: 12px;
  --ds-typography-mobile-small-line-height: 1.33;
  --ds-typography-mobile-small-font-weight: 400;

  --ds-typography-mobile-extra-small-font-size: 12px;
  --ds-typography-mobile-extra-small-line-height: 1.33;
  --ds-typography-mobile-extra-small-font-weight: 400;

  --ds-typography-mobile-monospace-font-size: 14px;
  --ds-typography-mobile-monospace-line-height: 1.43;
  --ds-typography-mobile-monospace-font-weight: 400;

  --ds-typography-mobile-status-font-size: 12px;
  --ds-typography-mobile-status-line-height: 1.33;
  --ds-typography-mobile-status-font-weight: 400;

  --ds-typography-mobile-error-font-size: 12px;
  --ds-typography-mobile-error-line-height: 1.33;
  --ds-typography-mobile-error-font-weight: 400;

  /* Code/Pre formatting */
  --ds-typography-code-background: rgba(150, 150, 150, 0.1);
  --ds-typography-code-border: rgba(100, 100, 100, 0.2);
  --ds-typography-code-padding: 0.2em 0.4em 0.1em;
  --ds-typography-code-font-size: 85%;
  --ds-typography-code-border-radius: 3px;

  /* Pre block formatting */
  --ds-typography-pre-padding: 0.4em 0.6em;
  --ds-typography-pre-background: rgba(150, 150, 150, 0.1);
  --ds-typography-pre-border: 1px solid rgba(100, 100, 100, 0.2);
  --ds-typography-pre-border-radius: 3px;
  --ds-typography-pre-white-space: pre-wrap;
  --ds-typography-pre-word-break: break-word;

  /* Blockquote */
  --ds-typography-blockquote-padding: 0 0 0 0.6em;
  --ds-typography-blockquote-border-left: 4px solid rgba(100, 100, 100, 0.2);
  --ds-typography-blockquote-margin: 1em 0;
  --ds-typography-blockquote-opacity: 0.85;

  /* Lists */
  --ds-typography-ul-margin: 0 0 1em;
  --ds-typography-ul-padding: 0;
  --ds-typography-li-margin: 0 0 0 20px;
  --ds-typography-li-padding: 0 0 0 4px;

  /* KBD styling */
  --ds-typography-kbd-margin: 0 0.2em;
  --ds-typography-kbd-padding: 0.15em 0.4em 0.1em;
  --ds-typography-kbd-font-size: 90%;
  --ds-typography-kbd-background: rgba(150, 150, 150, 0.06);
  --ds-typography-kbd-border: 1px solid rgba(100, 100, 100, 0.2);
  --ds-typography-kbd-border-bottom-width: 2px;
  --ds-typography-kbd-border-radius: 3px;

  /* Text decorations */
  --ds-typography-text-decoration-underline: underline;
  --ds-typography-text-decoration-line-through: line-through;
  --ds-typography-text-decoration-none: none;

  /* Text transforms */
  --ds-typography-text-transform-uppercase: uppercase;
  --ds-typography-text-transform-lowercase: lowercase;
  --ds-typography-text-transform-capitalize: capitalize;
  --ds-typography-text-transform-none: none;

  /* Font features */
  --ds-typography-font-feature-settings-liga: 'liga';
  --ds-typography-font-feature-settings-calt: 'calt';
  --ds-typography-font-feature-settings-normal: normal;

  /* Text alignment */
  --ds-typography-text-align-left: left;
  --ds-typography-text-align-center: center;
  --ds-typography-text-align-right: right;
  --ds-typography-text-align-justify: justify;

  /* White space */
  --ds-typography-white-space-normal: normal;
  --ds-typography-white-space-nowrap: nowrap;
  --ds-typography-white-space-pre: pre;
  --ds-typography-white-space-pre-wrap: pre-wrap;
  --ds-typography-white-space-pre-line: pre-line;

  /* Word break */
  --ds-typography-word-break-normal: normal;
  --ds-typography-word-break-break-all: break-all;
  --ds-typography-word-break-break-word: break-word;
  --ds-typography-word-break-keep-all: keep-all;

  /* Text overflow */
  --ds-typography-text-overflow-clip: clip;
  --ds-typography-text-overflow-ellipsis: ellipsis;

  /* Vertical align */
  --ds-typography-vertical-align-baseline: baseline;
  --ds-typography-vertical-align-top: top;
  --ds-typography-vertical-align-middle: middle;
  --ds-typography-vertical-align-bottom: bottom;
  --ds-typography-vertical-align-text-top: text-top;
  --ds-typography-vertical-align-text-bottom: text-bottom;
}
/* Base application font */
body {
  font-family: var(--ds-typography-font-family-main);
}
/* DS skeleton: 01-tokens/z-index.css */
/* This file is generated as a placeholder for the design system structure. */
/* layer: tokens */
/* tokens: z-index */
:root {
  /* Base layers */
  --ds-z-index-base: 0;
  --ds-z-index-ground: 1;
  --ds-z-index-low: 10;
  --ds-z-index-middle: 50;
  --ds-z-index-high: 100;

  /* Component layers */
  --ds-z-index-sticky: 200;
  --ds-z-index-nav: 300;
  --ds-z-index-sidebar: 400;
  --ds-z-index-dropdown: 500;
  --ds-z-index-tooltip: 600;
  --ds-z-index-popover: 700;
  --ds-z-index-modal: 800;
  --ds-z-index-drawer: 900;
  --ds-z-index-notification: 1000;
  --ds-z-index-toast: 1100;
  --ds-z-index-tooltip-arrow: 1200;
  --ds-z-index-popover-arrow: 1300;
  --ds-z-index-modal-overlay: 1400;
  --ds-z-index-drawer-overlay: 1500;
  --ds-z-index-loading-overlay: 1600;
  --ds-z-index-fullscreen: 1700;

  /* Special layers */
  --ds-z-index-focus-ring: 9998;
  --ds-z-index-max: 9999;

  /* Legacy z-index names for compatibility */
  --ds-z-index-1: var(--ds-z-index-low);
  --ds-z-index-2: var(--ds-z-index-middle);
  --ds-z-index-3: var(--ds-z-index-high);
  --ds-z-index-4: var(--ds-z-index-dropdown);
  --ds-z-index-5: var(--ds-z-index-tooltip);
  --ds-z-index-6: var(--ds-z-index-modal);
  --ds-z-index-7: var(--ds-z-index-notification);
  --ds-z-index-8: var(--ds-z-index-toast);
  --ds-z-index-9: var(--ds-z-index-max);
}
/* DS: animation.css - Animation utilities */
/* layer: utilities */
/* Animation duration utilities */
.ds-duration-75 { animation-duration: 75ms; }
.ds-duration-100 { animation-duration: 100ms; }
.ds-duration-150 { animation-duration: 150ms; }
.ds-duration-200 { animation-duration: 200ms; }
.ds-duration-300 { animation-duration: 300ms; }
.ds-duration-500 { animation-duration: 500ms; }
.ds-duration-700 { animation-duration: 700ms; }
.ds-duration-1000 { animation-duration: 1000ms; }
/* Animation delay utilities */
.ds-delay-75 { animation-delay: 75ms; }
.ds-delay-100 { animation-delay: 100ms; }
.ds-delay-150 { animation-delay: 150ms; }
.ds-delay-200 { animation-delay: 200ms; }
.ds-delay-300 { animation-delay: 300ms; }
.ds-delay-500 { animation-delay: 500ms; }
.ds-delay-700 { animation-delay: 700ms; }
.ds-delay-1000 { animation-delay: 1000ms; }
/* Animation timing utilities */
.ds-ease-linear { animation-timing-function: linear; }
.ds-ease-in { animation-timing-function: ease-in; }
.ds-ease-out { animation-timing-function: ease-out; }
.ds-ease-in-out { animation-timing-function: ease-in-out; }
/* Animation fill mode utilities */
.ds-fill-none { animation-fill-mode: none; }
.ds-fill-forwards { animation-fill-mode: forwards; }
.ds-fill-backwards { animation-fill-mode: backwards; }
.ds-fill-both { animation-fill-mode: both; }
/* Common animations */
.ds-animate-spin { animation: spin 1s linear infinite; }
.ds-animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.ds-animate-bounce { animation: bounce 1s infinite; }
.ds-animate-fade-in { animation: fadeIn 0.3s ease-in-out; }
.ds-animate-fade-out { animation: fadeOut 0.3s ease-in-out; }
.ds-animate-slide-in-up { animation: slideInUp 0.3s ease-out; }
.ds-animate-slide-in-down { animation: slideInDown 0.3s ease-out; }
.ds-animate-slide-in-left { animation: slideInLeft 0.3s ease-out; }
.ds-animate-slide-in-right { animation: slideInRight 0.3s ease-out; }
/* Keyframes */
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes pulse {
  50% { opacity: 0.5; }
}
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0, 0); }
  40%, 43% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -30px, 0); }
  70% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -15px, 0); }
  90% { transform: translate3d(0, -4px, 0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes slideInUp {
  from { transform: translate3d(0, 100%, 0); visibility: visible; }
  to { transform: translate3d(0, 0, 0); }
}
@keyframes slideInDown {
  from { transform: translate3d(0, -100%, 0); visibility: visible; }
  to { transform: translate3d(0, 0, 0); }
}
@keyframes slideInLeft {
  from { transform: translate3d(-100%, 0, 0); visibility: visible; }
  to { transform: translate3d(0, 0, 0); }
}
@keyframes slideInRight {
  from { transform: translate3d(100%, 0, 0); visibility: visible; }
  to { transform: translate3d(0, 0, 0); }
}
/* DS: aspect-ratio.css - Aspect ratio utilities */
/* layer: utilities */
/* Aspect ratio utilities */
.ds-aspect-auto { aspect-ratio: auto; }
.ds-aspect-square { aspect-ratio: 1 / 1; }
.ds-aspect-video { aspect-ratio: 16 / 9; }
.ds-aspect-photo { aspect-ratio: 4 / 3; }
.ds-aspect-banner { aspect-ratio: 3 / 1; }
.ds-aspect-card { aspect-ratio: 5 / 3; }
.ds-aspect-poster { aspect-ratio: 2 / 3; }
/* Custom aspect ratios */
.ds-aspect-1-1 { aspect-ratio: 1 / 1; }
.ds-aspect-4-3 { aspect-ratio: 4 / 3; }
.ds-aspect-16-9 { aspect-ratio: 16 / 9; }
.ds-aspect-16-10 { aspect-ratio: 16 / 10; }
.ds-aspect-21-9 { aspect-ratio: 21 / 9; }
.ds-aspect-3-2 { aspect-ratio: 3 / 2; }
.ds-aspect-2-1 { aspect-ratio: 2 / 1; }
.ds-aspect-3-1 { aspect-ratio: 3 / 1; }
.ds-aspect-4-1 { aspect-ratio: 4 / 1; }
.ds-aspect-5-1 { aspect-ratio: 5 / 1; }
.ds-aspect-1-2 { aspect-ratio: 1 / 2; }
.ds-aspect-1-3 { aspect-ratio: 1 / 3; }
.ds-aspect-1-4 { aspect-ratio: 1 / 4; }
.ds-aspect-1-5 { aspect-ratio: 1 / 5; }
.ds-aspect-2-3 { aspect-ratio: 2 / 3; }
.ds-aspect-3-4 { aspect-ratio: 3 / 4; }
.ds-aspect-9-16 { aspect-ratio: 9 / 16; }
/* DS: background.css - Background utilities */
/* layer: utilities */
/* Background color utilities */
.ds-bg-transparent { background-color: transparent; }
.ds-bg-current { background-color: currentColor; }
.ds-bg-white { background-color: var(--ds-color-neutral-0); }
.ds-bg-black { background-color: var(--ds-color-neutral-1000); }
/* Neutral backgrounds */
.ds-bg-neutral-50 { background-color: var(--ds-color-neutral-50); }
.ds-bg-neutral-100 { background-color: var(--ds-color-neutral-100); }
.ds-bg-neutral-200 { background-color: var(--ds-color-neutral-200); }
.ds-bg-neutral-300 { background-color: var(--ds-color-neutral-300); }
.ds-bg-neutral-400 { background-color: var(--ds-color-neutral-400); }
.ds-bg-neutral-500 { background-color: var(--ds-color-neutral-500); }
.ds-bg-neutral-600 { background-color: var(--ds-color-neutral-600); }
.ds-bg-neutral-700 { background-color: var(--ds-color-neutral-700); }
.ds-bg-neutral-800 { background-color: var(--ds-color-neutral-800); }
.ds-bg-neutral-900 { background-color: var(--ds-color-neutral-900); }
/* Semantic backgrounds */
.ds-bg-surface { background-color: var(--ds-surface-background); }
.ds-bg-surface-secondary { background-color: var(--ds-surface-background-secondary); }
.ds-bg-surface-tertiary { background-color: var(--ds-surface-background-tertiary); }
.ds-bg-surface-inverted { background-color: var(--ds-surface-background-inverted); }
.ds-bg-status-success { background-color: var(--ds-status-success); }
.ds-bg-status-warning { background-color: var(--ds-status-warning); }
.ds-bg-status-error { background-color: var(--ds-status-error); }
.ds-bg-status-info { background-color: var(--ds-status-info); }
/* Background opacity utilities */
.ds-bg-opacity-0 { background-color: rgba(var(--ds-surface-background), 0); }
.ds-bg-opacity-10 { background-color: rgba(var(--ds-surface-background), 0.1); }
.ds-bg-opacity-20 { background-color: rgba(var(--ds-surface-background), 0.2); }
.ds-bg-opacity-30 { background-color: rgba(var(--ds-surface-background), 0.3); }
.ds-bg-opacity-40 { background-color: rgba(var(--ds-surface-background), 0.4); }
.ds-bg-opacity-50 { background-color: rgba(var(--ds-surface-background), 0.5); }
.ds-bg-opacity-60 { background-color: rgba(var(--ds-surface-background), 0.6); }
.ds-bg-opacity-70 { background-color: rgba(var(--ds-surface-background), 0.7); }
.ds-bg-opacity-80 { background-color: rgba(var(--ds-surface-background), 0.8); }
.ds-bg-opacity-90 { background-color: rgba(var(--ds-surface-background), 0.9); }
.ds-bg-opacity-100 { background-color: rgba(var(--ds-surface-background), 1); }
/* Background attachment utilities */
.ds-bg-fixed { background-attachment: fixed; }
.ds-bg-local { background-attachment: local; }
.ds-bg-scroll { background-attachment: scroll; }
/* Background position utilities */
.ds-bg-bottom { background-position: bottom; }
.ds-bg-center { background-position: center; }
.ds-bg-left { background-position: left; }
.ds-bg-left-bottom { background-position: left bottom; }
.ds-bg-left-top { background-position: left top; }
.ds-bg-right { background-position: right; }
.ds-bg-right-bottom { background-position: right bottom; }
.ds-bg-right-top { background-position: right top; }
.ds-bg-top { background-position: top; }
/* Background repeat utilities */
.ds-bg-repeat { background-repeat: repeat; }
.ds-bg-no-repeat { background-repeat: no-repeat; }
.ds-bg-repeat-x { background-repeat: repeat-x; }
.ds-bg-repeat-y { background-repeat: repeat-y; }
.ds-bg-repeat-round { background-repeat: round; }
.ds-bg-repeat-space { background-repeat: space; }
/* Background size utilities */
.ds-bg-auto { background-size: auto; }
.ds-bg-cover { background-size: cover; }
.ds-bg-contain { background-size: contain; }
/* DS skeleton: 02-utilities/border.css */
/* This file is generated as a placeholder for the design system structure. */
/* layer: utilities */
/* utilities: border */
/* Border radius */
.rounded-none { border-radius: var(--ds-border-radius-none); }
.rounded-2xs { border-radius: var(--ds-border-radius-2xs); }
.rounded-xs { border-radius: var(--ds-border-radius-xs); }
.rounded-s { border-radius: var(--ds-border-radius-s); }
.rounded-m { border-radius: var(--ds-border-radius-m); }
.rounded-l { border-radius: var(--ds-border-radius-l); }
.rounded-xl { border-radius: var(--ds-border-radius-xl); }
.rounded-2xl { border-radius: var(--ds-border-radius-2xl); }
.rounded-full { border-radius: var(--ds-border-radius-full); }
.rounded-t-none { border-top-left-radius: var(--ds-border-radius-none); border-top-right-radius: var(--ds-border-radius-none); }
.rounded-t-2xs { border-top-left-radius: var(--ds-border-radius-2xs); border-top-right-radius: var(--ds-border-radius-2xs); }
.rounded-t-xs { border-top-left-radius: var(--ds-border-radius-xs); border-top-right-radius: var(--ds-border-radius-xs); }
.rounded-t-s { border-top-left-radius: var(--ds-border-radius-s); border-top-right-radius: var(--ds-border-radius-s); }
.rounded-t-m { border-top-left-radius: var(--ds-border-radius-m); border-top-right-radius: var(--ds-border-radius-m); }
.rounded-t-l { border-top-left-radius: var(--ds-border-radius-l); border-top-right-radius: var(--ds-border-radius-l); }
.rounded-t-xl { border-top-left-radius: var(--ds-border-radius-xl); border-top-right-radius: var(--ds-border-radius-xl); }
.rounded-t-2xl { border-top-left-radius: var(--ds-border-radius-2xl); border-top-right-radius: var(--ds-border-radius-2xl); }
.rounded-t-full { border-top-left-radius: var(--ds-border-radius-full); border-top-right-radius: var(--ds-border-radius-full); }
.rounded-r-none { border-top-right-radius: var(--ds-border-radius-none); border-bottom-right-radius: var(--ds-border-radius-none); }
.rounded-r-2xs { border-top-right-radius: var(--ds-border-radius-2xs); border-bottom-right-radius: var(--ds-border-radius-2xs); }
.rounded-r-xs { border-top-right-radius: var(--ds-border-radius-xs); border-bottom-right-radius: var(--ds-border-radius-xs); }
.rounded-r-s { border-top-right-radius: var(--ds-border-radius-s); border-bottom-right-radius: var(--ds-border-radius-s); }
.rounded-r-m { border-top-right-radius: var(--ds-border-radius-m); border-bottom-right-radius: var(--ds-border-radius-m); }
.rounded-r-l { border-top-right-radius: var(--ds-border-radius-l); border-bottom-right-radius: var(--ds-border-radius-l); }
.rounded-r-xl { border-top-right-radius: var(--ds-border-radius-xl); border-bottom-right-radius: var(--ds-border-radius-xl); }
.rounded-r-2xl { border-top-right-radius: var(--ds-border-radius-2xl); border-bottom-right-radius: var(--ds-border-radius-2xl); }
.rounded-r-full { border-top-right-radius: var(--ds-border-radius-full); border-bottom-right-radius: var(--ds-border-radius-full); }
.rounded-b-none { border-bottom-left-radius: var(--ds-border-radius-none); border-bottom-right-radius: var(--ds-border-radius-none); }
.rounded-b-2xs { border-bottom-left-radius: var(--ds-border-radius-2xs); border-bottom-right-radius: var(--ds-border-radius-2xs); }
.rounded-b-xs { border-bottom-left-radius: var(--ds-border-radius-xs); border-bottom-right-radius: var(--ds-border-radius-xs); }
.rounded-b-s { border-bottom-left-radius: var(--ds-border-radius-s); border-bottom-right-radius: var(--ds-border-radius-s); }
.rounded-b-m { border-bottom-left-radius: var(--ds-border-radius-m); border-bottom-right-radius: var(--ds-border-radius-m); }
.rounded-b-l { border-bottom-left-radius: var(--ds-border-radius-l); border-bottom-right-radius: var(--ds-border-radius-l); }
.rounded-b-xl { border-bottom-left-radius: var(--ds-border-radius-xl); border-bottom-right-radius: var(--ds-border-radius-xl); }
.rounded-b-2xl { border-bottom-left-radius: var(--ds-border-radius-2xl); border-bottom-right-radius: var(--ds-border-radius-2xl); }
.rounded-b-full { border-bottom-left-radius: var(--ds-border-radius-full); border-bottom-right-radius: var(--ds-border-radius-full); }
.rounded-l-none { border-top-left-radius: var(--ds-border-radius-none); border-bottom-left-radius: var(--ds-border-radius-none); }
.rounded-l-2xs { border-top-left-radius: var(--ds-border-radius-2xs); border-bottom-left-radius: var(--ds-border-radius-2xs); }
.rounded-l-xs { border-top-left-radius: var(--ds-border-radius-xs); border-bottom-left-radius: var(--ds-border-radius-xs); }
.rounded-l-s { border-top-left-radius: var(--ds-border-radius-s); border-bottom-left-radius: var(--ds-border-radius-s); }
.rounded-l-m { border-top-left-radius: var(--ds-border-radius-m); border-bottom-left-radius: var(--ds-border-radius-m); }
.rounded-l-l { border-top-left-radius: var(--ds-border-radius-l); border-bottom-left-radius: var(--ds-border-radius-l); }
.rounded-l-xl { border-top-left-radius: var(--ds-border-radius-xl); border-bottom-left-radius: var(--ds-border-radius-xl); }
.rounded-l-2xl { border-top-left-radius: var(--ds-border-radius-2xl); border-bottom-left-radius: var(--ds-border-radius-2xl); }
.rounded-l-full { border-top-left-radius: var(--ds-border-radius-full); border-bottom-left-radius: var(--ds-border-radius-full); }
.rounded-tl-none { border-top-left-radius: var(--ds-border-radius-none); }
.rounded-tl-2xs { border-top-left-radius: var(--ds-border-radius-2xs); }
.rounded-tl-xs { border-top-left-radius: var(--ds-border-radius-xs); }
.rounded-tl-s { border-top-left-radius: var(--ds-border-radius-s); }
.rounded-tl-m { border-top-left-radius: var(--ds-border-radius-m); }
.rounded-tl-l { border-top-left-radius: var(--ds-border-radius-l); }
.rounded-tl-xl { border-top-left-radius: var(--ds-border-radius-xl); }
.rounded-tl-2xl { border-top-left-radius: var(--ds-border-radius-2xl); }
.rounded-tl-full { border-top-left-radius: var(--ds-border-radius-full); }
.rounded-tr-none { border-top-right-radius: var(--ds-border-radius-none); }
.rounded-tr-2xs { border-top-right-radius: var(--ds-border-radius-2xs); }
.rounded-tr-xs { border-top-right-radius: var(--ds-border-radius-xs); }
.rounded-tr-s { border-top-right-radius: var(--ds-border-radius-s); }
.rounded-tr-m { border-top-right-radius: var(--ds-border-radius-m); }
.rounded-tr-l { border-top-right-radius: var(--ds-border-radius-l); }
.rounded-tr-xl { border-top-right-radius: var(--ds-border-radius-xl); }
.rounded-tr-2xl { border-top-right-radius: var(--ds-border-radius-2xl); }
.rounded-tr-full { border-top-right-radius: var(--ds-border-radius-full); }
.rounded-br-none { border-bottom-right-radius: var(--ds-border-radius-none); }
.rounded-br-2xs { border-bottom-right-radius: var(--ds-border-radius-2xs); }
.rounded-br-xs { border-bottom-right-radius: var(--ds-border-radius-xs); }
.rounded-br-s { border-bottom-right-radius: var(--ds-border-radius-s); }
.rounded-br-m { border-bottom-right-radius: var(--ds-border-radius-m); }
.rounded-br-l { border-bottom-right-radius: var(--ds-border-radius-l); }
.rounded-br-xl { border-bottom-right-radius: var(--ds-border-radius-xl); }
.rounded-br-2xl { border-bottom-right-radius: var(--ds-border-radius-2xl); }
.rounded-br-full { border-bottom-right-radius: var(--ds-border-radius-full); }
.rounded-bl-none { border-bottom-left-radius: var(--ds-border-radius-none); }
.rounded-bl-2xs { border-bottom-left-radius: var(--ds-border-radius-2xs); }
.rounded-bl-xs { border-bottom-left-radius: var(--ds-border-radius-xs); }
.rounded-bl-s { border-bottom-left-radius: var(--ds-border-radius-s); }
.rounded-bl-m { border-bottom-left-radius: var(--ds-border-radius-m); }
.rounded-bl-l { border-bottom-left-radius: var(--ds-border-radius-l); }
.rounded-bl-xl { border-bottom-left-radius: var(--ds-border-radius-xl); }
.rounded-bl-2xl { border-bottom-left-radius: var(--ds-border-radius-2xl); }
.rounded-bl-full { border-bottom-left-radius: var(--ds-border-radius-full); }
/* Border width */
.border-0 { border-width: var(--ds-border-width-none); }
.border-1 { border-width: 1px; }
.border-2 { border-width: var(--ds-border-width-thick); }
.border-4 { border-width: 4px; }
.border-8 { border-width: 8px; }
.border-t-0 { border-top-width: var(--ds-border-width-none); }
.border-t-1 { border-top-width: 1px; }
.border-t-2 { border-top-width: var(--ds-border-width-thick); }
.border-t-4 { border-top-width: 4px; }
.border-t-8 { border-top-width: 8px; }
.border-r-0 { border-right-width: var(--ds-border-width-none); }
.border-r-1 { border-right-width: 1px; }
.border-r-2 { border-right-width: var(--ds-border-width-thick); }
.border-r-4 { border-right-width: 4px; }
.border-r-8 { border-right-width: 8px; }
.border-b-0 { border-bottom-width: var(--ds-border-width-none); }
.border-b-1 { border-bottom-width: 1px; }
.border-b-2 { border-bottom-width: var(--ds-border-width-thick); }
.border-b-4 { border-bottom-width: 4px; }
.border-b-8 { border-bottom-width: 8px; }
.border-l-0 { border-left-width: var(--ds-border-width-none); }
.border-l-1 { border-left-width: 1px; }
.border-l-2 { border-left-width: var(--ds-border-width-thick); }
.border-l-4 { border-left-width: 4px; }
.border-l-8 { border-left-width: 8px; }
/* Border style */
.border-solid { border-style: var(--ds-border-style-solid); }
.border-dashed { border-style: var(--ds-border-style-dashed); }
.border-dotted { border-style: var(--ds-border-style-dotted); }
.border-double { border-style: var(--ds-border-style-double); }
/* Border color */
.border-neutral-100 { border-color: var(--ds-border-color-light); }
.border-neutral-200 { border-color: var(--ds-border-color-default); }
.border-neutral-300 { border-color: var(--ds-border-color-dark); }
.border-white { border-color: var(--ds-color-white); }
.border-black { border-color: var(--ds-color-black); }
.border-transparent { border-color: var(--ds-color-transparent); }
/* Border collapse */
.border-collapse { border-collapse: collapse; }
.border-separate { border-collapse: separate; }
/* DS: caret.css - Caret utilities */
/* layer: utilities */
/* Caret color utilities */
.ds-caret-transparent { caret-color: transparent; }
.ds-caret-current { caret-color: currentColor; }
.ds-caret-white { caret-color: var(--ds-color-neutral-0); }
.ds-caret-black { caret-color: var(--ds-color-neutral-1000); }
/* Caret colors using semantic tokens */
.ds-caret-primary { caret-color: var(--ds-text-primary); }
.ds-caret-secondary { caret-color: var(--ds-text-secondary); }
.ds-caret-tertiary { caret-color: var(--ds-text-tertiary); }
.ds-caret-inverted { caret-color: var(--ds-text-inverse); }
.ds-caret-disabled { caret-color: var(--ds-text-disabled); }
/* Caret colors using status tokens */
.ds-caret-success { caret-color: var(--ds-status-success); }
.ds-caret-warning { caret-color: var(--ds-status-warning); }
.ds-caret-error { caret-color: var(--ds-status-error); }
.ds-caret-info { caret-color: var(--ds-status-info); }
/* DS skeleton: 02-utilities/color.css */
/* This file is generated as a placeholder for the design system structure. */
/* layer: utilities */
/* utilities: color */
/* Text colors - semantic */
.text-primary { color: var(--ds-color-neutral-900); }
.text-secondary { color: var(--ds-color-neutral-600); }
.text-tertiary { color: var(--ds-color-neutral-500); }
.text-inverse { color: var(--ds-color-white); }
.text-disabled { color: var(--ds-color-neutral-400); }
.text-error { color: var(--ds-color-status-error); }
.text-success { color: var(--ds-color-status-success); }
.text-warning { color: var(--ds-color-status-warning); }
.text-info { color: var(--ds-color-status-info); }
/* Text colors - neutral scale */
.text-neutral-50 { color: var(--ds-color-neutral-50); }
.text-neutral-100 { color: var(--ds-color-neutral-100); }
.text-neutral-200 { color: var(--ds-color-neutral-200); }
.text-neutral-300 { color: var(--ds-color-neutral-300); }
.text-neutral-400 { color: var(--ds-color-neutral-400); }
.text-neutral-500 { color: var(--ds-color-neutral-500); }
.text-neutral-600 { color: var(--ds-color-neutral-600); }
.text-neutral-700 { color: var(--ds-color-neutral-700); }
.text-neutral-800 { color: var(--ds-color-neutral-800); }
.text-neutral-900 { color: var(--ds-color-neutral-900); }
/* Background colors - semantic */
.bg-primary { background-color: var(--ds-color-neutral-900); }
.bg-secondary { background-color: var(--ds-color-neutral-100); }
.bg-tertiary { background-color: var(--ds-color-neutral-50); }
.bg-inverse { background-color: var(--ds-color-neutral-900); }
.bg-disabled { background-color: var(--ds-color-neutral-100); }
.bg-error { background-color: var(--ds-color-status-error); }
.bg-success { background-color: var(--ds-color-status-success); }
.bg-warning { background-color: var(--ds-color-status-warning); }
.bg-info { background-color: var(--ds-color-status-info); }
/* Background colors - neutral scale */
.bg-neutral-50 { background-color: var(--ds-color-neutral-50); }
.bg-neutral-100 { background-color: var(--ds-color-neutral-100); }
.bg-neutral-200 { background-color: var(--ds-color-neutral-200); }
.bg-neutral-300 { background-color: var(--ds-color-neutral-300); }
.bg-neutral-400 { background-color: var(--ds-color-neutral-400); }
.bg-neutral-500 { background-color: var(--ds-color-neutral-500); }
.bg-neutral-600 { background-color: var(--ds-color-neutral-600); }
.bg-neutral-700 { background-color: var(--ds-color-neutral-700); }
.bg-neutral-800 { background-color: var(--ds-color-neutral-800); }
.bg-neutral-900 { background-color: var(--ds-color-neutral-900); }
/* Background colors - brand */
.bg-brand-primary { background-color: var(--ds-color-brand-primary); }
.bg-brand-secondary { background-color: var(--ds-color-brand-secondary); }
.bg-brand-accent { background-color: var(--ds-color-brand-accent); }
/* Special backgrounds */
.bg-white { background-color: var(--ds-color-white); }
.bg-black { background-color: var(--ds-color-black); }
.bg-transparent { background-color: var(--ds-color-transparent); }
.bg-overlay-light { background-color: var(--ds-color-overlay-light); }
.bg-overlay-dark { background-color: var(--ds-color-overlay-dark); }
.bg-backdrop { background-color: var(--ds-color-backdrop); }
/* Accent colors */
.accent-red-50 { accent-color: var(--ds-color-red-50); }
.accent-red-100 { accent-color: var(--ds-color-red-100); }
.accent-red-500 { accent-color: var(--ds-color-red-500); }
.accent-red-600 { accent-color: var(--ds-color-red-600); }
.accent-red-700 { accent-color: var(--ds-color-red-700); }
.accent-blue-50 { accent-color: var(--ds-color-blue-50); }
.accent-blue-100 { accent-color: var(--ds-color-blue-100); }
.accent-blue-500 { accent-color: var(--ds-color-blue-500); }
.accent-blue-600 { accent-color: var(--ds-color-blue-600); }
.accent-blue-700 { accent-color: var(--ds-color-blue-700); }
.accent-green-50 { accent-color: var(--ds-color-green-50); }
.accent-green-100 { accent-color: var(--ds-color-green-100); }
.accent-green-500 { accent-color: var(--ds-color-green-500); }
.accent-green-600 { accent-color: var(--ds-color-green-600); }
.accent-green-700 { accent-color: var(--ds-color-green-700); }
.accent-yellow-50 { accent-color: var(--ds-color-yellow-50); }
.accent-yellow-100 { accent-color: var(--ds-color-yellow-100); }
.accent-yellow-500 { accent-color: var(--ds-color-yellow-500); }
.accent-yellow-600 { accent-color: var(--ds-color-yellow-600); }
.accent-yellow-700 { accent-color: var(--ds-color-yellow-700); }
/* Caret color */
.caret-red-500 { caret-color: var(--ds-color-red-500); }
.caret-blue-500 { caret-color: var(--ds-color-blue-500); }
.caret-green-500 { caret-color: var(--ds-color-green-500); }
.caret-yellow-500 { caret-color: var(--ds-color-yellow-500); }
.caret-neutral-900 { caret-color: var(--ds-color-neutral-900); }
/* Selection color */
.selection\:bg-red-500::-moz-selection { background-color: var(--ds-color-red-500); }
.selection\:bg-red-500::selection { background-color: var(--ds-color-red-500); }
.selection\:bg-blue-500::-moz-selection { background-color: var(--ds-color-blue-500); }
.selection\:bg-blue-500::selection { background-color: var(--ds-color-blue-500); }
.selection\:bg-green-500::-moz-selection { background-color: var(--ds-color-green-500); }
.selection\:bg-green-500::selection { background-color: var(--ds-color-green-500); }
.selection\:bg-yellow-500::-moz-selection { background-color: var(--ds-color-yellow-500); }
.selection\:bg-yellow-500::selection { background-color: var(--ds-color-yellow-500); }
.selection\:text-white::-moz-selection { color: var(--ds-color-white); }
.selection\:text-white::selection { color: var(--ds-color-white); }
/* DS: columns.css - CSS columns utilities */
/* layer: utilities */
/* Columns count utilities */
.ds-columns-1 { -moz-columns: 1; columns: 1; }
.ds-columns-2 { -moz-columns: 2; columns: 2; }
.ds-columns-3 { -moz-columns: 3; columns: 3; }
.ds-columns-4 { -moz-columns: 4; columns: 4; }
.ds-columns-5 { -moz-columns: 5; columns: 5; }
.ds-columns-6 { -moz-columns: 6; columns: 6; }
.ds-columns-7 { -moz-columns: 7; columns: 7; }
.ds-columns-8 { -moz-columns: 8; columns: 8; }
.ds-columns-9 { -moz-columns: 9; columns: 9; }
.ds-columns-10 { -moz-columns: 10; columns: 10; }
.ds-columns-11 { -moz-columns: 11; columns: 11; }
.ds-columns-12 { -moz-columns: 12; columns: 12; }
.ds-columns-auto { -moz-columns: auto; columns: auto; }
/* Column width utilities */
.ds-column-width-3xs { -moz-column-width: var(--ds-spacing-3xs); column-width: var(--ds-spacing-3xs); }
.ds-column-width-2xs { -moz-column-width: var(--ds-spacing-2xs); column-width: var(--ds-spacing-2xs); }
.ds-column-width-xs { -moz-column-width: var(--ds-spacing-xs); column-width: var(--ds-spacing-xs); }
.ds-column-width-sm { -moz-column-width: var(--ds-spacing-s); column-width: var(--ds-spacing-s); }
.ds-column-width-md { -moz-column-width: var(--ds-spacing-m); column-width: var(--ds-spacing-m); }
.ds-column-width-lg { -moz-column-width: var(--ds-spacing-l); column-width: var(--ds-spacing-l); }
.ds-column-width-xl { -moz-column-width: var(--ds-spacing-xl); column-width: var(--ds-spacing-xl); }
.ds-column-width-auto { -moz-column-width: auto; column-width: auto; }
/* Column gap utilities */
.ds-column-gap-3xs { -moz-column-gap: var(--ds-spacing-3xs); column-gap: var(--ds-spacing-3xs); }
.ds-column-gap-2xs { -moz-column-gap: var(--ds-spacing-2xs); column-gap: var(--ds-spacing-2xs); }
.ds-column-gap-xs { -moz-column-gap: var(--ds-spacing-xs); column-gap: var(--ds-spacing-xs); }
.ds-column-gap-sm { -moz-column-gap: var(--ds-spacing-s); column-gap: var(--ds-spacing-s); }
.ds-column-gap-md { -moz-column-gap: var(--ds-spacing-m); column-gap: var(--ds-spacing-m); }
.ds-column-gap-lg { -moz-column-gap: var(--ds-spacing-l); column-gap: var(--ds-spacing-l); }
.ds-column-gap-xl { -moz-column-gap: var(--ds-spacing-xl); column-gap: var(--ds-spacing-xl); }
.ds-column-gap-0 { -moz-column-gap: 0; column-gap: 0; }
/* Column rule utilities */
.ds-column-rule-solid { -moz-column-rule-style: solid; column-rule-style: solid; }
.ds-column-rule-dashed { -moz-column-rule-style: dashed; column-rule-style: dashed; }
.ds-column-rule-dotted { -moz-column-rule-style: dotted; column-rule-style: dotted; }
.ds-column-rule-double { -moz-column-rule-style: double; column-rule-style: double; }
.ds-column-rule-none { -moz-column-rule-style: none; column-rule-style: none; }
/* Column rule width utilities */
.ds-column-rule-1 { -moz-column-rule-width: 1px; column-rule-width: 1px; }
.ds-column-rule-2 { -moz-column-rule-width: 2px; column-rule-width: 2px; }
.ds-column-rule-4 { -moz-column-rule-width: 4px; column-rule-width: 4px; }
.ds-column-rule-8 { -moz-column-rule-width: 8px; column-rule-width: 8px; }
/* Column rule color utilities */
.ds-column-rule-transparent { -moz-column-rule-color: transparent; column-rule-color: transparent; }
.ds-column-rule-current { -moz-column-rule-color: currentColor; column-rule-color: currentColor; }
.ds-column-rule-primary { -moz-column-rule-color: var(--ds-text-primary); column-rule-color: var(--ds-text-primary); }
.ds-column-rule-secondary { -moz-column-rule-color: var(--ds-text-secondary); column-rule-color: var(--ds-text-secondary); }
.ds-column-rule-tertiary { -moz-column-rule-color: var(--ds-text-tertiary); column-rule-color: var(--ds-text-tertiary); }
.ds-column-rule-disabled { -moz-column-rule-color: var(--ds-text-disabled); column-rule-color: var(--ds-text-disabled); }
/* Column span utilities */
.ds-column-span-none { -moz-column-span: none; column-span: none; }
.ds-column-span-all { -moz-column-span: all; column-span: all; }
/* Column fill utilities */
.ds-column-fill-auto { -moz-column-fill: auto; column-fill: auto; }
.ds-column-fill-balance { -moz-column-fill: balance; column-fill: balance; }
.ds-column-fill-balance-all { -moz-column-fill: balance-all; column-fill: balance-all; }
/* DS: container-queries.css - Container query utilities */
/* layer: utilities */
/* Container type utilities */
.ds-container-type-size { container-type: size; }
.ds-container-type-inline-size { container-type: inline-size; }
.ds-container-type-normal { container-type: normal; }
/* Container name utilities */
.ds-container-name-none { container-name: none; }
.ds-container-name-card { container-name: card; }
.ds-container-name-sidebar { container-name: sidebar; }
.ds-container-name-modal { container-name: modal; }
.ds-container-name-header { container-name: header; }
.ds-container-name-footer { container-name: footer; }
/* Container queries using style queries */
/* Note: These require modern browser support for @container */
/* Example container query classes (would need actual @container rules) */
@container card (min-width: 200px) {
  .ds-cq-card-min-200 { /* styles */ }
}
@container sidebar (min-width: 300px) {
  .ds-cq-sidebar-min-300 { /* styles */ }
}
@container modal (min-width: 500px) {
  .ds-cq-modal-min-500 { /* styles */ }
}
/* Generic container query utilities */
.ds-cq-xs { /* min-width: 320px */ }
.ds-cq-sm { /* min-width: 480px */ }
.ds-cq-md { /* min-width: 768px */ }
.ds-cq-lg { /* min-width: 1024px */ }
.ds-cq-xl { /* min-width: 1280px */ }
.ds-cq-2xl { /* min-width: 1536px */ }
/* DS skeleton: 02-utilities/display.css */
/* This file is generated as a placeholder for the design system structure. */
/* layer: utilities */
/* utilities: display */
/* Display */
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.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-table-row { display: table-row; }
.d-table-cell { display: table-cell; }
.d-none { display: none; }
.d-contents { display: contents; }
/* Visibility */
.v-visible { visibility: visible; }
.v-hidden { visibility: hidden; }
.v-collapse { visibility: collapse; }
/* Position */
.p-static { position: static; }
.p-relative { position: relative; }
.p-absolute { position: absolute; }
.p-fixed { position: fixed; }
.p-sticky { position: sticky; }
/* DS: filters.css - CSS filter utilities */
/* layer: utilities */
/* Blur filters */
.ds-blur-none { filter: var(--ds-blur-none); }
.ds-blur-sm { filter: var(--ds-blur-sm); }
.ds-blur { filter: var(--ds-blur-md); }
.ds-blur-md { filter: var(--ds-blur-md); }
.ds-blur-lg { filter: var(--ds-blur-lg); }
.ds-blur-xl { filter: var(--ds-blur-xl); }
.ds-blur-2xl { filter: var(--ds-blur-2xl); }
.ds-blur-3xl { filter: var(--ds-blur-3xl); }
/* Brightness filters */
.ds-brightness-0 { filter: brightness(0); }
.ds-brightness-50 { filter: brightness(0.5); }
.ds-brightness-75 { filter: brightness(0.75); }
.ds-brightness-90 { filter: brightness(0.9); }
.ds-brightness-95 { filter: brightness(0.95); }
.ds-brightness-100 { filter: brightness(1); }
.ds-brightness-105 { filter: brightness(1.05); }
.ds-brightness-110 { filter: brightness(1.1); }
.ds-brightness-125 { filter: brightness(1.25); }
.ds-brightness-150 { filter: brightness(1.5); }
.ds-brightness-200 { filter: brightness(2); }
/* Contrast filters */
.ds-contrast-0 { filter: contrast(0); }
.ds-contrast-50 { filter: contrast(0.5); }
.ds-contrast-75 { filter: contrast(0.75); }
.ds-contrast-100 { filter: contrast(1); }
.ds-contrast-125 { filter: contrast(1.25); }
.ds-contrast-150 { filter: contrast(1.5); }
.ds-contrast-200 { filter: contrast(2); }
/* Grayscale filters */
.ds-grayscale-0 { filter: grayscale(0); }
.ds-grayscale { filter: grayscale(100%); }
/* Hue rotate filters */
.ds-hue-rotate-0 { filter: hue-rotate(0deg); }
.ds-hue-rotate-15 { filter: hue-rotate(15deg); }
.ds-hue-rotate-30 { filter: hue-rotate(30deg); }
.ds-hue-rotate-60 { filter: hue-rotate(60deg); }
.ds-hue-rotate-90 { filter: hue-rotate(90deg); }
.ds-hue-rotate-180 { filter: hue-rotate(180deg); }
/* Invert filters */
.ds-invert-0 { filter: invert(0); }
.ds-invert { filter: invert(100%); }
/* Saturate filters */
.ds-saturate-0 { filter: saturate(0); }
.ds-saturate-50 { filter: saturate(0.5); }
.ds-saturate-100 { filter: saturate(1); }
.ds-saturate-150 { filter: saturate(1.5); }
.ds-saturate-200 { filter: saturate(2); }
/* Sepia filters */
.ds-sepia-0 { filter: sepia(0); }
.ds-sepia { filter: sepia(100%); }
/* Opacity filters */
.ds-opacity-0 { filter: opacity(0); }
.ds-opacity-5 { filter: opacity(0.05); }
.ds-opacity-10 { filter: opacity(0.1); }
.ds-opacity-20 { filter: opacity(0.2); }
.ds-opacity-25 { filter: opacity(0.25); }
.ds-opacity-30 { filter: opacity(0.3); }
.ds-opacity-40 { filter: opacity(0.4); }
.ds-opacity-50 { filter: opacity(0.5); }
.ds-opacity-60 { filter: opacity(0.6); }
.ds-opacity-70 { filter: opacity(0.7); }
.ds-opacity-75 { filter: opacity(0.75); }
.ds-opacity-80 { filter: opacity(0.8); }
.ds-opacity-90 { filter: opacity(0.9); }
.ds-opacity-95 { filter: opacity(0.95); }
.ds-opacity-100 { filter: opacity(1); }
/* Backdrop filters */
.ds-backdrop-blur-none { -webkit-backdrop-filter: var(--ds-backdrop-blur-none); backdrop-filter: var(--ds-backdrop-blur-none); }
.ds-backdrop-blur-sm { -webkit-backdrop-filter: var(--ds-backdrop-blur-sm); backdrop-filter: var(--ds-backdrop-blur-sm); }
.ds-backdrop-blur { -webkit-backdrop-filter: var(--ds-backdrop-blur-md); backdrop-filter: var(--ds-backdrop-blur-md); }
.ds-backdrop-blur-md { -webkit-backdrop-filter: var(--ds-backdrop-blur-md); backdrop-filter: var(--ds-backdrop-blur-md); }
.ds-backdrop-blur-lg { -webkit-backdrop-filter: var(--ds-backdrop-blur-lg); backdrop-filter: var(--ds-backdrop-blur-lg); }
.ds-backdrop-blur-xl { -webkit-backdrop-filter: var(--ds-backdrop-blur-xl); backdrop-filter: var(--ds-backdrop-blur-xl); }
/* Drop shadow filters */
.ds-drop-shadow-sm { filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06)); }
.ds-drop-shadow { filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)); }
.ds-drop-shadow-md { filter: drop-shadow(0 4px 6px -1px rgb(0 0 0 / 0.1)) drop-shadow(0 2px 4px -1px rgb(0 0 0 / 0.06)); }
.ds-drop-shadow-lg { filter: drop-shadow(0 10px 15px -3px rgb(0 0 0 / 0.1)) drop-shadow(0 4px 6px -2px rgb(0 0 0 / 0.05)); }
.ds-drop-shadow-xl { filter: drop-shadow(0 20px 25px -5px rgb(0 0 0 / 0.1)) drop-shadow(0 10px 10px -5px rgb(0 0 0 / 0.04)); }
.ds-drop-shadow-2xl { filter: drop-shadow(0 25px 50px -12px rgb(0 0 0 / 0.25)); }
.ds-drop-shadow-none { filter: drop-shadow(0 0 #0000); }
/* DS skeleton: 02-utilities/flex.css */
/* This file is generated as a placeholder for the design system structure. */
/* layer: utilities */
/* utilities: flex */
/* Display flex */
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
/* Flex direction */
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-column { flex-direction: column; }
.flex-column-reverse { flex-direction: column-reverse; }
/* Flex wrap */
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
/* Justify content */
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }
/* Align items */
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }
/* Align content */
.content-start { align-content: flex-start; }
.content-end { align-content: flex-end; }
.content-center { align-content: center; }
.content-between { align-content: space-between; }
.content-around { align-content: space-around; }
.content-stretch { align-content: stretch; }
/* Align self */
.self-auto { align-self: auto; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.self-center { align-self: center; }
.self-baseline { align-self: baseline; }
.self-stretch { align-self: stretch; }
/* Flex grow/shrink */
.flex-grow-0 { flex-grow: 0; }
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink-1 { flex-shrink: 1; }
/* Flex basis */
.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }
/* Order */
.order-first { order: -9999; }
.order-last { order: 9999; }
.order-none { order: 0; }
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.order-6 { order: 6; }
.order-7 { order: 7; }
.order-8 { order: 8; }
.order-9 { order: 9; }
.order-10 { order: 10; }
.order-11 { order: 11; }
.order-12 { order: 12; }
/* DS: grid-areas.css - CSS Grid area utilities */
/* layer: utilities */
/* Grid area utilities */
.ds-grid-area-auto { grid-area: auto; }
.ds-grid-area-span-1 { grid-area: span 1 / span 1; }
.ds-grid-area-span-2 { grid-area: span 2 / span 2; }
.ds-grid-area-span-3 { grid-area: span 3 / span 3; }
.ds-grid-area-span-4 { grid-area: span 4 / span 4; }
.ds-grid-area-span-5 { grid-area: span 5 / span 5; }
.ds-grid-area-span-6 { grid-area: span 6 / span 6; }
.ds-grid-area-span-full { grid-area: 1 / 1 / -1 / -1; }
/* Grid row utilities */
.ds-grid-row-auto { grid-row: auto; }
.ds-grid-row-span-1 { grid-row: span 1; }
.ds-grid-row-span-2 { grid-row: span 2; }
.ds-grid-row-span-3 { grid-row: span 3; }
.ds-grid-row-span-4 { grid-row: span 4; }
.ds-grid-row-span-5 { grid-row: span 5; }
.ds-grid-row-span-6 { grid-row: span 6; }
.ds-grid-row-span-full { grid-row: 1 / -1; }
/* Grid column utilities */
.ds-grid-col-auto { grid-column: auto; }
.ds-grid-col-span-1 { grid-column: span 1; }
.ds-grid-col-span-2 { grid-column: span 2; }
.ds-grid-col-span-3 { grid-column: span 3; }
.ds-grid-col-span-4 { grid-column: span 4; }
.ds-grid-col-span-5 { grid-column: span 5; }
.ds-grid-col-span-6 { grid-column: span 6; }
.ds-grid-col-span-full { grid-column: 1 / -1; }
/* Grid row start utilities */
.ds-grid-row-start-1 { grid-row-start: 1; }
.ds-grid-row-start-2 { grid-row-start: 2; }
.ds-grid-row-start-3 { grid-row-start: 3; }
.ds-grid-row-start-4 { grid-row-start: 4; }
.ds-grid-row-start-5 { grid-row-start: 5; }
.ds-grid-row-start-6 { grid-row-start: 6; }
.ds-grid-row-start-7 { grid-row-start: 7; }
.ds-grid-row-start-auto { grid-row-start: auto; }
/* Grid row end utilities */
.ds-grid-row-end-1 { grid-row-end: 1; }
.ds-grid-row-end-2 { grid-row-end: 2; }
.ds-grid-row-end-3 { grid-row-end: 3; }
.ds-grid-row-end-4 { grid-row-end: 4; }
.ds-grid-row-end-5 { grid-row-end: 5; }
.ds-grid-row-end-6 { grid-row-end: 6; }
.ds-grid-row-end-7 { grid-row-end: 7; }
.ds-grid-row-end-auto { grid-row-end: auto; }
/* Grid column start utilities */
.ds-grid-col-start-1 { grid-column-start: 1; }
.ds-grid-col-start-2 { grid-column-start: 2; }
.ds-grid-col-start-3 { grid-column-start: 3; }
.ds-grid-col-start-4 { grid-column-start: 4; }
.ds-grid-col-start-5 { grid-column-start: 5; }
.ds-grid-col-start-6 { grid-column-start: 6; }
.ds-grid-col-start-7 { grid-column-start: 7; }
.ds-grid-col-start-8 { grid-column-start: 8; }
.ds-grid-col-start-9 { grid-column-start: 9; }
.ds-grid-col-start-10 { grid-column-start: 10; }
.ds-grid-col-start-11 { grid-column-start: 11; }
.ds-grid-col-start-12 { grid-column-start: 12; }
.ds-grid-col-start-13 { grid-column-start: 13; }
.ds-grid-col-start-auto { grid-column-start: auto; }
/* Grid column end utilities */
.ds-grid-col-end-1 { grid-column-end: 1; }
.ds-grid-col-end-2 { grid-column-end: 2; }
.ds-grid-col-end-3 { grid-column-end: 3; }
.ds-grid-col-end-4 { grid-column-end: 4; }
.ds-grid-col-end-5 { grid-column-end: 5; }
.ds-grid-col-end-6 { grid-column-end: 6; }
.ds-grid-col-end-7 { grid-column-end: 7; }
.ds-grid-col-end-8 { grid-column-end: 8; }
.ds-grid-col-end-9 { grid-column-end: 9; }
.ds-grid-col-end-10 { grid-column-end: 10; }
.ds-grid-col-end-11 { grid-column-end: 11; }
.ds-grid-col-end-12 { grid-column-end: 12; }
.ds-grid-col-end-13 { grid-column-end: 13; }
.ds-grid-col-end-auto { grid-column-end: auto; }
/* DS: utilities/grid.css - Grid utilities */
/* layer: utilities */
.ds-grid {
  display: grid;
}
.ds-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.ds-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ds-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ds-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ds-grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ds-grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.ds-grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.ds-grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.ds-grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.ds-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.ds-grid-cols-none { grid-template-columns: none; }
.ds-grid-cols-subgrid { grid-template-columns: subgrid; }
.ds-grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
.ds-grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.ds-grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.ds-grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.ds-grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); }
.ds-grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); }
.ds-grid-rows-none { grid-template-rows: none; }
.ds-grid-rows-subgrid { grid-template-rows: subgrid; }
.ds-grid-flow-row { grid-auto-flow: row; }
.ds-grid-flow-col { grid-auto-flow: column; }
.ds-grid-flow-dense { grid-auto-flow: dense; }
.ds-grid-flow-row-dense { grid-auto-flow: row dense; }
.ds-grid-flow-col-dense { grid-auto-flow: column dense; }
.ds-grid-cols-auto { grid-template-columns: auto; }
.ds-grid-cols-min { grid-template-columns: min-content; }
.ds-grid-cols-max { grid-template-columns: max-content; }
.ds-grid-cols-fr { grid-template-columns: 1fr; }
.ds-col-auto { grid-column: auto; }
.ds-col-span-1 { grid-column: span 1 / span 1; }
.ds-col-span-2 { grid-column: span 2 / span 2; }
.ds-col-span-3 { grid-column: span 3 / span 3; }
.ds-col-span-4 { grid-column: span 4 / span 4; }
.ds-col-span-5 { grid-column: span 5 / span 5; }
.ds-col-span-6 { grid-column: span 6 / span 6; }
.ds-col-span-7 { grid-column: span 7 / span 7; }
.ds-col-span-8 { grid-column: span 8 / span 8; }
.ds-col-span-9 { grid-column: span 9 / span 9; }
.ds-col-span-10 { grid-column: span 10 / span 10; }
.ds-col-span-11 { grid-column: span 11 / span 11; }
.ds-col-span-12 { grid-column: span 12 / span 12; }
.ds-col-span-full { grid-column: 1 / -1; }
.ds-col-start-1 { grid-column-start: 1; }
.ds-col-start-2 { grid-column-start: 2; }
.ds-col-start-3 { grid-column-start: 3; }
.ds-col-start-4 { grid-column-start: 4; }
.ds-col-start-5 { grid-column-start: 5; }
.ds-col-start-6 { grid-column-start: 6; }
.ds-col-start-7 { grid-column-start: 7; }
.ds-col-start-8 { grid-column-start: 8; }
.ds-col-start-9 { grid-column-start: 9; }
.ds-col-start-10 { grid-column-start: 10; }
.ds-col-start-11 { grid-column-start: 11; }
.ds-col-start-12 { grid-column-start: 12; }
.ds-col-start-13 { grid-column-start: 13; }
.ds-col-start-auto { grid-column-start: auto; }
.ds-col-end-1 { grid-column-end: 1; }
.ds-col-end-2 { grid-column-end: 2; }
.ds-col-end-3 { grid-column-end: 3; }
.ds-col-end-4 { grid-column-end: 4; }
.ds-col-end-5 { grid-column-end: 5; }
.ds-col-end-6 { grid-column-end: 6; }
.ds-col-end-7 { grid-column-end: 7; }
.ds-col-end-8 { grid-column-end: 8; }
.ds-col-end-9 { grid-column-end: 9; }
.ds-col-end-10 { grid-column-end: 10; }
.ds-col-end-11 { grid-column-end: 11; }
.ds-col-end-12 { grid-column-end: 12; }
.ds-col-end-13 { grid-column-end: 13; }
.ds-col-end-auto { grid-column-end: auto; }
.ds-row-auto { grid-row: auto; }
.ds-row-span-1 { grid-row: span 1 / span 1; }
.ds-row-span-2 { grid-row: span 2 / span 2; }
.ds-row-span-3 { grid-row: span 3 / span 3; }
.ds-row-span-4 { grid-row: span 4 / span 4; }
.ds-row-span-5 { grid-row: span 5 / span 5; }
.ds-row-span-6 { grid-row: span 6 / span 6; }
.ds-row-span-full { grid-row: 1 / -1; }
.ds-row-start-1 { grid-row-start: 1; }
.ds-row-start-2 { grid-row-start: 2; }
.ds-row-start-3 { grid-row-start: 3; }
.ds-row-start-4 { grid-row-start: 4; }
.ds-row-start-5 { grid-row-start: 5; }
.ds-row-start-6 { grid-row-start: 6; }
.ds-row-start-7 { grid-row-start: 7; }
.ds-row-start-auto { grid-row-start: auto; }
.ds-row-end-1 { grid-row-end: 1; }
.ds-row-end-2 { grid-row-end: 2; }
.ds-row-end-3 { grid-row-end: 3; }
.ds-row-end-4 { grid-row-end: 4; }
.ds-row-end-5 { grid-row-end: 5; }
.ds-row-end-6 { grid-row-end: 6; }
.ds-row-end-7 { grid-row-end: 7; }
.ds-row-end-auto { grid-row-end: auto; }
.ds-grid-auto-cols-auto { grid-auto-columns: auto; }
.ds-grid-auto-cols-min { grid-auto-columns: min-content; }
.ds-grid-auto-cols-max { grid-auto-columns: max-content; }
.ds-grid-auto-cols-fr { grid-auto-columns: minmax(0, 1fr); }
.ds-grid-auto-rows-auto { grid-auto-rows: auto; }
.ds-grid-auto-rows-min { grid-auto-rows: min-content; }
.ds-grid-auto-rows-max { grid-auto-rows: max-content; }
.ds-grid-auto-rows-fr { grid-auto-rows: minmax(0, 1fr); }
.ds-gap-0 { gap: var(--ds-spacing-0); }
.ds-gap-px { gap: 1px; }
.ds-gap-0\.5 { gap: 0.125rem; }
.ds-gap-1 { gap: var(--ds-spacing-2xs); }
.ds-gap-1\.5 { gap: 0.375rem; }
.ds-gap-2 { gap: var(--ds-spacing-xs); }
.ds-gap-2\.5 { gap: 0.625rem; }
.ds-gap-3 { gap: var(--ds-spacing-s); }
.ds-gap-3\.5 { gap: 0.875rem; }
.ds-gap-4 { gap: var(--ds-spacing-m); }
.ds-gap-5 { gap: 1.25rem; }
.ds-gap-6 { gap: var(--ds-spacing-l); }
.ds-gap-7 { gap: 1.75rem; }
.ds-gap-8 { gap: var(--ds-spacing-xl); }
.ds-gap-9 { gap: 2.25rem; }
.ds-gap-10 { gap: var(--ds-spacing-2xl); }
.ds-gap-11 { gap: 2.75rem; }
.ds-gap-12 { gap: var(--ds-spacing-3xl); }
.ds-gap-14 { gap: 3.5rem; }
.ds-gap-16 { gap: 4rem; }
.ds-gap-20 { gap: 5rem; }
.ds-gap-24 { gap: 6rem; }
.ds-gap-28 { gap: 7rem; }
.ds-gap-32 { gap: 8rem; }
.ds-gap-36 { gap: 9rem; }
.ds-gap-40 { gap: 10rem; }
.ds-gap-44 { gap: 11rem; }
.ds-gap-48 { gap: 12rem; }
.ds-gap-52 { gap: 13rem; }
.ds-gap-56 { gap: 14rem; }
.ds-gap-60 { gap: 15rem; }
.ds-gap-64 { gap: 16rem; }
.ds-gap-72 { gap: 18rem; }
.ds-gap-80 { gap: 20rem; }
.ds-gap-96 { gap: 24rem; }
.ds-gap-x-0 { -moz-column-gap: var(--ds-spacing-0); column-gap: var(--ds-spacing-0); }
.ds-gap-x-px { -moz-column-gap: 1px; column-gap: 1px; }
.ds-gap-x-0\.5 { -moz-column-gap: 0.125rem; column-gap: 0.125rem; }
.ds-gap-x-1 { -moz-column-gap: var(--ds-spacing-2xs); column-gap: var(--ds-spacing-2xs); }
.ds-gap-x-1\.5 { -moz-column-gap: 0.375rem; column-gap: 0.375rem; }
.ds-gap-x-2 { -moz-column-gap: var(--ds-spacing-xs); column-gap: var(--ds-spacing-xs); }
.ds-gap-x-2\.5 { -moz-column-gap: 0.625rem; column-gap: 0.625rem; }
.ds-gap-x-3 { -moz-column-gap: var(--ds-spacing-s); column-gap: var(--ds-spacing-s); }
.ds-gap-x-3\.5 { -moz-column-gap: 0.875rem; column-gap: 0.875rem; }
.ds-gap-x-4 { -moz-column-gap: var(--ds-spacing-m); column-gap: var(--ds-spacing-m); }
.ds-gap-x-5 { -moz-column-gap: 1.25rem; column-gap: 1.25rem; }
.ds-gap-x-6 { -moz-column-gap: var(--ds-spacing-l); column-gap: var(--ds-spacing-l); }
.ds-gap-y-0 { row-gap: var(--ds-spacing-0); }
.ds-gap-y-px { row-gap: 1px; }
.ds-gap-y-0\.5 { row-gap: 0.125rem; }
.ds-gap-y-1 { row-gap: var(--ds-spacing-2xs); }
.ds-gap-y-1\.5 { row-gap: 0.375rem; }
.ds-gap-y-2 { row-gap: var(--ds-spacing-xs); }
.ds-gap-y-2\.5 { row-gap: 0.625rem; }
.ds-gap-y-3 { row-gap: var(--ds-spacing-s); }
.ds-gap-y-3\.5 { row-gap: 0.875rem; }
.ds-gap-y-4 { row-gap: var(--ds-spacing-m); }
.ds-gap-y-5 { row-gap: 1.25rem; }
.ds-gap-y-6 { row-gap: var(--ds-spacing-l); }
/* DS: inset.css - Inset utilities (top/right/bottom/left) */
/* layer: utilities */
/* Inset utilities */
.ds-inset-0 { inset: 0px; }
.ds-inset-x-0 { left: 0px; right: 0px; }
.ds-inset-y-0 { top: 0px; bottom: 0px; }
.ds-inset-px { inset: 1px; }
.ds-inset-x-px { left: 1px; right: 1px; }
.ds-inset-y-px { top: 1px; bottom: 1px; }
.ds-inset-0.5 { inset: 0.125rem; }
.ds-inset-x-0.5 { left: 0.125rem; right: 0.125rem; }
.ds-inset-y-0.5 { top: 0.125rem; bottom: 0.125rem; }
.ds-inset-1 { inset: 0.25rem; }
.ds-inset-x-1 { left: 0.25rem; right: 0.25rem; }
.ds-inset-y-1 { top: 0.25rem; bottom: 0.25rem; }
.ds-inset-1.5 { inset: 0.375rem; }
.ds-inset-x-1.5 { left: 0.375rem; right: 0.375rem; }
.ds-inset-y-1.5 { top: 0.375rem; bottom: 0.375rem; }
.ds-inset-2 { inset: 0.5rem; }
.ds-inset-x-2 { left: 0.5rem; right: 0.5rem; }
.ds-inset-y-2 { top: 0.5rem; bottom: 0.5rem; }
.ds-inset-2.5 { inset: 0.625rem; }
.ds-inset-x-2.5 { left: 0.625rem; right: 0.625rem; }
.ds-inset-y-2.5 { top: 0.625rem; bottom: 0.625rem; }
.ds-inset-3 { inset: 0.75rem; }
.ds-inset-x-3 { left: 0.75rem; right: 0.75rem; }
.ds-inset-y-3 { top: 0.75rem; bottom: 0.75rem; }
.ds-inset-3.5 { inset: 0.875rem; }
.ds-inset-x-3.5 { left: 0.875rem; right: 0.875rem; }
.ds-inset-y-3.5 { top: 0.875rem; bottom: 0.875rem; }
.ds-inset-4 { inset: 1rem; }
.ds-inset-x-4 { left: 1rem; right: 1rem; }
.ds-inset-y-4 { top: 1rem; bottom: 1rem; }
.ds-inset-5 { inset: 1.25rem; }
.ds-inset-x-5 { left: 1.25rem; right: 1.25rem; }
.ds-inset-y-5 { top: 1.25rem; bottom: 1.25rem; }
.ds-inset-6 { inset: 1.5rem; }
.ds-inset-x-6 { left: 1.5rem; right: 1.5rem; }
.ds-inset-y-6 { top: 1.5rem; bottom: 1.5rem; }
.ds-inset-7 { inset: 1.75rem; }
.ds-inset-x-7 { left: 1.75rem; right: 1.75rem; }
.ds-inset-y-7 { top: 1.75rem; bottom: 1.75rem; }
.ds-inset-8 { inset: 2rem; }
.ds-inset-x-8 { left: 2rem; right: 2rem; }
.ds-inset-y-8 { top: 2rem; bottom: 2rem; }
.ds-inset-9 { inset: 2.25rem; }
.ds-inset-x-9 { left: 2.25rem; right: 2.25rem; }
.ds-inset-y-9 { top: 2.25rem; bottom: 2.25rem; }
.ds-inset-10 { inset: 2.5rem; }
.ds-inset-x-10 { left: 2.5rem; right: 2.5rem; }
.ds-inset-y-10 { top: 2.5rem; bottom: 2.5rem; }
.ds-inset-11 { inset: 2.75rem; }
.ds-inset-x-11 { left: 2.75rem; right: 2.75rem; }
.ds-inset-y-11 { top: 2.75rem; bottom: 2.75rem; }
.ds-inset-12 { inset: 3rem; }
.ds-inset-x-12 { left: 3rem; right: 3rem; }
.ds-inset-y-12 { top: 3rem; bottom: 3rem; }
.ds-inset-14 { inset: 3.5rem; }
.ds-inset-x-14 { left: 3.5rem; right: 3.5rem; }
.ds-inset-y-14 { top: 3.5rem; bottom: 3.5rem; }
.ds-inset-16 { inset: 4rem; }
.ds-inset-x-16 { left: 4rem; right: 4rem; }
.ds-inset-y-16 { top: 4rem; bottom: 4rem; }
.ds-inset-20 { inset: 5rem; }
.ds-inset-x-20 { left: 5rem; right: 5rem; }
.ds-inset-y-20 { top: 5rem; bottom: 5rem; }
.ds-inset-24 { inset: 6rem; }
.ds-inset-x-24 { left: 6rem; right: 6rem; }
.ds-inset-y-24 { top: 6rem; bottom: 6rem; }
.ds-inset-28 { inset: 7rem; }
.ds-inset-x-28 { left: 7rem; right: 7rem; }
.ds-inset-y-28 { top: 7rem; bottom: 7rem; }
.ds-inset-32 { inset: 8rem; }
.ds-inset-x-32 { left: 8rem; right: 8rem; }
.ds-inset-y-32 { top: 8rem; bottom: 8rem; }
.ds-inset-36 { inset: 9rem; }
.ds-inset-x-36 { left: 9rem; right: 9rem; }
.ds-inset-y-36 { top: 9rem; bottom: 9rem; }
.ds-inset-40 { inset: 10rem; }
.ds-inset-x-40 { left: 10rem; right: 10rem; }
.ds-inset-y-40 { top: 10rem; bottom: 10rem; }
.ds-inset-44 { inset: 11rem; }
.ds-inset-x-44 { left: 11rem; right: 11rem; }
.ds-inset-y-44 { top: 11rem; bottom: 11rem; }
.ds-inset-48 { inset: 12rem; }
.ds-inset-x-48 { left: 12rem; right: 12rem; }
.ds-inset-y-48 { top: 12rem; bottom: 12rem; }
.ds-inset-52 { inset: 13rem; }
.ds-inset-x-52 { left: 13rem; right: 13rem; }
.ds-inset-y-52 { top: 13rem; bottom: 13rem; }
.ds-inset-56 { inset: 14rem; }
.ds-inset-x-56 { left: 14rem; right: 14rem; }
.ds-inset-y-56 { top: 14rem; bottom: 14rem; }
.ds-inset-60 { inset: 15rem; }
.ds-inset-x-60 { left: 15rem; right: 15rem; }
.ds-inset-y-60 { top: 15rem; bottom: 15rem; }
.ds-inset-64 { inset: 16rem; }
.ds-inset-x-64 { left: 16rem; right: 16rem; }
.ds-inset-y-64 { top: 16rem; bottom: 16rem; }
.ds-inset-72 { inset: 18rem; }
.ds-inset-x-72 { left: 18rem; right: 18rem; }
.ds-inset-y-72 { top: 18rem; bottom: 18rem; }
.ds-inset-80 { inset: 20rem; }
.ds-inset-x-80 { left: 20rem; right: 20rem; }
.ds-inset-y-80 { top: 20rem; bottom: 20rem; }
.ds-inset-96 { inset: 24rem; }
.ds-inset-x-96 { left: 24rem; right: 24rem; }
.ds-inset-y-96 { top: 24rem; bottom: 24rem; }
.ds-inset-auto { inset: auto; }
.ds-inset-x-auto { left: auto; right: auto; }
.ds-inset-y-auto { top: auto; bottom: auto; }
.ds-inset-full { inset: 100%; }
.ds-inset-x-full { left: 100%; right: 100%; }
.ds-inset-y-full { top: 100%; bottom: 100%; }
/* Top utilities */
.ds-top-0 { top: 0px; }
.ds-top-px { top: 1px; }
.ds-top-0.5 { top: 0.125rem; }
.ds-top-1 { top: 0.25rem; }
.ds-top-1.5 { top: 0.375rem; }
.ds-top-2 { top: 0.5rem; }
.ds-top-2.5 { top: 0.625rem; }
.ds-top-3 { top: 0.75rem; }
.ds-top-3.5 { top: 0.875rem; }
.ds-top-4 { top: 1rem; }
.ds-top-5 { top: 1.25rem; }
.ds-top-6 { top: 1.5rem; }
.ds-top-7 { top: 1.75rem; }
.ds-top-8 { top: 2rem; }
.ds-top-9 { top: 2.25rem; }
.ds-top-10 { top: 2.5rem; }
.ds-top-11 { top: 2.75rem; }
.ds-top-12 { top: 3rem; }
.ds-top-14 { top: 3.5rem; }
.ds-top-16 { top: 4rem; }
.ds-top-20 { top: 5rem; }
.ds-top-24 { top: 6rem; }
.ds-top-28 { top: 7rem; }
.ds-top-32 { top: 8rem; }
.ds-top-36 { top: 9rem; }
.ds-top-40 { top: 10rem; }
.ds-top-44 { top: 11rem; }
.ds-top-48 { top: 12rem; }
.ds-top-52 { top: 13rem; }
.ds-top-56 { top: 14rem; }
.ds-top-60 { top: 15rem; }
.ds-top-64 { top: 16rem; }
.ds-top-72 { top: 18rem; }
.ds-top-80 { top: 20rem; }
.ds-top-96 { top: 24rem; }
.ds-top-auto { top: auto; }
.ds-top-full { top: 100%; }
/* Right utilities */
.ds-right-0 { right: 0px; }
.ds-right-px { right: 1px; }
.ds-right-0.5 { right: 0.125rem; }
.ds-right-1 { right: 0.25rem; }
.ds-right-1.5 { right: 0.375rem; }
.ds-right-2 { right: 0.5rem; }
.ds-right-2.5 { right: 0.625rem; }
.ds-right-3 { right: 0.75rem; }
.ds-right-3.5 { right: 0.875rem; }
.ds-right-4 { right: 1rem; }
.ds-right-5 { right: 1.25rem; }
.ds-right-6 { right: 1.5rem; }
.ds-right-7 { right: 1.75rem; }
.ds-right-8 { right: 2rem; }
.ds-right-9 { right: 2.25rem; }
.ds-right-10 { right: 2.5rem; }
.ds-right-11 { right: 2.75rem; }
.ds-right-12 { right: 3rem; }
.ds-right-14 { right: 3.5rem; }
.ds-right-16 { right: 4rem; }
.ds-right-20 { right: 5rem; }
.ds-right-24 { right: 6rem; }
.ds-right-28 { right: 7rem; }
.ds-right-32 { right: 8rem; }
.ds-right-36 { right: 9rem; }
.ds-right-40 { right: 10rem; }
.ds-right-44 { right: 11rem; }
.ds-right-48 { right: 12rem; }
.ds-right-52 { right: 13rem; }
.ds-right-56 { right: 14rem; }
.ds-right-60 { right: 15rem; }
.ds-right-64 { right: 16rem; }
.ds-right-72 { right: 18rem; }
.ds-right-80 { right: 20rem; }
.ds-right-96 { right: 24rem; }
.ds-right-auto { right: auto; }
.ds-right-full { right: 100%; }
/* Bottom utilities */
.ds-bottom-0 { bottom: 0px; }
.ds-bottom-px { bottom: 1px; }
.ds-bottom-0.5 { bottom: 0.125rem; }
.ds-bottom-1 { bottom: 0.25rem; }
.ds-bottom-1.5 { bottom: 0.375rem; }
.ds-bottom-2 { bottom: 0.5rem; }
.ds-bottom-2.5 { bottom: 0.625rem; }
.ds-bottom-3 { bottom: 0.75rem; }
.ds-bottom-3.5 { bottom: 0.875rem; }
.ds-bottom-4 { bottom: 1rem; }
.ds-bottom-5 { bottom: 1.25rem; }
.ds-bottom-6 { bottom: 1.5rem; }
.ds-bottom-7 { bottom: 1.75rem; }
.ds-bottom-8 { bottom: 2rem; }
.ds-bottom-9 { bottom: 2.25rem; }
.ds-bottom-10 { bottom: 2.5rem; }
.ds-bottom-11 { bottom: 2.75rem; }
.ds-bottom-12 { bottom: 3rem; }
.ds-bottom-14 { bottom: 3.5rem; }
.ds-bottom-16 { bottom: 4rem; }
.ds-bottom-20 { bottom: 5rem; }
.ds-bottom-24 { bottom: 6rem; }
.ds-bottom-28 { bottom: 7rem; }
.ds-bottom-32 { bottom: 8rem; }
.ds-bottom-36 { bottom: 9rem; }
.ds-bottom-40 { bottom: 10rem; }
.ds-bottom-44 { bottom: 11rem; }
.ds-bottom-48 { bottom: 12rem; }
.ds-bottom-52 { bottom: 13rem; }
.ds-bottom-56 { bottom: 14rem; }
.ds-bottom-60 { bottom: 15rem; }
.ds-bottom-64 { bottom: 16rem; }
.ds-bottom-72 { bottom: 18rem; }
.ds-bottom-80 { bottom: 20rem; }
.ds-bottom-96 { bottom: 24rem; }
.ds-bottom-auto { bottom: auto; }
.ds-bottom-full { bottom: 100%; }
/* Left utilities */
.ds-left-0 { left: 0px; }
.ds-left-px { left: 1px; }
.ds-left-0.5 { left: 0.125rem; }
.ds-left-1 { left: 0.25rem; }
.ds-left-1.5 { left: 0.375rem; }
.ds-left-2 { left: 0.5rem; }
.ds-left-2.5 { left: 0.625rem; }
.ds-left-3 { left: 0.75rem; }
.ds-left-3.5 { left: 0.875rem; }
.ds-left-4 { left: 1rem; }
.ds-left-5 { left: 1.25rem; }
.ds-left-6 { left: 1.5rem; }
.ds-left-7 { left: 1.75rem; }
.ds-left-8 { left: 2rem; }
.ds-left-9 { left: 2.25rem; }
.ds-left-10 { left: 2.5rem; }
.ds-left-11 { left: 2.75rem; }
.ds-left-12 { left: 3rem; }
.ds-left-14 { left: 3.5rem; }
.ds-left-16 { left: 4rem; }
.ds-left-20 { left: 5rem; }
.ds-left-24 { left: 6rem; }
.ds-left-28 { left: 7rem; }
.ds-left-32 { left: 8rem; }
.ds-left-36 { left: 9rem; }
.ds-left-40 { left: 10rem; }
.ds-left-44 { left: 11rem; }
.ds-left-48 { left: 12rem; }
.ds-left-52 { left: 13rem; }
.ds-left-56 { left: 14rem; }
.ds-left-60 { left: 15rem; }
.ds-left-64 { left: 16rem; }
.ds-left-72 { left: 18rem; }
.ds-left-80 { left: 20rem; }
.ds-left-96 { left: 24rem; }
.ds-left-auto { left: auto; }
.ds-left-full { left: 100%; }
/* DS: utilities/isolation.css - Isolation utilities */
/* layer: utilities */
.ds-isolate { isolation: isolate; }
.ds-isolation-auto { isolation: auto; }
.ds-isolate-none {
  isolation: auto;
}
/* Stack context utilities */
.ds-isolate-stack {
  isolation: isolate;
  position: relative;
  z-index: 0;
}
/* Layer isolation for complex layouts */
.ds-isolate-layer {
  isolation: isolate;
  contain: layout style paint;
}
/* Content isolation for performance */
.ds-isolate-content {
  isolation: isolate;
  contain: layout style;
}
/* Strict isolation */
.ds-isolate-strict {
  isolation: isolate;
  contain: strict;
}
/* Size isolation */
.ds-isolate-size {
  isolation: isolate;
  contain: size;
}
/* Layout isolation */
.ds-isolate-layout {
  isolation: isolate;
  contain: layout;
}
/* Style isolation */
.ds-isolate-style {
  isolation: isolate;
  contain: style;
}
/* Paint isolation */
.ds-isolate-paint {
  isolation: isolate;
  contain: paint;
}
/* Mixed containment */
.ds-isolate-mixed {
  isolation: isolate;
  contain: layout style paint size;
}
/* Modal isolation */
.ds-isolate-modal {
  isolation: isolate;
  position: fixed;
  z-index: var(--ds-z-index-modal);
  contain: layout style paint;
}
/* Overlay isolation */
.ds-isolate-overlay {
  isolation: isolate;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--ds-z-index-modal-backdrop);
  contain: layout style paint size;
}
/* Dropdown isolation */
.ds-isolate-dropdown {
  isolation: isolate;
  position: absolute;
  z-index: var(--ds-z-index-dropdown);
  contain: layout style paint;
}
/* Tooltip isolation */
.ds-isolate-tooltip {
  isolation: isolate;
  position: absolute;
  z-index: var(--ds-z-index-tooltip);
  contain: layout style paint;
}
/* Popover isolation */
.ds-isolate-popover {
  isolation: isolate;
  position: absolute;
  z-index: var(--ds-z-index-popover);
  contain: layout style paint;
}
/* Sticky isolation */
.ds-isolate-sticky {
  isolation: isolate;
  position: sticky;
  z-index: var(--ds-z-index-sticky);
  contain: layout style;
}
/* Fixed isolation */
.ds-isolate-fixed {
  isolation: isolate;
  position: fixed;
  contain: layout style paint;
}
/* Transform isolation */
.ds-isolate-transform {
  isolation: isolate;
  transform: translateZ(0);
  contain: layout style paint;
}
/* Animation isolation */
.ds-isolate-animate {
  isolation: isolate;
  will-change: transform;
  contain: layout style paint;
}
/* GPU isolation */
.ds-isolate-gpu {
  isolation: isolate;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  contain: layout style paint;
}
/* Blend isolation */
.ds-isolate-blend {
  isolation: isolate;
  mix-blend-mode: normal;
}
/* Filter isolation */
.ds-isolate-filter {
  isolation: isolate;
  filter: none;
  contain: layout style paint;
}
/* Scroll isolation */
.ds-isolate-scroll {
  isolation: isolate;
  overflow: auto;
  contain: layout style;
}
/* Container isolation */
.ds-isolate-container {
  isolation: isolate;
  container-type: inline-size;
  contain: layout style;
}
/* DS: line-clamp.css - Line clamp utilities */
/* layer: utilities */
/* Line clamp utilities */
.ds-line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.ds-line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.ds-line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.ds-line-clamp-4 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.ds-line-clamp-5 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}
.ds-line-clamp-6 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}
.ds-line-clamp-none {
  overflow: visible;
  display: block;
  -webkit-box-orient: horizontal;
  -webkit-line-clamp: none;
}
/* DS: mix-blend.css - Mix blend mode utilities */
/* layer: utilities */
/* Mix blend mode utilities */
.ds-mix-blend-normal { mix-blend-mode: normal; }
.ds-mix-blend-multiply { mix-blend-mode: multiply; }
.ds-mix-blend-screen { mix-blend-mode: screen; }
.ds-mix-blend-overlay { mix-blend-mode: overlay; }
.ds-mix-blend-darken { mix-blend-mode: darken; }
.ds-mix-blend-lighten { mix-blend-mode: lighten; }
.ds-mix-blend-color-dodge { mix-blend-mode: color-dodge; }
.ds-mix-blend-color-burn { mix-blend-mode: color-burn; }
.ds-mix-blend-hard-light { mix-blend-mode: hard-light; }
.ds-mix-blend-soft-light { mix-blend-mode: soft-light; }
.ds-mix-blend-difference { mix-blend-mode: difference; }
.ds-mix-blend-exclusion { mix-blend-mode: exclusion; }
.ds-mix-blend-hue { mix-blend-mode: hue; }
.ds-mix-blend-saturation { mix-blend-mode: saturation; }
.ds-mix-blend-color { mix-blend-mode: color; }
.ds-mix-blend-luminosity { mix-blend-mode: luminosity; }
/* DS: object-fit.css - Object fit utilities */
/* layer: utilities */
/* Object fit utilities */
.ds-object-contain { -o-object-fit: contain; object-fit: contain; }
.ds-object-cover { -o-object-fit: cover; object-fit: cover; }
.ds-object-fill { -o-object-fit: fill; object-fit: fill; }
.ds-object-none { -o-object-fit: none; object-fit: none; }
.ds-object-scale-down { -o-object-fit: scale-down; object-fit: scale-down; }
/* Object position utilities */
.ds-object-bottom { -o-object-position: bottom; object-position: bottom; }
.ds-object-center { -o-object-position: center; object-position: center; }
.ds-object-left { -o-object-position: left; object-position: left; }
.ds-object-left-bottom { -o-object-position: left bottom; object-position: left bottom; }
.ds-object-left-top { -o-object-position: left top; object-position: left top; }
.ds-object-right { -o-object-position: right; object-position: right; }
.ds-object-right-bottom { -o-object-position: right bottom; object-position: right bottom; }
.ds-object-right-top { -o-object-position: right top; object-position: right top; }
.ds-object-top { -o-object-position: top; object-position: top; }
/* DS: utilities/opacity.css - Opacity utilities */
/* layer: utilities */
.ds-opacity-0 { opacity: 0; }
.ds-opacity-5 { opacity: 0.05; }
.ds-opacity-10 { opacity: 0.1; }
.ds-opacity-20 { opacity: 0.2; }
.ds-opacity-25 { opacity: 0.25; }
.ds-opacity-30 { opacity: 0.3; }
.ds-opacity-40 { opacity: 0.4; }
.ds-opacity-50 { opacity: 0.5; }
.ds-opacity-60 { opacity: 0.6; }
.ds-opacity-70 { opacity: 0.7; }
.ds-opacity-75 { opacity: 0.75; }
.ds-opacity-80 { opacity: 0.8; }
.ds-opacity-90 { opacity: 0.9; }
.ds-opacity-95 { opacity: 0.95; }
.ds-opacity-100 { opacity: 1; }
.ds-opacity-disabled { opacity: var(--ds-opacity-disabled); }
.ds-opacity-hover { opacity: 0.8; }
.ds-opacity-active { opacity: 0.6; }
.ds-opacity-focus { opacity: 0.9; }
/* Background opacity utilities */
.ds-bg-opacity-0 { --tw-bg-opacity: 0; }
.ds-bg-opacity-5 { --tw-bg-opacity: 0.05; }
.ds-bg-opacity-10 { --tw-bg-opacity: 0.1; }
.ds-bg-opacity-20 { --tw-bg-opacity: 0.2; }
.ds-bg-opacity-25 { --tw-bg-opacity: 0.25; }
.ds-bg-opacity-30 { --tw-bg-opacity: 0.3; }
.ds-bg-opacity-40 { --tw-bg-opacity: 0.4; }
.ds-bg-opacity-50 { --tw-bg-opacity: 0.5; }
.ds-bg-opacity-60 { --tw-bg-opacity: 0.6; }
.ds-bg-opacity-70 { --tw-bg-opacity: 0.7; }
.ds-bg-opacity-75 { --tw-bg-opacity: 0.75; }
.ds-bg-opacity-80 { --tw-bg-opacity: 0.8; }
.ds-bg-opacity-90 { --tw-bg-opacity: 0.9; }
.ds-bg-opacity-95 { --tw-bg-opacity: 0.95; }
.ds-bg-opacity-100 { --tw-bg-opacity: 1; }
/* Text opacity utilities */
.ds-text-opacity-0 { --tw-text-opacity: 0; }
.ds-text-opacity-5 { --tw-text-opacity: 0.05; }
.ds-text-opacity-10 { --tw-text-opacity: 0.1; }
.ds-text-opacity-20 { --tw-text-opacity: 0.2; }
.ds-text-opacity-25 { --tw-text-opacity: 0.25; }
.ds-text-opacity-30 { --tw-text-opacity: 0.3; }
.ds-text-opacity-40 { --tw-text-opacity: 0.4; }
.ds-text-opacity-50 { --tw-text-opacity: 0.5; }
.ds-text-opacity-60 { --tw-text-opacity: 0.6; }
.ds-text-opacity-70 { --tw-text-opacity: 0.7; }
.ds-text-opacity-75 { --tw-text-opacity: 0.75; }
.ds-text-opacity-80 { --tw-text-opacity: 0.8; }
.ds-text-opacity-90 { --tw-text-opacity: 0.9; }
.ds-text-opacity-95 { --tw-text-opacity: 0.95; }
.ds-text-opacity-100 { --tw-text-opacity: 1; }
/* Border opacity utilities */
.ds-border-opacity-0 { --tw-border-opacity: 0; }
.ds-border-opacity-5 { --tw-border-opacity: 0.05; }
.ds-border-opacity-10 { --tw-border-opacity: 0.1; }
.ds-border-opacity-20 { --tw-border-opacity: 0.2; }
.ds-border-opacity-25 { --tw-border-opacity: 0.25; }
.ds-border-opacity-30 { --tw-border-opacity: 0.3; }
.ds-border-opacity-40 { --tw-border-opacity: 0.4; }
.ds-border-opacity-50 { --tw-border-opacity: 0.5; }
.ds-border-opacity-60 { --tw-border-opacity: 0.6; }
.ds-border-opacity-70 { --tw-border-opacity: 0.7; }
.ds-border-opacity-75 { --tw-border-opacity: 0.75; }
.ds-border-opacity-80 { --tw-border-opacity: 0.8; }
.ds-border-opacity-90 { --tw-border-opacity: 0.9; }
.ds-border-opacity-95 { --tw-border-opacity: 0.95; }
.ds-border-opacity-100 { --tw-border-opacity: 1; }
/* Divide opacity utilities */
.ds-divide-opacity-0 { --tw-divide-opacity: 0; }
.ds-divide-opacity-5 { --tw-divide-opacity: 0.05; }
.ds-divide-opacity-10 { --tw-divide-opacity: 0.1; }
.ds-divide-opacity-20 { --tw-divide-opacity: 0.2; }
.ds-divide-opacity-25 { --tw-divide-opacity: 0.25; }
.ds-divide-opacity-30 { --tw-divide-opacity: 0.3; }
.ds-divide-opacity-40 { --tw-divide-opacity: 0.4; }
.ds-divide-opacity-50 { --tw-divide-opacity: 0.5; }
.ds-divide-opacity-60 { --tw-divide-opacity: 0.6; }
.ds-divide-opacity-70 { --tw-divide-opacity: 0.7; }
.ds-divide-opacity-75 { --tw-divide-opacity: 0.75; }
.ds-divide-opacity-80 { --tw-divide-opacity: 0.8; }
.ds-divide-opacity-90 { --tw-divide-opacity: 0.9; }
.ds-divide-opacity-95 { --tw-divide-opacity: 0.95; }
.ds-divide-opacity-100 { --tw-divide-opacity: 1; }
/* Ring opacity utilities */
.ds-ring-opacity-0 { --tw-ring-opacity: 0; }
.ds-ring-opacity-5 { --tw-ring-opacity: 0.05; }
.ds-ring-opacity-10 { --tw-ring-opacity: 0.1; }
.ds-ring-opacity-20 { --tw-ring-opacity: 0.2; }
.ds-ring-opacity-25 { --tw-ring-opacity: 0.25; }
.ds-ring-opacity-30 { --tw-ring-opacity: 0.3; }
.ds-ring-opacity-40 { --tw-ring-opacity: 0.4; }
.ds-ring-opacity-50 { --tw-ring-opacity: 0.5; }
.ds-ring-opacity-60 { --tw-ring-opacity: 0.6; }
.ds-ring-opacity-70 { --tw-ring-opacity: 0.7; }
.ds-ring-opacity-75 { --tw-ring-opacity: 0.75; }
.ds-ring-opacity-80 { --tw-ring-opacity: 0.8; }
.ds-ring-opacity-90 { --tw-ring-opacity: 0.9; }
.ds-ring-opacity-95 { --tw-ring-opacity: 0.95; }
.ds-ring-opacity-100 { --tw-ring-opacity: 1; }
/* Placeholder opacity utilities */
.ds-placeholder-opacity-0 { --tw-placeholder-opacity: 0; }
.ds-placeholder-opacity-5 { --tw-placeholder-opacity: 0.05; }
.ds-placeholder-opacity-10 { --tw-placeholder-opacity: 0.1; }
.ds-placeholder-opacity-20 { --tw-placeholder-opacity: 0.2; }
.ds-placeholder-opacity-25 { --tw-placeholder-opacity: 0.25; }
.ds-placeholder-opacity-30 { --tw-placeholder-opacity: 0.3; }
.ds-placeholder-opacity-40 { --tw-placeholder-opacity: 0.4; }
.ds-placeholder-opacity-50 { --tw-placeholder-opacity: 0.5; }
.ds-placeholder-opacity-60 { --tw-placeholder-opacity: 0.6; }
.ds-placeholder-opacity-70 { --tw-placeholder-opacity: 0.7; }
.ds-placeholder-opacity-75 { --tw-placeholder-opacity: 0.75; }
.ds-placeholder-opacity-80 { --tw-placeholder-opacity: 0.8; }
.ds-placeholder-opacity-90 { --tw-placeholder-opacity: 0.9; }
.ds-placeholder-opacity-95 { --tw-placeholder-opacity: 0.95; }
.ds-placeholder-opacity-100 { --tw-placeholder-opacity: 1; }
/* DS: overflow.css - Overflow utilities */
/* layer: utilities */
/* Overflow utilities */
.ds-overflow-auto { overflow: auto; }
.ds-overflow-hidden { overflow: hidden; }
.ds-overflow-clip { overflow: clip; }
.ds-overflow-visible { overflow: visible; }
.ds-overflow-scroll { overflow: scroll; }
.ds-overflow-x-auto { overflow-x: auto; }
.ds-overflow-y-auto { overflow-y: auto; }
.ds-overflow-x-hidden { overflow-x: hidden; }
.ds-overflow-y-hidden { overflow-y: hidden; }
.ds-overflow-x-clip { overflow-x: clip; }
.ds-overflow-y-clip { overflow-y: clip; }
.ds-overflow-x-visible { overflow-x: visible; }
.ds-overflow-y-visible { overflow-y: visible; }
.ds-overflow-x-scroll { overflow-x: scroll; }
.ds-overflow-y-scroll { overflow-y: scroll; }
/* Text overflow utilities */
.ds-text-ellipsis { text-overflow: ellipsis; }
.ds-text-clip { text-overflow: clip; }
/* Overscroll behavior utilities */
.ds-overscroll-auto { overscroll-behavior: auto; }
.ds-overscroll-contain { overscroll-behavior: contain; }
.ds-overscroll-none { overscroll-behavior: none; }
.ds-overscroll-y-auto { overscroll-behavior-y: auto; }
.ds-overscroll-y-contain { overscroll-behavior-y: contain; }
.ds-overscroll-y-none { overscroll-behavior-y: none; }
.ds-overscroll-x-auto { overscroll-behavior-x: auto; }
.ds-overscroll-x-contain { overscroll-behavior-x: contain; }
.ds-overscroll-x-none { overscroll-behavior-x: none; }
/* DS: position.css - Position utilities */
/* layer: utilities */
/* Position utilities */
.ds-static { position: static; }
.ds-fixed { position: fixed; }
.ds-absolute { position: absolute; }
.ds-relative { position: relative; }
.ds-sticky { position: sticky; }
/* Z-index utilities */
.ds-z-0 { z-index: 0; }
.ds-z-10 { z-index: 10; }
.ds-z-20 { z-index: 20; }
.ds-z-30 { z-index: 30; }
.ds-z-40 { z-index: 40; }
.ds-z-50 { z-index: 50; }
.ds-z-auto { z-index: auto; }
/* Using semantic z-index tokens */
.ds-z-base { z-index: var(--ds-z-index-base); }
.ds-z-dropdown { z-index: var(--ds-z-index-dropdown); }
.ds-z-sticky { z-index: var(--ds-z-index-sticky); }
.ds-z-fixed { z-index: var(--ds-z-index-fixed); }
.ds-z-modal-backdrop { z-index: var(--ds-z-index-modal-backdrop); }
.ds-z-modal { z-index: var(--ds-z-index-modal); }
.ds-z-popover { z-index: var(--ds-z-index-popover); }
.ds-z-tooltip { z-index: var(--ds-z-index-tooltip); }
.ds-z-toast { z-index: var(--ds-z-index-toast); }
/* DS: radius.css - Border radius utilities */
/* layer: utilities */
/* Border radius utilities */
.ds-rounded-none { border-radius: var(--ds-border-radius-none); }
.ds-rounded-2xs { border-radius: var(--ds-border-radius-2xs); }
.ds-rounded-xs { border-radius: var(--ds-border-radius-xs); }
.ds-rounded-s { border-radius: var(--ds-border-radius-s); }
.ds-rounded-m { border-radius: var(--ds-border-radius-m); }
.ds-rounded-l { border-radius: var(--ds-border-radius-l); }
.ds-rounded-xl { border-radius: var(--ds-border-radius-xl); }
.ds-rounded-2xl { border-radius: var(--ds-border-radius-2xl); }
.ds-rounded-full { border-radius: var(--ds-border-radius-full); }
/* Rounded corners individually */
.ds-rounded-t-none { border-top-left-radius: var(--ds-border-radius-none); border-top-right-radius: var(--ds-border-radius-none); }
.ds-rounded-t-2xs { border-top-left-radius: var(--ds-border-radius-2xs); border-top-right-radius: var(--ds-border-radius-2xs); }
.ds-rounded-t-xs { border-top-left-radius: var(--ds-border-radius-xs); border-top-right-radius: var(--ds-border-radius-xs); }
.ds-rounded-t-s { border-top-left-radius: var(--ds-border-radius-s); border-top-right-radius: var(--ds-border-radius-s); }
.ds-rounded-t-m { border-top-left-radius: var(--ds-border-radius-m); border-top-right-radius: var(--ds-border-radius-m); }
.ds-rounded-t-l { border-top-left-radius: var(--ds-border-radius-l); border-top-right-radius: var(--ds-border-radius-l); }
.ds-rounded-t-xl { border-top-left-radius: var(--ds-border-radius-xl); border-top-right-radius: var(--ds-border-radius-xl); }
.ds-rounded-t-2xl { border-top-left-radius: var(--ds-border-radius-2xl); border-top-right-radius: var(--ds-border-radius-2xl); }
.ds-rounded-t-full { border-top-left-radius: var(--ds-border-radius-full); border-top-right-radius: var(--ds-border-radius-full); }
.ds-rounded-r-none { border-top-right-radius: var(--ds-border-radius-none); border-bottom-right-radius: var(--ds-border-radius-none); }
.ds-rounded-r-2xs { border-top-right-radius: var(--ds-border-radius-2xs); border-bottom-right-radius: var(--ds-border-radius-2xs); }
.ds-rounded-r-xs { border-top-right-radius: var(--ds-border-radius-xs); border-bottom-right-radius: var(--ds-border-radius-xs); }
.ds-rounded-r-s { border-top-right-radius: var(--ds-border-radius-s); border-bottom-right-radius: var(--ds-border-radius-s); }
.ds-rounded-r-m { border-top-right-radius: var(--ds-border-radius-m); border-bottom-right-radius: var(--ds-border-radius-m); }
.ds-rounded-r-l { border-top-right-radius: var(--ds-border-radius-l); border-bottom-right-radius: var(--ds-border-radius-l); }
.ds-rounded-r-xl { border-top-right-radius: var(--ds-border-radius-xl); border-bottom-right-radius: var(--ds-border-radius-xl); }
.ds-rounded-r-2xl { border-top-right-radius: var(--ds-border-radius-2xl); border-bottom-right-radius: var(--ds-border-radius-2xl); }
.ds-rounded-r-full { border-top-right-radius: var(--ds-border-radius-full); border-bottom-right-radius: var(--ds-border-radius-full); }
.ds-rounded-b-none { border-bottom-right-radius: var(--ds-border-radius-none); border-bottom-left-radius: var(--ds-border-radius-none); }
.ds-rounded-b-2xs { border-bottom-right-radius: var(--ds-border-radius-2xs); border-bottom-left-radius: var(--ds-border-radius-2xs); }
.ds-rounded-b-xs { border-bottom-right-radius: var(--ds-border-radius-xs); border-bottom-left-radius: var(--ds-border-radius-xs); }
.ds-rounded-b-s { border-bottom-right-radius: var(--ds-border-radius-s); border-bottom-left-radius: var(--ds-border-radius-s); }
.ds-rounded-b-m { border-bottom-right-radius: var(--ds-border-radius-m); border-bottom-left-radius: var(--ds-border-radius-m); }
.ds-rounded-b-l { border-bottom-right-radius: var(--ds-border-radius-l); border-bottom-left-radius: var(--ds-border-radius-l); }
.ds-rounded-b-xl { border-bottom-right-radius: var(--ds-border-radius-xl); border-bottom-left-radius: var(--ds-border-radius-xl); }
.ds-rounded-b-2xl { border-bottom-right-radius: var(--ds-border-radius-2xl); border-bottom-left-radius: var(--ds-border-radius-2xl); }
.ds-rounded-b-full { border-bottom-right-radius: var(--ds-border-radius-full); border-bottom-left-radius: var(--ds-border-radius-full); }
.ds-rounded-l-none { border-top-left-radius: var(--ds-border-radius-none); border-bottom-left-radius: var(--ds-border-radius-none); }
.ds-rounded-l-2xs { border-top-left-radius: var(--ds-border-radius-2xs); border-bottom-left-radius: var(--ds-border-radius-2xs); }
.ds-rounded-l-xs { border-top-left-radius: var(--ds-border-radius-xs); border-bottom-left-radius: var(--ds-border-radius-xs); }
.ds-rounded-l-s { border-top-left-radius: var(--ds-border-radius-s); border-bottom-left-radius: var(--ds-border-radius-s); }
.ds-rounded-l-m { border-top-left-radius: var(--ds-border-radius-m); border-bottom-left-radius: var(--ds-border-radius-m); }
.ds-rounded-l-l { border-top-left-radius: var(--ds-border-radius-l); border-bottom-left-radius: var(--ds-border-radius-l); }
.ds-rounded-l-xl { border-top-left-radius: var(--ds-border-radius-xl); border-bottom-left-radius: var(--ds-border-radius-xl); }
.ds-rounded-l-2xl { border-top-left-radius: var(--ds-border-radius-2xl); border-bottom-left-radius: var(--ds-border-radius-2xl); }
.ds-rounded-l-full { border-top-left-radius: var(--ds-border-radius-full); border-bottom-left-radius: var(--ds-border-radius-full); }
/* Rounded corners by position */
.ds-rounded-tl-none { border-top-left-radius: var(--ds-border-radius-none); }
.ds-rounded-tl-2xs { border-top-left-radius: var(--ds-border-radius-2xs); }
.ds-rounded-tl-xs { border-top-left-radius: var(--ds-border-radius-xs); }
.ds-rounded-tl-s { border-top-left-radius: var(--ds-border-radius-s); }
.ds-rounded-tl-m { border-top-left-radius: var(--ds-border-radius-m); }
.ds-rounded-tl-l { border-top-left-radius: var(--ds-border-radius-l); }
.ds-rounded-tl-xl { border-top-left-radius: var(--ds-border-radius-xl); }
.ds-rounded-tl-2xl { border-top-left-radius: var(--ds-border-radius-2xl); }
.ds-rounded-tl-full { border-top-left-radius: var(--ds-border-radius-full); }
.ds-rounded-tr-none { border-top-right-radius: var(--ds-border-radius-none); }
.ds-rounded-tr-2xs { border-top-right-radius: var(--ds-border-radius-2xs); }
.ds-rounded-tr-xs { border-top-right-radius: var(--ds-border-radius-xs); }
.ds-rounded-tr-s { border-top-right-radius: var(--ds-border-radius-s); }
.ds-rounded-tr-m { border-top-right-radius: var(--ds-border-radius-m); }
.ds-rounded-tr-l { border-top-right-radius: var(--ds-border-radius-l); }
.ds-rounded-tr-xl { border-top-right-radius: var(--ds-border-radius-xl); }
.ds-rounded-tr-2xl { border-top-right-radius: var(--ds-border-radius-2xl); }
.ds-rounded-tr-full { border-top-right-radius: var(--ds-border-radius-full); }
.ds-rounded-br-none { border-bottom-right-radius: var(--ds-border-radius-none); }
.ds-rounded-br-2xs { border-bottom-right-radius: var(--ds-border-radius-2xs); }
.ds-rounded-br-xs { border-bottom-right-radius: var(--ds-border-radius-xs); }
.ds-rounded-br-s { border-bottom-right-radius: var(--ds-border-radius-s); }
.ds-rounded-br-m { border-bottom-right-radius: var(--ds-border-radius-m); }
.ds-rounded-br-l { border-bottom-right-radius: var(--ds-border-radius-l); }
.ds-rounded-br-xl { border-bottom-right-radius: var(--ds-border-radius-xl); }
.ds-rounded-br-2xl { border-bottom-right-radius: var(--ds-border-radius-2xl); }
.ds-rounded-br-full { border-bottom-right-radius: var(--ds-border-radius-full); }
.ds-rounded-bl-none { border-bottom-left-radius: var(--ds-border-radius-none); }
.ds-rounded-bl-2xs { border-bottom-left-radius: var(--ds-border-radius-2xs); }
.ds-rounded-bl-xs { border-bottom-left-radius: var(--ds-border-radius-xs); }
.ds-rounded-bl-s { border-bottom-left-radius: var(--ds-border-radius-s); }
.ds-rounded-bl-m { border-bottom-left-radius: var(--ds-border-radius-m); }
.ds-rounded-bl-l { border-bottom-left-radius: var(--ds-border-radius-l); }
.ds-rounded-bl-xl { border-bottom-left-radius: var(--ds-border-radius-xl); }
.ds-rounded-bl-2xl { border-bottom-left-radius: var(--ds-border-radius-2xl); }
.ds-rounded-bl-full { border-bottom-left-radius: var(--ds-border-radius-full); }
/* DS: responsive.css - Responsive utilities */
/* layer: utilities */
/* Hide/show utilities */
.ds-block { display: block; }
.ds-inline-block { display: inline-block; }
.ds-inline { display: inline; }
.ds-flex { display: flex; }
.ds-inline-flex { display: inline-flex; }
.ds-table { display: table; }
.ds-inline-table { display: inline-table; }
.ds-table-caption { display: table-caption; }
.ds-table-cell { display: table-cell; }
.ds-table-column { display: table-column; }
.ds-table-column-group { display: table-column-group; }
.ds-table-footer-group { display: table-footer-group; }
.ds-table-header-group { display: table-header-group; }
.ds-table-row-group { display: table-row-group; }
.ds-table-row { display: table-row; }
.ds-flow-root { display: flow-root; }
.ds-grid { display: grid; }
.ds-inline-grid { display: inline-grid; }
.ds-contents { display: contents; }
.ds-list-item { display: list-item; }
.ds-hidden { display: none; }
/* Responsive display utilities */
@media (min-width: 480px) {
  .ds-block\@xs { display: block; }
  .ds-inline-block\@xs { display: inline-block; }
  .ds-inline\@xs { display: inline; }
  .ds-flex\@xs { display: flex; }
  .ds-inline-flex\@xs { display: inline-flex; }
  .ds-table\@xs { display: table; }
  .ds-inline-table\@xs { display: inline-table; }
  .ds-table-caption\@xs { display: table-caption; }
  .ds-table-cell\@xs { display: table-cell; }
  .ds-table-column\@xs { display: table-column; }
  .ds-table-column-group\@xs { display: table-column-group; }
  .ds-table-footer-group\@xs { display: table-footer-group; }
  .ds-table-header-group\@xs { display: table-header-group; }
  .ds-table-row-group\@xs { display: table-row-group; }
  .ds-table-row\@xs { display: table-row; }
  .ds-flow-root\@xs { display: flow-root; }
  .ds-grid\@xs { display: grid; }
  .ds-inline-grid\@xs { display: inline-grid; }
  .ds-contents\@xs { display: contents; }
  .ds-list-item\@xs { display: list-item; }
  .ds-hidden\@xs { display: none; }
}
@media (min-width: 640px) {
  .ds-block\@sm { display: block; }
  .ds-inline-block\@sm { display: inline-block; }
  .ds-inline\@sm { display: inline; }
  .ds-flex\@sm { display: flex; }
  .ds-inline-flex\@sm { display: inline-flex; }
  .ds-table\@sm { display: table; }
  .ds-inline-table\@sm { display: inline-table; }
  .ds-table-caption\@sm { display: table-caption; }
  .ds-table-cell\@sm { display: table-cell; }
  .ds-table-column\@sm { display: table-column; }
  .ds-table-column-group\@sm { display: table-column-group; }
  .ds-table-footer-group\@sm { display: table-footer-group; }
  .ds-table-header-group\@sm { display: table-header-group; }
  .ds-table-row-group\@sm { display: table-row-group; }
  .ds-table-row\@sm { display: table-row; }
  .ds-flow-root\@sm { display: flow-root; }
  .ds-grid\@sm { display: grid; }
  .ds-inline-grid\@sm { display: inline-grid; }
  .ds-contents\@sm { display: contents; }
  .ds-list-item\@sm { display: list-item; }
  .ds-hidden\@sm { display: none; }
}
@media (min-width: 768px) {
  .ds-block\@md { display: block; }
  .ds-inline-block\@md { display: inline-block; }
  .ds-inline\@md { display: inline; }
  .ds-flex\@md { display: flex; }
  .ds-inline-flex\@md { display: inline-flex; }
  .ds-table\@md { display: table; }
  .ds-inline-table\@md { display: inline-table; }
  .ds-table-caption\@md { display: table-caption; }
  .ds-table-cell\@md { display: table-cell; }
  .ds-table-column\@md { display: table-column; }
  .ds-table-column-group\@md { display: table-column-group; }
  .ds-table-footer-group\@md { display: table-footer-group; }
  .ds-table-header-group\@md { display: table-header-group; }
  .ds-table-row-group\@md { display: table-row-group; }
  .ds-table-row\@md { display: table-row; }
  .ds-flow-root\@md { display: flow-root; }
  .ds-grid\@md { display: grid; }
  .ds-inline-grid\@md { display: inline-grid; }
  .ds-contents\@md { display: contents; }
  .ds-list-item\@md { display: list-item; }
  .ds-hidden\@md { display: none; }
}
@media (min-width: 1024px) {
  .ds-block\@lg { display: block; }
  .ds-inline-block\@lg { display: inline-block; }
  .ds-inline\@lg { display: inline; }
  .ds-flex\@lg { display: flex; }
  .ds-inline-flex\@lg { display: inline-flex; }
  .ds-table\@lg { display: table; }
  .ds-inline-table\@lg { display: inline-table; }
  .ds-table-caption\@lg { display: table-caption; }
  .ds-table-cell\@lg { display: table-cell; }
  .ds-table-column\@lg { display: table-column; }
  .ds-table-column-group\@lg { display: table-column-group; }
  .ds-table-footer-group\@lg { display: table-footer-group; }
  .ds-table-header-group\@lg { display: table-header-group; }
  .ds-table-row-group\@lg { display: table-row-group; }
  .ds-table-row\@lg { display: table-row; }
  .ds-flow-root\@lg { display: flow-root; }
  .ds-grid\@lg { display: grid; }
  .ds-inline-grid\@lg { display: inline-grid; }
  .ds-contents\@lg { display: contents; }
  .ds-list-item\@lg { display: list-item; }
  .ds-hidden\@lg { display: none; }
}
@media (min-width: 1280px) {
  .ds-block\@xl { display: block; }
  .ds-inline-block\@xl { display: inline-block; }
  .ds-inline\@xl { display: inline; }
  .ds-flex\@xl { display: flex; }
  .ds-inline-flex\@xl { display: inline-flex; }
  .ds-table\@xl { display: table; }
  .ds-inline-table\@xl { display: inline-table; }
  .ds-table-caption\@xl { display: table-caption; }
  .ds-table-cell\@xl { display: table-cell; }
  .ds-table-column\@xl { display: table-column; }
  .ds-table-column-group\@xl { display: table-column-group; }
  .ds-table-footer-group\@xl { display: table-footer-group; }
  .ds-table-header-group\@xl { display: table-header-group; }
  .ds-table-row-group\@xl { display: table-row-group; }
  .ds-table-row\@xl { display: table-row; }
  .ds-flow-root\@xl { display: flow-root; }
  .ds-grid\@xl { display: grid; }
  .ds-inline-grid\@xl { display: inline-grid; }
  .ds-contents\@xl { display: contents; }
  .ds-list-item\@xl { display: list-item; }
  .ds-hidden\@xl { display: none; }
}
@media (min-width: 1536px) {
  .ds-block\@2xl { display: block; }
  .ds-inline-block\@2xl { display: inline-block; }
  .ds-inline\@2xl { display: inline; }
  .ds-flex\@2xl { display: flex; }
  .ds-inline-flex\@2xl { display: inline-flex; }
  .ds-table\@2xl { display: table; }
  .ds-inline-table\@2xl { display: inline-table; }
  .ds-table-caption\@2xl { display: table-caption; }
  .ds-table-cell\@2xl { display: table-cell; }
  .ds-table-column\@2xl { display: table-column; }
  .ds-table-column-group\@2xl { display: table-column-group; }
  .ds-table-footer-group\@2xl { display: table-footer-group; }
  .ds-table-header-group\@2xl { display: table-header-group; }
  .ds-table-row-group\@2xl { display: table-row-group; }
  .ds-table-row\@2xl { display: table-row; }
  .ds-flow-root\@2xl { display: flow-root; }
  .ds-grid\@2xl { display: grid; }
  .ds-inline-grid\@2xl { display: inline-grid; }
  .ds-contents\@2xl { display: contents; }
  .ds-list-item\@2xl { display: list-item; }
  .ds-hidden\@2xl { display: none; }
}
/* DS: scrollbar.css - Scrollbar utilities */
/* layer: utilities */
/* Scrollbar width utilities */
.ds-scrollbar { scrollbar-width: auto; }
.ds-scrollbar-thin { scrollbar-width: thin; }
.ds-scrollbar-none { scrollbar-width: none; }
/* Scrollbar color utilities */
.ds-scrollbar-color-auto { scrollbar-color: auto; }
.ds-scrollbar-color-dark { scrollbar-color: var(--ds-text-primary) var(--ds-surface-background); }
.ds-scrollbar-color-light { scrollbar-color: var(--ds-text-secondary) var(--ds-surface-background-secondary); }
/* Webkit scrollbar styling */
.ds-scrollbar-webkit::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}
.ds-scrollbar-webkit::-webkit-scrollbar-track {
  background: var(--ds-surface-background-secondary);
}
.ds-scrollbar-webkit::-webkit-scrollbar-thumb {
  background: var(--ds-text-secondary);
  border-radius: var(--ds-border-radius-s);
}
.ds-scrollbar-webkit::-webkit-scrollbar-thumb:hover {
  background: var(--ds-text-primary);
}
.ds-scrollbar-webkit::-webkit-scrollbar-corner {
  background: var(--ds-surface-background-secondary);
}
/* Thin scrollbar variant */
.ds-scrollbar-thin-webkit::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.ds-scrollbar-thin-webkit::-webkit-scrollbar-thumb {
  background: var(--ds-text-secondary);
  border-radius: var(--ds-border-radius-full);
}
.ds-scrollbar-thin-webkit::-webkit-scrollbar-thumb:hover {
  background: var(--ds-text-primary);
}
/* Hidden scrollbar */
.ds-scrollbar-hidden {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ds-scrollbar-hidden::-webkit-scrollbar {
  display: none;
}
/* DS: selection.css - Text selection utilities */
/* layer: utilities */
/* Selection colors */
.ds-selection-text-primary::-moz-selection {
  background-color: var(--ds-status-info);
  color: var(--ds-text-inverse);
}
.ds-selection-text-primary::selection {
  background-color: var(--ds-status-info);
  color: var(--ds-text-inverse);
}
.ds-selection-text-secondary::-moz-selection {
  background-color: var(--ds-text-secondary);
  color: var(--ds-text-inverse);
}
.ds-selection-text-secondary::selection {
  background-color: var(--ds-text-secondary);
  color: var(--ds-text-inverse);
}
.ds-selection-text-success::-moz-selection {
  background-color: var(--ds-status-success);
  color: var(--ds-text-inverse);
}
.ds-selection-text-success::selection {
  background-color: var(--ds-status-success);
  color: var(--ds-text-inverse);
}
.ds-selection-text-warning::-moz-selection {
  background-color: var(--ds-status-warning);
  color: var(--ds-text-inverse);
}
.ds-selection-text-warning::selection {
  background-color: var(--ds-status-warning);
  color: var(--ds-text-inverse);
}
.ds-selection-text-error::-moz-selection {
  background-color: var(--ds-status-error);
  color: var(--ds-text-inverse);
}
.ds-selection-text-error::selection {
  background-color: var(--ds-status-error);
  color: var(--ds-text-inverse);
}
.ds-selection-text-surface::-moz-selection {
  background-color: var(--ds-surface-background-inverted);
  color: var(--ds-text-primary);
}
.ds-selection-text-surface::selection {
  background-color: var(--ds-surface-background-inverted);
  color: var(--ds-text-primary);
}
/* Selection in different contexts */
.ds-selection-in-input::-moz-selection {
  background-color: var(--ds-focus-outline-color);
  color: var(--ds-text-inverse);
}
.ds-selection-in-input::selection {
  background-color: var(--ds-focus-outline-color);
  color: var(--ds-text-inverse);
}
.ds-selection-in-button::-moz-selection {
  background-color: rgba(255, 255, 255, 0.2);
  color: inherit;
}
.ds-selection-in-button::selection {
  background-color: rgba(255, 255, 255, 0.2);
  color: inherit;
}
.ds-selection-in-card::-moz-selection {
  background-color: rgba(var(--ds-status-info), 0.2);
  color: inherit;
}
.ds-selection-in-card::selection {
  background-color: rgba(var(--ds-status-info), 0.2);
  color: inherit;
}
/* Disable selection */
.ds-select-none {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.ds-select-text {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}
.ds-select-all {
  -webkit-user-select: all;
  -moz-user-select: all;
  user-select: all;
}
.ds-select-auto {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  user-select: auto;
}
/* DS skeleton: 02-utilities/shadow.css */
/* This file is generated as a placeholder for the design system structure. */
/* layer: utilities */
/* utilities: shadow */
/* Box shadow */
.shadow-none { box-shadow: var(--ds-shadow-none); }
.shadow-xs { box-shadow: var(--ds-shadow-xs); }
.shadow-s { box-shadow: var(--ds-shadow-s); }
.shadow-m { box-shadow: var(--ds-shadow-m); }
.shadow-l { box-shadow: var(--ds-shadow-l); }
.shadow-xl { box-shadow: var(--ds-shadow-xl); }
.shadow-2xl { box-shadow: var(--ds-shadow-2xl); }
.shadow-sm { box-shadow: var(--ds-shadow-sm); }
.shadow-md { box-shadow: var(--ds-shadow-md); }
.shadow-lg { box-shadow: var(--ds-shadow-lg); }
.shadow-xl-legacy { box-shadow: var(--ds-shadow-xl-legacy); }
.shadow-2xl-legacy { box-shadow: var(--ds-shadow-2xl-legacy); }
/* Component shadows */
.shadow-card { box-shadow: var(--ds-shadow-card); }
.shadow-modal { box-shadow: var(--ds-shadow-modal); }
.shadow-dropdown { box-shadow: var(--ds-shadow-dropdown); }
.shadow-tooltip { box-shadow: var(--ds-shadow-tooltip); }
.shadow-popover { box-shadow: var(--ds-shadow-popover); }
.shadow-drawer { box-shadow: var(--ds-shadow-drawer); }
.shadow-notification { box-shadow: var(--ds-shadow-notification); }
.shadow-toast { box-shadow: var(--ds-shadow-toast); }
.shadow-button-primary { box-shadow: var(--ds-shadow-button-primary); }
.shadow-button-secondary { box-shadow: var(--ds-shadow-button-secondary); }
.shadow-input-focus { box-shadow: var(--ds-shadow-input-focus); }
.shadow-table-sticky { box-shadow: var(--ds-shadow-table-sticky); }
/* Inner shadows */
.shadow-inner-xs { box-shadow: var(--ds-shadow-inset-xs); }
.shadow-inner-s { box-shadow: var(--ds-shadow-inset-s); }
/* Focus ring shadows */
.ring { box-shadow: var(--ds-focus-ring-shadow); }
.ring-thick { box-shadow: var(--ds-focus-ring-shadow-thick); }
.ring-error { box-shadow: var(--ds-focus-ring-shadow-error); }
.ring-success { box-shadow: var(--ds-focus-ring-shadow-success); }
.ring-warning { box-shadow: var(--ds-focus-ring-shadow-warning); }
.ring-offset { box-shadow: var(--ds-focus-ring-shadow-offset); }
/* High contrast focus rings */
.ring-hc { box-shadow: var(--ds-focus-ring-high-contrast); }
/* Keyboard-only focus */
.focus-visible-ring { box-shadow: var(--ds-focus-ring-keyboard-only); }
/* DS skeleton: 02-utilities/size.css */
/* This file is generated as a placeholder for the design system structure. */
/* layer: utilities */
/* utilities: size */
/* Width */
.w-0 { width: 0; }
.w-px { width: 1px; }
.w-0\.5 { width: 0.125rem; }
.w-1 { width: 0.25rem; }
.w-1\.5 { width: 0.375rem; }
.w-2 { width: 0.5rem; }
.w-2\.5 { width: 0.625rem; }
.w-3 { width: 0.75rem; }
.w-3\.5 { width: 0.875rem; }
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-6 { width: 1.5rem; }
.w-7 { width: 1.75rem; }
.w-8 { width: 2rem; }
.w-9 { width: 2.25rem; }
.w-10 { width: 2.5rem; }
.w-11 { width: 2.75rem; }
.w-12 { width: 3rem; }
.w-14 { width: 3.5rem; }
.w-16 { width: 4rem; }
.w-20 { width: 5rem; }
.w-24 { width: 6rem; }
.w-28 { width: 7rem; }
.w-32 { width: 8rem; }
.w-36 { width: 9rem; }
.w-40 { width: 10rem; }
.w-44 { width: 11rem; }
.w-48 { width: 12rem; }
.w-52 { width: 13rem; }
.w-56 { width: 14rem; }
.w-60 { width: 15rem; }
.w-64 { width: 16rem; }
.w-72 { width: 18rem; }
.w-80 { width: 20rem; }
.w-96 { width: 24rem; }
.w-auto { width: auto; }
.w-full { width: 100%; }
.w-screen { width: 100vw; }
.w-min { width: -moz-min-content; width: min-content; }
.w-max { width: -moz-max-content; width: max-content; }
.w-fit { width: -moz-fit-content; width: fit-content; }
/* Height */
.h-0 { height: 0; }
.h-px { height: 1px; }
.h-0\.5 { height: 0.125rem; }
.h-1 { height: 0.25rem; }
.h-1\.5 { height: 0.375rem; }
.h-2 { height: 0.5rem; }
.h-2\.5 { height: 0.625rem; }
.h-3 { height: 0.75rem; }
.h-3\.5 { height: 0.875rem; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-7 { height: 1.75rem; }
.h-8 { height: 2rem; }
.h-9 { height: 2.25rem; }
.h-10 { height: 2.5rem; }
.h-11 { height: 2.75rem; }
.h-12 { height: 3rem; }
.h-14 { height: 3.5rem; }
.h-16 { height: 4rem; }
.h-20 { height: 5rem; }
.h-24 { height: 6rem; }
.h-28 { height: 7rem; }
.h-32 { height: 8rem; }
.h-36 { height: 9rem; }
.h-40 { height: 10rem; }
.h-44 { height: 11rem; }
.h-48 { height: 12rem; }
.h-52 { height: 13rem; }
.h-56 { height: 14rem; }
.h-60 { height: 15rem; }
.h-64 { height: 16rem; }
.h-72 { height: 18rem; }
.h-80 { height: 20rem; }
.h-96 { height: 24rem; }
.h-auto { height: auto; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-min { height: -moz-min-content; height: min-content; }
.h-max { height: -moz-max-content; height: max-content; }
.h-fit { height: -moz-fit-content; height: fit-content; }
/* Min/Max width */
.min-w-0 { min-width: 0; }
.min-w-full { min-width: 100%; }
.min-w-min { min-width: -moz-min-content; min-width: min-content; }
.min-w-max { min-width: -moz-max-content; min-width: max-content; }
.min-w-fit { min-width: -moz-fit-content; min-width: fit-content; }
.max-w-0 { max-width: 0; }
.max-w-none { max-width: none; }
.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-full { max-width: 100%; }
.max-w-min { max-width: -moz-min-content; max-width: min-content; }
.max-w-max { max-width: -moz-max-content; max-width: max-content; }
.max-w-fit { max-width: -moz-fit-content; max-width: fit-content; }
.max-w-prose { max-width: 65ch; }
/* Min/Max height */
.min-h-0 { min-height: 0; }
.min-h-full { min-height: 100%; }
.min-h-screen { min-height: 100vh; }
.min-h-min { min-height: -moz-min-content; min-height: min-content; }
.min-h-max { min-height: -moz-max-content; min-height: max-content; }
.min-h-fit { min-height: -moz-fit-content; min-height: fit-content; }
.max-h-0 { max-height: 0; }
.max-h-px { max-height: 1px; }
.max-h-0\.5 { max-height: 0.125rem; }
.max-h-1 { max-height: 0.25rem; }
.max-h-1\.5 { max-height: 0.375rem; }
.max-h-2 { max-height: 0.5rem; }
.max-h-2\.5 { max-height: 0.625rem; }
.max-h-3 { max-height: 0.75rem; }
.max-h-3\.5 { max-height: 0.875rem; }
.max-h-4 { max-height: 1rem; }
.max-h-5 { max-height: 1.25rem; }
.max-h-6 { max-height: 1.5rem; }
.max-h-7 { max-height: 1.75rem; }
.max-h-8 { max-height: 2rem; }
.max-h-9 { max-height: 2.25rem; }
.max-h-10 { max-height: 2.5rem; }
.max-h-11 { max-height: 2.75rem; }
.max-h-12 { max-height: 3rem; }
.max-h-14 { max-height: 3.5rem; }
.max-h-16 { max-height: 4rem; }
.max-h-20 { max-height: 5rem; }
.max-h-24 { max-height: 6rem; }
.max-h-28 { max-height: 7rem; }
.max-h-32 { max-height: 8rem; }
.max-h-36 { max-height: 9rem; }
.max-h-40 { max-height: 10rem; }
.max-h-44 { max-height: 11rem; }
.max-h-48 { max-height: 12rem; }
.max-h-52 { max-height: 13rem; }
.max-h-56 { max-height: 14rem; }
.max-h-60 { max-height: 15rem; }
.max-h-64 { max-height: 16rem; }
.max-h-72 { max-height: 18rem; }
.max-h-80 { max-height: 20rem; }
.max-h-96 { max-height: 24rem; }
.max-h-none { max-height: none; }
.max-h-full { max-height: 100%; }
.max-h-screen { max-height: 100vh; }
.max-h-min { max-height: -moz-min-content; max-height: min-content; }
.max-h-max { max-height: -moz-max-content; max-height: max-content; }
.max-h-fit { max-height: -moz-fit-content; max-height: fit-content; }
/* DS skeleton: 02-utilities/spacing.css */
/* This file is generated as a placeholder for the design system structure. */
/* layer: utilities */
/* utilities: spacing */
/* Padding utilities */
.p-3xs { padding: var(--ds-spacing-3xs); }
.p-2xs { padding: var(--ds-spacing-2xs); }
.p-xs { padding: var(--ds-spacing-xs); }
.p-s { padding: var(--ds-spacing-s); }
.p-m { padding: var(--ds-spacing-m); }
.p-l { padding: var(--ds-spacing-l); }
.p-xl { padding: var(--ds-spacing-xl); }
.p-2xl { padding: var(--ds-spacing-2xl); }
.p-3xl { padding: var(--ds-spacing-3xl); }
.p-4xl { padding: var(--ds-spacing-4xl); }
.px-3xs { padding-left: var(--ds-spacing-3xs); padding-right: var(--ds-spacing-3xs); }
.px-2xs { padding-left: var(--ds-spacing-2xs); padding-right: var(--ds-spacing-2xs); }
.px-xs { padding-left: var(--ds-spacing-xs); padding-right: var(--ds-spacing-xs); }
.px-s { padding-left: var(--ds-spacing-s); padding-right: var(--ds-spacing-s); }
.px-m { padding-left: var(--ds-spacing-m); padding-right: var(--ds-spacing-m); }
.px-l { padding-left: var(--ds-spacing-l); padding-right: var(--ds-spacing-l); }
.px-xl { padding-left: var(--ds-spacing-xl); padding-right: var(--ds-spacing-xl); }
.px-2xl { padding-left: var(--ds-spacing-2xl); padding-right: var(--ds-spacing-2xl); }
.px-3xl { padding-left: var(--ds-spacing-3xl); padding-right: var(--ds-spacing-3xl); }
.px-4xl { padding-left: var(--ds-spacing-4xl); padding-right: var(--ds-spacing-4xl); }
.py-3xs { padding-top: var(--ds-spacing-3xs); padding-bottom: var(--ds-spacing-3xs); }
.py-2xs { padding-top: var(--ds-spacing-2xs); padding-bottom: var(--ds-spacing-2xs); }
.py-xs { padding-top: var(--ds-spacing-xs); padding-bottom: var(--ds-spacing-xs); }
.py-s { padding-top: var(--ds-spacing-s); padding-bottom: var(--ds-spacing-s); }
.py-m { padding-top: var(--ds-spacing-m); padding-bottom: var(--ds-spacing-m); }
.py-l { padding-top: var(--ds-spacing-l); padding-bottom: var(--ds-spacing-l); }
.py-xl { padding-top: var(--ds-spacing-xl); padding-bottom: var(--ds-spacing-xl); }
.py-2xl { padding-top: var(--ds-spacing-2xl); padding-bottom: var(--ds-spacing-2xl); }
.py-3xl { padding-top: var(--ds-spacing-3xl); padding-bottom: var(--ds-spacing-3xl); }
.py-4xl { padding-top: var(--ds-spacing-4xl); padding-bottom: var(--ds-spacing-4xl); }
.pt-3xs { padding-top: var(--ds-spacing-3xs); }
.pt-2xs { padding-top: var(--ds-spacing-2xs); }
.pt-xs { padding-top: var(--ds-spacing-xs); }
.pt-s { padding-top: var(--ds-spacing-s); }
.pt-m { padding-top: var(--ds-spacing-m); }
.pt-l { padding-top: var(--ds-spacing-l); }
.pt-xl { padding-top: var(--ds-spacing-xl); }
.pt-2xl { padding-top: var(--ds-spacing-2xl); }
.pt-3xl { padding-top: var(--ds-spacing-3xl); }
.pt-4xl { padding-top: var(--ds-spacing-4xl); }
.pr-3xs { padding-right: var(--ds-spacing-3xs); }
.pr-2xs { padding-right: var(--ds-spacing-2xs); }
.pr-xs { padding-right: var(--ds-spacing-xs); }
.pr-s { padding-right: var(--ds-spacing-s); }
.pr-m { padding-right: var(--ds-spacing-m); }
.pr-l { padding-right: var(--ds-spacing-l); }
.pr-xl { padding-right: var(--ds-spacing-xl); }
.pr-2xl { padding-right: var(--ds-spacing-2xl); }
.pr-3xl { padding-right: var(--ds-spacing-3xl); }
.pr-4xl { padding-right: var(--ds-spacing-4xl); }
.pb-3xs { padding-bottom: var(--ds-spacing-3xs); }
.pb-2xs { padding-bottom: var(--ds-spacing-2xs); }
.pb-xs { padding-bottom: var(--ds-spacing-xs); }
.pb-s { padding-bottom: var(--ds-spacing-s); }
.pb-m { padding-bottom: var(--ds-spacing-m); }
.pb-l { padding-bottom: var(--ds-spacing-l); }
.pb-xl { padding-bottom: var(--ds-spacing-xl); }
.pb-2xl { padding-bottom: var(--ds-spacing-2xl); }
.pb-3xl { padding-bottom: var(--ds-spacing-3xl); }
.pb-4xl { padding-bottom: var(--ds-spacing-4xl); }
.pl-3xs { padding-left: var(--ds-spacing-3xs); }
.pl-2xs { padding-left: var(--ds-spacing-2xs); }
.pl-xs { padding-left: var(--ds-spacing-xs); }
.pl-s { padding-left: var(--ds-spacing-s); }
.pl-m { padding-left: var(--ds-spacing-m); }
.pl-l { padding-left: var(--ds-spacing-l); }
.pl-xl { padding-left: var(--ds-spacing-xl); }
.pl-2xl { padding-left: var(--ds-spacing-2xl); }
.pl-3xl { padding-left: var(--ds-spacing-3xl); }
.pl-4xl { padding-left: var(--ds-spacing-4xl); }
/* Margin utilities */
.m-3xs { margin: var(--ds-spacing-3xs); }
.m-2xs { margin: var(--ds-spacing-2xs); }
.m-xs { margin: var(--ds-spacing-xs); }
.m-s { margin: var(--ds-spacing-s); }
.m-m { margin: var(--ds-spacing-m); }
.m-l { margin: var(--ds-spacing-l); }
.m-xl { margin: var(--ds-spacing-xl); }
.m-2xl { margin: var(--ds-spacing-2xl); }
.m-3xl { margin: var(--ds-spacing-3xl); }
.m-4xl { margin: var(--ds-spacing-4xl); }
.mx-3xs { margin-left: var(--ds-spacing-3xs); margin-right: var(--ds-spacing-3xs); }
.mx-2xs { margin-left: var(--ds-spacing-2xs); margin-right: var(--ds-spacing-2xs); }
.mx-xs { margin-left: var(--ds-spacing-xs); margin-right: var(--ds-spacing-xs); }
.mx-s { margin-left: var(--ds-spacing-s); margin-right: var(--ds-spacing-s); }
.mx-m { margin-left: var(--ds-spacing-m); margin-right: var(--ds-spacing-m); }
.mx-l { margin-left: var(--ds-spacing-l); margin-right: var(--ds-spacing-l); }
.mx-xl { margin-left: var(--ds-spacing-xl); margin-right: var(--ds-spacing-xl); }
.mx-2xl { margin-left: var(--ds-spacing-2xl); margin-right: var(--ds-spacing-2xl); }
.mx-3xl { margin-left: var(--ds-spacing-3xl); margin-right: var(--ds-spacing-3xl); }
.mx-4xl { margin-left: var(--ds-spacing-4xl); margin-right: var(--ds-spacing-4xl); }
.my-3xs { margin-top: var(--ds-spacing-3xs); margin-bottom: var(--ds-spacing-3xs); }
.my-2xs { margin-top: var(--ds-spacing-2xs); margin-bottom: var(--ds-spacing-2xs); }
.my-xs { margin-top: var(--ds-spacing-xs); margin-bottom: var(--ds-spacing-xs); }
.my-s { margin-top: var(--ds-spacing-s); margin-bottom: var(--ds-spacing-s); }
.my-m { margin-top: var(--ds-spacing-m); margin-bottom: var(--ds-spacing-m); }
.my-l { margin-top: var(--ds-spacing-l); margin-bottom: var(--ds-spacing-l); }
.my-xl { margin-top: var(--ds-spacing-xl); margin-bottom: var(--ds-spacing-xl); }
.my-2xl { margin-top: var(--ds-spacing-2xl); margin-bottom: var(--ds-spacing-2xl); }
.my-3xl { margin-top: var(--ds-spacing-3xl); margin-bottom: var(--ds-spacing-3xl); }
.my-4xl { margin-top: var(--ds-spacing-4xl); margin-bottom: var(--ds-spacing-4xl); }
.mt-3xs { margin-top: var(--ds-spacing-3xs); }
.mt-2xs { margin-top: var(--ds-spacing-2xs); }
.mt-xs { margin-top: var(--ds-spacing-xs); }
.mt-s { margin-top: var(--ds-spacing-s); }
.mt-m { margin-top: var(--ds-spacing-m); }
.mt-l { margin-top: var(--ds-spacing-l); }
.mt-xl { margin-top: var(--ds-spacing-xl); }
.mt-2xl { margin-top: var(--ds-spacing-2xl); }
.mt-3xl { margin-top: var(--ds-spacing-3xl); }
.mt-4xl { margin-top: var(--ds-spacing-4xl); }
.mr-3xs { margin-right: var(--ds-spacing-3xs); }
.mr-2xs { margin-right: var(--ds-spacing-2xs); }
.mr-xs { margin-right: var(--ds-spacing-xs); }
.mr-s { margin-right: var(--ds-spacing-s); }
.mr-m { margin-right: var(--ds-spacing-m); }
.mr-l { margin-right: var(--ds-spacing-l); }
.mr-xl { margin-right: var(--ds-spacing-xl); }
.mr-2xl { margin-right: var(--ds-spacing-2xl); }
.mr-3xl { margin-right: var(--ds-spacing-3xl); }
.mr-4xl { margin-right: var(--ds-spacing-4xl); }
.mb-3xs { margin-bottom: var(--ds-spacing-3xs); }
.mb-2xs { margin-bottom: var(--ds-spacing-2xs); }
.mb-xs { margin-bottom: var(--ds-spacing-xs); }
.mb-s { margin-bottom: var(--ds-spacing-s); }
.mb-m { margin-bottom: var(--ds-spacing-m); }
.mb-l { margin-bottom: var(--ds-spacing-l); }
.mb-xl { margin-bottom: var(--ds-spacing-xl); }
.mb-2xl { margin-bottom: var(--ds-spacing-2xl); }
.mb-3xl { margin-bottom: var(--ds-spacing-3xl); }
.mb-4xl { margin-bottom: var(--ds-spacing-4xl); }
.ml-3xs { margin-left: var(--ds-spacing-3xs); }
.ml-2xs { margin-left: var(--ds-spacing-2xs); }
.ml-xs { margin-left: var(--ds-spacing-xs); }
.ml-s { margin-left: var(--ds-spacing-s); }
.ml-m { margin-left: var(--ds-spacing-m); }
.ml-l { margin-left: var(--ds-spacing-l); }
.ml-xl { margin-left: var(--ds-spacing-xl); }
.ml-2xl { margin-left: var(--ds-spacing-2xl); }
.ml-3xl { margin-left: var(--ds-spacing-3xl); }
.ml-4xl { margin-left: var(--ds-spacing-4xl); }
/* Negative margins */
.-m-3xs { margin: var(--ds-spacing-3xs-negative); }
.-m-2xs { margin: var(--ds-spacing-2xs-negative); }
.-m-xs { margin: var(--ds-spacing-xs-negative); }
.-m-s { margin: var(--ds-spacing-s-negative); }
.-m-m { margin: var(--ds-spacing-m-negative); }
.-m-l { margin: var(--ds-spacing-l-negative); }
.-m-xl { margin: var(--ds-spacing-xl-negative); }
.-m-2xl { margin: var(--ds-spacing-2xl-negative); }
.-m-3xl { margin: var(--ds-spacing-3xl-negative); }
.-m-4xl { margin: var(--ds-spacing-4xl-negative); }
.-mt-3xs { margin-top: var(--ds-spacing-3xs-negative); }
.-mt-2xs { margin-top: var(--ds-spacing-2xs-negative); }
.-mt-xs { margin-top: var(--ds-spacing-xs-negative); }
.-mt-s { margin-top: var(--ds-spacing-s-negative); }
.-mt-m { margin-top: var(--ds-spacing-m-negative); }
.-mt-l { margin-top: var(--ds-spacing-l-negative); }
.-mt-xl { margin-top: var(--ds-spacing-xl-negative); }
.-mt-2xl { margin-top: var(--ds-spacing-2xl-negative); }
.-mt-3xl { margin-top: var(--ds-spacing-3xl-negative); }
.-mt-4xl { margin-top: var(--ds-spacing-4xl-negative); }
.-mr-3xs { margin-right: var(--ds-spacing-3xs-negative); }
.-mr-2xs { margin-right: var(--ds-spacing-2xs-negative); }
.-mr-xs { margin-right: var(--ds-spacing-xs-negative); }
.-mr-s { margin-right: var(--ds-spacing-s-negative); }
.-mr-m { margin-right: var(--ds-spacing-m-negative); }
.-mr-l { margin-right: var(--ds-spacing-l-negative); }
.-mr-xl { margin-right: var(--ds-spacing-xl-negative); }
.-mr-2xl { margin-right: var(--ds-spacing-2xl-negative); }
.-mr-3xl { margin-right: var(--ds-spacing-3xl-negative); }
.-mr-4xl { margin-right: var(--ds-spacing-4xl-negative); }
.-mb-3xs { margin-bottom: var(--ds-spacing-3xs-negative); }
.-mb-2xs { margin-bottom: var(--ds-spacing-2xs-negative); }
.-mb-xs { margin-bottom: var(--ds-spacing-xs-negative); }
.-mb-s { margin-bottom: var(--ds-spacing-s-negative); }
.-mb-m { margin-bottom: var(--ds-spacing-m-negative); }
.-mb-l { margin-bottom: var(--ds-spacing-l-negative); }
.-mb-xl { margin-bottom: var(--ds-spacing-xl-negative); }
.-mb-2xl { margin-bottom: var(--ds-spacing-2xl-negative); }
.-mb-3xl { margin-bottom: var(--ds-spacing-3xl-negative); }
.-mb-4xl { margin-bottom: var(--ds-spacing-4xl-negative); }
.-ml-3xs { margin-left: var(--ds-spacing-3xs-negative); }
.-ml-2xs { margin-left: var(--ds-spacing-2xs-negative); }
.-ml-xs { margin-left: var(--ds-spacing-xs-negative); }
.-ml-s { margin-left: var(--ds-spacing-s-negative); }
.-ml-m { margin-left: var(--ds-spacing-m-negative); }
.-ml-l { margin-left: var(--ds-spacing-l-negative); }
.-ml-xl { margin-left: var(--ds-spacing-xl-negative); }
.-ml-2xl { margin-left: var(--ds-spacing-2xl-negative); }
.-ml-3xl { margin-left: var(--ds-spacing-3xl-negative); }
.-ml-4xl { margin-left: var(--ds-spacing-4xl-negative); }
/* Gap utilities */
.gap-3xs { gap: var(--ds-spacing-3xs); }
.gap-2xs { gap: var(--ds-spacing-2xs); }
.gap-xs { gap: var(--ds-spacing-xs); }
.gap-s { gap: var(--ds-spacing-s); }
.gap-m { gap: var(--ds-spacing-m); }
.gap-l { gap: var(--ds-spacing-l); }
.gap-xl { gap: var(--ds-spacing-xl); }
.gap-2xl { gap: var(--ds-spacing-2xl); }
.gap-3xl { gap: var(--ds-spacing-3xl); }
.gap-4xl { gap: var(--ds-spacing-4xl); }
.row-gap-3xs { row-gap: var(--ds-spacing-3xs); }
.row-gap-2xs { row-gap: var(--ds-spacing-2xs); }
.row-gap-xs { row-gap: var(--ds-spacing-xs); }
.row-gap-s { row-gap: var(--ds-spacing-s); }
.row-gap-m { row-gap: var(--ds-spacing-m); }
.row-gap-l { row-gap: var(--ds-spacing-l); }
.row-gap-xl { row-gap: var(--ds-spacing-xl); }
.row-gap-2xl { row-gap: var(--ds-spacing-2xl); }
.row-gap-3xl { row-gap: var(--ds-spacing-3xl); }
.row-gap-4xl { row-gap: var(--ds-spacing-4xl); }
.column-gap-3xs { -moz-column-gap: var(--ds-spacing-3xs); column-gap: var(--ds-spacing-3xs); }
.column-gap-2xs { -moz-column-gap: var(--ds-spacing-2xs); column-gap: var(--ds-spacing-2xs); }
.column-gap-xs { -moz-column-gap: var(--ds-spacing-xs); column-gap: var(--ds-spacing-xs); }
.column-gap-s { -moz-column-gap: var(--ds-spacing-s); column-gap: var(--ds-spacing-s); }
.column-gap-m { -moz-column-gap: var(--ds-spacing-m); column-gap: var(--ds-spacing-m); }
.column-gap-l { -moz-column-gap: var(--ds-spacing-l); column-gap: var(--ds-spacing-l); }
.column-gap-xl { -moz-column-gap: var(--ds-spacing-xl); column-gap: var(--ds-spacing-xl); }
.column-gap-2xl { -moz-column-gap: var(--ds-spacing-2xl); column-gap: var(--ds-spacing-2xl); }
.column-gap-3xl { -moz-column-gap: var(--ds-spacing-3xl); column-gap: var(--ds-spacing-3xl); }
.column-gap-4xl { -moz-column-gap: var(--ds-spacing-4xl); column-gap: var(--ds-spacing-4xl); }
@media (max-width: 640px) {
  /* На мобильных уменьшаем горизонтальные отступы для .px-m по всему проекту */
  .px-m {
    padding-left: var(--ds-spacing-xs);
    padding-right: var(--ds-spacing-xs);
  }
}
/* DS: sticky.css - Sticky positioning utilities */
/* layer: utilities */
/* Sticky positioning */
.ds-sticky { position: sticky; }
/* Sticky top */
.ds-sticky-top-0 { position: sticky; top: 0; }
.ds-sticky-top-1 { position: sticky; top: var(--ds-spacing-3xs); }
.ds-sticky-top-2 { position: sticky; top: var(--ds-spacing-2xs); }
.ds-sticky-top-3 { position: sticky; top: var(--ds-spacing-xs); }
.ds-sticky-top-4 { position: sticky; top: var(--ds-spacing-s); }
.ds-sticky-top-5 { position: sticky; top: var(--ds-spacing-m); }
.ds-sticky-top-6 { position: sticky; top: var(--ds-spacing-l); }
.ds-sticky-top-7 { position: sticky; top: var(--ds-spacing-xl); }
/* Sticky bottom */
.ds-sticky-bottom-0 { position: sticky; bottom: 0; }
.ds-sticky-bottom-1 { position: sticky; bottom: var(--ds-spacing-3xs); }
.ds-sticky-bottom-2 { position: sticky; bottom: var(--ds-spacing-2xs); }
.ds-sticky-bottom-3 { position: sticky; bottom: var(--ds-spacing-xs); }
.ds-sticky-bottom-4 { position: sticky; bottom: var(--ds-spacing-s); }
.ds-sticky-bottom-5 { position: sticky; bottom: var(--ds-spacing-m); }
.ds-sticky-bottom-6 { position: sticky; bottom: var(--ds-spacing-l); }
.ds-sticky-bottom-7 { position: sticky; bottom: var(--ds-spacing-xl); }
/* Sticky left */
.ds-sticky-left-0 { position: sticky; left: 0; }
.ds-sticky-left-1 { position: sticky; left: var(--ds-spacing-3xs); }
.ds-sticky-left-2 { position: sticky; left: var(--ds-spacing-2xs); }
.ds-sticky-left-3 { position: sticky; left: var(--ds-spacing-xs); }
.ds-sticky-left-4 { position: sticky; left: var(--ds-spacing-s); }
.ds-sticky-left-5 { position: sticky; left: var(--ds-spacing-m); }
.ds-sticky-left-6 { position: sticky; left: var(--ds-spacing-l); }
.ds-sticky-left-7 { position: sticky; left: var(--ds-spacing-xl); }
/* Sticky right */
.ds-sticky-right-0 { position: sticky; right: 0; }
.ds-sticky-right-1 { position: sticky; right: var(--ds-spacing-3xs); }
.ds-sticky-right-2 { position: sticky; right: var(--ds-spacing-2xs); }
.ds-sticky-right-3 { position: sticky; right: var(--ds-spacing-xs); }
.ds-sticky-right-4 { position: sticky; right: var(--ds-spacing-s); }
.ds-sticky-right-5 { position: sticky; right: var(--ds-spacing-m); }
.ds-sticky-right-6 { position: sticky; right: var(--ds-spacing-l); }
.ds-sticky-right-7 { position: sticky; right: var(--ds-spacing-xl); }
/* DS: transform.css - Transform utilities */
/* layer: utilities */
/* Transform origin utilities */
.ds-transform-origin-center { transform-origin: center; }
.ds-transform-origin-top { transform-origin: top; }
.ds-transform-origin-top-right { transform-origin: top right; }
.ds-transform-origin-right { transform-origin: right; }
.ds-transform-origin-bottom-right { transform-origin: bottom right; }
.ds-transform-origin-bottom { transform-origin: bottom; }
.ds-transform-origin-bottom-left { transform-origin: bottom left; }
.ds-transform-origin-left { transform-origin: left; }
.ds-transform-origin-top-left { transform-origin: top left; }
/* Transform scale utilities */
.ds-scale-0 { transform: scale(0); }
.ds-scale-50 { transform: scale(0.5); }
.ds-scale-75 { transform: scale(0.75); }
.ds-scale-90 { transform: scale(0.9); }
.ds-scale-95 { transform: scale(0.95); }
.ds-scale-100 { transform: scale(1); }
.ds-scale-105 { transform: scale(1.05); }
.ds-scale-110 { transform: scale(1.1); }
.ds-scale-125 { transform: scale(1.25); }
.ds-scale-150 { transform: scale(1.5); }
.ds-scale-x-0 { transform: scaleX(0); }
.ds-scale-x-50 { transform: scaleX(0.5); }
.ds-scale-x-75 { transform: scaleX(0.75); }
.ds-scale-x-90 { transform: scaleX(0.9); }
.ds-scale-x-95 { transform: scaleX(0.95); }
.ds-scale-x-100 { transform: scaleX(1); }
.ds-scale-x-105 { transform: scaleX(1.05); }
.ds-scale-x-110 { transform: scaleX(1.1); }
.ds-scale-x-125 { transform: scaleX(1.25); }
.ds-scale-x-150 { transform: scaleX(1.5); }
.ds-scale-y-0 { transform: scaleY(0); }
.ds-scale-y-50 { transform: scaleY(0.5); }
.ds-scale-y-75 { transform: scaleY(0.75); }
.ds-scale-y-90 { transform: scaleY(0.9); }
.ds-scale-y-95 { transform: scaleY(0.95); }
.ds-scale-y-100 { transform: scaleY(1); }
.ds-scale-y-105 { transform: scaleY(1.05); }
.ds-scale-y-110 { transform: scaleY(1.1); }
.ds-scale-y-125 { transform: scaleY(1.25); }
.ds-scale-y-150 { transform: scaleY(1.5); }
/* Transform rotate utilities */
.ds-rotate-0 { transform: rotate(0deg); }
.ds-rotate-1 { transform: rotate(1deg); }
.ds-rotate-2 { transform: rotate(2deg); }
.ds-rotate-3 { transform: rotate(3deg); }
.ds-rotate-6 { transform: rotate(6deg); }
.ds-rotate-12 { transform: rotate(12deg); }
.ds-rotate-45 { transform: rotate(45deg); }
.ds-rotate-90 { transform: rotate(90deg); }
.ds-rotate-180 { transform: rotate(180deg); }
.ds-rotate--1 { transform: rotate(-1deg); }
.ds-rotate--2 { transform: rotate(-2deg); }
.ds-rotate--3 { transform: rotate(-3deg); }
.ds-rotate--6 { transform: rotate(-6deg); }
.ds-rotate--12 { transform: rotate(-12deg); }
.ds-rotate--45 { transform: rotate(-45deg); }
.ds-rotate--90 { transform: rotate(-90deg); }
.ds-rotate--180 { transform: rotate(-180deg); }
/* Transform translate utilities */
.ds-translate-x-0 { transform: translateX(0); }
.ds-translate-x-1 { transform: translateX(var(--ds-spacing-3xs)); }
.ds-translate-x-2 { transform: translateX(var(--ds-spacing-2xs)); }
.ds-translate-x-3 { transform: translateX(var(--ds-spacing-xs)); }
.ds-translate-x-4 { transform: translateX(var(--ds-spacing-s)); }
.ds-translate-x-5 { transform: translateX(var(--ds-spacing-m)); }
.ds-translate-x-6 { transform: translateX(var(--ds-spacing-l)); }
.ds-translate-x-7 { transform: translateX(var(--ds-spacing-xl)); }
.ds-translate-x--1 { transform: translateX(calc(var(--ds-spacing-3xs) * -1)); }
.ds-translate-x--2 { transform: translateX(calc(var(--ds-spacing-2xs) * -1)); }
.ds-translate-x--3 { transform: translateX(calc(var(--ds-spacing-xs) * -1)); }
.ds-translate-x--4 { transform: translateX(calc(var(--ds-spacing-s) * -1)); }
.ds-translate-x--5 { transform: translateX(calc(var(--ds-spacing-m) * -1)); }
.ds-translate-x--6 { transform: translateX(calc(var(--ds-spacing-l) * -1)); }
.ds-translate-x--7 { transform: translateX(calc(var(--ds-spacing-xl) * -1)); }
.ds-translate-y-0 { transform: translateY(0); }
.ds-translate-y-1 { transform: translateY(var(--ds-spacing-3xs)); }
.ds-translate-y-2 { transform: translateY(var(--ds-spacing-2xs)); }
.ds-translate-y-3 { transform: translateY(var(--ds-spacing-xs)); }
.ds-translate-y-4 { transform: translateY(var(--ds-spacing-s)); }
.ds-translate-y-5 { transform: translateY(var(--ds-spacing-m)); }
.ds-translate-y-6 { transform: translateY(var(--ds-spacing-l)); }
.ds-translate-y-7 { transform: translateY(var(--ds-spacing-xl)); }
.ds-translate-y--1 { transform: translateY(calc(var(--ds-spacing-3xs) * -1)); }
.ds-translate-y--2 { transform: translateY(calc(var(--ds-spacing-2xs) * -1)); }
.ds-translate-y--3 { transform: translateY(calc(var(--ds-spacing-xs) * -1)); }
.ds-translate-y--4 { transform: translateY(calc(var(--ds-spacing-s) * -1)); }
.ds-translate-y--5 { transform: translateY(calc(var(--ds-spacing-m) * -1)); }
.ds-translate-y--6 { transform: translateY(calc(var(--ds-spacing-l) * -1)); }
.ds-translate-y--7 { transform: translateY(calc(var(--ds-spacing-xl) * -1)); }
/* Transform skew utilities */
.ds-skew-x-0 { transform: skewX(0deg); }
.ds-skew-x-1 { transform: skewX(1deg); }
.ds-skew-x-2 { transform: skewX(2deg); }
.ds-skew-x-3 { transform: skewX(3deg); }
.ds-skew-x-6 { transform: skewX(6deg); }
.ds-skew-x-12 { transform: skewX(12deg); }
.ds-skew-x--1 { transform: skewX(-1deg); }
.ds-skew-x--2 { transform: skewX(-2deg); }
.ds-skew-x--3 { transform: skewX(-3deg); }
.ds-skew-x--6 { transform: skewX(-6deg); }
.ds-skew-x--12 { transform: skewX(-12deg); }
.ds-skew-y-0 { transform: skewY(0deg); }
.ds-skew-y-1 { transform: skewY(1deg); }
.ds-skew-y-2 { transform: skewY(2deg); }
.ds-skew-y-3 { transform: skewY(3deg); }
.ds-skew-y-6 { transform: skewY(6deg); }
.ds-skew-y-12 { transform: skewY(12deg); }
.ds-skew-y--1 { transform: skewY(-1deg); }
.ds-skew-y--2 { transform: skewY(-2deg); }
.ds-skew-y--3 { transform: skewY(-3deg); }
.ds-skew-y--6 { transform: skewY(-6deg); }
.ds-skew-y--12 { transform: skewY(-12deg); }
/* DS: transition.css - Transition utilities */
/* layer: utilities */
/* Transition property utilities */
.ds-transition-none { transition-property: none; }
.ds-transition-all { transition-property: all; }
.ds-transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; }
.ds-transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; }
.ds-transition-opacity { transition-property: opacity; }
.ds-transition-shadow { transition-property: box-shadow; }
.ds-transition-transform { transition-property: transform; }
/* Transition duration utilities */
.ds-duration-75 { transition-duration: 75ms; }
.ds-duration-100 { transition-duration: 100ms; }
.ds-duration-150 { transition-duration: 150ms; }
.ds-duration-200 { transition-duration: 200ms; }
.ds-duration-300 { transition-duration: 300ms; }
.ds-duration-500 { transition-duration: 500ms; }
.ds-duration-700 { transition-duration: 700ms; }
.ds-duration-1000 { transition-duration: 1000ms; }
/* Transition timing function utilities */
.ds-ease-linear { transition-timing-function: linear; }
.ds-ease-in { transition-timing-function: ease-in; }
.ds-ease-out { transition-timing-function: ease-out; }
.ds-ease-in-out { transition-timing-function: ease-in-out; }
.ds-ease-in-quad { transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.ds-ease-in-cubic { transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.ds-ease-in-quart { transition-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); }
.ds-ease-in-quint { transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); }
.ds-ease-in-expo { transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035); }
.ds-ease-in-circ { transition-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335); }
.ds-ease-out-quad { transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.ds-ease-out-cubic { transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.ds-ease-out-quart { transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); }
.ds-ease-out-quint { transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
.ds-ease-out-expo { transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
.ds-ease-out-circ { transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); }
.ds-ease-in-out-quad { transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); }
.ds-ease-in-out-cubic { transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); }
.ds-ease-in-out-quart { transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }
.ds-ease-in-out-quint { transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1); }
.ds-ease-in-out-expo { transition-timing-function: cubic-bezier(1, 0, 0, 1); }
.ds-ease-in-out-circ { transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); }
/* Transition delay utilities */
.ds-delay-75 { transition-delay: 75ms; }
.ds-delay-100 { transition-delay: 100ms; }
.ds-delay-150 { transition-delay: 150ms; }
.ds-delay-200 { transition-delay: 200ms; }
.ds-delay-300 { transition-delay: 300ms; }
.ds-delay-500 { transition-delay: 500ms; }
.ds-delay-700 { transition-delay: 700ms; }
.ds-delay-1000 { transition-delay: 1000ms; }
/* DS skeleton: 02-utilities/typography.css */
/* This file is generated as a placeholder for the design system structure. */
/* layer: utilities */
/* utilities: typography */
/* Font family */
.font-main { font-family: var(--ds-typography-font-family-main); }
.font-mono { font-family: var(--ds-typography-font-family-monospace); }
.font-headings { font-family: var(--ds-typography-font-family-headings); font-weight: 900 !important; }
/* Font size */
.text-xs { font-size: var(--ds-typography-desktop-extra-small-font-size); line-height: var(--ds-typography-desktop-extra-small-line-height); }
.text-sm { font-size: var(--ds-typography-desktop-small-font-size); line-height: var(--ds-typography-desktop-small-line-height); }
.text-base { font-size: var(--ds-typography-desktop-body-font-size); line-height: var(--ds-typography-desktop-body-line-height); }
.text-lg { font-size: var(--ds-typography-desktop-h4-font-size); line-height: var(--ds-typography-desktop-h4-line-height); }
.text-xl { font-size: var(--ds-typography-desktop-h3-font-size); line-height: var(--ds-typography-desktop-h3-line-height); }
.text-2xl { font-size: var(--ds-typography-desktop-h2-font-size); line-height: var(--ds-typography-desktop-h2-line-height); }
.text-3xl { font-size: var(--ds-typography-desktop-h1-font-size); line-height: var(--ds-typography-desktop-h1-line-height); }
/* Font weight */
.font-light { font-weight: 300; }
.font-normal { font-weight: var(--ds-typography-font-weight-normal); }
.font-medium { font-weight: var(--ds-typography-font-weight-medium); }
.font-semibold { font-weight: var(--ds-typography-font-weight-semibold); }
.font-bold { font-weight: var(--ds-typography-font-weight-bold); }
/* Line height */
.leading-none { line-height: var(--ds-typography-line-height-tight); }
.leading-tight { line-height: var(--ds-typography-line-height-tight); }
.leading-snug { line-height: 1.375; }
.leading-normal { line-height: var(--ds-typography-line-height-normal); }
.leading-relaxed { line-height: var(--ds-typography-line-height-relaxed); }
.leading-loose { line-height: 2; }
/* Letter spacing */
.tracking-tighter { letter-spacing: var(--ds-typography-letter-spacing-tight); }
.tracking-tight { letter-spacing: -0.015em; }
.tracking-normal { letter-spacing: var(--ds-typography-letter-spacing-normal); }
.tracking-wide { letter-spacing: var(--ds-typography-letter-spacing-wide); }
.tracking-wider { letter-spacing: 0.08em; }
.tracking-widest { letter-spacing: 0.1em; }
/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }
.text-start { text-align: start; }
.text-end { text-align: end; }
/* Text decoration */
.underline { text-decoration-line: underline; }
.overline { text-decoration-line: overline; }
.line-through { text-decoration-line: line-through; }
.no-underline { text-decoration-line: none; }
/* Text decoration style */
.decoration-solid { text-decoration-style: solid; }
.decoration-double { text-decoration-style: double; }
.decoration-dotted { text-decoration-style: dotted; }
.decoration-dashed { text-decoration-style: dashed; }
.decoration-wavy { text-decoration-style: wavy; }
/* Text decoration thickness */
.decoration-auto { text-decoration-thickness: auto; }
.decoration-from-font { text-decoration-thickness: from-font; }
.decoration-0 { text-decoration-thickness: 0px; }
.decoration-1 { text-decoration-thickness: 1px; }
.decoration-2 { text-decoration-thickness: 2px; }
.decoration-4 { text-decoration-thickness: 4px; }
.decoration-8 { text-decoration-thickness: 8px; }
/* Text transform */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }
/* Font style */
.italic { font-style: italic; }
.not-italic { font-style: normal; }
/* Font variant numeric */
.normal-nums { font-variant-numeric: normal; }
.ordinal { font-variant-numeric: ordinal; }
.slashed-zero { font-variant-numeric: slashed-zero; }
.lining-nums { font-variant-numeric: lining-nums; }
.oldstyle-nums { font-variant-numeric: oldstyle-nums; }
.proportional-nums { font-variant-numeric: proportional-nums; }
.tabular-nums { font-variant-numeric: tabular-nums; }
.diagonal-fractions { font-variant-numeric: diagonal-fractions; }
.stacked-fractions { font-variant-numeric: stacked-fractions; }
/* Text overflow */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-ellipsis { text-overflow: ellipsis; }
.text-clip { text-overflow: clip; }
/* White space */
.whitespace-normal { white-space: normal; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre { white-space: pre; }
.whitespace-pre-line { white-space: pre-line; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.whitespace-break-spaces { white-space: break-spaces; }
/* Word break */
.break-normal { overflow-wrap: normal; word-break: normal; }
.break-words { overflow-wrap: break-word; }
.break-all { word-break: break-all; }
.break-keep { word-break: keep-all; }
/* Hyphens */
.hyphens-none { -webkit-hyphens: none; hyphens: none; }
.hyphens-manual { -webkit-hyphens: manual; hyphens: manual; }
.hyphens-auto { -webkit-hyphens: auto; hyphens: auto; }
/* Content */
.content-none { content: none; }
/* List style */
.list-none { list-style-type: none; }
.list-disc { list-style-type: disc; }
.list-decimal { list-style-type: decimal; }
/* Vertical align */
.align-baseline { vertical-align: baseline; }
.align-top { vertical-align: top; }
.align-middle { vertical-align: middle; }
.align-bottom { vertical-align: bottom; }
.align-text-top { vertical-align: text-top; }
.align-text-bottom { vertical-align: text-bottom; }
.align-sub { vertical-align: sub; }
.align-super { vertical-align: super; }
/* DS: visibility.css - Visibility utilities */
/* layer: utilities */
/* Visibility utilities */
.ds-visible { visibility: visible; }
.ds-invisible { visibility: hidden; }
.ds-collapse { visibility: collapse; }
/* Screen reader utilities */
.ds-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.ds-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}
.ds-not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}
/* DS: container.css - Container layout utilities */
/* layer: layout */
.ds-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ds-spacing-s);
  padding-right: var(--ds-spacing-s);
}
@media (min-width: 640px) {
  .ds-container {
    max-width: var(--ds-container-sm);
  }
}
@media (min-width: 768px) {
  .ds-container {
    max-width: var(--ds-container-md);
  }
}
@media (min-width: 1024px) {
  .ds-container {
    max-width: var(--ds-container-lg);
  }
}
@media (min-width: 1280px) {
  .ds-container {
    max-width: var(--ds-container-xl);
  }
}
@media (min-width: 1536px) {
  .ds-container {
    max-width: var(--ds-container-2xl);
  }
}
.ds-container-fluid {
  width: 100%;
  padding-left: var(--ds-spacing-s);
  padding-right: var(--ds-spacing-s);
}
/* Container sizes */
.ds-container-sm { max-width: var(--ds-container-sm); }
.ds-container-md { max-width: var(--ds-container-md); }
.ds-container-lg { max-width: var(--ds-container-lg); }
.ds-container-xl { max-width: var(--ds-container-xl); }
.ds-container-2xl { max-width: var(--ds-container-2xl); }
/* Container with different padding */
.ds-container-narrow {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ds-spacing-m);
  padding-right: var(--ds-spacing-m);
  max-width: 640px;
}
.ds-container-wide {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ds-spacing-l);
  padding-right: var(--ds-spacing-l);
  max-width: 1200px;
}
/* DS: dashboard-grid.css - Dashboard grid layout system */
/* layer: layout */
/* === DASHBOARD GRID SYSTEM === */
/* Main dashboard grid container */
.ds-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  gap: var(--ds-spacing-m);
  min-height: 100vh;
  padding: var(--ds-spacing-l);
  background-color: var(--ds-surface-secondary);
}
/* Grid items span utilities */
.ds-dashboard-span-1 { grid-column: span 1; }
.ds-dashboard-span-2 { grid-column: span 2; }
.ds-dashboard-span-3 { grid-column: span 3; }
.ds-dashboard-span-4 { grid-column: span 4; }
.ds-dashboard-span-5 { grid-column: span 5; }
.ds-dashboard-span-6 { grid-column: span 6; }
.ds-dashboard-span-7 { grid-column: span 7; }
.ds-dashboard-span-8 { grid-column: span 8; }
.ds-dashboard-span-9 { grid-column: span 9; }
.ds-dashboard-span-10 { grid-column: span 10; }
.ds-dashboard-span-11 { grid-column: span 11; }
.ds-dashboard-span-12 { grid-column: span 12; }
/* Row span utilities */
.ds-dashboard-row-span-1 { grid-row: span 1; }
.ds-dashboard-row-span-2 { grid-row: span 2; }
.ds-dashboard-row-span-3 { grid-row: span 3; }
.ds-dashboard-row-span-4 { grid-row: span 4; }
.ds-dashboard-row-span-5 { grid-row: span 5; }
.ds-dashboard-row-span-6 { grid-row: span 6; }
/* Grid positioning */
.ds-dashboard-start-1 { grid-column-start: 1; }
.ds-dashboard-start-2 { grid-column-start: 2; }
.ds-dashboard-start-3 { grid-column-start: 3; }
.ds-dashboard-start-4 { grid-column-start: 4; }
.ds-dashboard-start-5 { grid-column-start: 5; }
.ds-dashboard-start-6 { grid-column-start: 6; }
.ds-dashboard-start-7 { grid-column-start: 7; }
.ds-dashboard-start-8 { grid-column-start: 8; }
.ds-dashboard-start-9 { grid-column-start: 9; }
.ds-dashboard-start-10 { grid-column-start: 10; }
.ds-dashboard-start-11 { grid-column-start: 11; }
.ds-dashboard-start-12 { grid-column-start: 12; }
.ds-dashboard-start-13 { grid-column-start: 13; }
/* Grid areas for common layouts */
.ds-dashboard-header {
  grid-column: 1 / -1;
  grid-row: 1;
}
.ds-dashboard-sidebar {
  grid-column: 1 / 4;
  grid-row: 2 / -1;
}
.ds-dashboard-main {
  grid-column: 4 / -1;
  grid-row: 2 / -1;
}
/* Responsive dashboard grid */
@media (max-width: 1024px) {
  .ds-dashboard-grid {
    grid-template-columns: repeat(8, 1fr);
    gap: var(--ds-spacing-m);
    padding: var(--ds-spacing-m);
  }

  .ds-dashboard-sidebar {
    grid-column: 1 / -1;
    grid-row: auto;
    order: 2;
  }

  .ds-dashboard-main {
    grid-column: 1 / -1;
    grid-row: auto;
    order: 1;
  }
}
@media (max-width: 768px) {
  .ds-dashboard-grid {
    grid-template-columns: 1fr;
    gap: var(--ds-spacing-s);
    padding: var(--ds-spacing-s);
  }

  .ds-dashboard-span-1,
  .ds-dashboard-span-2,
  .ds-dashboard-span-3,
  .ds-dashboard-span-4,
  .ds-dashboard-span-5,
  .ds-dashboard-span-6,
  .ds-dashboard-span-7,
  .ds-dashboard-span-8,
  .ds-dashboard-span-9,
  .ds-dashboard-span-10,
  .ds-dashboard-span-11 {
    grid-column: span 1;
  }

  .ds-dashboard-header,
  .ds-dashboard-sidebar,
  .ds-dashboard-main {
    grid-column: 1 / -1;
    order: initial;
  }
}
/* === DASHBOARD CARD GRID === */
/* Auto-fit grid for dashboard cards */
.ds-dashboard-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--ds-spacing-m);
  margin-top: var(--ds-spacing-m);
}
/* Fixed column counts for different screen sizes */
.ds-dashboard-cards-2 { grid-template-columns: repeat(2, 1fr); }
.ds-dashboard-cards-3 { grid-template-columns: repeat(3, 1fr); }
.ds-dashboard-cards-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
  .ds-dashboard-cards {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--ds-spacing-m);
  }

  .ds-dashboard-cards-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  .ds-dashboard-cards {
    grid-template-columns: 1fr;
    gap: var(--ds-spacing-s);
  }

  .ds-dashboard-cards-2,
  .ds-dashboard-cards-3,
  .ds-dashboard-cards-4 {
    grid-template-columns: 1fr;
  }
}
/* === DASHBOARD WIDGET POSITIONING === */
/* Widget container in dashboard */
.ds-dashboard-widget {
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-l);
  box-shadow: var(--ds-shadow-sm);
  padding: var(--ds-spacing-l);
  transition: box-shadow var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-dashboard-widget:hover {
  box-shadow: var(--ds-shadow-md);
}
/* Widget header */
.ds-dashboard-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ds-spacing-m);
  padding-bottom: var(--ds-spacing-s);
  border-bottom: 1px solid var(--ds-border-tertiary);
}
.ds-dashboard-widget-title {
  font-size: var(--ds-typography-desktop-h4-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0;
}
.ds-dashboard-widget-actions {
  display: flex;
  gap: var(--ds-spacing-xs);
}
/* Widget content */
.ds-dashboard-widget-content {
  flex: 1;
  min-height: 0; /* Allow flex children to shrink */
}
/* Widget footer */
.ds-dashboard-widget-footer {
  margin-top: var(--ds-spacing-m);
  padding-top: var(--ds-spacing-s);
  border-top: 1px solid var(--ds-border-tertiary);
}
/* === DASHBOARD LAYOUT VARIANTS === */
/* Compact dashboard */
.ds-dashboard-compact {
  gap: var(--ds-spacing-s);
  padding: var(--ds-spacing-m);
}
.ds-dashboard-compact .ds-dashboard-widget {
  padding: var(--ds-spacing-m);
}
/* Dense dashboard */
.ds-dashboard-dense {
  gap: var(--ds-spacing-xs);
  padding: var(--ds-spacing-s);
}
.ds-dashboard-dense .ds-dashboard-widget {
  padding: var(--ds-spacing-s);
}
/* Fullscreen dashboard */
.ds-dashboard-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--ds-z-index-modal);
  background-color: var(--ds-surface-primary);
  padding: var(--ds-spacing-l);
  overflow: auto;
}
/* === DASHBOARD RESPONSIVE UTILITIES === */
/* Hide/show on different breakpoints */
.ds-dashboard-hidden-mobile {
  display: block;
}
@media (max-width: 768px) {
  .ds-dashboard-hidden-mobile {
    display: none;
  }
}
.ds-dashboard-hidden-tablet {
  display: block;
}
@media (min-width: 769px) and (max-width: 1024px) {
  .ds-dashboard-hidden-tablet {
    display: none;
  }
}
.ds-dashboard-hidden-desktop {
  display: block;
}
@media (min-width: 1025px) {
  .ds-dashboard-hidden-desktop {
    display: none;
  }
}
/* Reorder elements on mobile */
.ds-dashboard-order-first-mobile {
  order: 0;
}
@media (max-width: 768px) {
  .ds-dashboard-order-last-mobile {
    order: 999;
  }
}
/* DS: grid.css - CSS Grid layout system */
/* layer: layout */
.ds-grid {
  display: grid;
  grid-template-columns: repeat(var(--ds-grid-cols), 1fr);
  gap: var(--ds-grid-gap-md);
}
.ds-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.ds-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ds-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ds-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ds-grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ds-grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.ds-grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.ds-grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.ds-grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.ds-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.ds-grid-cols-none { grid-template-columns: none; }
.ds-grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
.ds-grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.ds-grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.ds-grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.ds-grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); }
.ds-grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); }
.ds-grid-rows-none { grid-template-rows: none; }
.ds-grid-flow-row { grid-auto-flow: row; }
.ds-grid-flow-col { grid-auto-flow: column; }
.ds-grid-flow-row-dense { grid-auto-flow: row dense; }
.ds-grid-flow-col-dense { grid-auto-flow: column dense; }
.ds-col-span-1 { grid-column: span 1 / span 1; }
.ds-col-span-2 { grid-column: span 2 / span 2; }
.ds-col-span-3 { grid-column: span 3 / span 3; }
.ds-col-span-4 { grid-column: span 4 / span 4; }
.ds-col-span-5 { grid-column: span 5 / span 5; }
.ds-col-span-6 { grid-column: span 6 / span 6; }
.ds-col-span-7 { grid-column: span 7 / span 7; }
.ds-col-span-8 { grid-column: span 8 / span 8; }
.ds-col-span-9 { grid-column: span 9 / span 9; }
.ds-col-span-10 { grid-column: span 10 / span 10; }
.ds-col-span-11 { grid-column: span 11 / span 11; }
.ds-col-span-12 { grid-column: span 12 / span 12; }
.ds-col-span-full { grid-column: 1 / -1; }
.ds-col-start-1 { grid-column-start: 1; }
.ds-col-start-2 { grid-column-start: 2; }
.ds-col-start-3 { grid-column-start: 3; }
.ds-col-start-4 { grid-column-start: 4; }
.ds-col-start-5 { grid-column-start: 5; }
.ds-col-start-6 { grid-column-start: 6; }
.ds-col-start-7 { grid-column-start: 7; }
.ds-col-start-8 { grid-column-start: 8; }
.ds-col-start-9 { grid-column-start: 9; }
.ds-col-start-10 { grid-column-start: 10; }
.ds-col-start-11 { grid-column-start: 11; }
.ds-col-start-12 { grid-column-start: 12; }
.ds-col-start-13 { grid-column-start: 13; }
.ds-col-start-auto { grid-column-start: auto; }
.ds-col-end-1 { grid-column-end: 1; }
.ds-col-end-2 { grid-column-end: 2; }
.ds-col-end-3 { grid-column-end: 3; }
.ds-col-end-4 { grid-column-end: 4; }
.ds-col-end-5 { grid-column-end: 5; }
.ds-col-end-6 { grid-column-end: 6; }
.ds-col-end-7 { grid-column-end: 7; }
.ds-col-end-8 { grid-column-end: 8; }
.ds-col-end-9 { grid-column-end: 9; }
.ds-col-end-10 { grid-column-end: 10; }
.ds-col-end-11 { grid-column-end: 11; }
.ds-col-end-12 { grid-column-end: 12; }
.ds-col-end-13 { grid-column-end: 13; }
.ds-col-end-auto { grid-column-end: auto; }
.ds-row-span-1 { grid-row: span 1 / span 1; }
.ds-row-span-2 { grid-row: span 2 / span 2; }
.ds-row-span-3 { grid-row: span 3 / span 3; }
.ds-row-span-4 { grid-row: span 4 / span 4; }
.ds-row-span-5 { grid-row: span 5 / span 5; }
.ds-row-span-6 { grid-row: span 6 / span 6; }
.ds-row-span-full { grid-row: 1 / -1; }
.ds-row-start-1 { grid-row-start: 1; }
.ds-row-start-2 { grid-row-start: 2; }
.ds-row-start-3 { grid-row-start: 3; }
.ds-row-start-4 { grid-row-start: 4; }
.ds-row-start-5 { grid-row-start: 5; }
.ds-row-start-6 { grid-row-start: 6; }
.ds-row-start-7 { grid-row-start: 7; }
.ds-row-start-auto { grid-row-start: auto; }
.ds-row-end-1 { grid-row-end: 1; }
.ds-row-end-2 { grid-row-end: 2; }
.ds-row-end-3 { grid-row-end: 3; }
.ds-row-end-4 { grid-row-end: 4; }
.ds-row-end-5 { grid-row-end: 5; }
.ds-row-end-6 { grid-row-end: 6; }
.ds-row-end-7 { grid-row-end: 7; }
.ds-row-end-auto { grid-row-end: auto; }
.ds-gap-0 { gap: 0; }
.ds-gap-px { gap: 1px; }
.ds-gap-0.5 { gap: 0.125rem; }
.ds-gap-1 { gap: 0.25rem; }
.ds-gap-1.5 { gap: 0.375rem; }
.ds-gap-2 { gap: 0.5rem; }
.ds-gap-2.5 { gap: 0.625rem; }
.ds-gap-3 { gap: 0.75rem; }
.ds-gap-3.5 { gap: 0.875rem; }
.ds-gap-4 { gap: 1rem; }
.ds-gap-5 { gap: 1.25rem; }
.ds-gap-6 { gap: 1.5rem; }
.ds-gap-7 { gap: 1.75rem; }
.ds-gap-8 { gap: 2rem; }
.ds-gap-9 { gap: 2.25rem; }
.ds-gap-10 { gap: 2.5rem; }
.ds-gap-11 { gap: 2.75rem; }
.ds-gap-12 { gap: 3rem; }
.ds-gap-14 { gap: 3.5rem; }
.ds-gap-16 { gap: 4rem; }
.ds-gap-20 { gap: 5rem; }
.ds-gap-24 { gap: 6rem; }
.ds-gap-28 { gap: 7rem; }
.ds-gap-32 { gap: 8rem; }
.ds-gap-36 { gap: 9rem; }
.ds-gap-40 { gap: 10rem; }
.ds-gap-44 { gap: 11rem; }
.ds-gap-48 { gap: 12rem; }
.ds-gap-52 { gap: 13rem; }
.ds-gap-56 { gap: 14rem; }
.ds-gap-60 { gap: 15rem; }
.ds-gap-64 { gap: 16rem; }
.ds-gap-72 { gap: 18rem; }
.ds-gap-80 { gap: 20rem; }
.ds-gap-96 { gap: 24rem; }
/* Responsive grid column helpers (layout layer to override utilities) */
@media (min-width: 768px) {
  .ds-grid-cols-2\@md { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .ds-grid-cols-2\@lg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-col-span-6\@lg  { grid-column: span 6 / span 6; }
  .ds-col-span-12\@lg { grid-column: span 12 / span 12; }
}
/* DS: header-layout.css - Header layout components */
/* layer: layout */
/* === HEADER LAYOUT SYSTEM === */
/* Base header component */
.ds-header {
  position: sticky;
  top: 0;
  z-index: var(--ds-z-index-sticky);
  background-color: var(--ds-surface-primary);
  border-bottom: 1px solid var(--ds-border-primary);
  backdrop-filter: blur(var(--ds-backdrop-blur-sm));
  -webkit-backdrop-filter: blur(var(--ds-backdrop-blur-sm));
}
.ds-header-shadow {
  box-shadow: var(--ds-shadow-sm);
}
/* Header container */
.ds-header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--ds-header-height, 64px);
  padding: 0 var(--ds-spacing-l);
}
/* Header sections */
.ds-header-start {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-m);
}
.ds-header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.ds-header-end {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-m);
  margin-left: auto;
}
/* Header variants */
.ds-header-compact {
  min-height: var(--ds-header-height-compact, 48px);
}
.ds-header-compact .ds-header-container {
  padding: 0 var(--ds-spacing-m);
}
/* Header with breadcrumb */
.ds-header-with-breadcrumb {
  border-bottom: none;
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.ds-header-with-breadcrumb .ds-header-container {
  padding-bottom: var(--ds-spacing-m);
  border-bottom: 1px solid var(--ds-border-primary);
}
/* === HEADER TOKENS === */
.ds-header-height: 64px;
.ds-header-height-compact: 48px;
/* === RESPONSIVE HEADER === */
@media (max-width: 768px) {
  .ds-header-container {
    padding: 0 var(--ds-spacing-m);
    min-height: var(--ds-header-height-compact, 48px);
  }

  .ds-header-start,
  .ds-header-end {
    gap: var(--ds-spacing-s);
  }

  .ds-header-center {
    flex: none;
    order: -1;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .ds-header-mobile-menu {
    display: flex;
    align-items: center;
  }

  .ds-header-desktop-menu {
    display: none;
  }
}
@media (max-width: 480px) {
  .ds-header-container {
    padding: 0 var(--ds-spacing-s);
  }

  .ds-header-start .ds-header-brand {
    font-size: var(--ds-typography-mobile-h3-font-size);
  }

  .ds-header-end {
    gap: var(--ds-spacing-xs);
  }
}
/* === HEADER BRAND === */
.ds-header-brand {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  font-size: var(--ds-typography-desktop-h3-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  text-decoration: none;
}
.ds-header-brand:hover {
  color: var(--ds-interactive-primary);
}
.ds-header-brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--ds-border-radius-s);
  background-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
  font-weight: 700;
  font-size: var(--ds-typography-desktop-h4-font-size);
}
.ds-header-brand-text {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
}
/* === HEADER NAVIGATION === */
.ds-header-nav {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-l);
}
.ds-header-nav-item {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  color: var(--ds-text-secondary);
  text-decoration: none;
  border-radius: var(--ds-border-radius-s);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-header-nav-item:hover {
  color: var(--ds-text-primary);
  background-color: var(--ds-surface-secondary);
}
.ds-header-nav-item.active {
  color: var(--ds-interactive-primary);
  background-color: var(--ds-interactive-primary-bg);
}
.ds-header-nav-item:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
/* === HEADER ACTIONS === */
.ds-header-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
}
.ds-header-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--ds-border-radius-s);
  color: var(--ds-text-secondary);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-header-action:hover {
  color: var(--ds-text-primary);
  background-color: var(--ds-surface-secondary);
}
.ds-header-action:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-header-action.active {
  color: var(--ds-interactive-primary);
  background-color: var(--ds-interactive-primary-bg);
}
/* === HEADER SEARCH === */
.ds-header-search {
  position: relative;
  max-width: 400px;
  width: 100%;
}
.ds-header-search-input {
  width: 100%;
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  padding-right: 48px;
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  background-color: var(--ds-surface-primary);
  color: var(--ds-text-primary);
  font-size: var(--ds-typography-desktop-body-font-size);
  transition: border-color var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-header-search-input:focus {
  outline: none;
  border-color: var(--ds-border-focus);
  box-shadow: 0 0 0 3px rgba(var(--ds-interactive-primary-rgb), 0.1);
}
.ds-header-search-button {
  position: absolute;
  right: var(--ds-spacing-xs);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--ds-text-secondary);
  cursor: pointer;
  border-radius: var(--ds-border-radius-s);
}
.ds-header-search-button:hover {
  color: var(--ds-text-primary);
  background-color: var(--ds-surface-secondary);
}
/* === HEADER USER MENU === */
.ds-header-user {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  padding: var(--ds-spacing-xs);
  border-radius: var(--ds-border-radius-s);
  cursor: pointer;
  transition: background-color var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-header-user:hover {
  background-color: var(--ds-surface-secondary);
}
.ds-header-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--ds-border-radius-full);
  background-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--ds-typography-desktop-small-font-size);
}
.ds-header-user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.ds-header-user-name {
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 500;
  color: var(--ds-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-header-user-role {
  font-size: var(--ds-typography-desktop-xs-font-size);
  color: var(--ds-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-header-user-chevron {
  color: var(--ds-text-tertiary);
  transition: transform var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-header-user[aria-expanded="true"] .ds-header-user-chevron {
  transform: rotate(180deg);
}
/* === HEADER MOBILE MENU TOGGLE === */
.ds-header-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  color: var(--ds-text-secondary);
  cursor: pointer;
  border-radius: var(--ds-border-radius-s);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-header-menu-toggle:hover {
  color: var(--ds-text-primary);
  background-color: var(--ds-surface-secondary);
}
.ds-header-menu-toggle:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
@media (max-width: 768px) {
  .ds-header-menu-toggle {
    display: flex;
  }
}
/* === HEADER STICKY VARIANTS === */
.ds-header-sticky {
  position: sticky;
  top: 0;
  z-index: var(--ds-z-index-sticky);
}
.ds-header-sticky-shadow {
  box-shadow: var(--ds-shadow-sm);
}
/* Header with progress bar */
.ds-header-with-progress {
  position: relative;
}
.ds-header-with-progress::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--ds-interactive-primary);
  transform-origin: left;
  animation: header-progress var(--ds-motion-duration-slow) var(--ds-motion-easing-standard);
}
@keyframes header-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
/* DS: page.css - Page layout system */
/* layer: layout */
/* === PAGE LAYOUT SYSTEM === */
/* Base page wrapper */
.ds-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--ds-surface-secondary);
}
.ds-page-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* Page header section */
.ds-page-header {
  background-color: var(--ds-surface-primary);
  border-bottom: 1px solid var(--ds-border-primary);
}
.ds-page-header-sticky {
  position: sticky;
  top: 0;
  z-index: var(--ds-z-index-sticky);
  box-shadow: var(--ds-shadow-sm);
}
.ds-page-header-container {
  padding: var(--ds-spacing-l) var(--ds-spacing-xl);
}
.ds-page-title {
  font-size: var(--ds-typography-desktop-h1-font-size);
  font-weight: 700;
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-spacing-xs) 0;
  line-height: var(--ds-typography-desktop-h1-line-height);
}
.ds-page-subtitle {
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-secondary);
  margin: 0 0 var(--ds-spacing-m) 0;
  line-height: var(--ds-typography-desktop-body-line-height);
}
.ds-page-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  flex-wrap: wrap;
}
.ds-page-breadcrumb {
  margin-bottom: var(--ds-spacing-m);
}
/* Page main content */
.ds-page-main {
  flex: 1;
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
}
.ds-page-main-narrow {
  max-width: var(--ds-container-lg);
  margin: 0 auto;
  width: 100%;
}
.ds-page-main-wide {
  padding: var(--ds-spacing-xl) 0;
}
/* Page sections */
.ds-page-section {
  margin-bottom: var(--ds-spacing-xl);
}
.ds-page-section:last-child {
  margin-bottom: 0;
}
.ds-page-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ds-spacing-l);
  padding-bottom: var(--ds-spacing-m);
  border-bottom: 1px solid var(--ds-border-tertiary);
}
.ds-page-section-title {
  font-size: var(--ds-typography-desktop-h2-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0;
  line-height: var(--ds-typography-desktop-h2-line-height);
}
.ds-page-section-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
}
/* Page footer */
.ds-page-footer {
  background-color: var(--ds-surface-primary);
  border-top: 1px solid var(--ds-border-primary);
  margin-top: auto;
}
.ds-page-footer-sticky {
  position: sticky;
  bottom: 0;
  z-index: var(--ds-z-index-sticky);
  box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.1), 0 -1px 2px 0 rgba(0, 0, 0, 0.06);
}
.ds-page-footer-container {
  padding: var(--ds-spacing-l) var(--ds-spacing-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-spacing-m);
}
.ds-page-footer-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  flex-wrap: wrap;
}
/* === RESPONSIVE PAGE LAYOUT === */
@media (max-width: 1024px) {
  .ds-page-header-container,
  .ds-page-main,
  .ds-page-footer-container {
    padding-left: var(--ds-spacing-l);
    padding-right: var(--ds-spacing-l);
  }

  .ds-page-main-narrow {
    max-width: none;
  }
}
@media (max-width: 768px) {
  .ds-page-header-container {
    padding: var(--ds-spacing-m);
  }

  .ds-page-main {
    padding: var(--ds-spacing-m);
  }

  .ds-page-footer-container {
    padding: var(--ds-spacing-m);
    flex-direction: column;
    align-items: stretch;
    gap: var(--ds-spacing-s);
  }

  .ds-page-actions,
  .ds-page-footer-actions {
    justify-content: center;
  }

  .ds-page-section-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ds-spacing-xs);
  }

  .ds-page-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-spacing-s);
  }

  .ds-page-title {
    font-size: var(--ds-typography-mobile-h1-font-size);
    line-height: var(--ds-typography-mobile-h1-line-height);
  }

  .ds-page-section-title {
    font-size: var(--ds-typography-mobile-h2-font-size);
    line-height: var(--ds-typography-mobile-h2-line-height);
  }
}
@media (max-width: 480px) {
  .ds-page-header-container,
  .ds-page-main,
  .ds-page-footer-container {
    padding: var(--ds-spacing-s);
  }

  .ds-page-actions,
  .ds-page-footer-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ds-spacing-xs);
  }

  .ds-page-actions .ds-btn,
  .ds-page-footer-actions .ds-btn {
    width: 100%;
    justify-content: center;
  }
}
/* === PAGE LAYOUT VARIANTS === */
/* Centered page layout */
.ds-page-centered {
  align-items: center;
  justify-content: center;
  background-color: var(--ds-surface-primary);
}
.ds-page-centered .ds-page-main {
  max-width: var(--ds-container-sm);
  margin: 0 auto;
  padding: var(--ds-spacing-3xl);
  text-align: center;
}
/* Fullscreen page layout */
.ds-page-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--ds-z-index-modal);
  background-color: var(--ds-surface-primary);
  overflow: auto;
}
.ds-page-fullscreen .ds-page-main {
  padding: var(--ds-spacing-xl);
}
/* Dashboard page layout */
.ds-page-dashboard {
  background-color: var(--ds-surface-secondary);
}
.ds-page-dashboard .ds-page-main {
  padding: 0;
}
.ds-page-dashboard .ds-page-content {
  display: grid;
  grid-template-columns: var(--ds-sidebar-width, 240px) 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
.ds-page-dashboard .ds-page-sidebar {
  grid-column: 1;
  grid-row: 1 / -1;
  background-color: var(--ds-surface-primary);
  border-right: 1px solid var(--ds-border-primary);
}
.ds-page-dashboard .ds-page-header {
  grid-column: 2;
  grid-row: 1;
}
.ds-page-dashboard .ds-page-main {
  grid-column: 2;
  grid-row: 2;
}
.ds-page-dashboard .ds-page-footer {
  grid-column: 2;
  grid-row: 3;
}
/* Auth page layout */
.ds-page-auth {
  background: linear-gradient(135deg, var(--ds-surface-primary) 0%, var(--ds-surface-secondary) 100%);
}
.ds-page-auth .ds-page-main {
  max-width: var(--ds-container-sm);
  margin: 0 auto;
  padding: var(--ds-spacing-3xl) var(--ds-spacing-l);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.ds-page-auth .ds-page-content {
  width: 100%;
  max-width: 400px;
}
/* Error page layout */
.ds-page-error {
  text-align: center;
  background-color: var(--ds-surface-primary);
}
.ds-page-error .ds-page-main {
  padding: var(--ds-spacing-3xl) var(--ds-spacing-l);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
}
.ds-page-error-code {
  font-size: 8rem;
  font-weight: 700;
  color: var(--ds-text-disabled);
  line-height: 1;
  margin-bottom: var(--ds-spacing-l);
}
.ds-page-error-title {
  font-size: var(--ds-typography-desktop-h1-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin-bottom: var(--ds-spacing-m);
}
.ds-page-error-description {
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-secondary);
  margin-bottom: var(--ds-spacing-xl);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
/* Loading page layout */
.ds-page-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: var(--ds-surface-primary);
}
/* Empty page layout */
.ds-page-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  padding: var(--ds-spacing-3xl) var(--ds-spacing-l);
  text-align: center;
}
.ds-page-empty-icon {
  font-size: 4rem;
  color: var(--ds-text-disabled);
  margin-bottom: var(--ds-spacing-l);
}
.ds-page-empty-title {
  font-size: var(--ds-typography-desktop-h2-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin-bottom: var(--ds-spacing-m);
}
.ds-page-empty-description {
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-secondary);
  margin-bottom: var(--ds-spacing-xl);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.ds-page-empty-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-spacing-s);
  flex-wrap: wrap;
}
/* === PAGE UTILITIES === */
/* Page scroll behavior */
.ds-page-smooth-scroll {
  scroll-behavior: smooth;
}
.ds-page-no-scroll {
  overflow: hidden;
}
/* Page content width constraints */
.ds-page-content-narrow { max-width: 640px; }
.ds-page-content-regular { max-width: 768px; }
.ds-page-content-wide { max-width: 1024px; }
.ds-page-content-extra-wide { max-width: 1280px; }
/* Page spacing variants */
.ds-page-compact .ds-page-main { padding: var(--ds-spacing-l); }
.ds-page-spacious .ds-page-main { padding: var(--ds-spacing-2xl); }
@media (max-width: 768px) {
  .ds-page-compact .ds-page-main,
  .ds-page-spacious .ds-page-main {
    padding: var(--ds-spacing-m);
  }
}
/* Page with sidebar utilities */
.ds-page-with-sidebar {
  display: grid;
  grid-template-columns: var(--ds-sidebar-width, 240px) 1fr;
}
.ds-page-sidebar {
  background-color: var(--ds-surface-primary);
  border-right: 1px solid var(--ds-border-primary);
}
.ds-page-sidebar-content {
  padding: var(--ds-spacing-l);
}
@media (max-width: 1024px) {
  .ds-page-with-sidebar {
    grid-template-columns: 1fr;
  }

  .ds-page-sidebar {
    display: none;
  }
}
/* DS: sections.css - Section layout components */
/* layer: layout */
/* === SECTION LAYOUT SYSTEM === */
/* Base section component */
.ds-section {
  margin-bottom: var(--ds-spacing-xl);
}
.ds-section:last-child {
  margin-bottom: 0;
}
/* Section variants */
.ds-section-compact {
  margin-bottom: var(--ds-spacing-l);
}
.ds-section-spacious {
  margin-bottom: var(--ds-spacing-2xl);
}
.ds-section-no-margin {
  margin-bottom: 0;
}
/* Section containers */
.ds-section-container {
  padding: var(--ds-spacing-xl);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-l);
}
.ds-section-container-elevated {
  box-shadow: var(--ds-shadow-sm);
}
.ds-section-container-filled {
  background-color: var(--ds-surface-secondary);
  border-color: var(--ds-border-secondary);
}
/* Section header */
.ds-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ds-spacing-l);
  padding-bottom: var(--ds-spacing-m);
  border-bottom: 1px solid var(--ds-border-tertiary);
}
.ds-section-title {
  font-size: var(--ds-typography-desktop-h2-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0;
  line-height: var(--ds-typography-desktop-h2-line-height);
}
.ds-section-subtitle {
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-secondary);
  margin: var(--ds-spacing-xs) 0 0 0;
  line-height: var(--ds-typography-desktop-body-line-height);
}
.ds-section-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  flex-shrink: 0;
}
/* Section content */
.ds-section-content {
  color: var(--ds-text-primary);
}
.ds-section-content p {
  margin-bottom: var(--ds-spacing-m);
}
.ds-section-content p:last-child {
  margin-bottom: 0;
}
/* Section footer */
.ds-section-footer {
  margin-top: var(--ds-spacing-l);
  padding-top: var(--ds-spacing-m);
  border-top: 1px solid var(--ds-border-tertiary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-spacing-m);
}
.ds-section-footer-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  flex-wrap: wrap;
}
/* === SECTION LAYOUT VARIANTS === */
/* Card-like section */
.ds-section-card {
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-l);
  box-shadow: var(--ds-shadow-sm);
  overflow: hidden;
}
.ds-section-card .ds-section-container {
  padding: 0;
  border: none;
  background: none;
}
.ds-section-card .ds-section-header {
  padding: var(--ds-spacing-l);
  background-color: var(--ds-surface-secondary);
  border-bottom: 1px solid var(--ds-border-tertiary);
  margin-bottom: 0;
}
.ds-section-card .ds-section-content {
  padding: var(--ds-spacing-l);
}
.ds-section-card .ds-section-footer {
  padding: var(--ds-spacing-l);
  background-color: var(--ds-surface-secondary);
  border-top: 1px solid var(--ds-border-tertiary);
  margin-top: 0;
}
/* Borderless section */
.ds-section-borderless {
  border: none;
  background: none;
}
.ds-section-borderless .ds-section-container {
  border: none;
  background: none;
  padding: 0;
}
/* Full-width section */
.ds-section-full-width {
  margin-left: calc(var(--ds-spacing-xl) * -1);
  margin-right: calc(var(--ds-spacing-xl) * -1);
  width: calc(100% + var(--ds-spacing-xl) * 2);
}
.ds-section-full-width .ds-section-container {
  border-radius: 0;
  border-left: none;
  border-right: none;
}
/* Highlighted section */
.ds-section-highlighted {
  background: linear-gradient(135deg, var(--ds-surface-secondary) 0%, var(--ds-surface-primary) 100%);
  border: 2px solid var(--ds-border-focus);
}
.ds-section-highlighted .ds-section-title {
  color: var(--ds-interactive-primary);
}
/* Collapsible section */
.ds-section-collapsible {
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-l);
  overflow: hidden;
}
.ds-section-collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ds-spacing-l);
  background-color: var(--ds-surface-secondary);
  border: none;
  cursor: pointer;
  transition: background-color var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-section-collapsible-header:hover {
  background-color: var(--ds-surface-tertiary);
}
.ds-section-collapsible-title {
  font-size: var(--ds-typography-desktop-h3-font-size);
  font-weight: 500;
  color: var(--ds-text-primary);
  margin: 0;
}
.ds-section-collapsible-icon {
  color: var(--ds-text-secondary);
  transition: transform var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-section-collapsible[aria-expanded="true"] .ds-section-collapsible-icon {
  transform: rotate(180deg);
}
.ds-section-collapsible-content {
  padding: var(--ds-spacing-l);
  border-top: 1px solid var(--ds-border-tertiary);
}
/* Tabbed section */
.ds-section-tabs {
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-l);
  overflow: hidden;
}
.ds-section-tabs-header {
  background-color: var(--ds-surface-secondary);
  border-bottom: 1px solid var(--ds-border-tertiary);
}
.ds-section-tabs-content {
  padding: var(--ds-spacing-l);
}
/* === SECTION UTILITIES === */
/* Section spacing utilities */
.ds-section-spacing-xs { margin-bottom: var(--ds-spacing-s); }
.ds-section-spacing-sm { margin-bottom: var(--ds-spacing-m); }
.ds-section-spacing-md { margin-bottom: var(--ds-spacing-l); }
.ds-section-spacing-lg { margin-bottom: var(--ds-spacing-xl); }
.ds-section-spacing-xl { margin-bottom: var(--ds-spacing-2xl); }
.ds-section-spacing-none { margin-bottom: 0; }
/* Section alignment utilities */
.ds-section-left { text-align: left; }
.ds-section-center { text-align: center; }
.ds-section-right { text-align: right; }
/* Section width utilities */
.ds-section-width-auto { width: auto; }
.ds-section-width-full { width: 100%; }
.ds-section-width-screen { width: 100vw; }
/* === RESPONSIVE SECTIONS === */
@media (max-width: 768px) {
  .ds-section {
    margin-bottom: var(--ds-spacing-l);
  }

  .ds-section-compact {
    margin-bottom: var(--ds-spacing-m);
  }

  .ds-section-spacious {
    margin-bottom: var(--ds-spacing-xl);
  }

  .ds-section-container {
    padding: var(--ds-spacing-m);
  }

  .ds-section-card .ds-section-header,
  .ds-section-card .ds-section-content,
  .ds-section-card .ds-section-footer {
    padding-left: var(--ds-spacing-m);
    padding-right: var(--ds-spacing-m);
  }

  .ds-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-spacing-s);
  }

  .ds-section-actions {
    align-self: stretch;
    justify-content: flex-end;
  }

  .ds-section-footer {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ds-spacing-s);
  }

  .ds-section-footer-actions {
    justify-content: center;
  }

  .ds-section-full-width {
    margin-left: calc(var(--ds-spacing-m) * -1);
    margin-right: calc(var(--ds-spacing-m) * -1);
    width: calc(100% + var(--ds-spacing-m) * 2);
  }

  .ds-section-collapsible-header,
  .ds-section-collapsible-content {
    padding-left: var(--ds-spacing-m);
    padding-right: var(--ds-spacing-m);
  }

  .ds-section-tabs-content {
    padding: var(--ds-spacing-m);
  }
}
@media (max-width: 480px) {
  .ds-section-container {
    padding: var(--ds-spacing-s);
  }

  .ds-section-card .ds-section-header,
  .ds-section-card .ds-section-content,
  .ds-section-card .ds-section-footer {
    padding: var(--ds-spacing-s);
  }

  .ds-section-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ds-spacing-xs);
  }

  .ds-section-actions .ds-btn {
    width: 100%;
    justify-content: center;
  }

  .ds-section-footer-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ds-spacing-xs);
  }

  .ds-section-footer-actions .ds-btn {
    width: 100%;
    justify-content: center;
  }

  .ds-section-full-width {
    margin-left: calc(var(--ds-spacing-s) * -1);
    margin-right: calc(var(--ds-spacing-s) * -1);
    width: calc(100% + var(--ds-spacing-s) * 2);
  }
}
/* === SECTION THEMING === */
/* Section with background variants */
.ds-section-bg-primary { background-color: var(--ds-surface-primary); }
.ds-section-bg-secondary { background-color: var(--ds-surface-secondary); }
.ds-section-bg-tertiary { background-color: var(--ds-surface-tertiary); }
.ds-section-bg-accent { background-color: var(--ds-interactive-primary-bg); }
/* Section border variants */
.ds-section-border-none { border: none; }
.ds-section-border-thin { border: 1px solid var(--ds-border-primary); }
.ds-section-border-thick { border: 2px solid var(--ds-border-primary); }
.ds-section-border-accent { border: 2px solid var(--ds-border-focus); }
/* Section shadow variants */
.ds-section-shadow-none { box-shadow: none; }
.ds-section-shadow-sm { box-shadow: var(--ds-shadow-sm); }
.ds-section-shadow-md { box-shadow: var(--ds-shadow-md); }
.ds-section-shadow-lg { box-shadow: var(--ds-shadow-lg); }
/* === SPECIALIZED SECTIONS === */
/* Stats section */
.ds-section-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--ds-spacing-m);
}
.ds-section-stats-item {
  text-align: center;
  padding: var(--ds-spacing-l);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
}
.ds-section-stats-value {
  font-size: var(--ds-typography-desktop-h1-font-size);
  font-weight: 700;
  color: var(--ds-text-primary);
  line-height: 1;
  margin-bottom: var(--ds-spacing-xs);
}
.ds-section-stats-label {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* Media section */
.ds-section-media {
  position: relative;
  overflow: hidden;
}
.ds-section-media-content {
  position: relative;
  z-index: 1;
}
.ds-section-media-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%);
  z-index: 2;
}
/* Testimonial section */
.ds-section-testimonial {
  text-align: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.ds-section-testimonial-quote {
  font-size: var(--ds-typography-desktop-h2-font-size);
  font-style: italic;
  color: var(--ds-text-primary);
  margin-bottom: var(--ds-spacing-l);
  position: relative;
}
.ds-section-testimonial-quote::before,
.ds-section-testimonial-quote::after {
  content: '"';
  font-size: 3rem;
  color: var(--ds-text-disabled);
  position: absolute;
  top: -0.5rem;
}
.ds-section-testimonial-quote::before {
  left: -1rem;
}
.ds-section-testimonial-quote::after {
  right: -1rem;
}
.ds-section-testimonial-author {
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 500;
  color: var(--ds-text-secondary);
}
.ds-section-testimonial-role {
  font-size: var(--ds-typography-desktop-xs-font-size);
  color: var(--ds-text-tertiary);
  margin-top: var(--ds-spacing-xs);
}
/* DS: sidebar-layout.css - Sidebar layout system */
/* layer: layout */
/* === SIDEBAR LAYOUT SYSTEM === */
/* Sidebar container */
.ds-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--ds-sidebar-width, 240px);
  background-color: var(--ds-surface-primary);
  border-right: 1px solid var(--ds-border-primary);
  z-index: var(--ds-z-index-sidebar);
  display: flex;
  flex-direction: column;
  transition: transform var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-sidebar-collapsed {
  width: var(--ds-sidebar-width-collapsed, 64px);
}
/* Sidebar overlay for mobile */
.ds-sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: calc(var(--ds-z-index-sidebar) - 1);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ds-motion-duration-fast) var(--ds-motion-easing-standard),
              visibility var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-sidebar-overlay.active {
  opacity: 1;
  visibility: visible;
}
/* Sidebar header */
.ds-sidebar-header {
  padding: var(--ds-spacing-l);
  border-bottom: 1px solid var(--ds-border-tertiary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--ds-header-height, 64px);
}
.ds-sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  font-size: var(--ds-typography-desktop-h4-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  text-decoration: none;
}
.ds-sidebar-brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--ds-border-radius-s);
  background-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
  font-weight: 700;
  font-size: var(--ds-typography-desktop-h4-font-size);
}
.ds-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--ds-text-secondary);
  cursor: pointer;
  border-radius: var(--ds-border-radius-s);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-sidebar-toggle:hover {
  color: var(--ds-text-primary);
  background-color: var(--ds-surface-secondary);
}
.ds-sidebar-toggle:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
/* Sidebar navigation */
.ds-sidebar-nav {
  flex: 1;
  padding: var(--ds-spacing-m) 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.ds-sidebar-nav-section {
  margin-bottom: var(--ds-spacing-l);
}
.ds-sidebar-nav-section:last-child {
  margin-bottom: 0;
}
.ds-sidebar-nav-title {
  padding: 0 var(--ds-spacing-l);
  margin-bottom: var(--ds-spacing-s);
  font-size: var(--ds-typography-desktop-xs-font-size);
  font-weight: 600;
  color: var(--ds-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ds-sidebar-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ds-sidebar-nav-item {
  margin-bottom: var(--ds-spacing-xs);
}
.ds-sidebar-nav-link {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  padding: var(--ds-spacing-s) var(--ds-spacing-l);
  color: var(--ds-text-secondary);
  text-decoration: none;
  border-radius: 0;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  position: relative;
}
.ds-sidebar-nav-link:hover {
  color: var(--ds-text-primary);
  background-color: var(--ds-surface-secondary);
}
.ds-sidebar-nav-link.active {
  color: var(--ds-interactive-primary);
  background-color: var(--ds-interactive-primary-bg);
}
.ds-sidebar-nav-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--ds-interactive-primary);
  border-radius: 0 var(--ds-border-radius-s) var(--ds-border-radius-s) 0;
}
.ds-sidebar-nav-link:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: -2px;
}
.ds-sidebar-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: inherit;
}
.ds-sidebar-nav-text {
  flex: 1;
  font-size: var(--ds-typography-desktop-body-font-size);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-sidebar-nav-badge {
  padding: var(--ds-spacing-3xs) var(--ds-spacing-2xs);
  font-size: var(--ds-typography-desktop-xs-font-size);
  font-weight: 500;
  background-color: var(--ds-surface-tertiary);
  color: var(--ds-text-secondary);
  border-radius: var(--ds-border-radius-full);
  line-height: 1;
}
/* Sidebar footer */
.ds-sidebar-footer {
  padding: var(--ds-spacing-l);
  border-top: 1px solid var(--ds-border-tertiary);
  margin-top: auto;
}
.ds-sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  padding: var(--ds-spacing-s);
  border-radius: var(--ds-border-radius-s);
  transition: background-color var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-sidebar-user:hover {
  background-color: var(--ds-surface-secondary);
}
.ds-sidebar-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--ds-border-radius-full);
  background-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--ds-typography-desktop-small-font-size);
  flex-shrink: 0;
}
.ds-sidebar-user-info {
  flex: 1;
  min-width: 0;
}
.ds-sidebar-user-name {
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 500;
  color: var(--ds-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-sidebar-user-role {
  font-size: var(--ds-typography-desktop-xs-font-size);
  color: var(--ds-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* === SIDEBAR VARIANTS === */
/* Compact sidebar */
.ds-sidebar-compact {
  width: var(--ds-sidebar-width-compact, 200px);
}
.ds-sidebar-compact .ds-sidebar-nav-link {
  padding: var(--ds-spacing-xs) var(--ds-spacing-m);
}
.ds-sidebar-compact .ds-sidebar-nav-text {
  font-size: var(--ds-typography-desktop-small-font-size);
}
/* Mini sidebar */
.ds-sidebar-mini {
  width: var(--ds-sidebar-width-mini, 64px);
}
.ds-sidebar-mini .ds-sidebar-header {
  padding: var(--ds-spacing-s);
  justify-content: center;
}
.ds-sidebar-mini .ds-sidebar-brand-text,
.ds-sidebar-mini .ds-sidebar-nav-text,
.ds-sidebar-mini .ds-sidebar-nav-badge,
.ds-sidebar-mini .ds-sidebar-user-info {
  display: none;
}
.ds-sidebar-mini .ds-sidebar-nav-link {
  justify-content: center;
  padding: var(--ds-spacing-s);
}
.ds-sidebar-mini .ds-sidebar-nav-link.active::before {
  display: none;
}
.ds-sidebar-mini .ds-sidebar-nav-link.active {
  background-color: var(--ds-surface-secondary);
}
.ds-sidebar-mini .ds-sidebar-nav-link.active .ds-sidebar-nav-icon {
  color: var(--ds-interactive-primary);
}
.ds-sidebar-mini .ds-sidebar-footer {
  padding: var(--ds-spacing-s);
  justify-content: center;
}
.ds-sidebar-mini .ds-sidebar-user {
  justify-content: center;
  padding: var(--ds-spacing-xs);
}
.ds-sidebar-mini .ds-sidebar-user-avatar {
  width: 24px;
  height: 24px;
}
/* Floating sidebar */
.ds-sidebar-floating {
  position: absolute;
  box-shadow: var(--ds-shadow-xl);
  border-radius: var(--ds-border-radius-l);
  margin: var(--ds-spacing-l);
  height: calc(100vh - var(--ds-spacing-l) * 2);
}
/* Overlay sidebar for mobile */
.ds-sidebar-overlay-mode {
  transform: translateX(-100%);
}
.ds-sidebar-overlay-mode.active {
  transform: translateX(0);
}
/* === SIDEBAR RESPONSIVE BEHAVIOR === */
@media (max-width: 1024px) {
  .ds-sidebar {
    transform: translateX(-100%);
  }

  .ds-sidebar.active {
    transform: translateX(0);
  }

  .ds-sidebar-overlay-mode {
    position: fixed;
    z-index: var(--ds-z-index-modal);
  }
}
@media (max-width: 768px) {
  .ds-sidebar {
    width: var(--ds-sidebar-width-mobile, 280px);
  }

  .ds-sidebar-mini {
    width: var(--ds-sidebar-width-mobile-mini, 56px);
  }

  .ds-sidebar-header {
    padding: var(--ds-spacing-m);
  }

  .ds-sidebar-nav {
    padding: var(--ds-spacing-s) 0;
  }

  .ds-sidebar-nav-link {
    padding: var(--ds-spacing-m) var(--ds-spacing-l);
  }

  .ds-sidebar-footer {
    padding: var(--ds-spacing-m);
  }
}
@media (max-width: 480px) {
  .ds-sidebar {
    width: 100vw;
  }

  .ds-sidebar-header {
    padding: var(--ds-spacing-s);
  }

  .ds-sidebar-nav-link {
    padding: var(--ds-spacing-s) var(--ds-spacing-m);
  }

  .ds-sidebar-footer {
    padding: var(--ds-spacing-s);
  }
}
/* === SIDEBAR ANIMATIONS === */
@keyframes sidebar-slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes sidebar-slide-out {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.ds-sidebar-enter {
  animation: sidebar-slide-in var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-sidebar-exit {
  animation: sidebar-slide-out var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
/* === SIDEBAR UTILITIES === */
/* Sidebar content areas */
.ds-sidebar-content {
  padding: var(--ds-spacing-l);
  overflow-y: auto;
  flex: 1;
}
.ds-sidebar-content-header {
  margin-bottom: var(--ds-spacing-l);
  padding-bottom: var(--ds-spacing-m);
  border-bottom: 1px solid var(--ds-border-tertiary);
}
.ds-sidebar-content-title {
  font-size: var(--ds-typography-desktop-h3-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-spacing-xs) 0;
}
.ds-sidebar-content-subtitle {
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-secondary);
  margin: 0;
}
/* Sidebar scrollbars */
.ds-sidebar-nav::-webkit-scrollbar {
  width: 4px;
}
.ds-sidebar-nav::-webkit-scrollbar-track {
  background: var(--ds-surface-primary);
}
.ds-sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--ds-border-primary);
  border-radius: var(--ds-border-radius-full);
}
.ds-sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: var(--ds-border-secondary);
}
/* === SIDEBAR ACCESSIBILITY === */
.ds-sidebar[aria-hidden="true"] {
  display: none;
}
.ds-sidebar-nav-link[aria-current="page"] {
  color: var(--ds-interactive-primary);
  background-color: var(--ds-interactive-primary-bg);
}
.ds-sidebar-nav-link[aria-current="page"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--ds-interactive-primary);
  border-radius: 0 var(--ds-border-radius-s) var(--ds-border-radius-s) 0;
}
/* Skip link for sidebar navigation */
.ds-skip-sidebar {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--ds-surface-primary);
  color: var(--ds-text-primary);
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  text-decoration: none;
  border-radius: var(--ds-border-radius-s);
  z-index: var(--ds-z-index-tooltip);
  transition: transform var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-skip-sidebar:focus {
  transform: translateY(40px);
}
/* === SIDEBAR THEMING === */
/* Dark sidebar variant */
.ds-sidebar-dark {
  background-color: var(--ds-surface-inverse);
  border-right-color: var(--ds-border-tertiary);
}
.ds-sidebar-dark .ds-sidebar-nav-link {
  color: var(--ds-text-tertiary);
}
.ds-sidebar-dark .ds-sidebar-nav-link:hover {
  color: var(--ds-text-primary);
  background-color: rgba(255, 255, 255, 0.1);
}
.ds-sidebar-dark .ds-sidebar-nav-link.active {
  color: var(--ds-interactive-primary);
  background-color: rgba(var(--ds-interactive-primary-rgb, 59, 130, 246), 0.1);
}
.ds-sidebar-dark .ds-sidebar-nav-title {
  color: var(--ds-text-disabled);
}
.ds-sidebar-dark .ds-sidebar-user-name,
.ds-sidebar-dark .ds-sidebar-user-role {
  color: var(--ds-text-secondary);
}
/* Colored sidebar accent */
.ds-sidebar-accent {
  border-right: 4px solid var(--ds-interactive-primary);
}
.ds-sidebar-accent .ds-sidebar-nav-link.active {
  border-right: 4px solid var(--ds-interactive-primary);
}
.ds-sidebar-accent .ds-sidebar-nav-link.active::before {
  display: none;
}
/* DS: layout/templates/auth.css - Authentication layout template */
/* layer: layout */
.ds-layout-auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--ds-surface-primary) 0%, var(--ds-surface-secondary) 100%);
  padding: var(--ds-spacing-m);
}
.ds-layout-auth-container {
  width: 100%;
  max-width: 600px;
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-xl);
  box-shadow: var(--ds-shadow-xl);
  padding: var(--ds-spacing-3xl);
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-xl);
}
/* Modifier: wider container (per-page opt-in) */
.ds-layout-auth-container.ds-auth-lg { max-width: 640px; }
.ds-layout-auth-container.ds-auth-xl { max-width: 720px; }
.ds-layout-auth-header {
  text-align: center;
}
.ds-layout-auth-title {
  font-size: var(--ds-typography-desktop-h2-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-spacing-xs) 0;
}
.ds-layout-auth-subtitle {
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-secondary);
  margin: 0;
  line-height: 1.5;
}
.ds-layout-auth-logo {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--ds-spacing-l) auto;
  color: var(--ds-interactive-primary);
}
.ds-layout-auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-m);
}
.ds-layout-auth-actions {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-s);
  margin-top: var(--ds-spacing-l);
}
.ds-layout-auth-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--ds-typography-desktop-small-font-size);
  margin-top: var(--ds-spacing-m);
}
.ds-layout-auth-link {
  color: var(--ds-interactive-primary);
  text-decoration: none;
  transition: color var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-layout-auth-link:hover {
  color: var(--ds-interactive-primary-hover);
  text-decoration: underline;
}
.ds-layout-auth-footer {
  text-align: center;
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  margin-top: var(--ds-spacing-xl);
  padding-top: var(--ds-spacing-l);
  border-top: 1px solid var(--ds-border-primary);
}
.ds-layout-auth-footer-link {
  color: var(--ds-interactive-primary);
  text-decoration: none;
  font-weight: 500;
}
/* Auth layout variants */
.ds-layout-auth-split {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: linear-gradient(135deg, var(--ds-surface-primary) 0%, var(--ds-surface-secondary) 100%);
}
.ds-layout-auth-split .ds-layout-auth-container {
  max-width: none;
  width: 100%;
  height: 100vh;
  border-radius: 0;
  box-shadow: none;
  padding: var(--ds-spacing-3xl);
  justify-content: center;
}
.ds-layout-auth-split-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.ds-layout-auth-split-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.1));
}
.ds-layout-auth-split-content {
  position: relative;
  z-index: 1;
  color: white;
  text-align: center;
  padding: var(--ds-spacing-3xl);
}
.ds-layout-auth-split-title {
  font-size: var(--ds-typography-desktop-h1-font-size);
  font-weight: 700;
  margin: 0 0 var(--ds-spacing-l) 0;
}
.ds-layout-auth-split-text {
  font-size: var(--ds-typography-desktop-h4-font-size);
  line-height: 1.6;
  margin: 0;
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ds-layout-auth-split {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }

  .ds-layout-auth-split-image {
    min-height: 300px;
    order: -1;
  }

  .ds-layout-auth-container {
    height: auto;
    padding: var(--ds-spacing-xl);
  }

  .ds-layout-auth-title {
    font-size: var(--ds-typography-desktop-h3-font-size);
  }
}
@media (max-width: 480px) {
  .ds-layout-auth-container {
    padding: var(--ds-spacing-l);
    margin: var(--ds-spacing-m);
  }

  .ds-layout-auth-title {
    font-size: var(--ds-typography-desktop-h4-font-size);
  }

  .ds-layout-auth-actions {
    gap: var(--ds-spacing-xs);
  }
}
/* DS: layout/templates/form-page.css - Form page layout template */
/* layer: layout */
.ds-layout-form-page {
  min-height: 100vh;
  background-color: var(--ds-surface-primary);
  display: flex;
  flex-direction: column;
}
.ds-layout-form-page-header {
  background-color: var(--ds-surface-secondary);
  border-bottom: 1px solid var(--ds-border-primary);
  padding: var(--ds-spacing-xl) 0;
}
.ds-layout-form-page-header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--ds-spacing-xl);
}
.ds-layout-form-page-title {
  font-size: var(--ds-typography-desktop-h1-font-size);
  font-weight: 700;
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-spacing-xs) 0;
}
.ds-layout-form-page-subtitle {
  font-size: var(--ds-typography-desktop-h4-font-size);
  color: var(--ds-text-secondary);
  margin: 0;
  line-height: 1.5;
}
.ds-layout-form-page-breadcrumb {
  margin-bottom: var(--ds-spacing-l);
}
.ds-layout-form-page-body {
  flex: 1;
  padding: var(--ds-spacing-3xl) 0;
}
.ds-layout-form-page-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--ds-spacing-xl);
}
.ds-layout-form-page-form {
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-l);
  padding: var(--ds-spacing-3xl);
  box-shadow: var(--ds-shadow-sm);
}
.ds-layout-form-page-form-header {
  margin-bottom: var(--ds-spacing-2xl);
  text-align: center;
}
.ds-layout-form-page-form-title {
  font-size: var(--ds-typography-desktop-h2-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-spacing-s) 0;
}
.ds-layout-form-page-form-description {
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-secondary);
  margin: 0;
  line-height: 1.6;
}
.ds-layout-form-page-form-content {
  display: grid;
  gap: var(--ds-spacing-xl);
}
.ds-layout-form-page-form-section {
  border-bottom: 1px solid var(--ds-border-secondary);
  padding-bottom: var(--ds-spacing-xl);
}
.ds-layout-form-page-form-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.ds-layout-form-page-section-title {
  font-size: var(--ds-typography-desktop-h4-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-spacing-m) 0;
}
.ds-layout-form-page-section-description {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  margin: 0 0 var(--ds-spacing-l) 0;
  line-height: 1.5;
}
.ds-layout-form-page-form-actions {
  margin-top: var(--ds-spacing-2xl);
  padding-top: var(--ds-spacing-xl);
  border-top: 1px solid var(--ds-border-secondary);
  display: flex;
  justify-content: flex-end;
  gap: var(--ds-spacing-m);
}
.ds-layout-form-page-sidebar {
  display: none;
}
/* Form page with sidebar */
.ds-layout-form-page-with-sidebar {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--ds-spacing-3xl);
}
.ds-layout-form-page-with-sidebar .ds-layout-form-page-container {
  max-width: none;
  padding: 0;
}
.ds-layout-form-page-with-sidebar .ds-layout-form-page-sidebar {
  display: block;
  background-color: var(--ds-surface-secondary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-l);
  padding: var(--ds-spacing-xl);
  height: -moz-fit-content;
  height: fit-content;
  position: sticky;
  top: var(--ds-spacing-xl);
}
.ds-layout-form-page-sidebar-title {
  font-size: var(--ds-typography-desktop-h4-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-spacing-l) 0;
}
.ds-layout-form-page-sidebar-content {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-m);
}
.ds-layout-form-page-sidebar-item {
  padding: var(--ds-spacing-s);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-secondary);
  border-radius: var(--ds-border-radius-m);
}
.ds-layout-form-page-sidebar-item-title {
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-spacing-2xs) 0;
}
.ds-layout-form-page-sidebar-item-text {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  color: var(--ds-text-secondary);
  margin: 0;
  line-height: 1.4;
}
/* Form page progress */
.ds-layout-form-page-progress {
  margin-bottom: var(--ds-spacing-2xl);
}
.ds-layout-form-page-progress-bar {
  width: 100%;
  height: 4px;
  background-color: var(--ds-surface-tertiary);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: var(--ds-spacing-s);
}
.ds-layout-form-page-progress-fill {
  height: 100%;
  background-color: var(--ds-interactive-primary);
  border-radius: inherit;
  transition: width var(--ds-motion-duration-slow) var(--ds-motion-easing-standard);
}
.ds-layout-form-page-progress-text {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  text-align: center;
}
/* Responsive adjustments */
@media (max-width: 1024px) {
  .ds-layout-form-page-with-sidebar {
    grid-template-columns: 1fr;
    gap: var(--ds-spacing-xl);
  }

  .ds-layout-form-page-sidebar {
    position: static;
    order: 2;
  }
}
@media (max-width: 768px) {
  .ds-layout-form-page-header-content,
  .ds-layout-form-page-container {
    padding-left: var(--ds-spacing-m);
    padding-right: var(--ds-spacing-m);
  }

  .ds-layout-form-page-form {
    padding: var(--ds-spacing-xl);
  }

  .ds-layout-form-page-form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .ds-layout-form-page-sidebar {
    padding: var(--ds-spacing-m);
  }
}
@media (max-width: 480px) {
  .ds-layout-form-page-header-content,
  .ds-layout-form-page-container {
    padding-left: var(--ds-spacing-s);
    padding-right: var(--ds-spacing-s);
  }

  .ds-layout-form-page-form {
    padding: var(--ds-spacing-m);
    border-radius: var(--ds-border-radius-m);
  }

  .ds-layout-form-page-title {
    font-size: var(--ds-typography-desktop-h2-font-size);
  }

  .ds-layout-form-page-form-title {
    font-size: var(--ds-typography-desktop-h3-font-size);
  }
}
/* DS: layout/templates/modal-heavy.css - Modal heavy layout template */
/* layer: layout */
.ds-layout-modal-heavy {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--ds-z-index-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ds-spacing-xl);
  background-color: var(--ds-surface-overlay);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.ds-layout-modal-heavy-container {
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-xl);
  box-shadow: var(--ds-shadow-2xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ds-layout-modal-heavy-header {
  padding: var(--ds-spacing-xl) var(--ds-spacing-2xl);
  border-bottom: 1px solid var(--ds-border-primary);
  background-color: var(--ds-surface-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.ds-layout-modal-heavy-title {
  font-size: var(--ds-typography-desktop-h2-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0;
}
.ds-layout-modal-heavy-subtitle {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  margin: var(--ds-spacing-2xs) 0 0 0;
}
.ds-layout-modal-heavy-close {
  width: 2rem;
  height: 2rem;
  background: none;
  border: none;
  border-radius: var(--ds-border-radius-2xs);
  cursor: pointer;
  color: var(--ds-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  flex-shrink: 0;
}
.ds-layout-modal-heavy-close:hover {
  background-color: var(--ds-surface-tertiary);
  color: var(--ds-text-primary);
}
.ds-layout-modal-heavy-close:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-layout-modal-heavy-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.ds-layout-modal-heavy-sidebar {
  width: 280px;
  border-right: 1px solid var(--ds-border-primary);
  background-color: var(--ds-surface-secondary);
  padding: var(--ds-spacing-xl);
  overflow-y: auto;
  flex-shrink: 0;
}
.ds-layout-modal-heavy-sidebar-title {
  font-size: var(--ds-typography-desktop-h4-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-spacing-l) 0;
}
.ds-layout-modal-heavy-sidebar-content {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-m);
}
.ds-layout-modal-heavy-sidebar-item {
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  border: 1px solid var(--ds-border-secondary);
  border-radius: var(--ds-border-radius-m);
  background-color: var(--ds-surface-primary);
  cursor: pointer;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-layout-modal-heavy-sidebar-item:hover {
  border-color: var(--ds-border-primary);
  background-color: var(--ds-surface-tertiary);
}
.ds-layout-modal-heavy-sidebar-item-active {
  border-color: var(--ds-interactive-primary);
  background-color: var(--ds-interactive-primary-bg);
  color: var(--ds-interactive-primary);
  font-weight: 500;
}
.ds-layout-modal-heavy-content {
  flex: 1;
  padding: var(--ds-spacing-xl);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-xl);
}
.ds-layout-modal-heavy-content-section {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-m);
}
.ds-layout-modal-heavy-content-title {
  font-size: var(--ds-typography-desktop-h3-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0;
}
.ds-layout-modal-heavy-content-text {
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-secondary);
  margin: 0;
  line-height: 1.6;
}
.ds-layout-modal-heavy-footer {
  padding: var(--ds-spacing-xl) var(--ds-spacing-2xl);
  border-top: 1px solid var(--ds-border-primary);
  background-color: var(--ds-surface-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.ds-layout-modal-heavy-footer-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
}
.ds-layout-modal-heavy-footer-info {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
}
/* Modal heavy variants */
.ds-layout-modal-heavy-full {
  padding: 0;
}
.ds-layout-modal-heavy-full .ds-layout-modal-heavy-container {
  max-width: none;
  width: 100vw;
  height: 100vh;
  border-radius: 0;
}
.ds-layout-modal-heavy-compact .ds-layout-modal-heavy-sidebar {
  width: 220px;
  padding: var(--ds-spacing-m);
}
.ds-layout-modal-heavy-compact .ds-layout-modal-heavy-content {
  padding: var(--ds-spacing-m);
}
.ds-layout-modal-heavy-compact .ds-layout-modal-heavy-header,
.ds-layout-modal-heavy-compact .ds-layout-modal-heavy-footer {
  padding-left: var(--ds-spacing-m);
  padding-right: var(--ds-spacing-m);
}
/* Modal heavy animations */
.ds-layout-modal-heavy-entering {
  animation: modalHeavyFadeIn 0.3s ease-out;
}
@keyframes modalHeavyFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.ds-layout-modal-heavy-exiting {
  animation: modalHeavyFadeOut 0.2s ease-in;
}
@keyframes modalHeavyFadeOut {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
}
/* Responsive adjustments */
@media (max-width: 1024px) {
  .ds-layout-modal-heavy-sidebar {
    width: 240px;
  }
}
@media (max-width: 768px) {
  .ds-layout-modal-heavy {
    padding: var(--ds-spacing-m);
  }

  .ds-layout-modal-heavy-body {
    flex-direction: column;
  }

  .ds-layout-modal-heavy-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--ds-border-primary);
    max-height: 200px;
  }

  .ds-layout-modal-heavy-content {
    padding: var(--ds-spacing-m);
  }

  .ds-layout-modal-heavy-header,
  .ds-layout-modal-heavy-footer {
    padding: var(--ds-spacing-m) var(--ds-spacing-l);
  }

  .ds-layout-modal-heavy-title {
    font-size: var(--ds-typography-desktop-h3-font-size);
  }
}
@media (max-width: 480px) {
  .ds-layout-modal-heavy {
    padding: var(--ds-spacing-s);
  }

  .ds-layout-modal-heavy-container {
    max-height: 95vh;
  }

  .ds-layout-modal-heavy-header,
  .ds-layout-modal-heavy-footer {
    padding: var(--ds-spacing-s) var(--ds-spacing-m);
  }

  .ds-layout-modal-heavy-body {
    max-height: 60vh;
  }

  .ds-layout-modal-heavy-sidebar {
    padding: var(--ds-spacing-s);
    max-height: 150px;
  }

  .ds-layout-modal-heavy-content {
    padding: var(--ds-spacing-s);
  }

  .ds-layout-modal-heavy-title {
    font-size: var(--ds-typography-desktop-h4-font-size);
  }

  .ds-layout-modal-heavy-footer {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ds-spacing-s);
  }

  .ds-layout-modal-heavy-footer-actions {
    justify-content: space-between;
  }
}
/* DS: layout/templates/table-page.css - Table page layout template */
/* layer: layout */
.ds-layout-table-page {
  min-height: 100vh;
  background-color: var(--ds-surface-primary);
  display: flex;
  flex-direction: column;
}
.ds-layout-table-page-header {
  background-color: var(--ds-surface-secondary);
  border-bottom: 1px solid var(--ds-border-primary);
  padding: var(--ds-spacing-xl) 0;
}
.ds-layout-table-page-header-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--ds-spacing-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-spacing-xl);
}
.ds-layout-table-page-header-main {
  flex: 1;
  min-width: 0;
}
.ds-layout-table-page-title {
  font-size: var(--ds-typography-desktop-h1-font-size);
  font-weight: 700;
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-spacing-xs) 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-layout-table-page-subtitle {
  font-size: var(--ds-typography-desktop-h4-font-size);
  color: var(--ds-text-secondary);
  margin: 0;
  line-height: 1.5;
}
.ds-layout-table-page-header-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  flex-shrink: 0;
}
.ds-layout-table-page-body {
  flex: 1;
  padding: var(--ds-spacing-xl) 0;
}
.ds-layout-table-page-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--ds-spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-xl);
}
.ds-layout-table-page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-spacing-m);
  flex-wrap: wrap;
}
.ds-layout-table-page-filters {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  flex-wrap: wrap;
  flex: 1;
}
.ds-layout-table-page-search {
  min-width: 250px;
}
.ds-layout-table-page-bulk-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
}
.ds-layout-table-page-table-container {
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-l);
  overflow: hidden;
  box-shadow: var(--ds-shadow-sm);
}
.ds-layout-table-page-table {
  width: 100%;
}
.ds-layout-table-page-pagination {
  margin-top: var(--ds-spacing-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-spacing-m);
}
.ds-layout-table-page-pagination-info {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
}
.ds-layout-table-page-pagination-controls {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
}
.ds-layout-table-page-empty {
  text-align: center;
  padding: var(--ds-spacing-3xl) var(--ds-spacing-xl);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-l);
}
.ds-layout-table-page-empty-icon {
  width: 4rem;
  height: 4rem;
  color: var(--ds-text-tertiary);
  margin-bottom: var(--ds-spacing-l);
}
.ds-layout-table-page-empty-title {
  font-size: var(--ds-typography-desktop-h3-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-spacing-s) 0;
}
.ds-layout-table-page-empty-text {
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-secondary);
  margin: 0 0 var(--ds-spacing-xl) 0;
  line-height: 1.5;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.ds-layout-table-page-empty-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-spacing-s);
}
/* Table page with sidebar */
.ds-layout-table-page-with-sidebar {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--ds-spacing-xl);
}
.ds-layout-table-page-with-sidebar .ds-layout-table-page-header-content {
  grid-column: 1 / -1;
}
.ds-layout-table-page-with-sidebar .ds-layout-table-page-container {
  grid-column: 2;
  padding: 0;
}
.ds-layout-table-page-sidebar {
  background-color: var(--ds-surface-secondary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-l);
  padding: var(--ds-spacing-xl);
  height: -moz-fit-content;
  height: fit-content;
  position: sticky;
  top: var(--ds-spacing-xl);
}
.ds-layout-table-page-sidebar-title {
  font-size: var(--ds-typography-desktop-h4-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-spacing-l) 0;
}
.ds-layout-table-page-sidebar-content {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-m);
}
.ds-layout-table-page-sidebar-section {
  padding-bottom: var(--ds-spacing-m);
  border-bottom: 1px solid var(--ds-border-secondary);
}
.ds-layout-table-page-sidebar-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.ds-layout-table-page-sidebar-section-title {
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-spacing-s) 0;
}
/* Table page loading */
.ds-layout-table-page-loading {
  position: relative;
}
.ds-layout-table-page-loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--ds-surface-primary);
  opacity: 0.8;
  z-index: 10;
}
.ds-layout-table-page-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 11;
  width: 2rem;
  height: 2rem;
  color: var(--ds-interactive-primary);
}
/* Responsive adjustments */
@media (max-width: 1200px) {
  .ds-layout-table-page-header-content,
  .ds-layout-table-page-container {
    padding-left: var(--ds-spacing-l);
    padding-right: var(--ds-spacing-l);
  }
}
@media (max-width: 1024px) {
  .ds-layout-table-page-with-sidebar {
    grid-template-columns: 1fr;
    gap: var(--ds-spacing-xl);
  }

  .ds-layout-table-page-sidebar {
    position: static;
    order: 2;
  }
}
@media (max-width: 768px) {
  .ds-layout-table-page-header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-spacing-m);
  }

  .ds-layout-table-page-header-actions {
    width: 100%;
    justify-content: space-between;
  }

  .ds-layout-table-page-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ds-spacing-m);
  }

  .ds-layout-table-page-filters {
    justify-content: space-between;
  }

  .ds-layout-table-page-search {
    min-width: auto;
    width: 100%;
  }

  .ds-layout-table-page-table-container {
    overflow-x: auto;
  }

  .ds-layout-table-page-pagination {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ds-spacing-s);
  }

  .ds-layout-table-page-pagination-controls {
    justify-content: center;
  }

  .ds-layout-table-page-header-content,
  .ds-layout-table-page-container {
    padding-left: var(--ds-spacing-m);
    padding-right: var(--ds-spacing-m);
  }

  .ds-layout-table-page-sidebar {
    padding: var(--ds-spacing-m);
  }
}
@media (max-width: 480px) {
  .ds-layout-table-page-header {
    padding: var(--ds-spacing-m) 0;
  }

  .ds-layout-table-page-body {
    padding: var(--ds-spacing-m) 0;
  }

  .ds-layout-table-page-header-content,
  .ds-layout-table-page-container {
    padding-left: var(--ds-spacing-s);
    padding-right: var(--ds-spacing-s);
  }

  .ds-layout-table-page-title {
    font-size: var(--ds-typography-desktop-h2-font-size);
  }

  .ds-layout-table-page-toolbar {
    gap: var(--ds-spacing-s);
  }

  .ds-layout-table-page-filters {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ds-spacing-s);
  }

  .ds-layout-table-page-empty {
    padding: var(--ds-spacing-xl) var(--ds-spacing-m);
  }

  .ds-layout-table-page-empty-icon {
    width: 3rem;
    height: 3rem;
  }

  .ds-layout-table-page-empty-title {
    font-size: var(--ds-typography-desktop-h4-font-size);
  }
}
/* DS: accordion.css - Accordion component */
/* layer: components */
.ds-accordion {
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  overflow: hidden;
}
.ds-accordion-item {
  border-bottom: 1px solid var(--ds-border-primary);
}
.ds-accordion-item:last-child {
  border-bottom: none;
}
.ds-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ds-spacing-m);
  background-color: var(--ds-surface-primary);
  cursor: pointer;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  font-weight: 500;
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-primary);
  border: none;
  width: 100%;
  text-align: left;
}
.ds-accordion-header:hover {
  background-color: var(--ds-surface-secondary);
}
.ds-accordion-header:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: -2px;
}
.ds-accordion-trigger {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  flex: 1;
}
.ds-accordion-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  transition: transform var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  color: var(--ds-text-secondary);
}
.ds-accordion-item[aria-expanded="true"] .ds-accordion-icon {
  transform: rotate(180deg);
}
.ds-accordion-content {
  overflow: hidden;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-accordion-content[data-state="open"] {
  animation: accordionSlideDown var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-accordion-content[data-state="closed"] {
  animation: accordionSlideUp var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-accordion-panel {
  padding: 0 var(--ds-spacing-xs) var(--ds-spacing-m);
  color: var(--ds-text-secondary);
  font-size: var(--ds-typography-desktop-body-font-size);
  line-height: 1.6;
}
.ds-accordion-panel p:last-child {
  margin-bottom: 0;
}
/* Accordion variants */
.ds-accordion-bordered .ds-accordion-item {
  border-bottom: 1px solid var(--ds-border-primary);
}
.ds-accordion-bordered .ds-accordion-item:last-child {
  border-bottom: none;
}
.ds-accordion-ghost {
  border: none;
  background-color: transparent;
}
.ds-accordion-ghost .ds-accordion-item {
  border-bottom: 1px solid var(--ds-border-primary);
}
.ds-accordion-ghost .ds-accordion-header {
  background-color: transparent;
  border-radius: var(--ds-border-radius-s);
  margin: var(--ds-spacing-2xs);
}
.ds-accordion-ghost .ds-accordion-header:hover {
  background-color: var(--ds-surface-secondary);
}
/* Accordion sizes */
.ds-accordion-sm .ds-accordion-header {
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  font-size: var(--ds-typography-desktop-small-font-size);
}
.ds-accordion-sm .ds-accordion-panel {
  padding: 0 var(--ds-spacing-xs) var(--ds-spacing-s);
  font-size: var(--ds-typography-desktop-small-font-size);
}
.ds-accordion-lg .ds-accordion-header {
  padding: var(--ds-spacing-l) var(--ds-spacing-m);
  font-size: var(--ds-typography-desktop-h4-font-size);
}
.ds-accordion-lg .ds-accordion-panel {
  padding: 0 var(--ds-spacing-m) var(--ds-spacing-l);
  font-size: var(--ds-typography-desktop-body-font-size);
}
/* Accordion states */
.ds-accordion-item:disabled .ds-accordion-header {
  opacity: var(--ds-opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.ds-accordion-item[aria-expanded="true"] .ds-accordion-header {
  background-color: var(--ds-surface-secondary);
  border-bottom: 1px solid var(--ds-border-primary);
}
/* Nested accordions */
.ds-accordion .ds-accordion {
  margin-top: var(--ds-spacing-m);
  border-left: 3px solid var(--ds-border-secondary);
}
/* Multiple selection */
.ds-accordion-multiple .ds-accordion-item[aria-expanded="true"] .ds-accordion-header {
  background-color: var(--ds-surface-secondary);
}
/* Animations */
@keyframes accordionSlideDown {
  from {
    height: 0;
    opacity: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
    opacity: 1;
  }
}
@keyframes accordionSlideUp {
  from {
    height: var(--radix-accordion-content-height);
    opacity: 1;
  }
  to {
    height: 0;
    opacity: 0;
  }
}
/* Responsive adjustments */
@media (max-width: 640px) {
  .ds-accordion-header {
    padding: var(--ds-spacing-s) var(--ds-spacing-xs);
    font-size: var(--ds-typography-mobile-body-font-size);
  }

  .ds-accordion-panel,
  .ds-accordion-sm .ds-accordion-panel {
    padding: 0;
    font-size: var(--ds-typography-mobile-body-font-size);
  }

  .ds-accordion-sm .ds-accordion-header,
  .ds-accordion-lg .ds-accordion-header {
    padding-left: var(--ds-spacing-xs);
    padding-right: var(--ds-spacing-xs);
  }
}
/* DS: alert.css - Alert component */
/* layer: components */
.ds-alert {
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  border: 1px solid var(--ds-border-color-default);
  border-radius: var(--ds-border-radius-s);
  display: flex;
  align-items: flex-start;
  gap: var(--ds-spacing-s);
  font-size: var(--ds-typography-desktop-body-font-size);
  line-height: 1.5;
  position: relative;
}
.ds-alert-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.ds-alert-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-2xs);
}
.ds-alert-title {
  font-weight: 600;
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-primary);
  margin: 0;
}
.ds-alert-description {
  color: var(--ds-text-secondary);
  margin: 0;
  font-size: var(--ds-typography-desktop-small-font-size);
}
.ds-alert-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--ds-spacing-2xs);
  color: var(--ds-text-secondary);
  border-radius: var(--ds-border-radius-2xs);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}
.ds-alert-close:hover {
  background-color: var(--ds-surface-background-secondary);
  color: var(--ds-text-primary);
}
.ds-alert-close:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
/* Alert variants */
.ds-alert-info {
  background-color: var(--ds-alert-info-bg);
  border-color: var(--ds-alert-info-border);
}
.ds-alert-info .ds-alert-icon {
  color: var(--ds-alert-info-icon);
}
.ds-alert-success {
  background-color: var(--ds-alert-success-bg);
  border-color: var(--ds-alert-success-border);
}
.ds-alert-success .ds-alert-icon {
  color: var(--ds-alert-success-icon);
}
.ds-alert-warning {
  background-color: var(--ds-alert-warning-bg);
  border-color: var(--ds-alert-warning-border);
}
.ds-alert-warning .ds-alert-icon {
  color: var(--ds-alert-warning-icon);
}
.ds-alert-error {
  background-color: var(--ds-alert-error-bg);
  border-color: var(--ds-alert-error-border);
}
.ds-alert-error .ds-alert-icon {
  color: var(--ds-alert-error-icon);
}
/* Alert sizes */
.ds-alert-sm {
  padding: var(--ds-spacing-2xs) var(--ds-spacing-s);
  font-size: var(--ds-typography-desktop-small-font-size);
}
.ds-alert-sm .ds-alert-icon {
  width: 1rem;
  height: 1rem;
}
.ds-alert-lg {
  padding: var(--ds-spacing-m) var(--ds-spacing-l);
}
.ds-alert-lg .ds-alert-icon {
  width: 1.5rem;
  height: 1.5rem;
}
/* Alert banner style */
.ds-alert-banner {
  border-left: 4px solid var(--ds-status-info);
  border-radius: 0;
}
.ds-alert-banner.ds-alert-success {
  border-left-color: var(--ds-status-success);
}
.ds-alert-banner.ds-alert-warning {
  border-left-color: var(--ds-status-warning);
}
.ds-alert-banner.ds-alert-error {
  border-left-color: var(--ds-status-error);
}
/* Alert with actions */
.ds-alert-actions {
  display: flex;
  gap: var(--ds-spacing-s);
  margin-top: var(--ds-spacing-s);
  flex-wrap: wrap;
}
/* Alert without icon */
.ds-alert-no-icon {
  padding-left: var(--ds-spacing-m);
}
.ds-alert-no-icon .ds-alert-content {
  margin-left: 0;
}
/* Responsive adjustments */
@media (max-width: 640px) {
  .ds-alert {
    padding: var(--ds-spacing-s);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-spacing-xs);
  }

  .ds-alert-close {
    position: absolute;
    top: var(--ds-spacing-s);
    right: var(--ds-spacing-s);
  }

  .ds-alert-actions {
    width: 100%;
  }

  .ds-alert-actions .ds-btn {
    flex: 1;
    min-width: 0;
  }
}
/* DS: avatar.css - Avatar component */
/* layer: components */
.ds-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--ds-border-radius-full);
  background-color: var(--ds-surface-secondary);
  color: var(--ds-text-secondary);
  font-size: var(--ds-typography-desktop-body-font-size);
  font-weight: 500;
  line-height: 1;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-avatar:hover {
  box-shadow: var(--ds-shadow-sm);
}
.ds-avatar:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: inherit;
}
.ds-avatar .ds-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: var(--ds-surface-secondary);
  color: var(--ds-text-secondary);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
/* Avatar sizes */
.ds-avatar-xs {
  width: 1.5rem;
  height: 1.5rem;
  font-size: var(--ds-typography-desktop-small-font-size);
}
.ds-avatar-sm {
  width: 2rem;
  height: 2rem;
  font-size: var(--ds-typography-desktop-small-font-size);
}
.ds-avatar-md {
  width: 2.5rem;
  height: 2.5rem;
  font-size: var(--ds-typography-desktop-body-font-size);
}
.ds-avatar-lg {
  width: 3rem;
  height: 3rem;
  font-size: var(--ds-typography-desktop-h4-font-size);
}
.ds-avatar-xl {
  width: 4rem;
  height: 4rem;
  font-size: var(--ds-typography-desktop-h3-font-size);
}
.ds-avatar-2xl {
  width: 5rem;
  height: 5rem;
  font-size: var(--ds-typography-desktop-h2-font-size);
}
/* Avatar shapes */
.ds-avatar-square {
  border-radius: var(--ds-border-radius-m);
}
.ds-avatar-rounded {
  border-radius: var(--ds-border-radius-l);
}
/* Avatar with badge */
.ds-avatar-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  border: 2px solid var(--ds-surface-primary);
  background-color: var(--ds-status-success);
}
.ds-avatar-badge.ds-avatar-badge-error {
  background-color: var(--ds-status-error);
}
.ds-avatar-badge.ds-avatar-badge-warning {
  background-color: var(--ds-status-warning);
}
.ds-avatar-badge.ds-avatar-badge-info {
  background-color: var(--ds-status-info);
}
.ds-avatar-badge.ds-avatar-badge-offline {
  background-color: var(--ds-surface-tertiary);
  border-color: var(--ds-border-primary);
}
/* Avatar group */
.ds-avatar-group {
  display: flex;
  flex-direction: row-reverse;
}
.ds-avatar-group .ds-avatar {
  border: 2px solid var(--ds-surface-primary);
  margin-left: -0.5rem;
}
.ds-avatar-group .ds-avatar:first-child {
  margin-left: 0;
}
.ds-avatar-group .ds-avatar:hover {
  z-index: 1;
  transform: scale(1.05);
}
/* Avatar with fallback */
.ds-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: var(--ds-surface-secondary);
  color: var(--ds-text-secondary);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
/* Avatar loading state */
.ds-avatar-loading {
  position: relative;
  overflow: hidden;
}
.ds-avatar-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: avatarShimmer 1.5s infinite;
}
@keyframes avatarShimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
/* Avatar variants */
.ds-avatar-outlined {
  border: 2px solid var(--ds-border-primary);
}
.ds-avatar-filled {
  background-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
}
/* Avatar colors */
.ds-avatar-color-primary {
  background-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
}
.ds-avatar-color-secondary {
  background-color: var(--ds-interactive-secondary);
  color: var(--ds-text-primary);
}
.ds-avatar-color-success {
  background-color: var(--ds-status-success-bg);
  color: var(--ds-status-success);
}
.ds-avatar-color-error {
  background-color: var(--ds-status-error-bg);
  color: var(--ds-status-error);
}
.ds-avatar-color-warning {
  background-color: var(--ds-status-warning-bg);
  color: var(--ds-status-warning);
}
.ds-avatar-color-info {
  background-color: var(--ds-status-info-bg);
  color: var(--ds-status-info);
}
/* Avatar with icon */
.ds-avatar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.ds-avatar-icon .ds-icon {
  width: 60%;
  height: 60%;
  color: inherit;
}
/* Avatar initials */
.ds-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: 600;
  text-transform: uppercase;
}
/* Responsive adjustments */
@media (max-width: 640px) {
  .ds-avatar {
    width: 2rem;
    height: 2rem;
    font-size: var(--ds-typography-mobile-small-font-size);
  }

  .ds-avatar-lg {
    width: 2.5rem;
    height: 2.5rem;
    font-size: var(--ds-typography-mobile-body-font-size);
  }

  .ds-avatar-xl {
    width: 3rem;
    height: 3rem;
    font-size: var(--ds-typography-mobile-h4-font-size);
  }

  .ds-avatar-group .ds-avatar {
    margin-left: -0.25rem;
  }
}
/* DS: badge.css - Badge component */
/* layer: components */
.ds-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px var(--ds-spacing-2xs);
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 500;
  line-height: 1.2;
  border-radius: var(--ds-border-radius-xl);
  white-space: nowrap;
  vertical-align: middle;
}
.ds-badge-content {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-spacing-3xs);
}
/* Badge variants */
.ds-badge-default {
  background-color: var(--ds-badge-bg);
  color: var(--ds-badge-fg);
}
.ds-badge-positive {
  background-color: var(--ds-badge-border-positive);
  color: var(--ds-badge-fg-contrast);
}
.ds-badge-negative {
  background-color: var(--ds-badge-border-negative);
  color: var(--ds-badge-fg-contrast);
}
.ds-badge-warning {
  background-color: var(--ds-badge-border-warning);
  color: var(--ds-badge-fg-contrast);
}
.ds-badge-info {
  background-color: var(--ds-badge-border-info);
  color: var(--ds-badge-fg-contrast);
}
.ds-badge-inactive {
  background-color: var(--ds-badge-border-inactive);
  color: var(--ds-badge-fg);
}
.ds-badge-magenta {
  background-color: var(--ds-badge-close-magenta);
  color: var(--ds-badge-fg-contrast);
}
.ds-badge-red {
  background-color: var(--ds-badge-close-red);
  color: var(--ds-badge-fg-contrast);
}
.ds-badge-volcano {
  background-color: var(--ds-badge-close-volcano);
  color: var(--ds-badge-fg-contrast);
}
.ds-badge-orange {
  background-color: var(--ds-badge-close-orange);
  color: var(--ds-badge-fg-contrast);
}
.ds-badge-gold {
  background-color: var(--ds-badge-close-gold);
  color: var(--ds-badge-fg-contrast);
}
.ds-badge-yellow {
  background-color: var(--ds-badge-close-yellow);
  color: var(--ds-badge-fg-contrast);
}
.ds-badge-lime {
  background-color: var(--ds-badge-close-lime);
  color: var(--ds-badge-fg-contrast);
}
.ds-badge-green {
  background-color: var(--ds-badge-close-green);
  color: var(--ds-badge-fg-contrast);
}
.ds-badge-cyan {
  background-color: var(--ds-badge-close-cyan);
  color: var(--ds-badge-fg-contrast);
}
.ds-badge-blue {
  background-color: var(--ds-badge-close-blue);
  color: var(--ds-badge-fg-contrast);
}
.ds-badge-geekblue {
  background-color: var(--ds-badge-close-geekblue);
  color: var(--ds-badge-fg-contrast);
}
.ds-badge-purple {
  background-color: var(--ds-badge-close-purple);
  color: var(--ds-badge-fg-contrast);
}
/* Badge sizes */
.ds-badge-sm {
  padding: 1px var(--ds-spacing-3xs);
  font-size: var(--ds-typography-desktop-extra-small-font-size);
}
.ds-badge-lg {
  padding: 4px var(--ds-spacing-xs);
  font-size: var(--ds-typography-desktop-body-font-size);
}
/* Badge with dot */
.ds-badge-dot {
  position: relative;
}
.ds-badge-dot::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--ds-status-error);
  border: 2px solid var(--ds-surface-background);
  transform: translate(50%, -50%);
}
.ds-badge-dot.ds-badge-success::before {
  background-color: var(--ds-status-success);
}
.ds-badge-dot.ds-badge-warning::before {
  background-color: var(--ds-status-warning);
}
.ds-badge-dot.ds-badge-info::before {
  background-color: var(--ds-status-info);
}
/* Badge with count */
.ds-badge-count {
  position: relative;
  display: inline-block;
}
.ds-badge-count-number {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 9px;
  background-color: var(--ds-status-error);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ds-surface-background);
  box-sizing: border-box;
}
.ds-badge-count-number.ds-badge-success {
  background-color: var(--ds-status-success);
}
.ds-badge-count-number.ds-badge-warning {
  background-color: var(--ds-status-warning);
}
.ds-badge-count-number.ds-badge-info {
  background-color: var(--ds-status-info);
}
.ds-badge-count-number:empty {
  display: none;
}
/* Badge with status */
.ds-badge-status {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-spacing-2xs);
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-secondary);
}
.ds-badge-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ds-badge-status-success .ds-badge-status-dot {
  background-color: var(--ds-status-success);
}
.ds-badge-status-error .ds-badge-status-dot {
  background-color: var(--ds-status-error);
}
.ds-badge-status-warning .ds-badge-status-dot {
  background-color: var(--ds-status-warning);
}
.ds-badge-status-info .ds-badge-status-dot {
  background-color: var(--ds-status-info);
}
.ds-badge-status-processing .ds-badge-status-dot {
  background-color: var(--ds-status-processing);
  animation: badgePulse 2s infinite;
}
/* Badge with icon */
.ds-badge .ds-icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}
/* Disabled state */
.ds-badge:disabled,
.ds-badge-disabled {
  background-color: var(--ds-badge-bg-disabled);
  color: var(--ds-badge-fg-disabled);
  opacity: 0.6;
}
/* Badge group */
.ds-badge-group {
  display: inline-flex;
  gap: var(--ds-spacing-2xs);
  flex-wrap: wrap;
}
/* Badge in button */
.ds-btn .ds-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  transform: scale(0.8);
}
.ds-btn .ds-badge-count-number {
  min-width: 16px;
  height: 16px;
  font-size: 11px;
  top: -6px;
  right: -6px;
}
/* Animations */
@keyframes badgePulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
/* Responsive adjustments */
@media (max-width: 640px) {
  .ds-badge {
    font-size: var(--ds-typography-mobile-small-font-size);
  }

  .ds-badge-count-number {
    min-width: 16px;
    height: 16px;
    font-size: 11px;
    top: -6px;
    right: -6px;
  }
}
/* DS: banner.css - Banner component */
/* layer: components */
.ds-banner {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--ds-spacing-m);
  padding: var(--ds-spacing-l);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  box-shadow: var(--ds-shadow-sm);
  overflow: hidden;
}
.ds-banner-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-s);
}
.ds-banner-title {
  margin: 0;
  font-size: var(--ds-typography-desktop-h3-font-size);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ds-text-primary);
}
.ds-banner-description {
  margin: 0;
  font-size: var(--ds-typography-desktop-body-font-size);
  line-height: 1.6;
  color: var(--ds-text-secondary);
}
.ds-banner-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  flex-wrap: wrap;
  margin-top: var(--ds-spacing-m);
}
.ds-banner-close {
  position: absolute;
  top: var(--ds-spacing-m);
  right: var(--ds-spacing-m);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ds-text-secondary);
  border-radius: var(--ds-border-radius-2xs);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-banner-close:hover {
  background-color: var(--ds-surface-secondary);
  color: var(--ds-text-primary);
}
.ds-banner-close:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
/* Banner variants */
.ds-banner-info {
  border-left: 4px solid var(--ds-status-info);
  background: linear-gradient(135deg, var(--ds-status-info-bg) 0%, var(--ds-surface-primary) 100%);
}
.ds-banner-success {
  border-left: 4px solid var(--ds-status-success);
  background: linear-gradient(135deg, var(--ds-status-success-bg) 0%, var(--ds-surface-primary) 100%);
}
.ds-banner-warning {
  border-left: 4px solid var(--ds-status-warning);
  background: linear-gradient(135deg, var(--ds-status-warning-bg) 0%, var(--ds-surface-primary) 100%);
}
.ds-banner-error {
  border-left: 4px solid var(--ds-status-error);
  background: linear-gradient(135deg, var(--ds-status-error-bg) 0%, var(--ds-surface-primary) 100%);
}
.ds-banner-neutral {
  border-left: 4px solid var(--ds-border-secondary);
  background-color: var(--ds-surface-secondary);
}
/* Banner with icon */
.ds-banner-icon {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.ds-banner-info .ds-banner-icon {
  color: var(--ds-status-info);
}
.ds-banner-success .ds-banner-icon {
  color: var(--ds-status-success);
}
.ds-banner-warning .ds-banner-icon {
  color: var(--ds-status-warning);
}
.ds-banner-error .ds-banner-icon {
  color: var(--ds-status-error);
}
.ds-banner-neutral .ds-banner-icon {
  color: var(--ds-text-secondary);
}
/* Banner sizes */
.ds-banner-sm {
  padding: var(--ds-spacing-m);
  gap: var(--ds-spacing-s);
}
.ds-banner-sm .ds-banner-title {
  font-size: var(--ds-typography-desktop-h4-font-size);
}
.ds-banner-sm .ds-banner-description {
  font-size: var(--ds-typography-desktop-small-font-size);
}
.ds-banner-sm .ds-banner-icon {
  width: 1.5rem;
  height: 1.5rem;
}
.ds-banner-lg {
  padding: var(--ds-spacing-xl);
  gap: var(--ds-spacing-l);
}
.ds-banner-lg .ds-banner-title {
  font-size: var(--ds-typography-desktop-h2-font-size);
}
.ds-banner-lg .ds-banner-description {
  font-size: var(--ds-typography-desktop-body-font-size);
}
.ds-banner-lg .ds-banner-icon {
  width: 2.5rem;
  height: 2.5rem;
}
/* Banner layout variants */
.ds-banner-centered {
  text-align: center;
  align-items: center;
}
.ds-banner-centered .ds-banner-content {
  align-items: center;
}
.ds-banner-centered .ds-banner-actions {
  justify-content: center;
  margin-top: var(--ds-spacing-s);
}
.ds-banner-left-aligned {
  text-align: left;
}
.ds-banner-right-aligned {
  text-align: right;
}
.ds-banner-right-aligned .ds-banner-content {
  align-items: flex-end;
}
.ds-banner-right-aligned .ds-banner-actions {
  justify-content: flex-end;
}
/* Banner with media */
.ds-banner-media {
  display: flex;
  gap: var(--ds-spacing-l);
}
.ds-banner-media .ds-banner-content {
  flex: 1;
}
.ds-banner-media-image {
  flex-shrink: 0;
  width: 8rem;
  height: 8rem;
  border-radius: var(--ds-border-radius-m);
  overflow: hidden;
  background-color: var(--ds-surface-secondary);
}
.ds-banner-media-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.ds-banner-media-video {
  flex-shrink: 0;
  width: 12rem;
  height: 8rem;
  border-radius: var(--ds-border-radius-m);
  overflow: hidden;
  background-color: var(--ds-surface-secondary);
}
/* Banner states */
.ds-banner-sticky {
  position: sticky;
  top: 0;
  z-index: var(--ds-z-index-sticky);
  margin-bottom: var(--ds-spacing-l);
  animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.ds-banner-dismissed {
  animation: slideUp 0.3s ease-in forwards;
}
@keyframes slideUp {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}
/* Banner with progress */
.ds-banner-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--ds-surface-secondary);
  overflow: hidden;
}
.ds-banner-progress-bar {
  height: 100%;
  background-color: var(--ds-interactive-primary);
  animation: progressFill 3s linear;
}
@keyframes progressFill {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ds-banner {
    flex-direction: column;
    text-align: center;
    padding: var(--ds-spacing-m);
    gap: var(--ds-spacing-s);
  }

  .ds-banner-media {
    flex-direction: column;
    gap: var(--ds-spacing-s);
  }

  .ds-banner-media-image,
  .ds-banner-media-video {
    width: 100%;
    height: auto;
    max-height: 12rem;
  }

  .ds-banner-media-video {
    height: 8rem;
  }

  .ds-banner-actions {
    flex-direction: column;
    width: 100%;
  }

  .ds-banner-actions .ds-btn {
    width: 100%;
  }

  .ds-banner-close {
    position: static;
    align-self: flex-end;
    margin-top: var(--ds-spacing-s);
  }
}
@media (max-width: 480px) {
  .ds-banner {
    padding: var(--ds-spacing-s);
  }

  .ds-banner-sm {
    padding: var(--ds-spacing-s);
  }

  .ds-banner-lg {
    padding: var(--ds-spacing-m);
  }
}
/* Print styles */
@media print {
  .ds-banner {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    border: 2px solid #000;
    background: #fff;
    color: #000;
  }

  .ds-banner-close {
    display: none;
  }

  .ds-banner-progress {
    display: none;
  }
}
/* DS: breadcrumbs.css - Breadcrumbs component */
/* layer: components */
.ds-breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-2xs);
  font-size: var(--ds-typography-desktop-small-font-size);
  line-height: 1.4;
  color: var(--ds-text-secondary);
}
.ds-breadcrumbs-list {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-2xs);
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ds-breadcrumbs-item {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-2xs);
}
.ds-breadcrumbs-link {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-spacing-2xs);
  color: var(--ds-text-secondary);
  text-decoration: none;
  border-radius: var(--ds-border-radius-2xs);
  padding: var(--ds-spacing-3xs) var(--ds-spacing-2xs);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  position: relative;
}
.ds-breadcrumbs-link:hover {
  color: var(--ds-text-primary);
  background-color: var(--ds-surface-secondary);
}
.ds-breadcrumbs-link:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
  color: var(--ds-text-primary);
}
.ds-breadcrumbs-link[aria-current="page"] {
  color: var(--ds-text-primary);
  font-weight: 500;
  cursor: default;
  pointer-events: none;
}
.ds-breadcrumbs-link[aria-current="page"]:hover {
  background-color: transparent;
}
/* Breadcrumb separator */
.ds-breadcrumbs-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  color: var(--ds-text-tertiary);
  flex-shrink: 0;
}
.ds-breadcrumbs-separator-icon {
  width: 0.75rem;
  height: 0.75rem;
  color: inherit;
}
/* Default separator (chevron) */
.ds-breadcrumbs-separator::before {
  content: '/';
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 400;
  color: var(--ds-text-tertiary);
}
/* Custom separators */
.ds-breadcrumbs-separator-chevron::before {
  content: '›';
  font-size: var(--ds-typography-desktop-body-font-size);
  font-weight: 400;
}
.ds-breadcrumbs-separator-arrow::before {
  content: '→';
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 400;
}
.ds-breadcrumbs-separator-dot::before {
  content: '•';
  font-size: var(--ds-typography-desktop-body-font-size);
  font-weight: 400;
}
/* Breadcrumb icon */
.ds-breadcrumbs-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: inherit;
}
/* Breadcrumb text */
.ds-breadcrumbs-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 12rem;
}
/* Collapsed breadcrumbs */
.ds-breadcrumbs-collapsed {
  position: relative;
}
.ds-breadcrumbs-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--ds-border-radius-2xs);
  background-color: var(--ds-surface-secondary);
  color: var(--ds-text-secondary);
  cursor: pointer;
  border: none;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  font-size: var(--ds-typography-desktop-small-font-size);
}
.ds-breadcrumbs-ellipsis:hover {
  background-color: var(--ds-surface-tertiary);
  color: var(--ds-text-primary);
}
.ds-breadcrumbs-ellipsis:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
/* Breadcrumbs sizes */
.ds-breadcrumbs-sm {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
}
.ds-breadcrumbs-sm .ds-breadcrumbs-link {
  padding: 1px var(--ds-spacing-3xs);
}
.ds-breadcrumbs-sm .ds-breadcrumbs-separator {
  width: 0.875rem;
  height: 0.875rem;
}
.ds-breadcrumbs-lg {
  font-size: var(--ds-typography-desktop-body-font-size);
}
.ds-breadcrumbs-lg .ds-breadcrumbs-link {
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
}
.ds-breadcrumbs-lg .ds-breadcrumbs-separator {
  width: 1.125rem;
  height: 1.125rem;
}
/* Breadcrumbs variants */
.ds-breadcrumbs-contained {
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  background-color: var(--ds-surface-secondary);
  border-radius: var(--ds-border-radius-m);
  border: 1px solid var(--ds-border-primary);
}
.ds-breadcrumbs-contained.ds-breadcrumbs-sm {
  padding: var(--ds-spacing-2xs) var(--ds-spacing-s);
}
.ds-breadcrumbs-contained.ds-breadcrumbs-lg {
  padding: var(--ds-spacing-m) var(--ds-spacing-l);
}
.ds-breadcrumbs-inverse {
  color: var(--ds-text-inverse);
}
.ds-breadcrumbs-inverse .ds-breadcrumbs-link {
  color: var(--ds-text-inverse);
}
.ds-breadcrumbs-inverse .ds-breadcrumbs-link:hover {
  color: var(--ds-text-primary);
  background-color: rgba(255, 255, 255, 0.1);
}
.ds-breadcrumbs-inverse .ds-breadcrumbs-link[aria-current="page"] {
  color: var(--ds-text-primary);
}
.ds-breadcrumbs-inverse .ds-breadcrumbs-separator {
  color: rgba(255, 255, 255, 0.6);
}
/* Breadcrumbs with dropdown */
.ds-breadcrumbs-dropdown {
  position: relative;
}
.ds-breadcrumbs-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--ds-z-index-dropdown);
  min-width: 12rem;
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  box-shadow: var(--ds-shadow-lg);
  padding: var(--ds-spacing-2xs) 0;
  margin-top: var(--ds-spacing-2xs);
}
.ds-breadcrumbs-dropdown-item {
  display: block;
  width: 100%;
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  color: var(--ds-text-primary);
  text-decoration: none;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-size: var(--ds-typography-desktop-small-font-size);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-breadcrumbs-dropdown-item:hover,
.ds-breadcrumbs-dropdown-item:focus {
  background-color: var(--ds-surface-secondary);
  outline: none;
}
/* Responsive behavior */
@media (max-width: 640px) {
  .ds-breadcrumbs {
    gap: var(--ds-spacing-3xs);
    font-size: var(--ds-typography-mobile-small-font-size);
  }

  .ds-breadcrumbs-text {
    max-width: 8rem;
  }

  .ds-breadcrumbs-link {
    padding: var(--ds-spacing-3xs) 1px;
  }

  .ds-breadcrumbs-sm .ds-breadcrumbs-link {
    padding: 1px 1px;
  }

  .ds-breadcrumbs-lg .ds-breadcrumbs-link {
    padding: 1px var(--ds-spacing-2xs);
  }

  .ds-breadcrumbs-contained {
    padding: var(--ds-spacing-2xs) var(--ds-spacing-s);
  }
}
/* Print styles */
@media print {
  .ds-breadcrumbs {
    color: #000;
    font-size: 10pt;
  }

  .ds-breadcrumbs-link {
    text-decoration: none;
    color: #000;
  }

  .ds-breadcrumbs-link[aria-current="page"] {
    font-weight: bold;
  }

  .ds-breadcrumbs-link::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #666;
  }
}
/* DS: button.css - Button component */
/* layer: components */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-spacing-2xs);
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  border-radius: var(--ds-border-radius-s);
  font-size: var(--ds-typography-desktop-body-font-size);
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
  vertical-align: middle;
}
.ds-btn:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
/* Button variants */
.ds-btn-primary {
  background-color: var(--ds-button-primary-bg);
  color: var(--ds-button-primary-fg);
  border-color: var(--ds-button-primary-border);
}
.ds-btn-primary:hover:not(:disabled) {
  background-color: var(--ds-button-primary-bg-hover);
  border-color: var(--ds-button-primary-border-hover);
}
.ds-btn-primary:active:not(:disabled) {
  background-color: var(--ds-button-primary-bg-active);
}
.ds-btn-secondary {
  background-color: var(--ds-button-secondary-bg);
  color: var(--ds-button-secondary-fg);
  border-color: var(--ds-button-secondary-border);
}
.ds-btn-secondary:hover:not(:disabled) {
  background-color: var(--ds-button-secondary-bg-hover);
  border-color: var(--ds-button-secondary-border-hover);
}
.ds-btn-secondary:active:not(:disabled) {
  background-color: var(--ds-button-secondary-bg-active);
  border-color: var(--ds-button-secondary-border-active);
}
.ds-btn-ghost {
  background-color: var(--ds-button-ghost-bg);
  color: var(--ds-button-ghost-fg);
  border-color: var(--ds-button-ghost-border);
}
.ds-btn-ghost:hover:not(:disabled) {
  background-color: var(--ds-button-ghost-bg-hover);
  color: var(--ds-button-ghost-fg-hover);
}
.ds-btn-ghost:active:not(:disabled) {
  background-color: var(--ds-button-ghost-bg-active);
  color: var(--ds-button-ghost-fg-active);
}
/* Button sizes */
.ds-btn-sm {
  padding: var(--ds-spacing-3xs) var(--ds-spacing-xs);
  font-size: var(--ds-typography-desktop-small-font-size);
  gap: var(--ds-spacing-3xs);
}
.ds-btn-lg {
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  font-size: var(--ds-typography-desktop-small-font-size);
  gap: var(--ds-spacing-xs);
}
/* Button states */
.ds-btn:disabled {
  opacity: var(--ds-opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.ds-btn-loading {
  position: relative;
  color: transparent;
}
.ds-btn-loading::after {
  content: '';
  position: absolute;
  width: 1em;
  height: 1em;
  top: 50%;
  left: 50%;
  margin-left: -0.5em;
  margin-top: -0.5em;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-right-color: transparent;
  animation: spin 1s linear infinite;
}
/* Button with icon */
.ds-btn-icon-only {
  padding: var(--ds-spacing-xs);
  width: auto;
  min-width: auto;
}
.ds-btn-icon-only.ds-btn-sm {
  padding: var(--ds-spacing-3xs);
}
.ds-btn-icon-only.ds-btn-lg {
  padding: var(--ds-spacing-s);
}
/* Full width button */
.ds-btn-full {
  width: 100%;
  justify-content: center;
}
/* DS: button/button.icon.css - Button icon component */
/* layer: components */
.ds-button-icon {
  width: 1rem;
  height: 1rem;
  color: inherit;
  flex-shrink: 0;
  transition: transform var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-button-icon-only .ds-button-icon {
  margin: 0;
}
.ds-button-icon-left {
  margin-right: var(--ds-spacing-xs);
}
.ds-button-icon-right {
  margin-left: var(--ds-spacing-xs);
}
.ds-button-loading .ds-button-icon {
  opacity: 0;
}
.ds-button-loading .ds-button-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1rem;
  height: 1rem;
  color: currentColor;
}
/* Button icon sizes */
.ds-button-sm .ds-button-icon {
  width: 0.875rem;
  height: 0.875rem;
}
.ds-button-lg .ds-button-icon {
  width: 1.25rem;
  height: 1.25rem;
}
.ds-button-xl .ds-button-icon {
  width: 1.5rem;
  height: 1.5rem;
}
/* Button icon only */
.ds-button-icon-only {
  padding: var(--ds-spacing-xs);
  width: auto;
  min-width: auto;
}
.ds-button-icon-only.ds-button-sm {
  padding: var(--ds-spacing-2xs);
}
.ds-button-icon-only.ds-button-lg {
  padding: var(--ds-spacing-s);
}
.ds-button-icon-only.ds-button-xl {
  padding: var(--ds-spacing-m);
}
/* Button icon variants */
.ds-button-ghost .ds-button-icon {
  color: var(--ds-text-secondary);
}
.ds-button-ghost:hover .ds-button-icon {
  color: var(--ds-text-primary);
}
.ds-button-outline .ds-button-icon {
  color: var(--ds-interactive-primary);
}
.ds-button-outline:hover .ds-button-icon {
  color: var(--ds-text-inverse);
}
.ds-button-solid .ds-button-icon {
  color: var(--ds-text-inverse);
}
.ds-button-solid:hover .ds-button-icon {
  color: var(--ds-text-inverse);
}
.ds-button-link .ds-button-icon {
  color: var(--ds-interactive-primary);
}
.ds-button-link:hover .ds-button-icon {
  color: var(--ds-interactive-primary-hover);
}
/* Button icon states */
.ds-button:disabled .ds-button-icon {
  opacity: var(--ds-opacity-disabled);
}
.ds-button-loading .ds-button-icon {
  display: none;
}
/* Button icon animations */
.ds-button-clicked .ds-button-icon {
  transform: scale(0.9);
}
.ds-button-clicked .ds-button-icon-left {
  transform: translateX(-1px) scale(0.9);
}
.ds-button-clicked .ds-button-icon-right {
  transform: translateX(1px) scale(0.9);
}
/* Button icon with dropdown */
.ds-button-dropdown .ds-button-icon-right {
  margin-left: var(--ds-spacing-2xs);
}
.ds-button-dropdown-open .ds-button-icon-right {
  transform: rotate(180deg);
}
/* Button icon with badge */
.ds-button-with-badge .ds-button-icon {
  position: relative;
}
.ds-button-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 8px;
  height: 8px;
  background-color: var(--ds-status-error);
  border-radius: 50%;
  border: 2px solid var(--ds-surface-primary);
}
.ds-button-badge-count {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background-color: var(--ds-status-error);
  color: var(--ds-text-inverse);
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  font-weight: 600;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* Responsive adjustments */
@media (max-width: 480px) {
  .ds-button-icon-only {
    padding: var(--ds-spacing-2xs);
  }

  .ds-button-icon-only.ds-button-lg,
  .ds-button-icon-only.ds-button-xl {
    padding: var(--ds-spacing-xs);
  }

  .ds-button-sm .ds-button-icon,
  .ds-button-lg .ds-button-icon,
  .ds-button-xl .ds-button-icon {
    width: 1rem;
    height: 1rem;
  }
}
/* DS: button/button.sizes.css - Button sizes component */
/* layer: components */
.ds-button-xs {
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  line-height: 1.2;
  min-height: 1.5rem;
}
.ds-button-sm {
  padding: var(--ds-spacing-2xs) var(--ds-spacing-s);
  font-size: var(--ds-typography-desktop-small-font-size);
  line-height: 1.3;
  min-height: 2rem;
}
.ds-button-md {
  padding: var(--ds-spacing-xs) var(--ds-spacing-m);
  font-size: var(--ds-typography-desktop-body-font-size);
  line-height: 1.4;
  min-height: 2.5rem;
}
.ds-button-lg {
  padding: var(--ds-spacing-s) var(--ds-spacing-l);
  font-size: var(--ds-typography-desktop-h4-font-size);
  line-height: 1.4;
  min-height: 3rem;
}
.ds-button-xl {
  padding: var(--ds-spacing-m) var(--ds-spacing-xl);
  font-size: var(--ds-typography-desktop-h3-font-size);
  line-height: 1.4;
  min-height: 3.5rem;
}
/* Button size adjustments for icon buttons */
.ds-button-xs.ds-button-icon-only {
  padding: var(--ds-spacing-2xs);
  width: 1.5rem;
  height: 1.5rem;
}
.ds-button-sm.ds-button-icon-only {
  padding: var(--ds-spacing-2xs);
  width: 2rem;
  height: 2rem;
}
.ds-button-md.ds-button-icon-only {
  padding: var(--ds-spacing-xs);
  width: 2.5rem;
  height: 2.5rem;
}
.ds-button-lg.ds-button-icon-only {
  padding: var(--ds-spacing-s);
  width: 3rem;
  height: 3rem;
}
.ds-button-xl.ds-button-icon-only {
  padding: var(--ds-spacing-m);
  width: 3.5rem;
  height: 3.5rem;
}
/* Button size adjustments for different variants */
.ds-button-xs.ds-button-outline,
.ds-button-xs.ds-button-ghost {
  padding: calc(var(--ds-spacing-2xs) - 1px) calc(var(--ds-spacing-xs) - 1px);
}
.ds-button-sm.ds-button-outline,
.ds-button-sm.ds-button-ghost {
  padding: calc(var(--ds-spacing-2xs) - 1px) calc(var(--ds-spacing-s) - 1px);
}
.ds-button-md.ds-button-outline,
.ds-button-md.ds-button-ghost {
  padding: calc(var(--ds-spacing-xs) - 1px) calc(var(--ds-spacing-m) - 1px);
}
.ds-button-lg.ds-button-outline,
.ds-button-lg.ds-button-ghost {
  padding: calc(var(--ds-spacing-s) - 1px) calc(var(--ds-spacing-l) - 1px);
}
.ds-button-xl.ds-button-outline,
.ds-button-xl.ds-button-ghost {
  padding: calc(var(--ds-spacing-m) - 1px) calc(var(--ds-spacing-xl) - 1px);
}
/* Button size border radius adjustments */
.ds-button-xs {
  border-radius: calc(var(--ds-border-radius-m) - 2px);
}
.ds-button-sm {
  border-radius: calc(var(--ds-border-radius-m) - 1px);
}
.ds-button-md {
  border-radius: var(--ds-border-radius-m);
}
.ds-button-lg {
  border-radius: calc(var(--ds-border-radius-m) + 2px);
}
.ds-button-xl {
  border-radius: calc(var(--ds-border-radius-m) + 4px);
}
/* Button size focus adjustments */
.ds-button-xs:focus-visible {
  outline-offset: 1px;
}
.ds-button-sm:focus-visible {
  outline-offset: 1px;
}
.ds-button-md:focus-visible {
  outline-offset: 2px;
}
.ds-button-lg:focus-visible {
  outline-offset: 2px;
}
.ds-button-xl:focus-visible {
  outline-offset: 3px;
}
/* DS: button/button.variants.css - Button variants component */
/* layer: components */
.ds-button-solid {
  background-color: var(--ds-interactive-primary);
  border: 1px solid var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
  font-weight: 400;
}
.ds-button-solid:hover {
  background-color: var(--ds-interactive-primary-hover);
  border-color: var(--ds-interactive-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--ds-shadow-sm);
}
.ds-button-solid:active {
  background-color: var(--ds-interactive-primary-active);
  border-color: var(--ds-interactive-primary-active);
  transform: translateY(0);
  box-shadow: none;
}
.ds-button-outline {
  background-color: transparent;
  border: 2px solid var(--ds-interactive-primary);
  color: var(--ds-interactive-primary);
  font-weight: 400;
}
.ds-button-outline:hover {
  background-color: var(--ds-interactive-primary-bg);
  border-color: var(--ds-interactive-primary-hover);
  color: var(--ds-interactive-primary-hover);
}
.ds-button-outline:active {
  background-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
  border-color: var(--ds-interactive-primary);
}
.ds-button-ghost {
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--ds-text-primary);
  font-weight: 400;
}
.ds-button-ghost:hover {
  background-color: var(--ds-surface-secondary);
  border-color: var(--ds-border-primary);
}
.ds-button-ghost:active {
  background-color: var(--ds-surface-tertiary);
  border-color: var(--ds-border-secondary);
}
.ds-button-link {
  background-color: transparent;
  border: none;
  color: var(--ds-interactive-primary);
  font-weight: 400;
  text-decoration: none;
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
}
.ds-button-link:hover {
  color: var(--ds-interactive-primary-hover);
  text-decoration: underline;
}
.ds-button-link:active {
  color: var(--ds-interactive-primary-active);
}
.ds-button-link:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
  background-color: var(--ds-interactive-primary-bg);
  border-radius: var(--ds-border-radius-2xs);
}
/* Button variant combinations */
.ds-button-success {
  --button-color: var(--ds-status-success);
  --button-color-hover: var(--ds-status-success-hover);
  --button-color-active: var(--ds-status-success-active);
  --button-bg: var(--ds-status-success-bg);
}
.ds-button-success.ds-button-solid {
  background-color: var(--ds-status-success);
  border-color: var(--ds-status-success);
  color: var(--ds-text-inverse);
}
.ds-button-success.ds-button-solid:hover {
  background-color: var(--ds-status-success-hover);
  border-color: var(--ds-status-success-hover);
}
.ds-button-success.ds-button-outline {
  border-color: var(--ds-status-success);
  color: var(--ds-status-success);
}
.ds-button-success.ds-button-outline:hover {
  background-color: var(--ds-status-success-bg);
  border-color: var(--ds-status-success-hover);
  color: var(--ds-status-success-hover);
}
.ds-button-warning {
  --button-color: var(--ds-status-warning);
  --button-color-hover: var(--ds-status-warning-hover);
  --button-color-active: var(--ds-status-warning-active);
  --button-bg: var(--ds-status-warning-bg);
}
.ds-button-warning.ds-button-solid {
  background-color: var(--ds-status-warning);
  border-color: var(--ds-status-warning);
  color: var(--ds-text-primary);
}
.ds-button-warning.ds-button-solid:hover {
  background-color: var(--ds-status-warning-hover);
  border-color: var(--ds-status-warning-hover);
}
.ds-button-error {
  --button-color: var(--ds-status-error);
  --button-color-hover: var(--ds-status-error-hover);
  --button-color-active: var(--ds-status-error-active);
  --button-bg: var(--ds-status-error-bg);
}
.ds-button-error.ds-button-solid {
  background-color: var(--ds-status-error);
  border-color: var(--ds-status-error);
  color: var(--ds-text-inverse);
}
.ds-button-error.ds-button-solid:hover {
  background-color: var(--ds-status-error-hover);
  border-color: var(--ds-status-error-hover);
}
.ds-button-info {
  --button-color: var(--ds-status-info);
  --button-color-hover: var(--ds-status-info-hover);
  --button-color-active: var(--ds-status-info-active);
  --button-bg: var(--ds-status-info-bg);
}
.ds-button-secondary {
  --button-color: var(--ds-text-secondary);
  --button-color-hover: var(--ds-text-primary);
  --button-bg: var(--ds-surface-secondary);
}
.ds-button-secondary.ds-button-solid {
  background-color: var(--ds-surface-secondary);
  border-color: var(--ds-border-primary);
  color: var(--ds-text-primary);
}
.ds-button-secondary.ds-button-solid:hover {
  background-color: var(--ds-surface-tertiary);
  border-color: var(--ds-border-secondary);
}
/* Button variant states */
.ds-button:disabled.ds-button-solid {
  background-color: var(--ds-surface-disabled);
  border-color: var(--ds-border-disabled);
  color: var(--ds-text-disabled);
  transform: none;
  box-shadow: none;
}
.ds-button:disabled.ds-button-outline {
  border-color: var(--ds-border-disabled);
  color: var(--ds-text-disabled);
}
.ds-button:disabled.ds-button-ghost {
  color: var(--ds-text-disabled);
}
.ds-button:disabled.ds-button-link {
  color: var(--ds-text-disabled);
  text-decoration: none;
}
/* Button variant focus states */
.ds-button-solid:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-button-outline:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-button-ghost:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
  background-color: var(--ds-surface-secondary);
}
/* Button variant loading states */
.ds-button-loading.ds-button-solid {
  background-color: var(--ds-surface-disabled);
  border-color: var(--ds-border-disabled);
  color: transparent;
  pointer-events: none;
}
.ds-button-loading.ds-button-outline {
  color: transparent;
  pointer-events: none;
}
.ds-button-loading.ds-button-ghost {
  color: transparent;
  pointer-events: none;
}
.ds-button-loading.ds-button-link {
  color: transparent;
  pointer-events: none;
}
/* DS: calendar.css - Calendar component */
/* layer: components */
.ds-calendar {
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  box-shadow: var(--ds-shadow-md);
  overflow: hidden;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 280px;
}
.ds-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ds-spacing-m);
  border-bottom: 1px solid var(--ds-border-primary);
  background-color: var(--ds-surface-secondary);
}
.ds-calendar-title {
  font-size: var(--ds-typography-desktop-h4-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0;
}
.ds-calendar-nav {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
}
.ds-calendar-nav-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: none;
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-2xs);
  cursor: pointer;
  color: var(--ds-text-secondary);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-calendar-nav-button:hover {
  background-color: var(--ds-surface-tertiary);
  color: var(--ds-text-primary);
  border-color: var(--ds-border-secondary);
}
.ds-calendar-nav-button:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-calendar-nav-button:disabled {
  opacity: var(--ds-opacity-disabled);
  cursor: not-allowed;
}
.ds-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--ds-spacing-2xs);
  padding: var(--ds-spacing-m);
}
.ds-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--ds-spacing-2xs);
  margin-bottom: var(--ds-spacing-s);
  padding: 0 var(--ds-spacing-m);
}
.ds-calendar-weekday {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 500;
  color: var(--ds-text-secondary);
  height: 2rem;
  text-align: center;
}
.ds-calendar-day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--ds-border-radius-m);
  font-size: var(--ds-typography-desktop-body-font-size);
  font-weight: 400;
  color: var(--ds-text-primary);
  cursor: pointer;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  position: relative;
  border: none;
  background: none;
}
.ds-calendar-day:hover {
  background-color: var(--ds-surface-secondary);
}
.ds-calendar-day:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-calendar-day:disabled {
  color: var(--ds-text-disabled);
  cursor: not-allowed;
}
.ds-calendar-day:disabled:hover {
  background-color: transparent;
}
/* Calendar day states */
.ds-calendar-day-today {
  background-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
  font-weight: 600;
}
.ds-calendar-day-today:hover {
  background-color: var(--ds-interactive-primary-hover);
}
.ds-calendar-day-selected {
  background-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
}
.ds-calendar-day-selected:hover {
  background-color: var(--ds-interactive-primary-hover);
}
.ds-calendar-day-range-start,
.ds-calendar-day-range-end {
  background-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
}
.ds-calendar-day-range-middle {
  background-color: var(--ds-interactive-primary-bg);
  color: var(--ds-interactive-primary);
}
.ds-calendar-day-outside {
  color: var(--ds-text-tertiary);
}
.ds-calendar-day-outside:hover {
  background-color: var(--ds-surface-tertiary);
}
/* Calendar with events */
.ds-calendar-day-with-events::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--ds-status-info);
}
/* Calendar sizes */
.ds-calendar-sm {
  min-width: 240px;
}
.ds-calendar-sm .ds-calendar-day {
  width: 2rem;
  height: 2rem;
  font-size: var(--ds-typography-desktop-small-font-size);
}
.ds-calendar-lg {
  min-width: 320px;
}
.ds-calendar-lg .ds-calendar-day {
  width: 3rem;
  height: 3rem;
  font-size: var(--ds-typography-desktop-h4-font-size);
}
/* Calendar variants */
.ds-calendar-bordered .ds-calendar-day {
  border: 1px solid var(--ds-border-primary);
}
.ds-calendar-bordered .ds-calendar-day:hover {
  border-color: var(--ds-border-secondary);
}
.ds-calendar-compact {
  min-width: 200px;
}
.ds-calendar-compact .ds-calendar-grid,
.ds-calendar-compact .ds-calendar-weekdays {
  padding: var(--ds-spacing-s);
}
.ds-calendar-compact .ds-calendar-header {
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
}
.ds-calendar-compact .ds-calendar-day {
  width: 2rem;
  height: 2rem;
  font-size: var(--ds-typography-desktop-small-font-size);
}
/* Calendar with time */
.ds-calendar-with-time {
  display: flex;
  flex-direction: column;
}
.ds-calendar-time-section {
  padding: var(--ds-spacing-m);
  border-top: 1px solid var(--ds-border-primary);
  background-color: var(--ds-surface-secondary);
}
.ds-calendar-time-label {
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 500;
  color: var(--ds-text-secondary);
  margin-bottom: var(--ds-spacing-xs);
}
.ds-calendar-time-input {
  width: 100%;
}
/* Calendar range picker */
.ds-calendar-range {
  display: flex;
  gap: var(--ds-spacing-m);
}
.ds-calendar-range .ds-calendar {
  flex: 1;
}
/* Calendar dropdown */
.ds-calendar-dropdown {
  position: absolute;
  z-index: var(--ds-z-index-dropdown);
  margin-top: var(--ds-spacing-xs);
}
/* Responsive adjustments */
@media (max-width: 640px) {
  .ds-calendar {
    min-width: 100%;
    max-width: 320px;
  }

  .ds-calendar-range {
    flex-direction: column;
    gap: var(--ds-spacing-s);
  }

  .ds-calendar-compact {
    min-width: 100%;
  }

  .ds-calendar-sm .ds-calendar-day {
    width: 1.75rem;
    height: 1.75rem;
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-calendar {
    border-width: 2px;
  }

  .ds-calendar-day {
    border: 1px solid var(--ds-border-primary);
  }

  .ds-calendar-day-selected,
  .ds-calendar-day-today {
    border: 2px solid var(--ds-border-focus);
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-calendar-day,
  .ds-calendar-nav-button {
    transition: none;
  }
}
/* Print styles */
@media print {
  .ds-calendar {
    border: 1px solid #000;
    box-shadow: none;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }

  .ds-calendar-day {
    color: #000;
  }

  .ds-calendar-day-selected,
  .ds-calendar-day-today {
    background-color: #000;
    color: #fff;
  }
}
/* DS: callout.css - Callout component */
/* layer: components */
.ds-callout {
  position: relative;
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  box-shadow: var(--ds-shadow-sm);
  padding: var(--ds-spacing-m);
  max-width: 320px;
  font-size: var(--ds-typography-desktop-body-font-size);
  line-height: 1.5;
  color: var(--ds-text-primary);
}
.ds-callout::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}
.ds-callout-content {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-xs);
}
.ds-callout-title {
  margin: 0;
  font-size: var(--ds-typography-desktop-body-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  line-height: 1.3;
}
.ds-callout-description {
  margin: 0;
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  line-height: 1.4;
}
.ds-callout-actions {
  display: flex;
  gap: var(--ds-spacing-s);
  margin-top: var(--ds-spacing-xs);
  flex-wrap: wrap;
}
/* Callout positions */
.ds-callout-top {
  margin-bottom: var(--ds-spacing-l);
}
.ds-callout-top::before {
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px 8px 0 8px;
  border-color: var(--ds-surface-primary) transparent transparent transparent;
}
.ds-callout-top::after {
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 7px 7px 0 7px;
  border-color: var(--ds-border-primary) transparent transparent transparent;
}
.ds-callout-bottom {
  margin-top: var(--ds-spacing-l);
}
.ds-callout-bottom::before {
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent var(--ds-surface-primary) transparent;
}
.ds-callout-bottom::after {
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 7px 7px 7px;
  border-color: transparent transparent var(--ds-border-primary) transparent;
}
.ds-callout-left {
  margin-right: var(--ds-spacing-l);
}
.ds-callout-left::before {
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 8px 0 8px 8px;
  border-color: transparent transparent transparent var(--ds-surface-primary);
}
.ds-callout-left::after {
  right: -7px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 7px 0 7px 7px;
  border-color: transparent transparent transparent var(--ds-border-primary);
}
.ds-callout-right {
  margin-left: var(--ds-spacing-l);
}
.ds-callout-right::before {
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 8px 8px 8px 0;
  border-color: transparent var(--ds-surface-primary) transparent transparent;
}
.ds-callout-right::after {
  left: -7px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 7px 7px 7px 0;
  border-color: transparent var(--ds-border-primary) transparent transparent;
}
/* Callout variants */
.ds-callout-info {
  border-color: var(--ds-status-info);
  background: linear-gradient(135deg, var(--ds-status-info-bg) 0%, var(--ds-surface-primary) 100%);
}
.ds-callout-info::before {
  border-color: var(--ds-surface-primary);
}
.ds-callout-info::after {
  border-color: var(--ds-status-info);
}
.ds-callout-success {
  border-color: var(--ds-status-success);
  background: linear-gradient(135deg, var(--ds-status-success-bg) 0%, var(--ds-surface-primary) 100%);
}
.ds-callout-success::before {
  border-color: var(--ds-surface-primary);
}
.ds-callout-success::after {
  border-color: var(--ds-status-success);
}
.ds-callout-warning {
  border-color: var(--ds-status-warning);
  background: linear-gradient(135deg, var(--ds-status-warning-bg) 0%, var(--ds-surface-primary) 100%);
}
.ds-callout-warning::before {
  border-color: var(--ds-surface-primary);
}
.ds-callout-warning::after {
  border-color: var(--ds-status-warning);
}
.ds-callout-error {
  border-color: var(--ds-status-error);
  background: linear-gradient(135deg, var(--ds-status-error-bg) 0%, var(--ds-surface-primary) 100%);
}
.ds-callout-error::before {
  border-color: var(--ds-surface-primary);
}
.ds-callout-error::after {
  border-color: var(--ds-status-error);
}
/* Callout with icon */
.ds-callout-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.ds-callout-info .ds-callout-icon {
  color: var(--ds-status-info);
}
.ds-callout-success .ds-callout-icon {
  color: var(--ds-status-success);
}
.ds-callout-warning .ds-callout-icon {
  color: var(--ds-status-warning);
}
.ds-callout-error .ds-callout-icon {
  color: var(--ds-status-error);
}
/* Callout with close button */
.ds-callout-close {
  position: absolute;
  top: var(--ds-spacing-s);
  right: var(--ds-spacing-s);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ds-text-secondary);
  border-radius: var(--ds-border-radius-2xs);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-callout-close:hover {
  background-color: var(--ds-surface-secondary);
  color: var(--ds-text-primary);
}
.ds-callout-close:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
/* Callout sizes */
.ds-callout-sm {
  padding: var(--ds-spacing-s);
  max-width: 280px;
  font-size: var(--ds-typography-desktop-small-font-size);
}
.ds-callout-sm .ds-callout-icon {
  width: 1.25rem;
  height: 1.25rem;
}
.ds-callout-lg {
  padding: var(--ds-spacing-l);
  max-width: 360px;
  font-size: var(--ds-typography-desktop-body-font-size);
}
.ds-callout-lg .ds-callout-icon {
  width: 2rem;
  height: 2rem;
}
/* Callout with content layout */
.ds-callout-with-content {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-spacing-m);
}
.ds-callout-with-content .ds-callout-content {
  flex: 1;
}
/* Callout tooltip style */
.ds-callout-tooltip {
  border-radius: var(--ds-border-radius-l);
  box-shadow: var(--ds-shadow-lg);
  max-width: 240px;
}
.ds-callout-tooltip::before,
.ds-callout-tooltip::after {
  border-width: 6px;
}
/* Callout popover style */
.ds-callout-popover {
  border-radius: var(--ds-border-radius-l);
  box-shadow: var(--ds-shadow-xl);
  max-width: 400px;
}
/* Callout states */
.ds-callout-entering {
  animation: calloutFadeIn 0.2s ease-out;
}
.ds-callout-exiting {
  animation: calloutFadeOut 0.15s ease-in;
}
@keyframes calloutFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes calloutFadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}
/* Responsive adjustments */
@media (max-width: 640px) {
  .ds-callout {
    max-width: 280px;
    margin: 0 var(--ds-spacing-s);
  }

  .ds-callout-with-content {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ds-spacing-s);
  }

  .ds-callout-actions {
    flex-direction: column;
  }

  .ds-callout-actions .ds-btn {
    width: 100%;
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-callout {
    border-width: 2px;
  }

  .ds-callout-info {
    border-color: var(--ds-status-info);
  }

  .ds-callout-success {
    border-color: var(--ds-status-success);
  }

  .ds-callout-warning {
    border-color: var(--ds-status-warning);
  }

  .ds-callout-error {
    border-color: var(--ds-status-error);
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-callout-entering,
  .ds-callout-exiting {
    animation: none;
  }

  .ds-callout {
    transition: none;
  }
}
/* Print styles */
@media print {
  .ds-callout {
    border: 1px solid #000;
    box-shadow: none;
    background: #fff;
    color: #000;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }

  .ds-callout::before,
  .ds-callout::after {
    display: none;
  }

  .ds-callout-close {
    display: none;
  }
}
/* DS: card.css - Card component */
/* layer: components */
.ds-card {
  background-color: var(--ds-surface-background);
  border: 1px solid var(--ds-border-color-default);
  border-radius: var(--ds-border-radius-m);
  box-shadow: var(--ds-shadow-sm);
  overflow: hidden;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-card:hover {
  box-shadow: var(--ds-shadow);
}
.ds-card-header {
  padding: var(--ds-spacing-m);
  border-bottom: 1px solid var(--ds-border-color-light);
  background-color: var(--ds-surface-background-secondary);
}
.ds-card-title {
  margin: 0;
  font-size: var(--ds-typography-desktop-h4-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  line-height: 1.4;
}
.ds-card-subtitle {
  margin: var(--ds-spacing-2xs) 0 0 0;
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  line-height: 1.5;
}
.ds-card-body {
  padding: var(--ds-spacing-m);
}
.ds-card-content {
  color: var(--ds-text-primary);
  line-height: 1.6;
}
.ds-card-actions {
  padding: var(--ds-spacing-m);
  padding-top: 0;
  display: flex;
  gap: var(--ds-spacing-xs);
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid var(--ds-border-color-light);
}
.ds-card-footer {
  padding: var(--ds-spacing-m);
  padding-top: 0;
  border-top: 1px solid var(--ds-border-color-light);
  background-color: var(--ds-surface-background-secondary);
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
}
/* Card variants */
.ds-card-elevated {
  box-shadow: var(--ds-shadow-lg);
}
.ds-card-elevated:hover {
  box-shadow: var(--ds-shadow-xl);
}
.ds-card-outlined {
  box-shadow: none;
  border: 2px solid var(--ds-border-color-default);
}
.ds-card-filled {
  background-color: var(--ds-surface-background-secondary);
  border-color: var(--ds-border-color-light);
}
/* Card sizes */
.ds-card-compact .ds-card-header,
.ds-card-compact .ds-card-body,
.ds-card-compact .ds-card-actions,
.ds-card-compact .ds-card-footer {
  padding: var(--ds-spacing-s);
}
.ds-card-compact .ds-card-actions,
.ds-card-compact .ds-card-footer {
  padding-top: 0;
}
.ds-card-spacious .ds-card-header,
.ds-card-spacious .ds-card-body,
.ds-card-spacious .ds-card-actions,
.ds-card-spacious .ds-card-footer {
  padding: var(--ds-spacing-l);
}
.ds-card-spacious .ds-card-actions,
.ds-card-spacious .ds-card-footer {
  padding-top: 0;
}
/* Card with cover image */
.ds-card-cover {
  position: relative;
  overflow: hidden;
}
.ds-card-cover img {
  width: 100%;
  height: auto;
  display: block;
}
.ds-card-cover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.1) 100%);
  pointer-events: none;
}
/* Card grid layouts */
.ds-card-grid {
  display: grid;
  gap: var(--ds-spacing-m);
}
.ds-card-grid-1 {
  grid-template-columns: 1fr;
}
.ds-card-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.ds-card-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.ds-card-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 768px) {
  .ds-card-grid-2,
  .ds-card-grid-3,
  .ds-card-grid-4 {
    grid-template-columns: 1fr;
  }
}
/* Loading state */
.ds-card-loading .ds-card-title,
.ds-card-loading .ds-card-subtitle,
.ds-card-loading .ds-card-content {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: var(--ds-border-radius-2xs);
}
.ds-card-loading .ds-card-title {
  height: 1.5em;
  margin-bottom: var(--ds-spacing-xs);
}
.ds-card-loading .ds-card-subtitle {
  height: 1em;
  width: 60%;
}
.ds-card-loading .ds-card-content {
  height: 4em;
  margin-top: var(--ds-spacing-s);
}
@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
/* DS: chart-legend/chart-legend.css - Chart legend component */
/* layer: components */
.ds-chart-legend {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-s);
  padding: var(--ds-spacing-m);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
}
.ds-chart-legend-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ds-spacing-xs);
}
.ds-chart-legend-title {
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0;
}
.ds-chart-legend-toggle {
  background: none;
  border: none;
  color: var(--ds-text-secondary);
  cursor: pointer;
  font-size: var(--ds-typography-desktop-small-font-size);
  padding: var(--ds-spacing-2xs);
  border-radius: var(--ds-border-radius-2xs);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-chart-legend-toggle:hover {
  background-color: var(--ds-surface-secondary);
  color: var(--ds-text-primary);
}
.ds-chart-legend-toggle:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-chart-legend-items {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-xs);
  max-height: 300px;
  overflow-y: auto;
}
.ds-chart-legend-item {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
  border-radius: var(--ds-border-radius-2xs);
  cursor: pointer;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.ds-chart-legend-item:hover {
  background-color: var(--ds-surface-secondary);
}
.ds-chart-legend-item:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-chart-legend-item-checkbox {
  width: 1rem;
  height: 1rem;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.ds-chart-legend-item-color {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--ds-border-radius-2xs);
  flex-shrink: 0;
}
.ds-chart-legend-item-text {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-primary);
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-chart-legend-item-value {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  margin: 0;
  font-weight: 500;
  flex-shrink: 0;
}
.ds-chart-legend-item-hidden {
  opacity: var(--ds-opacity-disabled);
}
.ds-chart-legend-item-hidden .ds-chart-legend-item-text {
  text-decoration: line-through;
}
/* Chart legend variants */
.ds-chart-legend-horizontal {
  flex-direction: row;
  align-items: flex-start;
}
.ds-chart-legend-horizontal .ds-chart-legend-items {
  flex-direction: row;
  flex-wrap: wrap;
  max-height: none;
  overflow: visible;
}
.ds-chart-legend-horizontal .ds-chart-legend-item {
  margin-bottom: var(--ds-spacing-2xs);
}
.ds-chart-legend-compact {
  padding: var(--ds-spacing-s);
  gap: var(--ds-spacing-xs);
}
.ds-chart-legend-compact .ds-chart-legend-items {
  gap: var(--ds-spacing-2xs);
}
.ds-chart-legend-compact .ds-chart-legend-item {
  padding: var(--ds-spacing-2xs);
  gap: var(--ds-spacing-xs);
}
.ds-chart-legend-inline {
  background-color: transparent;
  border: none;
  padding: 0;
}
.ds-chart-legend-inline .ds-chart-legend-items {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--ds-spacing-m);
}
.ds-chart-legend-inline .ds-chart-legend-item {
  background-color: transparent;
  padding: 0;
}
.ds-chart-legend-inline .ds-chart-legend-item:hover {
  background-color: transparent;
}
/* Chart legend with pagination */
.ds-chart-legend-paginated {
  position: relative;
}
.ds-chart-legend-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--ds-spacing-s);
  padding-top: var(--ds-spacing-s);
  border-top: 1px solid var(--ds-border-primary);
}
.ds-chart-legend-page-info {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  color: var(--ds-text-secondary);
}
.ds-chart-legend-page-controls {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
}
/* Chart legend with search */
.ds-chart-legend-searchable {
  position: relative;
}
.ds-chart-legend-search {
  margin-bottom: var(--ds-spacing-s);
  position: relative;
}
.ds-chart-legend-search-input {
  width: 100%;
  padding: var(--ds-spacing-xs) var(--ds-spacing-s) var(--ds-spacing-xs) 2rem;
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-2xs);
  background-color: var(--ds-surface-secondary);
  color: var(--ds-text-primary);
  font-size: var(--ds-typography-desktop-small-font-size);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-chart-legend-search-input:focus {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
  border-color: var(--ds-interactive-primary);
  background-color: var(--ds-surface-primary);
}
.ds-chart-legend-search-input::-moz-placeholder {
  color: var(--ds-text-tertiary);
}
.ds-chart-legend-search-input::placeholder {
  color: var(--ds-text-tertiary);
}
.ds-chart-legend-search-icon {
  position: absolute;
  left: var(--ds-spacing-xs);
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--ds-text-secondary);
  pointer-events: none;
}
/* Chart legend with groups */
.ds-chart-legend-grouped .ds-chart-legend-items {
  gap: var(--ds-spacing-m);
}
.ds-chart-legend-group {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-xs);
}
.ds-chart-legend-group-title {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  font-weight: 600;
  color: var(--ds-text-secondary);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
/* Chart legend loading state */
.ds-chart-legend-loading .ds-chart-legend-items {
  opacity: 0.6;
  pointer-events: none;
}
.ds-chart-legend-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.5rem;
  height: 1.5rem;
  color: var(--ds-interactive-primary);
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ds-chart-legend {
    padding: var(--ds-spacing-s);
  }

  .ds-chart-legend-horizontal .ds-chart-legend-items {
    flex-direction: column;
  }

  .ds-chart-legend-inline .ds-chart-legend-items {
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .ds-chart-legend {
    padding: var(--ds-spacing-xs);
  }

  .ds-chart-legend-compact {
    padding: var(--ds-spacing-xs);
  }

  .ds-chart-legend-item {
    padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
    gap: var(--ds-spacing-xs);
  }

  .ds-chart-legend-item-text {
    font-size: var(--ds-typography-desktop-extra-small-font-size);
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-chart-legend {
    border-width: 2px;
  }

  .ds-chart-legend-item-hidden {
    opacity: 0.3;
  }

  .ds-chart-legend-item-text {
    text-decoration-thickness: 2px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-chart-legend-item,
  .ds-chart-legend-toggle,
  .ds-chart-legend-search-input {
    transition: none;
  }
}
/* Print styles */
@media print {
  .ds-chart-legend {
    border: 1px solid #000;
    background: #fff;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    page-break-inside: avoid;
  }

  .ds-chart-legend-toggle,
  .ds-chart-legend-pagination,
  .ds-chart-legend-search {
    display: none;
  }

  .ds-chart-legend-item-hidden {
    display: none;
  }
}
/* DS: chart-tooltip/chart-tooltip.css - Chart tooltip component */
/* layer: components */
.ds-chart-tooltip {
  position: fixed;
  z-index: var(--ds-z-index-tooltip);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  box-shadow: var(--ds-shadow-lg);
  padding: var(--ds-spacing-m);
  max-width: 300px;
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-primary);
  line-height: 1.4;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.ds-chart-tooltip-visible {
  opacity: 1;
  visibility: visible;
}
.ds-chart-tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}
.ds-chart-tooltip-arrow-top {
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px 8px 0 8px;
  border-color: var(--ds-surface-primary) transparent transparent transparent;
}
.ds-chart-tooltip-arrow-top::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -8px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 8px 0 8px;
  border-color: var(--ds-border-primary) transparent transparent transparent;
}
.ds-chart-tooltip-arrow-bottom {
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent var(--ds-surface-primary) transparent;
}
.ds-chart-tooltip-arrow-bottom::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: -8px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent var(--ds-border-primary) transparent;
}
.ds-chart-tooltip-arrow-left {
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 8px 0 8px 8px;
  border-color: transparent transparent transparent var(--ds-surface-primary);
}
.ds-chart-tooltip-arrow-left::before {
  content: '';
  position: absolute;
  left: -1px;
  top: -8px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 8px;
  border-color: transparent transparent transparent var(--ds-border-primary);
}
.ds-chart-tooltip-arrow-right {
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 8px 8px 8px 0;
  border-color: transparent var(--ds-surface-primary) transparent transparent;
}
.ds-chart-tooltip-arrow-right::before {
  content: '';
  position: absolute;
  right: -1px;
  top: -8px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 8px 8px 0;
  border-color: transparent var(--ds-border-primary) transparent transparent;
}
.ds-chart-tooltip-header {
  margin-bottom: var(--ds-spacing-s);
  padding-bottom: var(--ds-spacing-s);
  border-bottom: 1px solid var(--ds-border-primary);
}
.ds-chart-tooltip-title {
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-spacing-2xs) 0;
}
.ds-chart-tooltip-subtitle {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  color: var(--ds-text-secondary);
  margin: 0;
}
.ds-chart-tooltip-body {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-xs);
}
.ds-chart-tooltip-item {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  min-width: 0;
}
.ds-chart-tooltip-item-color {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--ds-border-radius-2xs);
  flex-shrink: 0;
}
.ds-chart-tooltip-item-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.ds-chart-tooltip-item-label {
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 500;
  color: var(--ds-text-primary);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-chart-tooltip-item-value {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  margin: 0;
  font-weight: 600;
}
.ds-chart-tooltip-item-percentage {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  color: var(--ds-text-tertiary);
  margin: 0;
  margin-left: auto;
  flex-shrink: 0;
}
.ds-chart-tooltip-footer {
  margin-top: var(--ds-spacing-s);
  padding-top: var(--ds-spacing-s);
  border-top: 1px solid var(--ds-border-primary);
}
.ds-chart-tooltip-footer-text {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  color: var(--ds-text-secondary);
  margin: 0;
}
/* Chart tooltip variants */
.ds-chart-tooltip-compact {
  padding: var(--ds-spacing-s);
  max-width: 250px;
}
.ds-chart-tooltip-compact .ds-chart-tooltip-body {
  gap: var(--ds-spacing-2xs);
}
.ds-chart-tooltip-rich {
  max-width: 400px;
}
.ds-chart-tooltip-rich .ds-chart-tooltip-item {
  padding: var(--ds-spacing-2xs) 0;
}
.ds-chart-tooltip-multiline .ds-chart-tooltip-item-label,
.ds-chart-tooltip-multiline .ds-chart-tooltip-item-value {
  white-space: normal;
  word-wrap: break-word;
}
/* Chart tooltip with comparison */
.ds-chart-tooltip-comparison {
  max-width: 400px;
}
.ds-chart-tooltip-comparison .ds-chart-tooltip-item {
  justify-content: space-between;
}
.ds-chart-tooltip-comparison .ds-chart-tooltip-item-change {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  font-weight: 600;
  margin-left: var(--ds-spacing-s);
}
.ds-chart-tooltip-comparison .ds-chart-tooltip-item-change-positive {
  color: var(--ds-status-success);
}
.ds-chart-tooltip-comparison .ds-chart-tooltip-item-change-negative {
  color: var(--ds-status-error);
}
/* Chart tooltip with sparkline */
.ds-chart-tooltip-with-sparkline {
  max-width: 350px;
}
.ds-chart-tooltip-sparkline {
  height: 40px;
  margin: var(--ds-spacing-s) 0;
  border-radius: var(--ds-border-radius-2xs);
  background-color: var(--ds-surface-secondary);
}
/* Chart tooltip loading */
.ds-chart-tooltip-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
}
.ds-chart-tooltip-spinner {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--ds-interactive-primary);
}
/* Chart tooltip keyboard navigation */
.ds-chart-tooltip-focusable {
  pointer-events: auto;
}
.ds-chart-tooltip-focusable:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ds-chart-tooltip {
    max-width: 250px;
    padding: var(--ds-spacing-s);
  }

  .ds-chart-tooltip-rich {
    max-width: 300px;
  }

  .ds-chart-tooltip-comparison {
    max-width: 300px;
  }
}
@media (max-width: 480px) {
  .ds-chart-tooltip {
    position: fixed !important;
    top: auto !important;
    left: var(--ds-spacing-s) !important;
    right: var(--ds-spacing-s) !important;
    bottom: var(--ds-spacing-s) !important;
    max-width: none;
    transform: none !important;
  }

  .ds-chart-tooltip-arrow {
    display: none;
  }

  .ds-chart-tooltip-compact,
  .ds-chart-tooltip-rich,
  .ds-chart-tooltip-comparison {
    max-width: none;
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-chart-tooltip {
    border-width: 2px;
  }

  .ds-chart-tooltip-arrow-top::before,
  .ds-chart-tooltip-arrow-bottom::before,
  .ds-chart-tooltip-arrow-left::before,
  .ds-chart-tooltip-arrow-right::before {
    border-width: 9px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-chart-tooltip {
    transition: none;
  }
}
/* Print styles */
@media print {
  .ds-chart-tooltip {
    display: none !important;
  }
}
/* DS: checkbox.css - Checkbox component */
/* layer: components */
.ds-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
  cursor: pointer;
  position: relative;
  font-size: var(--ds-typography-desktop-body-font-size);
  line-height: 1.5;
  color: var(--ds-text-primary);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.ds-checkbox-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
.ds-checkbox-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-2xs);
  background-color: var(--ds-surface-primary);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  flex-shrink: 0;
}
.ds-checkbox-input:focus-visible ~ .ds-checkbox-control {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-checkbox-input:hover ~ .ds-checkbox-control {
  border-color: var(--ds-border-secondary);
}
.ds-checkbox-input:checked ~ .ds-checkbox-control {
  background-color: var(--ds-interactive-primary);
  border-color: var(--ds-interactive-primary);
}
.ds-checkbox-input:checked:hover ~ .ds-checkbox-control {
  background-color: var(--ds-interactive-primary-hover);
  border-color: var(--ds-interactive-primary-hover);
}
.ds-checkbox-input:checked:active ~ .ds-checkbox-control {
  background-color: var(--ds-interactive-primary-active);
}
.ds-checkbox-input:disabled ~ .ds-checkbox-control {
  background-color: var(--ds-surface-tertiary);
  border-color: var(--ds-border-primary);
  opacity: var(--ds-opacity-disabled);
  cursor: not-allowed;
}
.ds-checkbox-input:disabled ~ .ds-checkbox-label {
  color: var(--ds-text-disabled);
  cursor: not-allowed;
}
.ds-checkbox-input:disabled:checked ~ .ds-checkbox-control {
  background-color: var(--ds-surface-tertiary);
  border-color: var(--ds-border-primary);
}
/* Checkmark */
.ds-checkbox-control::after {
  content: '';
  position: absolute;
  width: 0.5rem;
  height: 0.375rem;
  border: 2px solid var(--ds-text-inverse);
  border-top: none;
  border-right: none;
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  transition: transform var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  opacity: 1;
}
.ds-checkbox-input:checked ~ .ds-checkbox-control::after {
  transform: rotate(-45deg) scale(1);
}
/* Indeterminate state */
.ds-checkbox-input:indeterminate ~ .ds-checkbox-control::after {
  content: '';
  width: 0.625rem;
  height: 2px;
  border: none;
  background-color: var(--ds-text-inverse);
  transform: rotate(0) scale(1);
  transform-origin: center;
  border-radius: 1px;
}
/* Label */
.ds-checkbox-label {
  cursor: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
/* Checkbox sizes */
.ds-checkbox-sm {
  font-size: var(--ds-typography-desktop-small-font-size);
  gap: var(--ds-spacing-2xs);
}
.ds-checkbox-sm .ds-checkbox-control {
  width: 1rem;
  height: 1rem;
}
.ds-checkbox-sm .ds-checkbox-control::after {
  width: 0.375rem;
  height: 0.25rem;
}
.ds-checkbox-lg {
  font-size: var(--ds-typography-desktop-h4-font-size);
  gap: var(--ds-spacing-s);
}
.ds-checkbox-lg .ds-checkbox-control {
  width: 1.5rem;
  height: 1.5rem;
}
.ds-checkbox-lg .ds-checkbox-control::after {
  width: 0.625rem;
  height: 0.5rem;
}
/* Checkbox variants */
.ds-checkbox-error .ds-checkbox-control {
  border-color: var(--ds-status-error);
}
.ds-checkbox-error .ds-checkbox-input:focus-visible ~ .ds-checkbox-control {
  outline-color: var(--ds-status-error);
}
.ds-checkbox-error .ds-checkbox-input:checked ~ .ds-checkbox-control {
  background-color: var(--ds-status-error);
  border-color: var(--ds-status-error);
}
/* Checkbox group */
.ds-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-s);
}
.ds-checkbox-group-horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--ds-spacing-m);
}
/* Checkbox with description */
.ds-checkbox-with-description {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-spacing-2xs);
}
.ds-checkbox-description {
  margin: 0;
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  line-height: 1.4;
  padding-left: calc(1.25rem + var(--ds-spacing-xs));
}
.ds-checkbox-input:disabled ~ .ds-checkbox-description {
  color: var(--ds-text-disabled);
}
/* Checkbox card style */
.ds-checkbox-card {
  padding: var(--ds-spacing-m);
  border: 2px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  background-color: var(--ds-surface-primary);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  cursor: pointer;
  width: 100%;
}
.ds-checkbox-card:hover {
  border-color: var(--ds-border-secondary);
}
.ds-checkbox-card.ds-checkbox-input:checked ~ .ds-checkbox-card {
  border-color: var(--ds-interactive-primary);
  background-color: var(--ds-interactive-primary-bg);
}
.ds-checkbox-card .ds-checkbox {
  margin: 0;
  cursor: inherit;
}
.ds-checkbox-card .ds-checkbox-control {
  order: -1;
}
/* Responsive adjustments */
@media (max-width: 640px) {
  .ds-checkbox-group-horizontal {
    flex-direction: column;
    gap: var(--ds-spacing-s);
  }

  .ds-checkbox-with-description .ds-checkbox-description {
    padding-left: calc(1rem + var(--ds-spacing-2xs));
  }

  .ds-checkbox-sm .ds-checkbox-description {
    padding-left: calc(0.875rem + var(--ds-spacing-2xs));
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-checkbox-control {
    border-width: 3px;
  }

  .ds-checkbox-input:checked ~ .ds-checkbox-control {
    border-color: var(--ds-interactive-primary);
    background-color: var(--ds-interactive-primary);
  }

  .ds-checkbox-error .ds-checkbox-control {
    border-color: var(--ds-status-error);
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-checkbox-control,
  .ds-checkbox-control::after {
    transition: none;
  }
}
/* Print styles */
@media print {
  .ds-checkbox {
    color: #000;
  }

  .ds-checkbox-control {
    border: 2px solid #000;
    background: #fff;
  }

  .ds-checkbox-input:checked ~ .ds-checkbox-control {
    background: #000;
  }

  .ds-checkbox-input:checked ~ .ds-checkbox-control::after {
    border-color: #fff;
  }
}
/* DS: coachmarks/coachmarks.css - Coachmarks component */
/* layer: components */
.ds-coachmarks {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--ds-z-index-modal);
  pointer-events: none;
}
.ds-coachmark {
  position: absolute;
  z-index: var(--ds-z-index-modal);
  pointer-events: auto;
  max-width: 320px;
}
.ds-coachmark-content {
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  box-shadow: var(--ds-shadow-xl);
  padding: var(--ds-spacing-l);
  position: relative;
}
.ds-coachmark-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}
.ds-coachmark-arrow-top {
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 10px 10px 0 10px;
  border-color: var(--ds-surface-primary) transparent transparent transparent;
}
.ds-coachmark-arrow-top::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: var(--ds-border-primary) transparent transparent transparent;
}
.ds-coachmark-arrow-bottom {
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent var(--ds-surface-primary) transparent;
}
.ds-coachmark-arrow-bottom::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent var(--ds-border-primary) transparent;
}
.ds-coachmark-arrow-left {
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent var(--ds-surface-primary);
}
.ds-coachmark-arrow-left::before {
  content: '';
  position: absolute;
  left: -1px;
  top: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent var(--ds-border-primary);
}
.ds-coachmark-arrow-right {
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 10px 10px 10px 0;
  border-color: transparent var(--ds-surface-primary) transparent transparent;
}
.ds-coachmark-arrow-right::before {
  content: '';
  position: absolute;
  right: -1px;
  top: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 10px 0;
  border-color: transparent var(--ds-border-primary) transparent transparent;
}
.ds-coachmark-header {
  margin-bottom: var(--ds-spacing-m);
}
.ds-coachmark-title {
  font-size: var(--ds-typography-desktop-h4-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-spacing-xs) 0;
}
.ds-coachmark-description {
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-secondary);
  margin: 0;
  line-height: 1.5;
}
.ds-coachmark-media {
  margin: var(--ds-spacing-m) 0;
  border-radius: var(--ds-border-radius-m);
  overflow: hidden;
}
.ds-coachmark-image {
  width: 100%;
  height: auto;
  display: block;
}
.ds-coachmark-video {
  width: 100%;
  height: auto;
  display: block;
}
.ds-coachmark-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--ds-spacing-l);
  gap: var(--ds-spacing-s);
}
.ds-coachmark-prev,
.ds-coachmark-next,
.ds-coachmark-finish {
  padding: var(--ds-spacing-xs) var(--ds-spacing-m);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-2xs);
  background-color: var(--ds-surface-primary);
  color: var(--ds-text-primary);
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-coachmark-prev:hover,
.ds-coachmark-next:hover,
.ds-coachmark-finish:hover {
  background-color: var(--ds-surface-secondary);
  border-color: var(--ds-border-secondary);
}
.ds-coachmark-prev:focus-visible,
.ds-coachmark-next:focus-visible,
.ds-coachmark-finish:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-coachmark-prev:disabled,
.ds-coachmark-next:disabled {
  opacity: var(--ds-opacity-disabled);
  cursor: not-allowed;
}
.ds-coachmark-prev:disabled:hover,
.ds-coachmark-next:disabled:hover {
  background-color: var(--ds-surface-primary);
  border-color: var(--ds-border-primary);
}
.ds-coachmark-next {
  background-color: var(--ds-interactive-primary);
  border-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
}
.ds-coachmark-next:hover {
  background-color: var(--ds-interactive-primary-hover);
  border-color: var(--ds-interactive-primary-hover);
}
.ds-coachmark-finish {
  background-color: var(--ds-status-success);
  border-color: var(--ds-status-success);
  color: var(--ds-text-inverse);
}
.ds-coachmark-finish:hover {
  background-color: var(--ds-status-success-hover);
  border-color: var(--ds-status-success-hover);
}
.ds-coachmark-progress {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
  margin-bottom: var(--ds-spacing-m);
}
.ds-coachmark-dots {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-2xs);
}
.ds-coachmark-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--ds-surface-tertiary);
  transition: background-color var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-coachmark-dot-active {
  background-color: var(--ds-interactive-primary);
}
.ds-coachmark-counter {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  font-weight: 500;
}
.ds-coachmark-close {
  position: absolute;
  top: var(--ds-spacing-s);
  right: var(--ds-spacing-s);
  width: 1.5rem;
  height: 1.5rem;
  background: none;
  border: none;
  border-radius: var(--ds-border-radius-2xs);
  cursor: pointer;
  color: var(--ds-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-coachmark-close:hover {
  background-color: var(--ds-surface-secondary);
  color: var(--ds-text-primary);
}
.ds-coachmark-close:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-coachmark-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--ds-surface-overlay);
  z-index: var(--ds-z-index-modal-backdrop);
  pointer-events: auto;
}
.ds-coachmark-spotlight {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: var(--ds-border-radius-m);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  z-index: var(--ds-z-index-modal-backdrop);
}
.ds-coachmark-beacon {
  position: absolute;
  width: 24px;
  height: 24px;
  background-color: var(--ds-interactive-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: var(--ds-z-index-modal);
  animation: coachmarkBeaconPulse 2s ease-in-out infinite;
}
@keyframes coachmarkBeaconPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
}
.ds-coachmark-beacon-icon {
  width: 12px;
  height: 12px;
  color: var(--ds-text-inverse);
}
.ds-coachmark-entering {
  animation: coachmarkFadeIn 0.3s ease-out;
}
@keyframes coachmarkFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.ds-coachmark-exiting {
  animation: coachmarkFadeOut 0.2s ease-in;
}
@keyframes coachmarkFadeOut {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.9) translateY(-10px);
  }
}
.ds-coachmark-skip {
  position: absolute;
  top: var(--ds-spacing-s);
  right: 3rem;
  background: none;
  border: none;
  color: var(--ds-text-secondary);
  font-size: var(--ds-typography-desktop-small-font-size);
  cursor: pointer;
  padding: var(--ds-spacing-2xs);
  border-radius: var(--ds-border-radius-2xs);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-coachmark-skip:hover {
  background-color: var(--ds-surface-secondary);
  color: var(--ds-text-primary);
}
.ds-coachmark-skip:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
@media (max-width: 768px) {
  .ds-coachmark {
    position: fixed !important;
    top: auto !important;
    left: var(--ds-spacing-m) !important;
    right: var(--ds-spacing-m) !important;
    bottom: var(--ds-spacing-m) !important;
    max-width: none;
    transform: none !important;
  }

  .ds-coachmark-content {
    margin: 0;
  }

  .ds-coachmark-arrow {
    display: none;
  }

  .ds-coachmark-actions {
    flex-direction: column;
    align-items: stretch;
  }
}
@media (max-width: 480px) {
  .ds-coachmark {
    left: var(--ds-spacing-s) !important;
    right: var(--ds-spacing-s) !important;
    bottom: var(--ds-spacing-s) !important;
  }

  .ds-coachmark-content {
    padding: var(--ds-spacing-m);
  }

  .ds-coachmark-title {
    font-size: var(--ds-typography-desktop-h3-font-size);
  }
}
@media (prefers-contrast: high) {
  .ds-coachmark-content {
    border-width: 2px;
  }

  .ds-coachmark-arrow-top::before,
  .ds-coachmark-arrow-bottom::before,
  .ds-coachmark-arrow-left::before,
  .ds-coachmark-arrow-right::before {
    border-width: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ds-coachmark-beacon {
    animation: none;
  }

  .ds-coachmark-entering,
  .ds-coachmark-exiting {
    animation: none;
  }

  .ds-coachmark-prev,
  .ds-coachmark-next,
  .ds-coachmark-finish,
  .ds-coachmark-close,
  .ds-coachmark-skip {
    transition: none;
  }

  .ds-coachmark-dot {
    transition: none;
  }

  @keyframes coachmarkBeaconPulse,
  @keyframes coachmarkFadeIn,
  @keyframes coachmarkFadeOut {
    animation: none;
  }
}
@media print {
  .ds-coachmarks,
  .ds-coachmark-overlay,
  .ds-coachmark-spotlight,
  .ds-coachmark-beacon {
    display: none !important;
  }
}
/* DS: collapse.css - Collapse component */
/* layer: components */
.ds-collapse {
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  background-color: var(--ds-surface-primary);
  overflow: hidden;
}
.ds-collapse-item {
  border-bottom: 1px solid var(--ds-border-primary);
}
.ds-collapse-item:last-child {
  border-bottom: none;
}
/* Collapse header */
.ds-collapse-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ds-spacing-m);
  background-color: var(--ds-surface-secondary);
  cursor: pointer;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.ds-collapse-header:hover {
  background-color: var(--ds-surface-tertiary);
}
.ds-collapse-header:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: -2px;
}
.ds-collapse-header:active {
  background-color: var(--ds-surface-primary);
}
/* Collapse header content */
.ds-collapse-title {
  font-size: var(--ds-typography-desktop-body-font-size);
  font-weight: 500;
  color: var(--ds-text-primary);
  margin: 0;
  flex: 1;
}
.ds-collapse-description {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  margin: var(--ds-spacing-2xs) 0 0 0;
}
.ds-collapse-extra {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
  margin-left: var(--ds-spacing-s);
}
/* Collapse expand icon */
.ds-collapse-expand-icon {
  width: 1rem;
  height: 1rem;
  color: var(--ds-text-secondary);
  transition: transform var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  flex-shrink: 0;
}
.ds-collapse-item-active .ds-collapse-expand-icon {
  transform: rotate(90deg);
}
/* Collapse content */
.ds-collapse-content {
  overflow: hidden;
  transition: all var(--ds-motion-duration-slow) var(--ds-motion-easing-standard);
}
.ds-collapse-content-hidden {
  max-height: 0;
  opacity: 0;
}
.ds-collapse-content-visible {
  max-height: 1000px;
  opacity: 1;
}
.ds-collapse-body {
  padding: var(--ds-spacing-m);
  color: var(--ds-text-primary);
  line-height: 1.6;
}
/* Collapse states */
.ds-collapse-item-active .ds-collapse-header {
  background-color: var(--ds-interactive-primary-bg);
  border-bottom-color: var(--ds-interactive-primary);
}
.ds-collapse-item-active .ds-collapse-title {
  color: var(--ds-interactive-primary);
  font-weight: 600;
}
.ds-collapse-item-disabled .ds-collapse-header {
  background-color: var(--ds-surface-disabled);
  cursor: not-allowed;
  opacity: var(--ds-opacity-disabled);
}
.ds-collapse-item-disabled .ds-collapse-title,
.ds-collapse-item-disabled .ds-collapse-description {
  color: var(--ds-text-disabled);
}
.ds-collapse-item-disabled .ds-collapse-expand-icon {
  color: var(--ds-text-disabled);
}
/* Collapse variants */
.ds-collapse-ghost .ds-collapse {
  border: none;
  background-color: transparent;
}
.ds-collapse-ghost .ds-collapse-item {
  border-bottom: 1px solid var(--ds-border-secondary);
}
.ds-collapse-ghost .ds-collapse-header {
  background-color: transparent;
  padding: var(--ds-spacing-s) 0;
}
.ds-collapse-ghost .ds-collapse-header:hover {
  background-color: var(--ds-surface-secondary);
}
.ds-collapse-ghost .ds-collapse-body {
  padding: var(--ds-spacing-s) 0 var(--ds-spacing-m) 0;
}
.ds-collapse-bordered .ds-collapse {
  border-width: 2px;
}
.ds-collapse-accordion .ds-collapse-item-active + .ds-collapse-item {
  border-top: 1px solid var(--ds-interactive-primary);
}
/* Collapse sizes */
.ds-collapse-compact .ds-collapse-header {
  padding: var(--ds-spacing-s);
}
.ds-collapse-compact .ds-collapse-body {
  padding: var(--ds-spacing-s);
}
.ds-collapse-spacious .ds-collapse-header {
  padding: var(--ds-spacing-l);
}
.ds-collapse-spacious .ds-collapse-body {
  padding: var(--ds-spacing-l);
}
/* Collapse with icon */
.ds-collapse-icon-left .ds-collapse-header {
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.ds-collapse-icon-left .ds-collapse-expand-icon {
  margin-right: var(--ds-spacing-s);
  margin-left: 0;
}
/* Collapse group */
.ds-collapse-group {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-xs);
}
.ds-collapse-group .ds-collapse {
  border-radius: 0;
}
.ds-collapse-group .ds-collapse:first-child {
  border-top-left-radius: var(--ds-border-radius-m);
  border-top-right-radius: var(--ds-border-radius-m);
}
.ds-collapse-group .ds-collapse:last-child {
  border-bottom-left-radius: var(--ds-border-radius-m);
  border-bottom-right-radius: var(--ds-border-radius-m);
}
/* Collapse with loading */
.ds-collapse-loading .ds-collapse-header {
  pointer-events: none;
}
.ds-collapse-loading .ds-collapse-expand-icon {
  display: none;
}
.ds-collapse-loading .ds-collapse-spinner {
  width: 1rem;
  height: 1rem;
  color: var(--ds-interactive-primary);
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ds-collapse-header {
    padding: var(--ds-spacing-s);
  }

  .ds-collapse-body {
    padding: var(--ds-spacing-s);
  }

  .ds-collapse-spacious .ds-collapse-header,
  .ds-collapse-spacious .ds-collapse-body {
    padding: var(--ds-spacing-m);
  }
}
@media (max-width: 480px) {
  .ds-collapse-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-spacing-xs);
  }

  .ds-collapse-extra {
    margin-left: 0;
    margin-top: var(--ds-spacing-xs);
    width: 100%;
    justify-content: space-between;
  }

  .ds-collapse-icon-left .ds-collapse-header {
    flex-direction: column;
  }

  .ds-collapse-icon-left .ds-collapse-expand-icon {
    margin-right: 0;
    align-self: flex-end;
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-collapse {
    border-width: 2px;
  }

  .ds-collapse-item {
    border-bottom-width: 2px;
  }

  .ds-collapse-bordered .ds-collapse {
    border-width: 3px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-collapse-header {
    transition: none;
  }

  .ds-collapse-content {
    transition: none;
  }

  .ds-collapse-expand-icon {
    transition: none;
  }
}
/* Native details/summary collapse (global utility) */
details.ds-collapse-native > summary::-webkit-details-marker { display: none; }
details.ds-collapse-native > summary { list-style: none; cursor: pointer; position: relative; }
/* If summary also styled as panel header — reserve place for icon */
details.ds-collapse-native > summary.ds-panel-header { padding-right: calc(var(--ds-spacing-m) + 1.25rem); }
details.ds-collapse-native > summary::after {
  content: '';
  position: absolute;
  right: var(--ds-spacing-m);
  top: 50%;
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%) rotate(0deg);
  transition: transform var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8.12 9.29L12 13.17l3.88-3.88a1 1 0 1 1 1.41 1.41l-4.59 4.59a1 1 0 0 1-1.41 0L6.71 10.7a1 1 0 0 1 1.41-1.41z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8.12 9.29L12 13.17l3.88-3.88a1 1 0 1 1 1.41 1.41l-4.59 4.59a1 1 0 0 1-1.41 0L6.71 10.7a1 1 0 0 1 1.41-1.41z'/%3E%3C/svg%3E") center / contain no-repeat;
}
details.ds-collapse-native[open] > summary::after { transform: translateY(-50%) rotate(180deg); }
/* Print styles */
@media print {
  .ds-collapse {
    border: 1px solid #000;
    page-break-inside: avoid;
  }

  .ds-collapse-content-hidden {
    display: none !important;
  }

  .ds-collapse-content-visible {
    max-height: none !important;
  }

  .ds-collapse-expand-icon {
    display: none;
  }
}
/* DS: cookie-consent/cookie-consent.css - Cookie consent component */
/* layer: components */
.ds-cookie-consent {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--ds-z-index-modal);
  background-color: var(--ds-surface-primary);
  border-top: 1px solid var(--ds-border-primary);
  box-shadow: var(--ds-shadow-lg);
  padding: var(--ds-spacing-l);
  transform: translateY(100%);
  transition: transform var(--ds-motion-duration-slow) var(--ds-motion-easing-standard);
}
.ds-cookie-consent-visible {
  transform: translateY(0);
}
.ds-cookie-consent-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-spacing-xl);
}
.ds-cookie-consent-text {
  flex: 1;
  min-width: 0;
}
.ds-cookie-consent-title {
  font-size: var(--ds-typography-desktop-h4-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-spacing-s) 0;
}
.ds-cookie-consent-description {
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-secondary);
  margin: 0;
  line-height: 1.5;
}
.ds-cookie-consent-link {
  color: var(--ds-interactive-primary);
  text-decoration: underline;
  transition: color var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-cookie-consent-link:hover {
  color: var(--ds-interactive-primary-hover);
  text-decoration: none;
}
.ds-cookie-consent-settings {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-m);
  margin-top: var(--ds-spacing-m);
}
.ds-cookie-consent-setting {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-spacing-s);
}
.ds-cookie-consent-setting-checkbox {
  margin-top: var(--ds-spacing-2xs);
  flex-shrink: 0;
}
.ds-cookie-consent-setting-content {
  flex: 1;
  min-width: 0;
}
.ds-cookie-consent-setting-title {
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-spacing-2xs) 0;
}
.ds-cookie-consent-setting-description {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  margin: 0;
  line-height: 1.4;
}
.ds-cookie-consent-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  flex-shrink: 0;
}
.ds-cookie-consent-accept-all,
.ds-cookie-consent-accept-essential,
.ds-cookie-consent-customize,
.ds-cookie-consent-reject {
  padding: var(--ds-spacing-s) var(--ds-spacing-l);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-2xs);
  background-color: var(--ds-surface-primary);
  color: var(--ds-text-primary);
  font-size: var(--ds-typography-desktop-body-font-size);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-cookie-consent-accept-all:hover,
.ds-cookie-consent-accept-essential:hover,
.ds-cookie-consent-customize:hover,
.ds-cookie-consent-reject:hover {
  background-color: var(--ds-surface-secondary);
  border-color: var(--ds-border-secondary);
}
.ds-cookie-consent-accept-all:focus-visible,
.ds-cookie-consent-accept-essential:focus-visible,
.ds-cookie-consent-customize:focus-visible,
.ds-cookie-consent-reject:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-cookie-consent-accept-all:active,
.ds-cookie-consent-accept-essential:active,
.ds-cookie-consent-customize:active,
.ds-cookie-consent-reject:active {
  transform: scale(0.95);
}
.ds-cookie-consent-accept-all:disabled,
.ds-cookie-consent-accept-essential:disabled,
.ds-cookie-consent-customize:disabled,
.ds-cookie-consent-reject:disabled {
  opacity: var(--ds-opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.ds-cookie-consent-accept-all:disabled:hover,
.ds-cookie-consent-accept-essential:disabled:hover,
.ds-cookie-consent-customize:disabled:hover,
.ds-cookie-consent-reject:disabled:hover {
  background-color: var(--ds-surface-primary);
  border-color: var(--ds-border-primary);
  transform: none;
}
.ds-cookie-consent-accept-all {
  background-color: var(--ds-interactive-primary);
  border-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
}
.ds-cookie-consent-accept-all:hover {
  background-color: var(--ds-interactive-primary-hover);
  border-color: var(--ds-interactive-primary-hover);
}
.ds-cookie-consent-reject {
  background-color: var(--ds-status-error);
  border-color: var(--ds-status-error);
  color: var(--ds-text-inverse);
}
.ds-cookie-consent-reject:hover {
  background-color: var(--ds-status-error-hover);
  border-color: var(--ds-status-error-hover);
}
/* Cookie consent variants */
.ds-cookie-consent-banner {
  position: fixed;
  top: 0;
  bottom: auto;
  border-top: none;
  border-bottom: 1px solid var(--ds-border-primary);
  transform: translateY(-100%);
}
.ds-cookie-consent-banner-visible {
  transform: translateY(0);
}
.ds-cookie-consent-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%) scale(0.9);
  max-width: 500px;
  width: 90vw;
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-l);
  box-shadow: var(--ds-shadow-2xl);
}
.ds-cookie-consent-modal-visible {
  transform: translate(-50%, -50%) scale(1);
}
.ds-cookie-consent-modal .ds-cookie-consent-content {
  flex-direction: column;
  gap: var(--ds-spacing-l);
}
.ds-cookie-consent-modal .ds-cookie-consent-actions {
  justify-content: center;
  flex-wrap: wrap;
}
.ds-cookie-consent-flyout {
  position: fixed;
  top: auto;
  bottom: var(--ds-spacing-l);
  left: auto;
  right: var(--ds-spacing-l);
  width: 400px;
  max-width: calc(100vw - 2 * var(--ds-spacing-l));
  transform: translateX(100%);
  border-radius: var(--ds-border-radius-l);
}
.ds-cookie-consent-flyout-visible {
  transform: translateX(0);
}
.ds-cookie-consent-flyout .ds-cookie-consent-content {
  flex-direction: column;
  gap: var(--ds-spacing-m);
}
.ds-cookie-consent-flyout .ds-cookie-consent-actions {
  justify-content: space-between;
}
/* Cookie consent with categories */
.ds-cookie-consent-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--ds-spacing-m);
  margin-top: var(--ds-spacing-m);
}
.ds-cookie-consent-category {
  padding: var(--ds-spacing-m);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  background-color: var(--ds-surface-secondary);
}
.ds-cookie-consent-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ds-spacing-s);
}
.ds-cookie-consent-category-title {
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0;
}
.ds-cookie-consent-category-required {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  color: var(--ds-status-warning);
  font-weight: 500;
  margin: 0;
}
.ds-cookie-consent-category-description {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  margin: 0;
  line-height: 1.4;
}
/* Cookie consent loading */
.ds-cookie-consent-loading .ds-cookie-consent-actions {
  pointer-events: none;
  opacity: 0.7;
}
.ds-cookie-consent-spinner {
  width: 1rem;
  height: 1rem;
  color: var(--ds-interactive-primary);
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ds-cookie-consent {
    padding: var(--ds-spacing-m);
  }

  .ds-cookie-consent-content {
    flex-direction: column;
    gap: var(--ds-spacing-l);
  }

  .ds-cookie-consent-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ds-spacing-s);
  }

  .ds-cookie-consent-modal {
    width: 95vw;
    max-width: none;
  }

  .ds-cookie-consent-flyout {
    left: var(--ds-spacing-l);
    right: var(--ds-spacing-l);
    width: auto;
  }

  .ds-cookie-consent-categories {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .ds-cookie-consent {
    padding: var(--ds-spacing-s);
  }

  .ds-cookie-consent-content {
    gap: var(--ds-spacing-m);
  }

  .ds-cookie-consent-title {
    font-size: var(--ds-typography-desktop-h3-font-size);
  }

  .ds-cookie-consent-settings {
    gap: var(--ds-spacing-s);
  }

  .ds-cookie-consent-modal {
    margin: var(--ds-spacing-s);
  }

  .ds-cookie-consent-flyout {
    bottom: var(--ds-spacing-s);
    left: var(--ds-spacing-s);
    right: var(--ds-spacing-s);
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-cookie-consent {
    border-width: 2px;
  }

  .ds-cookie-consent-modal,
  .ds-cookie-consent-flyout {
    border-width: 2px;
  }

  .ds-cookie-consent-category {
    border-width: 2px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-cookie-consent,
  .ds-cookie-consent-banner,
  .ds-cookie-consent-modal,
  .ds-cookie-consent-flyout {
    transition: none;
  }

  .ds-cookie-consent-accept-all,
  .ds-cookie-consent-accept-essential,
  .ds-cookie-consent-customize,
  .ds-cookie-consent-reject {
    transition: none;
  }
}
/* Print styles */
@media print {
  .ds-cookie-consent {
    display: none !important;
  }
}
/* DS: datepicker.css - Date picker component */
/* layer: components */
.ds-datepicker {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
}
.ds-datepicker-input {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-primary);
  cursor: pointer;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  min-width: 200px;
}
.ds-datepicker-input:hover {
  border-color: var(--ds-border-secondary);
}
.ds-datepicker-input:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
  border-color: var(--ds-interactive-primary);
}
.ds-datepicker-input:disabled {
  background-color: var(--ds-surface-disabled);
  color: var(--ds-text-disabled);
  cursor: not-allowed;
  opacity: var(--ds-opacity-disabled);
}
.ds-datepicker-input:disabled:hover {
  border-color: var(--ds-border-primary);
}
.ds-datepicker-value {
  flex: 1;
  text-align: left;
}
.ds-datepicker-placeholder {
  color: var(--ds-text-secondary);
}
.ds-datepicker-icon {
  width: 1rem;
  height: 1rem;
  color: var(--ds-text-secondary);
  flex-shrink: 0;
  transition: transform var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-datepicker-open .ds-datepicker-icon {
  transform: rotate(180deg);
}
/* Datepicker states */
.ds-datepicker-error .ds-datepicker-input {
  border-color: var(--ds-status-error);
}
.ds-datepicker-error .ds-datepicker-input:focus-visible {
  outline-color: var(--ds-status-error);
}
/* Datepicker dropdown */
.ds-datepicker-dropdown {
  position: absolute;
  top: calc(100% + var(--ds-spacing-xs));
  left: 0;
  z-index: var(--ds-z-index-dropdown);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  box-shadow: var(--ds-shadow-lg);
  min-width: 280px;
  max-width: 320px;
  animation: datepickerFadeIn 0.2s ease-out;
}
.ds-datepicker-dropdown-hidden {
  display: none;
}
@keyframes datepickerFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Datepicker with calendar */
.ds-datepicker-with-calendar .ds-datepicker-dropdown {
  padding: 0;
}
.ds-datepicker-calendar {
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  width: 100%;
}
/* Datepicker presets */
.ds-datepicker-presets {
  padding: var(--ds-spacing-m);
  border-bottom: 1px solid var(--ds-border-primary);
}
.ds-datepicker-preset {
  display: block;
  width: 100%;
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  background: none;
  border: none;
  border-radius: var(--ds-border-radius-2xs);
  text-align: left;
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-primary);
  cursor: pointer;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-datepicker-preset:hover {
  background-color: var(--ds-surface-secondary);
}
.ds-datepicker-preset:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: -2px;
}
.ds-datepicker-preset-selected {
  background-color: var(--ds-interactive-primary-bg);
  color: var(--ds-interactive-primary);
  font-weight: 500;
}
/* Datepicker quick actions */
.ds-datepicker-actions {
  display: flex;
  gap: var(--ds-spacing-xs);
  padding: var(--ds-spacing-m);
  border-top: 1px solid var(--ds-border-primary);
  background-color: var(--ds-surface-secondary);
}
.ds-datepicker-action {
  flex: 1;
  padding: var(--ds-spacing-xs) var(--ds-spacing-m);
  background: none;
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-2xs);
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 500;
  color: var(--ds-text-primary);
  cursor: pointer;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-datepicker-action:hover {
  background-color: var(--ds-surface-primary);
  border-color: var(--ds-border-secondary);
}
.ds-datepicker-action:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-datepicker-action:disabled {
  opacity: var(--ds-opacity-disabled);
  cursor: not-allowed;
}
.ds-datepicker-action:disabled:hover {
  background-color: transparent;
  border-color: var(--ds-border-primary);
}
/* Datepicker sizes */
.ds-datepicker-sm .ds-datepicker-input {
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  font-size: var(--ds-typography-desktop-small-font-size);
  min-width: 160px;
}
.ds-datepicker-sm .ds-datepicker-dropdown {
  min-width: 240px;
}
.ds-datepicker-lg .ds-datepicker-input {
  padding: var(--ds-spacing-m);
  font-size: var(--ds-typography-desktop-h4-font-size);
  min-width: 240px;
}
.ds-datepicker-lg .ds-datepicker-dropdown {
  min-width: 320px;
}
/* Datepicker variants */
.ds-datepicker-inline {
  position: static;
}
.ds-datepicker-inline .ds-datepicker-dropdown {
  position: static;
  box-shadow: none;
  border: none;
  animation: none;
  margin-top: var(--ds-spacing-s);
}
.ds-datepicker-bordered .ds-datepicker-input {
  border-width: 2px;
}
/* Datepicker with time */
.ds-datepicker-with-time .ds-datepicker-dropdown {
  max-width: 400px;
}
/* Datepicker range */
.ds-datepicker-range {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
}
.ds-datepicker-range .ds-datepicker-input {
  flex: 1;
}
.ds-datepicker-range-separator {
  color: var(--ds-text-secondary);
  font-weight: 500;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
/* Responsive adjustments */
@media (max-width: 640px) {
  .ds-datepicker-dropdown {
    position: fixed;
    top: auto !important;
    left: var(--ds-spacing-m) !important;
    right: var(--ds-spacing-m) !important;
    bottom: var(--ds-spacing-m) !important;
    max-width: none;
    width: auto;
    animation: datepickerSlideUp 0.3s ease-out;
  }

  .ds-datepicker-range {
    flex-direction: column;
    align-items: stretch;
  }

  .ds-datepicker-range-separator {
    display: none;
  }

  @keyframes datepickerSlideUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-datepicker-input {
    border-width: 2px;
  }

  .ds-datepicker-bordered .ds-datepicker-input {
    border-width: 3px;
  }

  .ds-datepicker-action {
    border-width: 2px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-datepicker-input,
  .ds-datepicker-preset,
  .ds-datepicker-action,
  .ds-datepicker-icon {
    transition: none;
  }

  .ds-datepicker-dropdown {
    animation: none;
  }

  @media (max-width: 640px) {
    .ds-datepicker-dropdown {
      animation: none;
    }

    @keyframes datepickerSlideUp {
      animation: none;
    }
  }
}
/* Print styles */
@media print {
  .ds-datepicker-dropdown {
    display: none !important;
  }

  .ds-datepicker-input {
    border: 1px solid #000;
    background: #fff;
    color: #000;
  }

  .ds-datepicker-input:disabled {
    background: #fff;
    opacity: 1;
    color: #999;
  }
}
/* DS: daterange.css - Date range picker component */
/* layer: components */
.ds-daterange {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
}
.ds-daterange-input {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-primary);
  cursor: pointer;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  min-width: 240px;
}
.ds-daterange-input:hover {
  border-color: var(--ds-border-secondary);
}
.ds-daterange-input:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
  border-color: var(--ds-interactive-primary);
}
.ds-daterange-input:disabled {
  background-color: var(--ds-surface-disabled);
  color: var(--ds-text-disabled);
  cursor: not-allowed;
  opacity: var(--ds-opacity-disabled);
}
.ds-daterange-input:disabled:hover {
  border-color: var(--ds-border-primary);
}
.ds-daterange-start,
.ds-daterange-end {
  flex: 1;
  text-align: left;
}
.ds-daterange-separator {
  color: var(--ds-text-secondary);
  font-weight: 500;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.ds-daterange-placeholder {
  color: var(--ds-text-secondary);
}
.ds-daterange-icon {
  width: 1rem;
  height: 1rem;
  color: var(--ds-text-secondary);
  flex-shrink: 0;
  transition: transform var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-daterange-open .ds-daterange-icon {
  transform: rotate(180deg);
}
/* Daterange states */
.ds-daterange-error .ds-daterange-input {
  border-color: var(--ds-status-error);
}
.ds-daterange-error .ds-daterange-input:focus-visible {
  outline-color: var(--ds-status-error);
}
/* Daterange dropdown */
.ds-daterange-dropdown {
  position: absolute;
  top: calc(100% + var(--ds-spacing-xs));
  left: 0;
  z-index: var(--ds-z-index-dropdown);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  box-shadow: var(--ds-shadow-lg);
  min-width: 600px;
  animation: daterangeFadeIn 0.2s ease-out;
}
.ds-daterange-dropdown-hidden {
  display: none;
}
@keyframes daterangeFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Daterange header */
.ds-daterange-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ds-spacing-m);
  border-bottom: 1px solid var(--ds-border-primary);
  background-color: var(--ds-surface-secondary);
}
.ds-daterange-title {
  font-size: var(--ds-typography-desktop-h4-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0;
}
.ds-daterange-subtitle {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  margin: 0.25rem 0 0 0;
}
/* Daterange calendars */
.ds-daterange-calendars {
  display: flex;
  gap: var(--ds-spacing-m);
  padding: var(--ds-spacing-m);
}
.ds-daterange-calendar {
  flex: 1;
}
.ds-daterange-calendar:first-child .ds-calendar-title::after {
  content: ' (Start)';
  font-weight: 400;
}
.ds-daterange-calendar:last-child .ds-calendar-title::after {
  content: ' (End)';
  font-weight: 400;
}
/* Daterange presets */
.ds-daterange-presets {
  padding: var(--ds-spacing-m);
  border-right: 1px solid var(--ds-border-primary);
  min-width: 160px;
}
.ds-daterange-preset {
  display: block;
  width: 100%;
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  background: none;
  border: none;
  border-radius: var(--ds-border-radius-2xs);
  text-align: left;
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-primary);
  cursor: pointer;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  margin-bottom: var(--ds-spacing-2xs);
}
.ds-daterange-preset:hover {
  background-color: var(--ds-surface-secondary);
}
.ds-daterange-preset:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: -2px;
}
.ds-daterange-preset-selected {
  background-color: var(--ds-interactive-primary-bg);
  color: var(--ds-interactive-primary);
  font-weight: 500;
}
.ds-daterange-preset:disabled {
  color: var(--ds-text-disabled);
  cursor: not-allowed;
}
/* Daterange with presets layout */
.ds-daterange-with-presets .ds-daterange-dropdown {
  display: flex;
}
.ds-daterange-with-presets .ds-daterange-presets {
  border-right: 1px solid var(--ds-border-primary);
}
.ds-daterange-with-presets .ds-daterange-calendars {
  flex: 1;
  border-left: none;
}
/* Daterange quick selects */
.ds-daterange-quick {
  display: flex;
  gap: var(--ds-spacing-xs);
  padding: var(--ds-spacing-m);
  border-bottom: 1px solid var(--ds-border-primary);
}
.ds-daterange-quick-button {
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  background: none;
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-2xs);
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 500;
  color: var(--ds-text-primary);
  cursor: pointer;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-daterange-quick-button:hover {
  background-color: var(--ds-surface-secondary);
  border-color: var(--ds-border-secondary);
}
.ds-daterange-quick-button:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-daterange-quick-button:disabled {
  opacity: var(--ds-opacity-disabled);
  cursor: not-allowed;
}
.ds-daterange-quick-button:disabled:hover {
  background-color: transparent;
  border-color: var(--ds-border-primary);
}
/* Daterange actions */
.ds-daterange-actions {
  display: flex;
  gap: var(--ds-spacing-xs);
  padding: var(--ds-spacing-m);
  border-top: 1px solid var(--ds-border-primary);
  background-color: var(--ds-surface-secondary);
}
.ds-daterange-action {
  flex: 1;
  padding: var(--ds-spacing-xs) var(--ds-spacing-m);
  background: none;
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-2xs);
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 500;
  color: var(--ds-text-primary);
  cursor: pointer;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-daterange-action:hover {
  background-color: var(--ds-surface-primary);
  border-color: var(--ds-border-secondary);
}
.ds-daterange-action:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-daterange-action:disabled {
  opacity: var(--ds-opacity-disabled);
  cursor: not-allowed;
}
.ds-daterange-action:disabled:hover {
  background-color: transparent;
  border-color: var(--ds-border-primary);
}
/* Daterange summary */
.ds-daterange-summary {
  padding: var(--ds-spacing-m);
  background-color: var(--ds-surface-secondary);
  border-top: 1px solid var(--ds-border-primary);
}
.ds-daterange-summary-label {
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 500;
  color: var(--ds-text-secondary);
  margin: 0 0 var(--ds-spacing-xs) 0;
}
.ds-daterange-summary-value {
  font-size: var(--ds-typography-desktop-body-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0;
}
.ds-daterange-summary-duration {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-tertiary);
  margin: var(--ds-spacing-2xs) 0 0 0;
}
/* Daterange sizes */
.ds-daterange-sm .ds-daterange-input {
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  font-size: var(--ds-typography-desktop-small-font-size);
  min-width: 200px;
}
.ds-daterange-sm .ds-daterange-dropdown {
  min-width: 480px;
}
.ds-daterange-lg .ds-daterange-input {
  padding: var(--ds-spacing-m);
  font-size: var(--ds-typography-desktop-h4-font-size);
  min-width: 280px;
}
.ds-daterange-lg .ds-daterange-dropdown {
  min-width: 720px;
}
/* Daterange variants */
.ds-daterange-inline {
  position: static;
}
.ds-daterange-inline .ds-daterange-dropdown {
  position: static;
  box-shadow: none;
  border: none;
  animation: none;
  margin-top: var(--ds-spacing-s);
}
.ds-daterange-bordered .ds-daterange-input {
  border-width: 2px;
}
/* Daterange with time */
.ds-daterange-with-time .ds-daterange-dropdown {
  max-width: 800px;
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ds-daterange-dropdown {
    position: fixed;
    top: var(--ds-spacing-m) !important;
    left: var(--ds-spacing-m) !important;
    right: var(--ds-spacing-m) !important;
    bottom: var(--ds-spacing-m) !important;
    max-width: none;
    width: auto;
    animation: daterangeSlideUp 0.3s ease-out;
  }

  .ds-daterange-calendars {
    flex-direction: column;
    gap: var(--ds-spacing-s);
  }

  .ds-daterange-with-presets .ds-daterange-dropdown {
    flex-direction: column;
  }

  .ds-daterange-with-presets .ds-daterange-presets {
    border-right: none;
    border-bottom: 1px solid var(--ds-border-primary);
    min-width: auto;
  }

  .ds-daterange-quick {
    flex-wrap: wrap;
  }

  .ds-daterange-actions {
    flex-direction: column;
  }

  @keyframes daterangeSlideUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
@media (max-width: 480px) {
  .ds-daterange-input {
    min-width: 100%;
  }

  .ds-daterange-start,
  .ds-daterange-end {
    flex: none;
    max-width: calc(50% - var(--ds-spacing-xs));
  }

  .ds-daterange-separator {
    display: none;
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-daterange-input {
    border-width: 2px;
  }

  .ds-daterange-bordered .ds-daterange-input {
    border-width: 3px;
  }

  .ds-daterange-action,
  .ds-daterange-quick-button {
    border-width: 2px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-daterange-input,
  .ds-daterange-preset,
  .ds-daterange-action,
  .ds-daterange-quick-button,
  .ds-daterange-icon {
    transition: none;
  }

  .ds-daterange-dropdown {
    animation: none;
  }

  @media (max-width: 768px) {
    .ds-daterange-dropdown {
      animation: none;
    }

    @keyframes daterangeSlideUp {
      animation: none;
    }
  }
}
/* Print styles */
@media print {
  .ds-daterange-dropdown {
    display: none !important;
  }

  .ds-daterange-input {
    border: 1px solid #000;
    background: #fff;
    color: #000;
  }

  .ds-daterange-input:disabled {
    background: #fff;
    opacity: 1;
    color: #999;
  }
}
/* DS: divider.css - Divider component */
/* layer: components */
.ds-divider {
  border: none;
  border-top: 1px solid var(--ds-border-color-default);
  margin: var(--ds-spacing-m) 0;
  position: relative;
}
.ds-divider-vertical {
  border-top: none;
  border-left: 1px solid var(--ds-border-color-default);
  margin: 0 var(--ds-spacing-m);
  height: auto;
  width: 1px;
  align-self: stretch;
}
/* Divider variants */
.ds-divider-dashed {
  border-top-style: dashed;
}
.ds-divider-dotted {
  border-top-style: dotted;
}
.ds-divider-thick {
  border-top-width: 2px;
}
.ds-divider-thin {
  border-top-width: 0.5px;
}
/* Divider with text */
.ds-divider-with-text {
  display: flex;
  align-items: center;
  text-align: center;
  margin: var(--ds-spacing-l) 0;
}
.ds-divider-with-text::before,
.ds-divider-with-text::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--ds-border-color-default);
}
.ds-divider-with-text::before {
  margin-right: var(--ds-spacing-m);
}
.ds-divider-with-text::after {
  margin-left: var(--ds-spacing-m);
}
.ds-divider-text {
  padding: 0 var(--ds-spacing-s);
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 500;
  color: var(--ds-text-secondary);
  background-color: var(--ds-surface-background);
  white-space: nowrap;
}
/* Divider orientations */
.ds-divider-left .ds-divider-with-text::after {
  flex: none;
  width: 20%;
}
.ds-divider-right .ds-divider-with-text::before {
  flex: none;
  width: 20%;
}
/* Divider in different contexts */
.ds-divider-card {
  margin: var(--ds-spacing-l) 0;
  border-color: var(--ds-border-color-light);
}
.ds-divider-menu {
  margin: var(--ds-spacing-xs) 0;
  border-color: var(--ds-border-color-light);
}
.ds-divider-form {
  margin: var(--ds-spacing-l) 0;
  border-color: var(--ds-border-color-light);
}
/* Divider with spacing variants */
.ds-divider-spacing-xs {
  margin: var(--ds-spacing-xs) 0;
}
.ds-divider-spacing-sm {
  margin: var(--ds-spacing-s) 0;
}
.ds-divider-spacing-md {
  margin: var(--ds-spacing-m) 0;
}
.ds-divider-spacing-lg {
  margin: var(--ds-spacing-l) 0;
}
.ds-divider-spacing-xl {
  margin: var(--ds-spacing-xl) 0;
}
.ds-divider-vertical-spacing-xs {
  margin: 0 var(--ds-spacing-xs);
}
.ds-divider-vertical-spacing-sm {
  margin: 0 var(--ds-spacing-s);
}
.ds-divider-vertical-spacing-md {
  margin: 0 var(--ds-spacing-m);
}
.ds-divider-vertical-spacing-lg {
  margin: 0 var(--ds-spacing-l);
}
.ds-divider-vertical-spacing-xl {
  margin: 0 var(--ds-spacing-xl);
}
/* Divider colors */
.ds-divider-primary {
  border-color: var(--ds-status-info);
}
.ds-divider-success {
  border-color: var(--ds-status-success);
}
.ds-divider-warning {
  border-color: var(--ds-status-warning);
}
.ds-divider-error {
  border-color: var(--ds-status-error);
}
.ds-divider-muted {
  border-color: var(--ds-border-color-light);
}
/* Divider with gradient */
.ds-divider-gradient {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--ds-border-color-default) 20%,
    var(--ds-border-color-default) 80%,
    transparent 100%
  );
  margin: var(--ds-spacing-m) 0;
}
/* Divider with icon */
.ds-divider-with-icon {
  display: flex;
  align-items: center;
  margin: var(--ds-spacing-l) 0;
}
.ds-divider-with-icon::before,
.ds-divider-with-icon::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--ds-border-color-default);
}
.ds-divider-with-icon::before {
  margin-right: var(--ds-spacing-s);
}
.ds-divider-with-icon::after {
  margin-left: var(--ds-spacing-s);
}
.ds-divider-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--ds-text-secondary);
  flex-shrink: 0;
}
/* Responsive adjustments */
@media (max-width: 640px) {
  .ds-divider-with-text {
    margin: var(--ds-spacing-m) 0;
  }

  .ds-divider-with-text::before,
  .ds-divider-with-text::after {
    margin-right: var(--ds-spacing-s);
    margin-left: var(--ds-spacing-s);
  }

  .ds-divider-text {
    padding: 0 var(--ds-spacing-2xs);
    font-size: var(--ds-typography-mobile-small-font-size);
  }

  .ds-divider-vertical {
    margin: 0 var(--ds-spacing-s);
  }
}
/* Divider animation */
.ds-divider-animated {
  animation: dividerGrow 0.3s ease-out;
}
@keyframes dividerGrow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
/* DS: drawer.css - Drawer component */
/* layer: components */
.ds-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: var(--ds-z-index-modal);
  display: flex;
  flex-direction: column;
  background-color: var(--ds-surface-primary);
  box-shadow: var(--ds-shadow-xl);
  border-radius: var(--ds-border-radius-m) 0 0 var(--ds-border-radius-m);
  overflow: hidden;
  transform: translateX(100%);
  transition: transform var(--ds-motion-duration-slow) var(--ds-motion-easing-standard);
}
/* Модификатор: компактный AI‑дроер без тяжёлой шапки */
.ds-drawer-ai {
  border-radius: var(--ds-border-radius-m) 0 0 var(--ds-border-radius-m);
}
.ds-drawer-ai .ds-drawer-header {
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  border-bottom: none;
  background-color: transparent;
}
.ds-drawer-ai .ds-drawer-body {
  padding: var(--ds-spacing-s);
  padding-bottom: var(--ds-spacing-xs);
}
.ds-drawer-open {
  transform: translateX(0);
}
/* Drawer positions */
.ds-drawer-left {
  left: 0;
  border-radius: 0 var(--ds-border-radius-m) var(--ds-border-radius-m) 0;
  transform: translateX(-100%);
}
.ds-drawer-left.ds-drawer-open {
  transform: translateX(0);
}
.ds-drawer-right {
  right: 0;
  border-radius: var(--ds-border-radius-m) 0 0 var(--ds-border-radius-m);
}
.ds-drawer-top {
  left: 0;
  right: 0;
  height: auto;
  max-height: 80vh;
  border-radius: 0 0 var(--ds-border-radius-m) var(--ds-border-radius-m);
  transform: translateY(-100%);
}
.ds-drawer-top.ds-drawer-open {
  transform: translateY(0);
}
.ds-drawer-bottom {
  left: 0;
  right: 0;
  top: auto;
  height: auto;
  max-height: 80vh;
  border-radius: var(--ds-border-radius-m) var(--ds-border-radius-m) 0 0;
  transform: translateY(100%);
}
.ds-drawer-bottom.ds-drawer-open {
  transform: translateY(0);
}
/* Drawer sizes */
.ds-drawer-sm {
  width: 320px;
}
.ds-drawer-sm.ds-drawer-top,
.ds-drawer-sm.ds-drawer-bottom {
  max-height: 40vh;
}
.ds-drawer-md {
  width: 480px;
}
.ds-drawer-md.ds-drawer-top,
.ds-drawer-md.ds-drawer-bottom {
  max-height: 60vh;
}
.ds-drawer-lg {
  width: 640px;
}
.ds-drawer-lg.ds-drawer-top,
.ds-drawer-lg.ds-drawer-bottom {
  max-height: 80vh;
}
.ds-drawer-full {
  width: 100vw;
  height: 100vh;
  border-radius: 0;
}
.ds-drawer-full.ds-drawer-top,
.ds-drawer-full.ds-drawer-bottom {
  max-height: 100vh;
}
/* Drawer header */
.ds-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ds-spacing-m) var(--ds-spacing-l);
  border-bottom: 1px solid var(--ds-border-primary);
  background-color: var(--ds-surface-secondary);
  flex-shrink: 0;
}
.ds-drawer-title {
  font-size: var(--ds-typography-desktop-h4-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0;
  flex: 1;
}
.ds-drawer-subtitle {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  margin: var(--ds-spacing-2xs) 0 0 0;
}
.ds-drawer-close {
  width: 1.5rem;
  height: 1.5rem;
  background: none;
  border: none;
  border-radius: var(--ds-border-radius-2xs);
  cursor: pointer;
  color: var(--ds-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  flex-shrink: 0;
}
.ds-drawer-close:hover {
  background-color: var(--ds-surface-tertiary);
  color: var(--ds-text-primary);
}
.ds-drawer-close:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
/* Drawer body */
.ds-drawer-body {
  flex: 1;
  padding: var(--ds-spacing-l);
  overflow-y: auto;
  overflow-x: hidden;
}
/* Drawer footer */
.ds-drawer-footer {
  padding: var(--ds-spacing-l);
  border-top: 1px solid var(--ds-border-primary);
  background-color: var(--ds-surface-secondary);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ds-spacing-s);
  flex-shrink: 0;
}
/* Drawer overlay */
.ds-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--ds-surface-overlay);
  z-index: var(--ds-z-index-modal-backdrop);
  opacity: 0;
  visibility: hidden;
  transition: all var(--ds-motion-duration-slow) var(--ds-motion-easing-standard);
}
.ds-drawer-open + .ds-drawer-overlay {
  opacity: 1;
  visibility: visible;
}
/* Drawer with scroll fade */
.ds-drawer-scroll-fade .ds-drawer-body {
  position: relative;
}
.ds-drawer-scroll-fade .ds-drawer-body::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(to top, var(--ds-surface-primary), transparent);
  pointer-events: none;
}
/* Drawer with loading */
.ds-drawer-loading .ds-drawer-body {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ds-drawer-spinner {
  width: 2rem;
  height: 2rem;
  color: var(--ds-interactive-primary);
}
/* Drawer animations */
.ds-drawer-entering {
  animation: drawerSlideIn 0.3s ease-out;
}
.ds-drawer-exiting {
  animation: drawerSlideOut 0.2s ease-in;
}
@keyframes drawerSlideIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes drawerSlideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}
.ds-drawer-left.ds-drawer-entering {
  animation: drawerSlideInLeft 0.3s ease-out;
}
.ds-drawer-left.ds-drawer-exiting {
  animation: drawerSlideOutLeft 0.2s ease-in;
}
@keyframes drawerSlideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes drawerSlideOutLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}
.ds-drawer-top.ds-drawer-entering {
  animation: drawerSlideInTop 0.3s ease-out;
}
.ds-drawer-top.ds-drawer-exiting {
  animation: drawerSlideOutTop 0.2s ease-in;
}
@keyframes drawerSlideInTop {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes drawerSlideOutTop {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-100%);
  }
}
.ds-drawer-bottom.ds-drawer-entering {
  animation: drawerSlideInBottom 0.3s ease-out;
}
.ds-drawer-bottom.ds-drawer-exiting {
  animation: drawerSlideOutBottom 0.2s ease-in;
}
@keyframes drawerSlideInBottom {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes drawerSlideOutBottom {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(100%);
  }
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ds-drawer {
    width: 100vw !important;
    max-width: none;
  }

  .ds-drawer-left,
  .ds-drawer-right {
    width: 100vw;
  }

  .ds-drawer-top,
  .ds-drawer-bottom {
    max-height: 70vh;
  }

  .ds-drawer-header {
    padding: var(--ds-spacing-s) var(--ds-spacing-m);
  }

  .ds-drawer-body {
    padding: var(--ds-spacing-m);
  }

  .ds-drawer-footer {
    padding: var(--ds-spacing-m);
    flex-direction: column;
    align-items: stretch;
  }
}
@media (max-width: 480px) {
  .ds-drawer-header {
    padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  }

  .ds-drawer-title {
    font-size: var(--ds-typography-desktop-h3-font-size);
  }

  .ds-drawer-body {
    padding: var(--ds-spacing-s);
  }

  .ds-drawer-footer {
    padding: var(--ds-spacing-s);
  }

  .ds-drawer-top,
  .ds-drawer-bottom {
    max-height: 60vh;
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-drawer {
    border: 2px solid var(--ds-border-primary);
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-drawer {
    transition: none;
  }

  .ds-drawer-overlay {
    transition: none;
  }

  .ds-drawer-close {
    transition: none;
  }

  .ds-drawer-entering,
  .ds-drawer-exiting {
    animation: none;
  }
}
/* Print styles */
@media print {
  .ds-drawer {
    display: none !important;
  }

  .ds-drawer-overlay {
    display: none !important;
  }
}
.ds-chat {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-s);
}
.ds-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-spacing-s);
  margin-bottom: var(--ds-spacing-xs);
}
.ds-chat-header-left,
.ds-chat-header-right { display:flex; align-items:center; gap: var(--ds-spacing-s); }
.ds-chat-list {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-s);
  overflow: auto;
  max-height: 65vh;
  padding-right: 2px;
}
.ds-chat-item { display:flex; gap: var(--ds-spacing-s); }
.ds-chat-item.me { justify-content: flex-end; }
.ds-chat-avatar { display:none; }
.ds-chat-bubble {
  max-width: min(680px, 85%);
  background: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-l);
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  box-shadow: var(--ds-shadow-sm);
  word-wrap: break-word;
}
.ds-chat-item.me .ds-chat-bubble { background: var(--ds-surface-elevated); }
.ds-chat-item:not(.me) .ds-chat-bubble { background: color-mix(in srgb, var(--ds-surface-primary) 92%, var(--ds-interactive-primary) 8%); }
.ds-chat-bubble .ds-chat-quote {
  border-left: 3px solid var(--ds-border-primary);
  padding-left: var(--ds-spacing-s);
  margin-bottom: var(--ds-spacing-xs);
  color: var(--ds-text-secondary);
  font-size: 12px;
}
.ds-chat-bubble pre.ds-code { padding: var(--ds-spacing-xs); background: var(--ds-surface-secondary); border-radius: var(--ds-border-radius-s); overflow:auto; max-width:100%; white-space: pre; }
.ds-chat-actions { display:flex; align-items:center; gap: 8px; opacity: 0; transition: opacity .15s ease; }
.ds-chat-item:hover .ds-chat-actions { opacity: 1; }
.ds-chat-composer { display: grid; grid-template-columns: 1fr auto; gap: var(--ds-spacing-s); align-items:end; }
.ds-chat-composer .ds-composer-row { display:flex; align-items:center; gap: var(--ds-spacing-s); }
.ds-chat-attachments { display:flex; gap: 8px; flex-wrap: wrap; }
.ds-chat-hard-outputs { display: flex; flex-direction: column; gap: var(--ds-spacing-s); }
.ds-chat-hard-card pre.ds-code { max-height: 240px; overflow:auto; }
/* Жёсткие карточки не должны растягивать layout */
.ds-chat-hard-card { max-width: 100%; overflow: hidden; }
.ds-chat-hard-card .ds-card-body { display:flex; align-items:center; }
/* Тихие скроллбары для чата и кода */
.ds-chat-list, .ds-chat-bubble pre.ds-code, .ds-modal-body { scrollbar-width: thin; scrollbar-color: var(--ds-border-primary) transparent; }
.ds-chat-list::-webkit-scrollbar, .ds-chat-bubble pre.ds-code::-webkit-scrollbar, .ds-modal-body::-webkit-scrollbar { width: 6px; height: 6px; }
.ds-chat-list::-webkit-scrollbar-thumb, .ds-chat-bubble pre.ds-code::-webkit-scrollbar-thumb, .ds-modal-body::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ds-border-primary) 60%, transparent); border-radius: 6px; }
.ds-chat-list::-webkit-scrollbar-track, .ds-chat-bubble pre.ds-code::-webkit-scrollbar-track, .ds-modal-body::-webkit-scrollbar-track { background: transparent; }
.ds-chat-divider { text-align:center; font-size:12px; color: var(--ds-text-secondary); margin: var(--ds-spacing-xs) 0; }
/* DS: dropdown.css - Dropdown component */
/* layer: components */
.ds-dropdown {
  position: relative;
  display: inline-block;
}
.ds-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-spacing-2xs);
  cursor: pointer;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  border-radius: var(--ds-border-radius-s);
}
.ds-dropdown-trigger:hover {
  background-color: var(--ds-surface-background-secondary);
}
.ds-dropdown-trigger:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--ds-z-index-dropdown);
  min-width: 160px;
  background-color: var(--ds-dropdown-bg);
  border: 1px solid var(--ds-border-color-default);
  border-radius: var(--ds-border-radius-m);
  box-shadow: var(--ds-dropdown-shadow-1), var(--ds-dropdown-shadow-2);
  padding: var(--ds-spacing-2xs) 0;
  margin-top: var(--ds-spacing-2xs);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  max-height: 300px;
  overflow-y: auto;
}
.ds-dropdown-open .ds-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ds-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  padding: var(--ds-spacing-xs) var(--ds-spacing-m);
  cursor: pointer;
  color: var(--ds-dropdown-item-fg);
  font-size: var(--ds-typography-desktop-body-font-size);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  position: relative;
}
.ds-dropdown-item:hover {
  background-color: var(--ds-dropdown-item-hover-bg);
}
.ds-dropdown-item:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: -2px;
}
.ds-dropdown-item:active {
  background-color: var(--ds-dropdown-item-hover-bg);
}
.ds-dropdown-item:disabled,
.ds-dropdown-item.ds-dropdown-item-disabled {
  color: var(--ds-dropdown-item-disabled-fg);
  cursor: not-allowed;
  pointer-events: none;
}
.ds-dropdown-item.ds-dropdown-item-selected {
  background-color: var(--ds-dropdown-item-selected-bg);
  color: var(--ds-dropdown-item-fg);
}
.ds-dropdown-item-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ds-dropdown-item-icon svg {
  width: 100%;
  height: 100%;
}
.ds-dropdown-item-check {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}
.ds-dropdown-item-check svg {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--ds-status-success);
}
.ds-dropdown-divider {
  height: 1px;
  background-color: var(--ds-dropdown-divider);
  margin: var(--ds-spacing-xs) 0;
  border: none;
}
.ds-dropdown-group {
  padding: var(--ds-spacing-xs) var(--ds-spacing-m) var(--ds-spacing-2xs);
}
.ds-dropdown-group-title {
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 600;
  color: var(--ds-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--ds-spacing-2xs);
}
.ds-dropdown-submenu {
  position: relative;
}
.ds-dropdown-submenu .ds-dropdown-menu {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: var(--ds-spacing-2xs);
  margin-top: 0;
}
.ds-dropdown-submenu-trigger::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 4px solid var(--ds-text-secondary);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  margin-left: auto;
  transition: transform var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-dropdown-submenu-open .ds-dropdown-submenu-trigger::after {
  transform: rotate(90deg);
}
/* Dropdown positions */
.ds-dropdown-up .ds-dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: var(--ds-spacing-2xs);
}
.ds-dropdown-left .ds-dropdown-menu {
  left: auto;
  right: 0;
}
.ds-dropdown-right .ds-dropdown-menu {
  left: 100%;
  right: auto;
  margin-left: var(--ds-spacing-2xs);
}
.ds-dropdown-center .ds-dropdown-menu {
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
}
.ds-dropdown-center.ds-dropdown-open .ds-dropdown-menu {
  transform: translateX(-50%) translateY(0);
}
/* Button dropdown */
.ds-btn-dropdown {
  position: relative;
}
.ds-btn-dropdown .ds-dropdown-menu {
  min-width: 100%;
}
/* Context menu */
.ds-context-menu {
  position: fixed;
  z-index: var(--ds-z-index-tooltip);
  min-width: 180px;
}
/* Dropdown sizes */
.ds-dropdown-sm .ds-dropdown-item {
  padding: var(--ds-spacing-2xs) var(--ds-spacing-s);
  font-size: var(--ds-typography-desktop-small-font-size);
}
.ds-dropdown-lg .ds-dropdown-item {
  padding: var(--ds-spacing-s) var(--ds-spacing-l);
  font-size: var(--ds-typography-desktop-h4-font-size);
}
/* Loading state */
.ds-dropdown-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ds-spacing-m);
  color: var(--ds-text-secondary);
}
.ds-dropdown-loading .ds-spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--ds-surface-background-secondary);
  border-top: 2px solid var(--ds-status-info);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: var(--ds-spacing-s);
}
/* Empty state */
.ds-dropdown-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--ds-spacing-xl);
  color: var(--ds-text-secondary);
  text-align: center;
}
.ds-dropdown-empty-icon {
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--ds-spacing-s);
  color: var(--ds-text-tertiary);
}
.ds-dropdown-empty-text {
  font-size: var(--ds-typography-desktop-small-font-size);
}
/* Scrollable dropdown */
.ds-dropdown-scrollable .ds-dropdown-menu {
  max-height: 200px;
  overflow-y: auto;
}
/* Mobile adaptations */
@media (max-width: 640px) {
  .ds-dropdown-menu {
    position: fixed;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0;
    border-radius: var(--ds-border-radius-l) var(--ds-border-radius-l) 0 0;
    transform: translateY(100%);
    max-height: 50vh;
    width: 100vw;
  }

  .ds-dropdown-open .ds-dropdown-menu {
    transform: translateY(0);
  }

  .ds-dropdown-submenu .ds-dropdown-menu {
    position: static;
    margin-left: 0;
    margin-top: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--ds-border-color-light);
  }
}
/* DS: dropzone.css - Dropzone component */
/* layer: components */
.ds-dropzone {
  position: relative;
  display: block;
  width: 100%;
  min-height: 200px;
  padding: var(--ds-spacing-xl);
  border: 2px dashed var(--ds-dropzone-border);
  border-radius: var(--ds-border-radius-l);
  background-color: var(--ds-dropzone-bg);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  cursor: pointer;
  text-align: center;
}
.ds-dropzone:hover {
  border-color: var(--ds-dropzone-border-hover);
  background-color: var(--ds-dropzone-bg-hover);
}
.ds-dropzone.ds-dropzone-active {
  border-color: var(--ds-interactive-primary);
  background-color: var(--ds-interactive-primary-bg);
  transform: scale(1.01);
}
.ds-dropzone.ds-dropzone-disabled {
  border-color: var(--ds-dropzone-border-disabled);
  background-color: var(--ds-dropzone-bg-disabled);
  cursor: not-allowed;
  opacity: var(--ds-opacity-disabled);
}
.ds-dropzone.ds-dropzone-disabled:hover {
  border-color: var(--ds-dropzone-border-disabled);
  background-color: var(--ds-dropzone-bg-disabled);
  transform: none;
}
.ds-dropzone.ds-dropzone-error {
  border-color: var(--ds-status-error);
  background-color: var(--ds-status-error-bg);
}
.ds-dropzone.ds-dropzone-success {
  border-color: var(--ds-status-success);
  background-color: var(--ds-status-success-bg);
}
/* Dropzone input */
.ds-dropzone-input {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
  top: 0;
  left: 0;
}
.ds-dropzone-input:disabled {
  cursor: not-allowed;
}
/* Dropzone content */
.ds-dropzone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-spacing-m);
  pointer-events: none;
}
.ds-dropzone-icon {
  width: 3rem;
  height: 3rem;
  color: var(--ds-dropzone-icon-fg);
  flex-shrink: 0;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-dropzone.ds-dropzone-active .ds-dropzone-icon {
  color: var(--ds-interactive-primary);
  transform: scale(1.1);
}
.ds-dropzone-title {
  font-size: var(--ds-typography-desktop-h4-font-size);
  font-weight: 600;
  color: var(--ds-dropzone-title-fg);
  margin: 0;
  line-height: 1.3;
}
.ds-dropzone-description {
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-dropzone-description-fg);
  margin: 0;
  line-height: 1.5;
  max-width: 400px;
}
.ds-dropzone-hint {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-dropzone-hint-fg);
  margin: 0;
  line-height: 1.4;
}
/* Dropzone with preview */
.ds-dropzone-preview {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--ds-spacing-m);
  padding: var(--ds-spacing-m);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  background-color: var(--ds-surface-primary);
}
.ds-dropzone-preview-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--ds-border-radius-m);
  overflow: hidden;
  background-color: var(--ds-surface-secondary);
}
.ds-dropzone-preview-item img,
.ds-dropzone-preview-item video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.ds-dropzone-preview-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--ds-text-tertiary);
}
.ds-dropzone-preview-item-icon .ds-icon {
  width: 2rem;
  height: 2rem;
}
.ds-dropzone-preview-item-remove {
  position: absolute;
  top: var(--ds-spacing-2xs);
  right: var(--ds-spacing-2xs);
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-dropzone-preview-item:hover .ds-dropzone-preview-item-remove {
  opacity: 1;
}
.ds-dropzone-preview-item-remove:hover {
  background-color: rgba(0, 0, 0, 0.9);
}
/* Dropzone with progress */
.ds-dropzone-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--ds-surface-tertiary);
  border-radius: 0 0 var(--ds-border-radius-l) var(--ds-border-radius-l);
  overflow: hidden;
}
.ds-dropzone-progress-bar {
  height: 100%;
  background-color: var(--ds-interactive-primary);
  transition: width var(--ds-motion-duration-slow) var(--ds-motion-easing-standard);
  border-radius: inherit;
}
.ds-dropzone-progress-error .ds-dropzone-progress-bar {
  background-color: var(--ds-status-error);
}
.ds-dropzone-progress-success .ds-dropzone-progress-bar {
  background-color: var(--ds-status-success);
}
/* Dropzone sizes */
.ds-dropzone-sm {
  min-height: 120px;
  padding: var(--ds-spacing-l);
}
.ds-dropzone-sm .ds-dropzone-icon {
  width: 2rem;
  height: 2rem;
}
.ds-dropzone-sm .ds-dropzone-title {
  font-size: var(--ds-typography-desktop-h5-font-size);
}
.ds-dropzone-lg {
  min-height: 300px;
  padding: var(--ds-spacing-2xl);
}
.ds-dropzone-lg .ds-dropzone-icon {
  width: 4rem;
  height: 4rem;
}
.ds-dropzone-lg .ds-dropzone-title {
  font-size: var(--ds-typography-desktop-h3-font-size);
}
/* Dropzone variants */
.ds-dropzone-compact {
  min-height: 100px;
  padding: var(--ds-spacing-m);
}
.ds-dropzone-compact .ds-dropzone-content {
  gap: var(--ds-spacing-s);
}
.ds-dropzone-compact .ds-dropzone-icon {
  width: 2rem;
  height: 2rem;
}
.ds-dropzone-compact .ds-dropzone-title {
  font-size: var(--ds-typography-desktop-body-font-size);
}
.ds-dropzone-compact .ds-dropzone-description {
  font-size: var(--ds-typography-desktop-small-font-size);
}
.ds-dropzone-circle {
  border-radius: 50%;
  aspect-ratio: 1;
  min-height: auto;
  width: 200px;
  height: 200px;
  padding: var(--ds-spacing-xl);
}
.ds-dropzone-circle .ds-dropzone-content {
  justify-content: center;
}
.ds-dropzone-circle .ds-dropzone-icon {
  width: 3rem;
  height: 3rem;
}
.ds-dropzone-circle .ds-dropzone-title {
  font-size: var(--ds-typography-desktop-h5-font-size);
}
.ds-dropzone-circle .ds-dropzone-description {
  font-size: var(--ds-typography-desktop-small-font-size);
}
/* Dropzone with multiple files */
.ds-dropzone-multiple {
  /* Special styling for multiple file uploads */
}
.ds-dropzone-multiple .ds-dropzone-preview {
  margin-top: var(--ds-spacing-l);
}
/* Dropzone with restrictions */
.ds-dropzone-restricted {
  position: relative;
}
.ds-dropzone-restricted::before {
  content: '';
  position: absolute;
  top: var(--ds-spacing-s);
  right: var(--ds-spacing-s);
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--ds-status-warning);
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  font-weight: 600;
  z-index: 1;
}
/* Dropzone with accepted types */
.ds-dropzone-accepted-types {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-spacing-xs);
  justify-content: center;
  margin-top: var(--ds-spacing-s);
}
.ds-dropzone-type {
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
  background-color: var(--ds-surface-secondary);
  border-radius: var(--ds-border-radius-s);
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  color: var(--ds-text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
/* Dropzone loading state */
.ds-dropzone-loading {
  pointer-events: none;
}
.ds-dropzone-loading .ds-dropzone-icon {
  animation: dropzoneSpin 1s linear infinite;
}
@keyframes dropzoneSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* Dropzone animations */
.ds-dropzone-entering {
  animation: dropzoneFadeIn 0.3s ease-out;
}
.ds-dropzone-exiting {
  animation: dropzoneFadeOut 0.2s ease-in;
}
@keyframes dropzoneFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes dropzoneFadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ds-dropzone {
    min-height: 150px;
    padding: var(--ds-spacing-l);
  }

  .ds-dropzone-preview {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--ds-spacing-s);
    padding: var(--ds-spacing-s);
  }

  .ds-dropzone-circle {
    width: 150px;
    height: 150px;
    padding: var(--ds-spacing-l);
  }

  .ds-dropzone-circle .ds-dropzone-icon {
    width: 2.5rem;
    height: 2.5rem;
  }
}
@media (max-width: 480px) {
  .ds-dropzone {
    min-height: 120px;
    padding: var(--ds-spacing-m);
  }

  .ds-dropzone-content {
    gap: var(--ds-spacing-s);
  }

  .ds-dropzone-title {
    font-size: var(--ds-typography-mobile-h4-font-size);
  }

  .ds-dropzone-description {
    font-size: var(--ds-typography-mobile-body-font-size);
  }

  .ds-dropzone-preview {
    grid-template-columns: repeat(3, 1fr);
  }

  .ds-dropzone-circle {
    width: 120px;
    height: 120px;
    padding: var(--ds-spacing-m);
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-dropzone {
    border-width: 3px;
  }

  .ds-dropzone-preview {
    border-width: 2px;
  }

  .ds-dropzone-preview-item {
    border: 1px solid var(--ds-text-primary);
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-dropzone {
    transition: none;
  }

  .ds-dropzone.ds-dropzone-active {
    transform: none;
  }

  .ds-dropzone.ds-dropzone-active .ds-dropzone-icon {
    transform: none;
  }

  .ds-dropzone-preview-item-remove {
    transition: none;
  }

  .ds-dropzone-progress-bar {
    transition: none;
  }

  .ds-dropzone-loading .ds-dropzone-icon {
    animation: none;
  }

  .ds-dropzone-entering,
  .ds-dropzone-exiting {
    animation: none;
  }
}
/* Print styles */
@media print {
  .ds-dropzone {
    border: 2px dashed #000;
    background: #fff;
    min-height: 100px;
  }

  .ds-dropzone-input {
    display: none;
  }

  .ds-dropzone-content {
    color: #000;
  }

  .ds-dropzone-preview {
    display: none;
  }

  .ds-dropzone-progress {
    display: none;
  }

  .ds-dropzone-entering,
  .ds-dropzone-exiting {
    animation: none;
  }
}
/* DS: empty.css - Empty state component */
/* layer: components */
.ds-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--ds-spacing-xl);
  text-align: center;
  color: var(--ds-text-secondary);
}
.ds-empty-icon {
  width: 4rem;
  height: 4rem;
  margin-bottom: var(--ds-spacing-m);
  color: var(--ds-text-tertiary);
  opacity: 0.5;
}
.ds-empty-image {
  max-width: 100%;
  height: auto;
  margin-bottom: var(--ds-spacing-m);
}
.ds-empty-title {
  font-size: var(--ds-typography-desktop-h4-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-spacing-xs) 0;
  line-height: 1.4;
}
.ds-empty-description {
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-secondary);
  margin: 0 0 var(--ds-spacing-m) 0;
  line-height: 1.6;
  max-width: 400px;
}
.ds-empty-actions {
  display: flex;
  gap: var(--ds-spacing-s);
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
/* Empty variants */
.ds-empty-compact {
  padding: var(--ds-spacing-l);
}
.ds-empty-compact .ds-empty-icon {
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--ds-spacing-s);
}
.ds-empty-compact .ds-empty-title {
  font-size: var(--ds-typography-desktop-h5-font-size);
}
.ds-empty-compact .ds-empty-description {
  font-size: var(--ds-typography-desktop-small-font-size);
}
.ds-empty-large {
  padding: var(--ds-spacing-2xl);
}
.ds-empty-large .ds-empty-icon {
  width: 6rem;
  height: 6rem;
  margin-bottom: var(--ds-spacing-l);
}
.ds-empty-large .ds-empty-title {
  font-size: var(--ds-typography-desktop-h3-font-size);
}
.ds-empty-large .ds-empty-description {
  font-size: var(--ds-typography-desktop-h4-font-size);
  max-width: 500px;
}
/* Empty states */
.ds-empty-no-data {
  /* Default empty state */
}
.ds-empty-no-results .ds-empty-icon {
  color: var(--ds-status-warning);
  opacity: 0.6;
}
.ds-empty-error .ds-empty-icon {
  color: var(--ds-status-error);
  opacity: 0.6;
}
.ds-empty-loading .ds-empty-icon {
  animation: pulse 2s infinite;
}
.ds-empty-success .ds-empty-icon {
  color: var(--ds-status-success);
  opacity: 0.6;
}
/* Empty with illustration */
.ds-empty-illustration {
  position: relative;
}
.ds-empty-illustration::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8rem;
  height: 8rem;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  z-index: -1;
}
/* Empty in different contexts */
.ds-empty-table {
  padding: var(--ds-spacing-2xl) var(--ds-spacing-xl);
  border: 1px dashed var(--ds-border-color-light);
  border-radius: var(--ds-border-radius-m);
  margin: var(--ds-spacing-l) 0;
}
.ds-empty-table .ds-empty-icon {
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--ds-spacing-m);
}
.ds-empty-table .ds-empty-title {
  font-size: var(--ds-typography-desktop-h5-font-size);
  margin-bottom: var(--ds-spacing-s);
}
.ds-empty-table .ds-empty-description {
  font-size: var(--ds-typography-desktop-small-font-size);
  margin-bottom: var(--ds-spacing-m);
}
.ds-empty-card {
  padding: var(--ds-spacing-xl);
  background-color: var(--ds-surface-background-secondary);
  border-radius: var(--ds-border-radius-m);
}
.ds-empty-card .ds-empty-icon {
  width: 4rem;
  height: 4rem;
  margin-bottom: var(--ds-spacing-l);
}
.ds-empty-dropdown {
  padding: var(--ds-spacing-xl) var(--ds-spacing-m);
}
.ds-empty-dropdown .ds-empty-icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--ds-spacing-s);
}
.ds-empty-dropdown .ds-empty-title {
  font-size: var(--ds-typography-desktop-body-font-size);
  font-weight: 500;
}
.ds-empty-dropdown .ds-empty-description {
  font-size: var(--ds-typography-desktop-small-font-size);
  margin-bottom: var(--ds-spacing-m);
}
/* Responsive adjustments */
@media (max-width: 640px) {
  .ds-empty {
    padding: var(--ds-spacing-l);
  }

  .ds-empty-icon {
    width: 3rem;
    height: 3rem;
    margin-bottom: var(--ds-spacing-s);
  }

  .ds-empty-title {
    font-size: var(--ds-typography-mobile-h4-font-size);
  }

  .ds-empty-description {
    font-size: var(--ds-typography-mobile-body-font-size);
    max-width: 280px;
  }

  .ds-empty-actions {
    flex-direction: column;
    width: 100%;
  }

  .ds-empty-actions .ds-btn {
    width: 100%;
    justify-content: center;
  }

  .ds-empty-large {
    padding: var(--ds-spacing-xl);
  }

  .ds-empty-large .ds-empty-icon {
    width: 4rem;
    height: 4rem;
    margin-bottom: var(--ds-spacing-m);
  }

  .ds-empty-large .ds-empty-title {
    font-size: var(--ds-typography-mobile-h3-font-size);
  }

  .ds-empty-large .ds-empty-description {
    font-size: var(--ds-typography-mobile-h4-font-size);
  }
}
/* Animation for loading state */
@keyframes pulse {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
}
/* DS: filelist.css - File list component */
/* layer: components */
.ds-filelist {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-s);
}
.ds-filelist-item {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  padding: var(--ds-spacing-s);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  position: relative;
}
.ds-filelist-item:hover {
  border-color: var(--ds-border-secondary);
  box-shadow: var(--ds-shadow-xs);
}
.ds-filelist-item:focus-within {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
/* File list item states */
.ds-filelist-item-selected {
  background-color: var(--ds-interactive-primary-bg);
  border-color: var(--ds-interactive-primary);
}
.ds-filelist-item-error {
  background-color: var(--ds-status-error-bg);
  border-color: var(--ds-status-error);
}
.ds-filelist-item-success {
  background-color: var(--ds-status-success-bg);
  border-color: var(--ds-status-success);
}
.ds-filelist-item-warning {
  background-color: var(--ds-status-warning-bg);
  border-color: var(--ds-status-warning);
}
/* File list item checkbox */
.ds-filelist-checkbox {
  flex-shrink: 0;
}
/* File list item icon */
.ds-filelist-icon {
  width: 2rem;
  height: 2rem;
  color: var(--ds-text-secondary);
  flex-shrink: 0;
}
.ds-filelist-item-error .ds-filelist-icon {
  color: var(--ds-status-error);
}
.ds-filelist-item-success .ds-filelist-icon {
  color: var(--ds-status-success);
}
.ds-filelist-item-warning .ds-filelist-icon {
  color: var(--ds-status-warning);
}
/* File list item content */
.ds-filelist-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-2xs);
}
.ds-filelist-name {
  font-size: var(--ds-typography-desktop-body-font-size);
  font-weight: 500;
  color: var(--ds-text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.ds-filelist-meta {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  flex-wrap: wrap;
}
.ds-filelist-size {
  color: var(--ds-text-tertiary);
}
.ds-filelist-date {
  color: var(--ds-text-tertiary);
}
.ds-filelist-type {
  color: var(--ds-text-secondary);
  text-transform: uppercase;
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  font-weight: 500;
  letter-spacing: 0.025em;
}
/* File list item progress */
.ds-filelist-progress {
  flex: 1;
  margin: var(--ds-spacing-s) 0;
}
.ds-filelist-progress-bar {
  width: 100%;
  height: 4px;
  background-color: var(--ds-surface-tertiary);
  border-radius: 2px;
  overflow: hidden;
}
.ds-filelist-progress-fill {
  height: 100%;
  background-color: var(--ds-interactive-primary);
  border-radius: inherit;
  transition: width var(--ds-motion-duration-slow) var(--ds-motion-easing-standard);
}
.ds-filelist-item-error .ds-filelist-progress-fill {
  background-color: var(--ds-status-error);
}
.ds-filelist-item-success .ds-filelist-progress-fill {
  background-color: var(--ds-status-success);
}
/* File list item actions */
.ds-filelist-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
  flex-shrink: 0;
}
.ds-filelist-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--ds-text-secondary);
  border-radius: var(--ds-border-radius-2xs);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-filelist-action:hover {
  background-color: var(--ds-surface-secondary);
  color: var(--ds-text-primary);
}
.ds-filelist-action:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-filelist-action:disabled {
  opacity: var(--ds-opacity-disabled);
  cursor: not-allowed;
}
.ds-filelist-action:disabled:hover {
  background-color: transparent;
  color: var(--ds-text-secondary);
}
/* File list item preview */
.ds-filelist-preview {
  width: 3rem;
  height: 3rem;
  border-radius: var(--ds-border-radius-s);
  overflow: hidden;
  background-color: var(--ds-surface-secondary);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ds-filelist-preview img,
.ds-filelist-preview video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.ds-filelist-preview .ds-filelist-icon {
  width: 1.5rem;
  height: 1.5rem;
}
/* File list variants */
.ds-filelist-compact .ds-filelist-item {
  padding: var(--ds-spacing-xs);
  gap: var(--ds-spacing-xs);
}
.ds-filelist-compact .ds-filelist-icon {
  width: 1.5rem;
  height: 1.5rem;
}
.ds-filelist-compact .ds-filelist-name {
  font-size: var(--ds-typography-desktop-small-font-size);
}
.ds-filelist-compact .ds-filelist-meta {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
}
.ds-filelist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--ds-spacing-m);
}
.ds-filelist-grid .ds-filelist-item {
  flex-direction: column;
  text-align: center;
  padding: var(--ds-spacing-m);
  gap: var(--ds-spacing-s);
}
.ds-filelist-grid .ds-filelist-preview {
  width: 4rem;
  height: 4rem;
}
.ds-filelist-grid .ds-filelist-content {
  align-items: center;
}
.ds-filelist-grid .ds-filelist-name {
  font-size: var(--ds-typography-desktop-small-font-size);
}
.ds-filelist-grid .ds-filelist-meta {
  justify-content: center;
  font-size: var(--ds-typography-desktop-extra-small-font-size);
}
.ds-filelist-grid .ds-filelist-actions {
  margin-top: var(--ds-spacing-xs);
}
/* File list with drag and drop */
.ds-filelist-dragging .ds-filelist-item {
  opacity: 0.5;
}
.ds-filelist-drop-target {
  position: relative;
}
.ds-filelist-drop-target::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px dashed var(--ds-interactive-primary);
  border-radius: var(--ds-border-radius-m);
  background-color: var(--ds-interactive-primary-bg);
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}
/* File list empty state */
.ds-filelist-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--ds-spacing-2xl);
  text-align: center;
  color: var(--ds-text-secondary);
}
.ds-filelist-empty-icon {
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--ds-spacing-m);
  opacity: 0.5;
}
.ds-filelist-empty-title {
  font-size: var(--ds-typography-desktop-h4-font-size);
  font-weight: 600;
  margin: 0 0 var(--ds-spacing-s) 0;
  color: var(--ds-text-primary);
}
.ds-filelist-empty-description {
  font-size: var(--ds-typography-desktop-body-font-size);
  margin: 0;
  max-width: 300px;
}
/* File list loading state */
.ds-filelist-loading .ds-filelist-item {
  pointer-events: none;
}
.ds-filelist-loading .ds-filelist-name,
.ds-filelist-loading .ds-filelist-meta {
  background-color: var(--ds-surface-secondary);
  color: transparent;
  border-radius: var(--ds-border-radius-2xs);
}
.ds-filelist-loading .ds-filelist-name {
  height: 1.2em;
  margin-bottom: var(--ds-spacing-2xs);
}
.ds-filelist-loading .ds-filelist-meta {
  height: 1em;
  width: 60%;
}
/* File list animations */
.ds-filelist-item-entering {
  animation: filelistSlideIn 0.3s ease-out;
}
.ds-filelist-item-exiting {
  animation: filelistSlideOut 0.2s ease-in;
}
@keyframes filelistSlideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes filelistSlideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(10px);
  }
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ds-filelist-item {
    padding: var(--ds-spacing-xs);
    gap: var(--ds-spacing-xs);
  }

  .ds-filelist-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--ds-spacing-s);
  }

  .ds-filelist-grid .ds-filelist-item {
    padding: var(--ds-spacing-s);
  }

  .ds-filelist-grid .ds-filelist-preview {
    width: 3rem;
    height: 3rem;
  }

  .ds-filelist-empty {
    padding: var(--ds-spacing-xl);
  }

  .ds-filelist-empty-icon {
    width: 2.5rem;
    height: 2.5rem;
  }
}
@media (max-width: 480px) {
  .ds-filelist-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-spacing-2xs);
  }

  .ds-filelist-content {
    width: 100%;
  }

  .ds-filelist-actions {
    width: 100%;
    justify-content: flex-end;
    margin-top: var(--ds-spacing-xs);
  }

  .ds-filelist-grid {
    grid-template-columns: 1fr;
  }

  .ds-filelist-grid .ds-filelist-item {
    flex-direction: row;
    text-align: left;
  }

  .ds-filelist-grid .ds-filelist-content {
    align-items: flex-start;
  }

  .ds-filelist-grid .ds-filelist-actions {
    margin-top: 0;
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-filelist-item {
    border-width: 2px;
  }

  .ds-filelist-item-selected {
    border-width: 3px;
  }

  .ds-filelist-action:hover {
    border: 1px solid var(--ds-text-primary);
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-filelist-item {
    transition: none;
  }

  .ds-filelist-action {
    transition: none;
  }

  .ds-filelist-progress-fill {
    transition: none;
  }

  .ds-filelist-item-entering,
  .ds-filelist-item-exiting {
    animation: none;
  }
}
/* Print styles */
@media print {
  .ds-filelist-item {
    border: 1px solid #000;
    background: #fff;
    box-shadow: none;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }

  .ds-filelist-progress {
    display: none;
  }

  .ds-filelist-actions {
    display: none;
  }

  .ds-filelist-loading .ds-filelist-name,
  .ds-filelist-loading .ds-filelist-meta {
    background: none;
    color: #000;
  }

  .ds-filelist-item-entering,
  .ds-filelist-item-exiting {
    animation: none;
  }
}
/* DS: form.css - Form component */
/* layer: components */
.ds-form {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-m);
}
.ds-form-inline {
  flex-direction: row;
  align-items: flex-end;
  gap: var(--ds-spacing-s);
  flex-wrap: wrap;
}
/* Form field wrapper */
.ds-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-2xs);
}
.ds-form-field-inline {
  flex-direction: row;
  align-items: center;
  gap: var(--ds-spacing-s);
}
/* Form label */
.ds-form-label {
  font-size: var(--ds-typography-desktop-body-font-size);
  font-weight: 400;
  color: var(--ds-text-primary);
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
  line-height: 1.4;
}
.ds-form-label-required::after {
  content: '*';
  color: var(--ds-status-error);
  font-weight: 600;
}
.ds-form-label-optional {
  font-weight: 400;
  color: var(--ds-text-secondary);
  font-size: var(--ds-typography-desktop-small-font-size);
}
/* Form description */
.ds-form-description {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  line-height: 1.5;
  margin-top: var(--ds-spacing-2xs);
}
/* Form error message */
.ds-form-error {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-status-error);
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: var(--ds-spacing-xs);
  margin-top: var(--ds-spacing-2xs);
}
.ds-form-error::before {
  content: '';
  width: 0.875rem;
  height: 0.875rem;
  background: var(--ds-status-error);
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.5 0L4.268 16.5c-.77.833.192 2.5 1.732 2.5z'/%3e%3c/svg%3e") no-repeat center;
  mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.5 0L4.268 16.5c-.77.833.192 2.5 1.732 2.5z'/%3e%3c/svg%3e") no-repeat center;
  flex-shrink: 0;
  margin-top: 1px;
}
/* Form success message */
.ds-form-success {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-status-success);
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: var(--ds-spacing-xs);
  margin-top: var(--ds-spacing-2xs);
}
.ds-form-success::before {
  content: '';
  width: 0.875rem;
  height: 0.875rem;
  background: var(--ds-status-success);
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3e%3c/svg%3e") no-repeat center;
  mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3e%3c/svg%3e") no-repeat center;
  flex-shrink: 0;
  margin-top: 1px;
}
/* Form field states */
.ds-form-field-error .ds-form-label {
  color: var(--ds-status-error);
}
.ds-form-field-error .ds-input,
.ds-form-field-error .ds-textarea,
.ds-form-field-error .ds-select {
  border-color: var(--ds-input-border-error);
}
.ds-form-field-error .ds-input:focus,
.ds-form-field-error .ds-textarea:focus,
.ds-form-field-error .ds-select:focus {
  border-color: var(--ds-input-border-error);
  box-shadow: var(--ds-input-shadow-error);
}
.ds-form-field-success .ds-input,
.ds-form-field-success .ds-textarea,
.ds-form-field-success .ds-select {
  border-color: var(--ds-status-success);
}
.ds-form-field-success .ds-input:focus,
.ds-form-field-success .ds-textarea:focus,
.ds-form-field-success .ds-select:focus {
  border-color: var(--ds-status-success);
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
}
.ds-form-field-warning .ds-input,
.ds-form-field-warning .ds-textarea,
.ds-form-field-warning .ds-select {
  border-color: var(--ds-status-warning);
}
.ds-form-field-warning .ds-input:focus,
.ds-form-field-warning .ds-textarea:focus,
.ds-form-field-warning .ds-select:focus {
  border-color: var(--ds-status-warning);
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}
/* Form field disabled state */
.ds-form-field:disabled .ds-form-label,
.ds-form-field:disabled .ds-form-description {
  color: var(--ds-text-disabled);
}
.ds-form-field:disabled .ds-input,
.ds-form-field:disabled .ds-textarea,
.ds-form-field:disabled .ds-select {
  background-color: var(--ds-input-background-disabled);
  color: var(--ds-input-text-disabled);
  border-color: var(--ds-input-border-disabled);
  cursor: not-allowed;
}
/* Form group */
.ds-form-group {
  border: 1px solid var(--ds-border-color-default);
  border-radius: var(--ds-border-radius-m);
  padding: var(--ds-spacing-m);
  background-color: var(--ds-surface-background);
}
.ds-form-group-title {
  font-size: var(--ds-typography-desktop-h4-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin-bottom: var(--ds-spacing-m);
  padding-bottom: var(--ds-spacing-s);
  border-bottom: 1px solid var(--ds-border-color-light);
}
.ds-form-group-description {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  margin-bottom: var(--ds-spacing-m);
}
/* Form actions */
.ds-form-actions {
  display: flex;
  gap: var(--ds-spacing-s);
  align-items: center;
  justify-content: flex-end;
  padding-top: var(--ds-spacing-m);
  border-top: 1px solid var(--ds-border-color-light);
  margin-top: var(--ds-spacing-m);
}
.ds-form-actions-start {
  justify-content: flex-start;
}
.ds-form-actions-center {
  justify-content: center;
}
.ds-form-actions-between {
  justify-content: space-between;
}
/* Form layout helpers */
.ds-form-row {
  display: grid;
  gap: var(--ds-spacing-m);
}
.ds-form-row-2 {
  grid-template-columns: repeat(2, 1fr);
}
.ds-form-row-3 {
  grid-template-columns: repeat(3, 1fr);
}
.ds-form-row-4 {
  grid-template-columns: repeat(4, 1fr);
}
/* Responsive form adjustments (убрал var(--ds-spacing-xs) из padding) */
@media (max-width: 640px) {
  .ds-form {
    padding-left: 0;
    padding-right: 0;
  }

  .ds-form-inline {
    flex-direction: column;
    align-items: stretch;
  }

  .ds-form-field-inline {
    flex-direction: column;
    align-items: flex-start;
  }

  .ds-form-row-2,
  .ds-form-row-3,
  .ds-form-row-4 {
    grid-template-columns: 1fr;
  }

  .ds-form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .ds-form-actions .ds-btn {
    width: 100%;
    justify-content: center;
  }
}
/* Form validation states */
.ds-form-field[data-validation="valid"] .ds-input,
.ds-form-field[data-validation="valid"] .ds-textarea,
.ds-form-field[data-validation="valid"] .ds-select {
  border-color: var(--ds-status-success);
}
.ds-form-field[data-validation="invalid"] .ds-input,
.ds-form-field[data-validation="invalid"] .ds-textarea,
.ds-form-field[data-validation="invalid"] .ds-select {
  border-color: var(--ds-status-error);
}
.ds-form-field[data-validation="warning"] .ds-input,
.ds-form-field[data-validation="warning"] .ds-textarea,
.ds-form-field[data-validation="warning"] .ds-select {
  border-color: var(--ds-status-warning);
}
/* Loading state for forms */
.ds-form-loading {
  position: relative;
  pointer-events: none;
}
.ds-form-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: var(--ds-border-radius-m);
}
.ds-form-loading .ds-spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--ds-surface-background-secondary);
  border-top: 3px solid var(--ds-status-info);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
/* DS: form.field.css - Form field component */
/* layer: components */
.ds-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-2xs);
  position: relative;
}
.ds-form-field-horizontal {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--ds-spacing-m);
}
.ds-form-field-horizontal .ds-form-field-content {
  flex: 1;
}
.ds-form-field-horizontal .ds-form-field-label {
  min-width: 120px;
  margin-top: var(--ds-spacing-s);
  margin-bottom: 0;
}
/* Form field label */
.ds-form-field-label {
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 400;
  color: var(--ds-text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-2xs);
}
.ds-form-field-label-required::after {
  content: '*';
  color: var(--ds-status-error);
  font-weight: 600;
}
.ds-form-field-label-optional::after {
  content: '(optional)';
  color: var(--ds-text-tertiary);
  font-weight: 400;
  font-size: var(--ds-typography-desktop-extra-small-font-size);
}
/* Form field content */
.ds-form-field-content {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-2xs);
}
/* Form field hint */
.ds-form-field-hint {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  color: var(--ds-text-secondary);
  margin: 0;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: var(--ds-spacing-2xs);
}
.ds-form-field-hint-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
/* Form field error */
.ds-form-field-error {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  color: var(--ds-status-error);
  margin: 0;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: var(--ds-spacing-2xs);
  animation: formFieldErrorSlideIn 0.3s ease-out;
}
@keyframes formFieldErrorSlideIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.ds-form-field-error-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
/* Form field success */
.ds-form-field-success {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  color: var(--ds-status-success);
  margin: 0;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: var(--ds-spacing-2xs);
}
.ds-form-field-success-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
/* Form field warning */
.ds-form-field-warning {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  color: var(--ds-status-warning);
  margin: 0;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: var(--ds-spacing-2xs);
}
.ds-form-field-warning-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
/* Form field sizes */
.ds-form-field-sm .ds-form-field-label {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
}
.ds-form-field-sm .ds-form-field-hint,
.ds-form-field-sm .ds-form-field-error,
.ds-form-field-sm .ds-form-field-success,
.ds-form-field-sm .ds-form-field-warning {
  font-size: 0.625rem;
}
.ds-form-field-lg .ds-form-field-label {
  font-size: var(--ds-typography-desktop-body-font-size);
}
.ds-form-field-lg .ds-form-field-hint,
.ds-form-field-lg .ds-form-field-error,
.ds-form-field-lg .ds-form-field-success,
.ds-form-field-lg .ds-form-field-warning {
  font-size: var(--ds-typography-desktop-small-font-size);
}
/* Form field with tooltip */
.ds-form-field-with-tooltip {
  position: relative;
}
.ds-form-field-tooltip-trigger {
  margin-left: var(--ds-spacing-2xs);
  color: var(--ds-text-tertiary);
  cursor: help;
  transition: color var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-form-field-tooltip-trigger:hover {
  color: var(--ds-text-secondary);
}
.ds-form-field-tooltip {
  position: absolute;
  top: calc(100% + var(--ds-spacing-xs));
  left: 0;
  z-index: var(--ds-z-index-tooltip);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  box-shadow: var(--ds-shadow-lg);
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  max-width: 250px;
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-primary);
  line-height: 1.5;
  opacity: 0;
  visibility: hidden;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  pointer-events: none;
}
.ds-form-field-tooltip-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* Form field with character counter */
.ds-form-field-with-counter .ds-form-field-counter {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  color: var(--ds-text-tertiary);
  margin: 0;
  text-align: right;
  line-height: 1;
}
.ds-form-field-counter-warning {
  color: var(--ds-status-warning);
}
.ds-form-field-counter-error {
  color: var(--ds-status-error);
}
/* Form field with prefix/suffix */
.ds-form-field-with-prefix,
.ds-form-field-with-suffix {
  position: relative;
}
.ds-form-field-prefix,
.ds-form-field-suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ds-text-secondary);
  pointer-events: none;
  z-index: 1;
}
.ds-form-field-prefix {
  left: var(--ds-spacing-s);
}
.ds-form-field-suffix {
  right: var(--ds-spacing-s);
}
.ds-form-field-with-prefix .ds-form-field-input {
  padding-left: 2.5rem;
}
.ds-form-field-with-suffix .ds-form-field-input {
  padding-right: 2.5rem;
}
.ds-form-field-with-prefix.ds-form-field-with-suffix .ds-form-field-input {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
/* Form field disabled state */
.ds-form-field-disabled .ds-form-field-label {
  color: var(--ds-text-disabled);
}
.ds-form-field-disabled .ds-form-field-hint {
  color: var(--ds-text-disabled);
}
/* Form field readonly state */
.ds-form-field-readonly .ds-form-field-label {
  color: var(--ds-text-secondary);
}
.ds-form-field-readonly .ds-form-field-hint {
  color: var(--ds-text-secondary);
}
/* Form field required state */
.ds-form-field-required .ds-form-field-label {
  font-weight: 600;
}
/* Form field inline */
.ds-form-field-inline {
  flex-direction: row;
  align-items: center;
  gap: var(--ds-spacing-m);
}
.ds-form-field-inline .ds-form-field-label {
  margin: 0;
  min-width: 100px;
}
.ds-form-field-inline .ds-form-field-content {
  flex: 1;
}
/* Form field group */
.ds-form-field-group {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-s);
}
.ds-form-field-group-horizontal {
  flex-direction: row;
  gap: var(--ds-spacing-m);
}
.ds-form-field-group-horizontal .ds-form-field {
  flex: 1;
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ds-form-field-horizontal {
    flex-direction: column;
    gap: var(--ds-spacing-s);
  }

  .ds-form-field-horizontal .ds-form-field-label {
    min-width: auto;
    margin-top: 0;
  }

  .ds-form-field-inline {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-spacing-xs);
  }

  .ds-form-field-inline .ds-form-field-label {
    min-width: auto;
  }

  .ds-form-field-group-horizontal {
    flex-direction: column;
    gap: var(--ds-spacing-s);
  }
}
@media (max-width: 480px) {
  .ds-form-field-tooltip {
    max-width: 200px;
    left: 50%;
    transform: translateX(-50%);
  }

  .ds-form-field-with-prefix .ds-form-field-input,
  .ds-form-field-with-suffix .ds-form-field-input {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-form-field-error {
    font-weight: 600;
  }

  .ds-form-field-tooltip {
    border-width: 2px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-form-field-error {
    animation: none;
  }

  .ds-form-field-tooltip {
    transition: none;
  }

  .ds-form-field-tooltip-trigger {
    transition: none;
  }

  @keyframes formFieldErrorSlideIn {
    animation: none;
  }
}
/* Print styles */
@media print {
  .ds-form-field-label {
    color: #000;
    font-weight: 600;
  }

  .ds-form-field-hint {
    color: #666;
  }

  .ds-form-field-error {
    color: #000;
    font-weight: 600;
    animation: none;
  }

  .ds-form-field-tooltip {
    display: none !important;
  }

  .ds-form-field-counter {
    display: none;
  }
}
/* DS: form.validation.css - Form validation component */
/* layer: components */
.ds-form-validation {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-xs);
}
/* Form validation summary */
.ds-form-validation-summary {
  padding: var(--ds-spacing-m);
  background-color: var(--ds-surface-secondary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-s);
}
.ds-form-validation-summary-title {
  font-size: var(--ds-typography-desktop-h4-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
}
.ds-form-validation-summary-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--ds-status-error);
  flex-shrink: 0;
}
.ds-form-validation-summary-description {
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-secondary);
  margin: 0;
  line-height: 1.5;
}
/* Form validation list */
.ds-form-validation-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-xs);
}
.ds-form-validation-item {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-spacing-xs);
  padding: var(--ds-spacing-xs);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-2xs);
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-primary);
  line-height: 1.4;
}
.ds-form-validation-item-icon {
  width: 1rem;
  height: 1rem;
  color: var(--ds-status-error);
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.ds-form-validation-item-link {
  color: var(--ds-interactive-primary);
  text-decoration: underline;
  cursor: pointer;
  transition: color var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-form-validation-item-link:hover {
  color: var(--ds-interactive-primary-hover);
  text-decoration: none;
}
/* Form validation types */
.ds-form-validation-error {
  border-color: var(--ds-status-error);
  background-color: var(--ds-status-error-bg);
}
.ds-form-validation-error .ds-form-validation-item-icon {
  color: var(--ds-status-error);
}
.ds-form-validation-success {
  border-color: var(--ds-status-success);
  background-color: var(--ds-status-success-bg);
}
.ds-form-validation-success .ds-form-validation-item-icon {
  color: var(--ds-status-success);
}
.ds-form-validation-success .ds-form-validation-summary-icon {
  color: var(--ds-status-success);
}
.ds-form-validation-warning {
  border-color: var(--ds-status-warning);
  background-color: var(--ds-status-warning-bg);
}
.ds-form-validation-warning .ds-form-validation-item-icon {
  color: var(--ds-status-warning);
}
.ds-form-validation-warning .ds-form-validation-summary-icon {
  color: var(--ds-status-warning);
}
.ds-form-validation-info {
  border-color: var(--ds-status-info);
  background-color: var(--ds-status-info-bg);
}
.ds-form-validation-info .ds-form-validation-item-icon {
  color: var(--ds-status-info);
}
.ds-form-validation-info .ds-form-validation-summary-icon {
  color: var(--ds-status-info);
}
/* Form validation inline */
.ds-form-validation-inline {
  flex-direction: row;
  align-items: center;
  gap: var(--ds-spacing-m);
}
.ds-form-validation-inline .ds-form-validation-summary {
  flex: 1;
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
}
.ds-form-validation-inline .ds-form-validation-list {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--ds-spacing-s);
}
.ds-form-validation-inline .ds-form-validation-item {
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
  font-size: var(--ds-typography-desktop-small-font-size);
}
/* Form validation tooltip */
.ds-form-validation-tooltip {
  position: absolute;
  z-index: var(--ds-z-index-tooltip);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  box-shadow: var(--ds-shadow-lg);
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  max-width: 300px;
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-primary);
  line-height: 1.5;
  opacity: 0;
  visibility: hidden;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  pointer-events: none;
}
.ds-form-validation-tooltip-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.ds-form-validation-tooltip::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}
.ds-form-validation-tooltip-top::before {
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px 8px 0 8px;
  border-color: var(--ds-surface-primary) transparent transparent transparent;
}
.ds-form-validation-tooltip-bottom::before {
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent var(--ds-surface-primary) transparent;
}
.ds-form-validation-tooltip-left::before {
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 8px 0 8px 8px;
  border-color: transparent transparent transparent var(--ds-surface-primary);
}
.ds-form-validation-tooltip-right::before {
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 8px 8px 8px 0;
  border-color: transparent var(--ds-surface-primary) transparent transparent;
}
/* Form validation field states */
.ds-form-field-error .ds-form-validation-tooltip {
  border-color: var(--ds-status-error);
}
.ds-form-field-error .ds-form-validation-tooltip::before {
  border-color: var(--ds-status-error) transparent transparent transparent;
}
.ds-form-field-success .ds-form-validation-tooltip {
  border-color: var(--ds-status-success);
}
.ds-form-field-success .ds-form-validation-tooltip::before {
  border-color: var(--ds-status-success) transparent transparent transparent;
}
.ds-form-field-warning .ds-form-validation-tooltip {
  border-color: var(--ds-status-warning);
}
.ds-form-field-warning .ds-form-validation-tooltip::before {
  border-color: var(--ds-status-warning) transparent transparent transparent;
}
.ds-form-field-info .ds-form-validation-tooltip {
  border-color: var(--ds-status-info);
}
.ds-form-field-info .ds-form-validation-tooltip::before {
  border-color: var(--ds-status-info) transparent transparent transparent;
}
/* Form validation live feedback */
.ds-form-validation-live {
  position: relative;
}
.ds-form-validation-live-feedback {
  position: absolute;
  top: calc(100% + var(--ds-spacing-2xs));
  left: 0;
  right: 0;
  z-index: var(--ds-z-index-tooltip);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-2xs);
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  color: var(--ds-text-secondary);
  opacity: 0;
  visibility: hidden;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  pointer-events: none;
}
.ds-form-validation-live-feedback-visible {
  opacity: 1;
  visibility: visible;
}
.ds-form-validation-live-feedback-error {
  border-color: var(--ds-status-error);
  background-color: var(--ds-status-error-bg);
  color: var(--ds-status-error);
}
.ds-form-validation-live-feedback-success {
  border-color: var(--ds-status-success);
  background-color: var(--ds-status-success-bg);
  color: var(--ds-status-success);
}
.ds-form-validation-live-feedback-warning {
  border-color: var(--ds-status-warning);
  background-color: var(--ds-status-warning-bg);
  color: var(--ds-status-warning);
}
.ds-form-validation-live-feedback-info {
  border-color: var(--ds-status-info);
  background-color: var(--ds-status-info-bg);
  color: var(--ds-status-info);
}
/* Form validation progress */
.ds-form-validation-progress {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  background-color: var(--ds-surface-secondary);
  border-radius: var(--ds-border-radius-m);
}
.ds-form-validation-progress-bar {
  flex: 1;
  height: 4px;
  background-color: var(--ds-surface-tertiary);
  border-radius: 2px;
  overflow: hidden;
}
.ds-form-validation-progress-fill {
  height: 100%;
  background-color: var(--ds-interactive-primary);
  border-radius: inherit;
  transition: width var(--ds-motion-duration-slow) var(--ds-motion-easing-standard);
}
.ds-form-validation-progress-text {
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 500;
  color: var(--ds-text-primary);
  white-space: nowrap;
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ds-form-validation-inline {
    flex-direction: column;
    gap: var(--ds-spacing-s);
  }

  .ds-form-validation-inline .ds-form-validation-list {
    flex-direction: column;
    gap: var(--ds-spacing-xs);
  }

  .ds-form-validation-tooltip {
    max-width: 250px;
  }
}
@media (max-width: 480px) {
  .ds-form-validation-summary {
    padding: var(--ds-spacing-s);
  }

  .ds-form-validation-tooltip {
    max-width: 200px;
    left: 50%;
    transform: translateX(-50%);
  }

  .ds-form-validation-tooltip::before {
    left: 50%;
    transform: translateX(-50%);
  }

  .ds-form-validation-live-feedback {
    left: 10px;
    right: 10px;
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-form-validation-summary,
  .ds-form-validation-item {
    border-width: 2px;
  }

  .ds-form-validation-tooltip {
    border-width: 2px;
  }

  .ds-form-validation-live-feedback {
    border-width: 2px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-form-validation-tooltip {
    transition: none;
  }

  .ds-form-validation-live-feedback {
    transition: none;
  }

  .ds-form-validation-item-link {
    transition: none;
  }

  .ds-form-validation-progress-fill {
    transition: none;
  }
}
/* Print styles */
@media print {
  .ds-form-validation {
    display: none !important;
  }

  .ds-form-validation-tooltip {
    display: none !important;
  }

  .ds-form-validation-live-feedback {
    display: none !important;
  }
}
/* DS: input.css - Input component */
/* layer: components */
.ds-input {
  display: block;
  width: 100%;
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  font-size: var(--ds-typography-desktop-body-font-size);
  line-height: 1.5;
  color: var(--ds-input-text);
  background-color: var(--ds-input-background);
  border: 1px solid var(--ds-input-border);
  border-radius: var(--ds-border-radius-s);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.ds-input:focus {
  outline: none;
  border-color: var(--ds-input-border-focus);
  box-shadow: var(--ds-input-shadow-active);
}
.ds-input:hover:not(:focus):not(:disabled) {
  border-color: var(--ds-input-border-hover);
}
.ds-input:disabled {
  background-color: var(--ds-input-background-disabled);
  color: var(--ds-input-text-disabled);
  border-color: var(--ds-input-border-disabled);
  cursor: not-allowed;
  opacity: 1;
}
.ds-input::-moz-placeholder {
  color: var(--ds-input-placeholder);
  opacity: 1;
}
.ds-input::placeholder {
  color: var(--ds-input-placeholder);
  opacity: 1;
}
.ds-input:hover::-moz-placeholder {
  color: var(--ds-input-placeholder-hover);
}
.ds-input:hover::placeholder {
  color: var(--ds-input-placeholder-hover);
}
.ds-input:focus::-moz-placeholder {
  color: var(--ds-input-placeholder-focus);
}
.ds-input:focus::placeholder {
  color: var(--ds-input-placeholder-focus);
}
.ds-input:disabled::-moz-placeholder {
  color: var(--ds-input-placeholder-disabled);
}
.ds-input:disabled::placeholder {
  color: var(--ds-input-placeholder-disabled);
}
/* Input sizes */
.ds-input-sm {
  padding: var(--ds-spacing-3xs) var(--ds-spacing-xs);
  font-size: var(--ds-typography-desktop-small-font-size);
}
.ds-input-lg {
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  font-size: var(--ds-typography-desktop-small-font-size);
}
/* Input states */
.ds-input-error {
  border-color: var(--ds-input-border-error);
}
.ds-input-error:focus {
  border-color: var(--ds-input-border-error);
  box-shadow: var(--ds-input-shadow-error);
}
.ds-input-error:hover:not(:focus) {
  border-color: var(--ds-input-border-error-hover);
}
/* Input with clear button */
.ds-input-group {
  position: relative;
  display: flex;
  align-items: center;
}
.ds-input-clear {
  position: absolute;
  right: var(--ds-spacing-xs);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--ds-input-clear);
  cursor: pointer;
  border-radius: var(--ds-border-radius-2xs);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  opacity: 0;
  pointer-events: none;
}
.ds-input:not(:-moz-placeholder) ~ .ds-input-clear {
  opacity: 1;
  pointer-events: auto;
}
.ds-input:not(:placeholder-shown) ~ .ds-input-clear {
  opacity: 1;
  pointer-events: auto;
}
.ds-input-clear:hover {
  color: var(--ds-input-clear-hover);
  background-color: rgba(0, 0, 0, 0.04);
}
.ds-input-clear:focus {
  color: var(--ds-input-clear-focus);
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
/* Native select styled as ds-input: add dropdown arrow */
select.ds-input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--ds-spacing-s) center;
  background-size: 16px 16px;
  padding-right: calc(var(--ds-spacing-l) + 10px);
  cursor: pointer;
}
/* Hide legacy arrow in IE */
select.ds-input::-ms-expand { display: none; }
/* No arrow for multi-select */
select.ds-input[multiple] { background-image: none; padding-right: var(--ds-spacing-s); }
/* Password input toggle */
.ds-input-password-toggle {
  position: absolute;
  right: var(--ds-spacing-xs);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--ds-input-password-toggle);
  cursor: pointer;
  border-radius: var(--ds-border-radius-2xs);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-input-password-toggle:hover {
  color: var(--ds-input-password-toggle-hover);
  background-color: rgba(0, 0, 0, 0.04);
}
.ds-input-password-toggle:focus {
  color: var(--ds-input-password-toggle-focus);
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
/* Input with addon */
.ds-input-addon {
  display: flex;
  align-items: center;
}
.ds-input-addon .ds-input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}
.ds-input-addon .ds-input:focus {
  z-index: 1;
}
.ds-input-addon-prefix,
.ds-input-addon-suffix {
  display: flex;
  align-items: center;
  padding: 0 var(--ds-spacing-s);
  background-color: var(--ds-surface-background-secondary);
  border: 1px solid var(--ds-border-color-default);
  color: var(--ds-text-secondary);
  font-size: var(--ds-typography-desktop-small-font-size);
}
.ds-input-addon-prefix {
  border-top-left-radius: var(--ds-border-radius-s);
  border-bottom-left-radius: var(--ds-border-radius-s);
  border-right: 0;
}
.ds-input-addon-suffix {
  border-top-right-radius: var(--ds-border-radius-s);
  border-bottom-right-radius: var(--ds-border-radius-s);
  border-left: 0;
}
/* Textarea */
.ds-textarea {
  min-height: 80px;
  resize: vertical;
}
.ds-textarea-sm {
  min-height: 60px;
}
.ds-textarea-lg {
  min-height: 120px;
}
/* DS: input.group.css - Input group component */
/* layer: components */
.ds-input-group {
  display: flex;
  align-items: stretch;
  position: relative;
}
.ds-input-group .ds-input {
  flex: 1;
  margin: 0;
}
.ds-input-group .ds-input-field {
  border-radius: 0;
}
.ds-input-group .ds-input-field:focus {
  z-index: 1;
  position: relative;
}
/* Input group addon */
.ds-input-addon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  background-color: var(--ds-surface-secondary);
  border: 1px solid var(--ds-border-primary);
  color: var(--ds-text-secondary);
  font-size: var(--ds-typography-desktop-body-font-size);
  font-weight: 500;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.ds-input-addon:first-child {
  border-right: none;
  border-top-left-radius: var(--ds-border-radius-m);
  border-bottom-left-radius: var(--ds-border-radius-m);
}
.ds-input-addon:last-child {
  border-left: none;
  border-top-right-radius: var(--ds-border-radius-m);
  border-bottom-right-radius: var(--ds-border-radius-m);
}
.ds-input-addon:only-child {
  border-radius: var(--ds-border-radius-m);
}
/* Input group button */
.ds-input-group-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: 0;
  cursor: pointer;
  color: var(--ds-text-primary);
  font-size: var(--ds-typography-desktop-body-font-size);
  font-weight: 500;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-input-group-button:hover {
  background-color: var(--ds-surface-secondary);
  border-color: var(--ds-border-secondary);
}
.ds-input-group-button:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
  z-index: 1;
}
.ds-input-group-button:active {
  background-color: var(--ds-surface-tertiary);
  transform: scale(0.95);
}
.ds-input-group-button:disabled {
  opacity: var(--ds-opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.ds-input-group-button:disabled:hover {
  background-color: var(--ds-surface-primary);
  border-color: var(--ds-border-primary);
  transform: none;
}
.ds-input-group-button:first-child {
  border-right: none;
  border-top-left-radius: var(--ds-border-radius-m);
  border-bottom-left-radius: var(--ds-border-radius-m);
}
.ds-input-group-button:last-child {
  border-left: none;
  border-top-right-radius: var(--ds-border-radius-m);
  border-bottom-right-radius: var(--ds-border-radius-m);
}
/* Input group sizes */
.ds-input-group-sm .ds-input-addon,
.ds-input-group-sm .ds-input-group-button {
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  font-size: var(--ds-typography-desktop-small-font-size);
}
.ds-input-group-lg .ds-input-addon,
.ds-input-group-lg .ds-input-group-button {
  padding: var(--ds-spacing-m) var(--ds-spacing-l);
  font-size: var(--ds-typography-desktop-h4-font-size);
}
/* Input group compact */
.ds-input-group-compact {
  width: -moz-fit-content;
  width: fit-content;
}
.ds-input-group-compact .ds-input {
  width: auto;
  min-width: 120px;
}
/* Input group with search */
.ds-input-group-search .ds-input-addon:first-child {
  background-color: var(--ds-surface-primary);
  border-right: 1px solid var(--ds-border-primary);
}
.ds-input-group-search .ds-input-field {
  border-left: none;
  border-right: none;
  padding-left: 0;
}
.ds-input-group-search .ds-input-field:focus {
  border-left: 1px solid var(--ds-interactive-primary);
  border-right: 1px solid var(--ds-interactive-primary);
}
/* Input group with dropdown */
.ds-input-group-dropdown {
  position: relative;
}
.ds-input-group-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-left: none;
  border-top-right-radius: var(--ds-border-radius-m);
  border-bottom-right-radius: var(--ds-border-radius-m);
  cursor: pointer;
  color: var(--ds-text-secondary);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-input-group-dropdown-toggle:hover {
  background-color: var(--ds-surface-secondary);
  border-color: var(--ds-border-secondary);
  color: var(--ds-text-primary);
}
.ds-input-group-dropdown-toggle:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
  z-index: 1;
}
.ds-input-group-dropdown-toggle:active {
  background-color: var(--ds-surface-tertiary);
}
.ds-input-group-dropdown-toggle-icon {
  width: 1rem;
  height: 1rem;
  transition: transform var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-input-group-dropdown-open .ds-input-group-dropdown-toggle-icon {
  transform: rotate(180deg);
}
/* Input group with multiple addons */
.ds-input-group-multiple .ds-input-addon:not(:first-child):not(:last-child) {
  border-left: none;
  border-right: none;
}
.ds-input-group-multiple .ds-input-group-button:not(:first-child):not(:last-child) {
  border-left: none;
  border-right: none;
}
/* Input group states */
.ds-input-group-error .ds-input-addon,
.ds-input-group-error .ds-input-group-button {
  border-color: var(--ds-status-error);
  background-color: var(--ds-status-error-bg);
}
.ds-input-group-error .ds-input-field:focus {
  border-color: var(--ds-status-error);
  outline-color: var(--ds-status-error);
}
.ds-input-group-success .ds-input-addon,
.ds-input-group-success .ds-input-group-button {
  border-color: var(--ds-status-success);
  background-color: var(--ds-status-success-bg);
}
.ds-input-group-success .ds-input-field:focus {
  border-color: var(--ds-status-success);
  outline-color: var(--ds-status-success);
}
.ds-input-group-warning .ds-input-addon,
.ds-input-group-warning .ds-input-group-button {
  border-color: var(--ds-status-warning);
  background-color: var(--ds-status-warning-bg);
}
.ds-input-group-warning .ds-input-field:focus {
  border-color: var(--ds-status-warning);
  outline-color: var(--ds-status-warning);
}
/* Input group disabled */
.ds-input-group:disabled .ds-input-addon,
.ds-input-group:disabled .ds-input-group-button {
  background-color: var(--ds-surface-disabled);
  border-color: var(--ds-border-disabled);
  color: var(--ds-text-disabled);
  opacity: var(--ds-opacity-disabled);
}
.ds-input-group:disabled .ds-input-group-button {
  cursor: not-allowed;
  pointer-events: none;
}
/* Input group with loading */
.ds-input-group-loading .ds-input-group-button {
  pointer-events: none;
}
.ds-input-group-loading .ds-input-spinner {
  width: 1rem;
  height: 1rem;
  color: var(--ds-interactive-primary);
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ds-input-group {
    flex-direction: column;
  }

  .ds-input-group .ds-input-field {
    border-radius: var(--ds-border-radius-m);
    border-left: 1px solid var(--ds-border-primary);
    border-right: 1px solid var(--ds-border-primary);
  }

  .ds-input-addon:first-child,
  .ds-input-addon:last-child,
  .ds-input-group-button:first-child,
  .ds-input-group-button:last-child {
    border-radius: 0;
  }

  .ds-input-addon {
    border-left: 1px solid var(--ds-border-primary);
    border-right: 1px solid var(--ds-border-primary);
    border-radius: 0;
  }

  .ds-input-group-button {
    border-left: 1px solid var(--ds-border-primary);
    border-right: 1px solid var(--ds-border-primary);
    border-radius: 0;
  }

  .ds-input-group-dropdown-toggle {
    border-left: 1px solid var(--ds-border-primary);
    border-right: 1px solid var(--ds-border-primary);
    border-radius: 0;
  }
}
@media (max-width: 480px) {
  .ds-input-addon,
  .ds-input-group-button {
    padding: var(--ds-spacing-xs) var(--ds-spacing-s);
    font-size: var(--ds-typography-desktop-small-font-size);
  }

  .ds-input-group-sm .ds-input-addon,
  .ds-input-group-sm .ds-input-group-button {
    padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
    font-size: var(--ds-typography-desktop-extra-small-font-size);
  }

  .ds-input-group-lg .ds-input-addon,
  .ds-input-group-lg .ds-input-group-button {
    padding: var(--ds-spacing-s) var(--ds-spacing-m);
    font-size: var(--ds-typography-desktop-body-font-size);
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-input-addon,
  .ds-input-group-button {
    border-width: 2px;
  }

  .ds-input-group-error .ds-input-addon,
  .ds-input-group-error .ds-input-group-button,
  .ds-input-group-success .ds-input-addon,
  .ds-input-group-success .ds-input-group-button,
  .ds-input-group-warning .ds-input-addon,
  .ds-input-group-warning .ds-input-group-button {
    border-width: 3px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-input-group-button,
  .ds-input-group-dropdown-toggle,
  .ds-input-group-dropdown-toggle-icon {
    transition: none;
  }
}
/* Print styles */
@media print {
  .ds-input-addon,
  .ds-input-group-button {
    border: 1px solid #000;
    background: #fff;
    color: #000;
  }

  .ds-input-group-error .ds-input-addon,
  .ds-input-group-error .ds-input-group-button {
    background: #fff;
  }

  .ds-input-group:disabled .ds-input-addon,
  .ds-input-group:disabled .ds-input-group-button {
    background: #f5f5f5;
    opacity: 1;
    color: #999;
  }
}
/* DS: input.states.css - Input states component */
/* layer: components */
.ds-input-error .ds-input-field {
  border-color: var(--ds-status-error);
}
.ds-input-error .ds-input-field:focus {
  outline-color: var(--ds-status-error);
  border-color: var(--ds-status-error);
}
.ds-input-error .ds-input-hint {
  color: var(--ds-status-error);
}
.ds-input-success .ds-input-field {
  border-color: var(--ds-status-success);
}
.ds-input-success .ds-input-field:focus {
  outline-color: var(--ds-status-success);
  border-color: var(--ds-status-success);
}
.ds-input-success .ds-input-hint {
  color: var(--ds-status-success);
}
.ds-input-warning .ds-input-field {
  border-color: var(--ds-status-warning);
}
.ds-input-warning .ds-input-field:focus {
  outline-color: var(--ds-status-warning);
  border-color: var(--ds-status-warning);
}
.ds-input-warning .ds-input-hint {
  color: var(--ds-status-warning);
}
.ds-input-info .ds-input-field {
  border-color: var(--ds-status-info);
}
.ds-input-info .ds-input-field:focus {
  outline-color: var(--ds-status-info);
  border-color: var(--ds-status-info);
}
.ds-input-info .ds-input-hint {
  color: var(--ds-status-info);
}
/* Input with validation icons */
.ds-input-error .ds-input-suffix::before {
  content: '';
  width: 1rem;
  height: 1rem;
  background-color: var(--ds-status-error);
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'/%3e%3cline x1='15' y1='9' x2='9' y2='15'/%3e%3cline x1='9' y1='9' x2='15' y2='15'/%3e%3c/svg%3e") no-repeat center;
          mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'/%3e%3cline x1='15' y1='9' x2='9' y2='15'/%3e%3cline x1='9' y1='9' x2='15' y2='15'/%3e%3c/svg%3e") no-repeat center;
  -webkit-mask-size: contain;
          mask-size: contain;
  display: block;
}
.ds-input-success .ds-input-suffix::before {
  content: '';
  width: 1rem;
  height: 1rem;
  background-color: var(--ds-status-success);
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20 6L9 17l-5-5'/%3e%3c/svg%3e") no-repeat center;
          mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20 6L9 17l-5-5'/%3e%3c/svg%3e") no-repeat center;
  -webkit-mask-size: contain;
          mask-size: contain;
  display: block;
}
.ds-input-warning .ds-input-suffix::before {
  content: '';
  width: 1rem;
  height: 1rem;
  background-color: var(--ds-status-warning);
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3e%3cline x1='12' y1='9' x2='12' y2='13'/%3e%3cline x1='12' y1='17' x2='12.01' y2='17'/%3e%3c/svg%3e") no-repeat center;
          mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3e%3cline x1='12' y1='9' x2='12' y2='13'/%3e%3cline x1='12' y1='17' x2='12.01' y2='17'/%3e%3c/svg%3e") no-repeat center;
  -webkit-mask-size: contain;
          mask-size: contain;
  display: block;
}
.ds-input-info .ds-input-suffix::before {
  content: '';
  width: 1rem;
  height: 1rem;
  background-color: var(--ds-status-info);
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'/%3e%3cpath d='M12 16v-4'/%3e%3cpath d='M12 8h.01'/%3e%3c/svg%3e") no-repeat center;
          mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'/%3e%3cpath d='M12 16v-4'/%3e%3cpath d='M12 8h.01'/%3e%3c/svg%3e") no-repeat center;
  -webkit-mask-size: contain;
          mask-size: contain;
  display: block;
}
/* Input loading state */
.ds-input-loading .ds-input-field {
  color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.ds-input-loading .ds-input-field::-moz-placeholder {
  color: transparent;
}
.ds-input-loading .ds-input-field::placeholder {
  color: transparent;
}
.ds-input-loading .ds-input-suffix {
  pointer-events: none;
}
.ds-input-spinner {
  width: 1rem;
  height: 1rem;
  color: var(--ds-interactive-primary);
}
/* Input disabled state */
.ds-input:disabled .ds-input-field {
  background-color: var(--ds-surface-disabled);
  color: var(--ds-text-disabled);
  cursor: not-allowed;
  opacity: var(--ds-opacity-disabled);
}
.ds-input:disabled .ds-input-field:hover {
  border-color: var(--ds-border-primary);
}
.ds-input:disabled .ds-input-label {
  color: var(--ds-text-disabled);
}
.ds-input:disabled .ds-input-hint {
  color: var(--ds-text-disabled);
}
/* Input readonly state */
.ds-input-readonly .ds-input-field {
  background-color: var(--ds-surface-secondary);
  color: var(--ds-text-secondary);
  cursor: default;
}
.ds-input-readonly .ds-input-field:focus {
  outline: none;
  border-color: var(--ds-border-primary);
}
/* Input focus states */
.ds-input .ds-input-field:focus {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
  border-color: var(--ds-interactive-primary);
}
.ds-input .ds-input-field:focus:not(:focus-visible) {
  outline: none;
}
/* Input hover states */
.ds-input .ds-input-field:hover:not(:focus) {
  border-color: var(--ds-border-secondary);
}
/* Input with character counter */
.ds-input-with-counter .ds-input-field {
  padding-bottom: 2rem;
}
.ds-input-counter {
  position: absolute;
  bottom: var(--ds-spacing-xs);
  right: var(--ds-spacing-s);
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  color: var(--ds-text-tertiary);
  background-color: var(--ds-surface-primary);
  padding: 0 var(--ds-spacing-2xs);
  border-radius: var(--ds-border-radius-2xs);
  line-height: 1;
  pointer-events: none;
}
.ds-input .ds-input-field:focus + .ds-input-counter {
  color: var(--ds-text-secondary);
}
.ds-input-counter-warning {
  color: var(--ds-status-warning);
}
.ds-input-counter-error {
  color: var(--ds-status-error);
}
/* Input validation states */
.ds-input-touched.ds-input-invalid .ds-input-field {
  animation: inputShake 0.5s ease-in-out;
}
@keyframes inputShake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}
.ds-input-touched.ds-input-valid .ds-input-field {
  animation: inputPulse 0.3s ease-out;
}
@keyframes inputPulse {
  0% {
    box-shadow: 0 0 0 0 var(--ds-status-success);
  }
  70% {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}
/* Input with autocomplete */
.ds-input-autocomplete-open .ds-input-field {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.ds-input-autocomplete-loading .ds-input-suffix {
  pointer-events: none;
}
/* Input with clear button */
.ds-input-clearable .ds-input-suffix {
  cursor: pointer;
  transition: color var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-input-clearable .ds-input-suffix:hover {
  color: var(--ds-text-primary);
}
.ds-input-clearable .ds-input-suffix:active {
  color: var(--ds-interactive-primary);
}
/* Responsive adjustments */
@media (max-width: 480px) {
  .ds-input-counter {
    font-size: 0.625rem;
    bottom: var(--ds-spacing-2xs);
    right: var(--ds-spacing-xs);
  }

  .ds-input-with-counter .ds-input-field {
    padding-bottom: 1.5rem;
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-input-error .ds-input-field,
  .ds-input-success .ds-input-field,
  .ds-input-warning .ds-input-field,
  .ds-input-info .ds-input-field {
    border-width: 3px;
  }

  .ds-input .ds-input-field:focus {
    border-width: 3px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-input-touched.ds-input-invalid .ds-input-field,
  .ds-input-touched.ds-input-valid .ds-input-field {
    animation: none;
  }

  .ds-input-clearable .ds-input-suffix {
    transition: none;
  }

  @keyframes inputShake,
  @keyframes inputPulse {
    animation: none;
  }
}
/* Print styles */
@media print {
  .ds-input .ds-input-field {
    border: 1px solid #000;
    background: #fff;
    color: #000;
  }

  .ds-input:disabled .ds-input-field {
    background: #f5f5f5;
    opacity: 1;
    color: #999;
  }

  .ds-input-readonly .ds-input-field {
    background: #fff;
    color: #000;
  }

  .ds-input-counter {
    display: none;
  }

  .ds-input-loading .ds-input-field {
    color: #000;
  }

  .ds-input-touched.ds-input-invalid .ds-input-field,
  .ds-input-touched.ds-input-valid .ds-input-field {
    animation: none;
  }
}
/* DS: kbd.css - Keyboard shortcut component */
/* layer: components */
.ds-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 var(--ds-spacing-2xs);
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 500;
  line-height: 1;
  color: var(--ds-kbd-fg);
  background-color: var(--ds-kbd-bg);
  border: 1px solid var(--ds-kbd-border);
  border-radius: var(--ds-border-radius-2xs);
  box-shadow: var(--ds-kbd-shadow);
  font-family: var(--ds-typography-font-family-mono);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
}
.ds-kbd:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
/* Kbd sizes */
.ds-kbd-sm {
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 var(--ds-spacing-3xs);
  font-size: var(--ds-typography-desktop-extra-small-font-size);
}
.ds-kbd-lg {
  min-width: 2rem;
  height: 2rem;
  padding: 0 var(--ds-spacing-xs);
  font-size: var(--ds-typography-desktop-body-font-size);
}
/* Kbd variants */
.ds-kbd-outline {
  background-color: transparent;
  border-color: var(--ds-kbd-border-outline);
  color: var(--ds-kbd-fg-outline);
  box-shadow: none;
}
.ds-kbd-ghost {
  background-color: transparent;
  border: none;
  box-shadow: none;
  color: var(--ds-kbd-fg-ghost);
}
.ds-kbd-ghost:hover {
  background-color: var(--ds-surface-secondary);
}
.ds-kbd-solid {
  background-color: var(--ds-kbd-bg-solid);
  border-color: var(--ds-kbd-bg-solid);
  color: var(--ds-kbd-fg-solid);
  box-shadow: var(--ds-shadow-xs);
}
/* Kbd combinations */
.ds-kbd-group {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-spacing-2xs);
}
.ds-kbd-group .ds-kbd {
  border-radius: 0;
}
.ds-kbd-group .ds-kbd:first-child {
  border-radius: var(--ds-border-radius-2xs) 0 0 var(--ds-border-radius-2xs);
}
.ds-kbd-group .ds-kbd:last-child {
  border-radius: 0 var(--ds-border-radius-2xs) var(--ds-border-radius-2xs) 0;
}
.ds-kbd-group .ds-kbd:not(:first-child):not(:last-child) {
  border-left: none;
  border-right: none;
}
/* Kbd with icons */
.ds-kbd-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
}
.ds-kbd-icon .ds-icon {
  width: 0.875rem;
  height: 0.875rem;
}
/* Kbd in different contexts */
.ds-kbd-inline {
  vertical-align: baseline;
  margin: 0 var(--ds-spacing-3xs);
}
.ds-kbd-block {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin: var(--ds-spacing-2xs) 0;
}
/* Kbd states */
.ds-kbd:active {
  transform: translateY(1px);
  box-shadow: var(--ds-shadow-xs);
}
.ds-kbd:disabled {
  opacity: var(--ds-opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
/* Kbd animations */
.ds-kbd-pulse {
  animation: kbdPulse 2s infinite;
}
@keyframes kbdPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}
/* Responsive adjustments */
@media (max-width: 640px) {
  .ds-kbd {
    font-size: var(--ds-typography-mobile-small-font-size);
    min-width: 1.25rem;
    height: 1.25rem;
  }

  .ds-kbd-lg {
    min-width: 1.5rem;
    height: 1.5rem;
    font-size: var(--ds-typography-mobile-body-font-size);
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-kbd {
    border-width: 2px;
    box-shadow: none;
  }

  .ds-kbd-outline {
    border-width: 2px;
  }

  .ds-kbd-ghost {
    border: 1px solid var(--ds-text-primary);
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-kbd:active {
    transform: none;
  }

  .ds-kbd-pulse {
    animation: none;
  }
}
/* Print styles */
@media print {
  .ds-kbd {
    border: 1px solid #000;
    background: #fff;
    color: #000;
    box-shadow: none;
  }

  .ds-kbd-outline,
  .ds-kbd-ghost {
    border: 1px solid #000;
    background: transparent;
  }

  .ds-kbd-solid {
    background: #000;
    color: #fff;
    border-color: #000;
  }
}
/* DS: link.css - Link component */
/* layer: components */
.ds-link {
  color: var(--ds-link-color);
  -webkit-text-decoration: var(--ds-link-decoration);
          text-decoration: var(--ds-link-decoration);
  font-size: inherit;
  line-height: inherit;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  display: inline;
  position: relative;
}
.ds-link:hover {
  color: var(--ds-link-color-hover);
  -webkit-text-decoration: var(--ds-link-decoration-hover);
          text-decoration: var(--ds-link-decoration-hover);
}
.ds-link:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
  color: var(--ds-link-color-focus);
  -webkit-text-decoration: var(--ds-link-decoration-focus);
          text-decoration: var(--ds-link-decoration-focus);
}
.ds-link:active {
  color: var(--ds-link-color-active);
  -webkit-text-decoration: var(--ds-link-decoration-active);
          text-decoration: var(--ds-link-decoration-active);
}
.ds-link:visited {
  color: var(--ds-link-color-visited);
}
.ds-link:visited:hover {
  color: var(--ds-link-color-visited-hover);
}
.ds-link:visited:focus-visible {
  color: var(--ds-link-color-visited-focus);
}
/* Link variants */
.ds-link-subtle {
  color: var(--ds-link-subtle-color);
  -webkit-text-decoration: var(--ds-link-subtle-decoration);
          text-decoration: var(--ds-link-subtle-decoration);
}
.ds-link-subtle:hover {
  color: var(--ds-link-subtle-color-hover);
  -webkit-text-decoration: var(--ds-link-subtle-decoration-hover);
          text-decoration: var(--ds-link-subtle-decoration-hover);
}
.ds-link-subtle:focus-visible {
  color: var(--ds-link-subtle-color-focus);
  -webkit-text-decoration: var(--ds-link-subtle-decoration-focus);
          text-decoration: var(--ds-link-subtle-decoration-focus);
}
.ds-link-subtle:active {
  color: var(--ds-link-subtle-color-active);
  -webkit-text-decoration: var(--ds-link-subtle-decoration-active);
          text-decoration: var(--ds-link-subtle-decoration-active);
}
.ds-link-subtle:visited {
  color: var(--ds-link-subtle-color-visited);
}
.ds-link-muted {
  color: var(--ds-link-muted-color);
  -webkit-text-decoration: var(--ds-link-muted-decoration);
          text-decoration: var(--ds-link-muted-decoration);
  opacity: 0.7;
}
.ds-link-muted:hover {
  color: var(--ds-link-muted-color-hover);
  -webkit-text-decoration: var(--ds-link-muted-decoration-hover);
          text-decoration: var(--ds-link-muted-decoration-hover);
  opacity: 1;
}
.ds-link-muted:focus-visible {
  color: var(--ds-link-muted-color-focus);
  -webkit-text-decoration: var(--ds-link-muted-decoration-focus);
          text-decoration: var(--ds-link-muted-decoration-focus);
  opacity: 1;
}
.ds-link-muted:active {
  color: var(--ds-link-muted-color-active);
  -webkit-text-decoration: var(--ds-link-muted-decoration-active);
          text-decoration: var(--ds-link-muted-decoration-active);
}
.ds-link-muted:visited {
  color: var(--ds-link-muted-color-visited);
}
/* Link with icon */
.ds-link-with-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-spacing-2xs);
}
.ds-link-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  transition: transform var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-link-with-icon:hover .ds-link-icon {
  transform: translateX(2px);
}
/* Link sizes */
.ds-link-sm {
  font-size: var(--ds-typography-desktop-small-font-size);
}
.ds-link-lg {
  font-size: var(--ds-typography-desktop-h4-font-size);
}
/* Link states */
.ds-link:disabled,
.ds-link[aria-disabled="true"] {
  color: var(--ds-link-color-disabled);
  -webkit-text-decoration: var(--ds-link-decoration-disabled);
          text-decoration: var(--ds-link-decoration-disabled);
  cursor: not-allowed;
  opacity: var(--ds-opacity-disabled);
  pointer-events: none;
}
.ds-link[aria-current="page"] {
  color: var(--ds-link-color-current);
  -webkit-text-decoration: var(--ds-link-decoration-current);
          text-decoration: var(--ds-link-decoration-current);
  font-weight: 500;
}
.ds-link[aria-current="page"]:hover {
  color: var(--ds-link-color-current-hover);
  -webkit-text-decoration: var(--ds-link-decoration-current-hover);
          text-decoration: var(--ds-link-decoration-current-hover);
}
.ds-link[aria-current="page"]:focus-visible {
  color: var(--ds-link-color-current-focus);
  -webkit-text-decoration: var(--ds-link-decoration-current-focus);
          text-decoration: var(--ds-link-decoration-current-focus);
}
/* Link with underline styles */
.ds-link-underline {
  text-decoration: underline;
  text-decoration-color: var(--ds-link-underline-color);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.ds-link-underline:hover {
  text-decoration-color: var(--ds-link-underline-color-hover);
  text-decoration-thickness: 2px;
}
.ds-link-underline:focus-visible {
  text-decoration-color: var(--ds-link-underline-color-focus);
  text-decoration-thickness: 2px;
}
.ds-link-underline:active {
  text-decoration-color: var(--ds-link-underline-color-active);
  text-decoration-thickness: 2px;
}
/* Link with external icon */
.ds-link-external {
  position: relative;
}
.ds-link-external::after {
  content: '';
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-left: var(--ds-spacing-3xs);
  background-image: var(--ds-icon-external);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  opacity: 0.7;
}
.ds-link-external:hover::after {
  opacity: 1;
}
/* Link group */
.ds-link-group {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  flex-wrap: wrap;
}
.ds-link-group .ds-link {
  position: relative;
}
.ds-link-group .ds-link:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--ds-text-tertiary);
}
/* Link in navigation */
.ds-nav-link {
  display: block;
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  border-radius: var(--ds-border-radius-m);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  text-decoration: none;
  color: var(--ds-nav-link-color);
}
.ds-nav-link:hover {
  background-color: var(--ds-nav-link-bg-hover);
  color: var(--ds-nav-link-color-hover);
}
.ds-nav-link:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: -2px;
  background-color: var(--ds-nav-link-bg-focus);
  color: var(--ds-nav-link-color-focus);
}
.ds-nav-link[aria-current="page"] {
  background-color: var(--ds-nav-link-bg-current);
  color: var(--ds-nav-link-color-current);
  font-weight: 500;
}
.ds-nav-link[aria-current="page"]:hover {
  background-color: var(--ds-nav-link-bg-current-hover);
  color: var(--ds-nav-link-color-current-hover);
}
/* Link in breadcrumb */
.ds-breadcrumb-link {
  color: var(--ds-text-secondary);
  text-decoration: none;
  padding: var(--ds-spacing-3xs) var(--ds-spacing-2xs);
  border-radius: var(--ds-border-radius-2xs);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-breadcrumb-link:hover {
  color: var(--ds-text-primary);
  background-color: var(--ds-surface-secondary);
}
.ds-breadcrumb-link:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-breadcrumb-link[aria-current="page"] {
  color: var(--ds-text-primary);
  font-weight: 500;
  cursor: default;
  pointer-events: none;
}
/* Responsive adjustments */
@media (max-width: 640px) {
  .ds-link-group {
    gap: var(--ds-spacing-xs);
  }

  .ds-link-with-icon {
    gap: var(--ds-spacing-3xs);
  }

  .ds-link-icon {
    width: 0.875rem;
    height: 0.875rem;
  }

  .ds-nav-link {
    padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-link {
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }

  .ds-link-subtle {
    text-decoration: underline;
    text-decoration-thickness: 1px;
  }

  .ds-link-muted {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    opacity: 1;
  }

  .ds-link:hover {
    text-decoration-thickness: 3px;
  }

  .ds-link:focus-visible {
    text-decoration-thickness: 3px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-link,
  .ds-link-icon,
  .ds-nav-link,
  .ds-breadcrumb-link {
    transition: none;
  }

  .ds-link-with-icon:hover .ds-link-icon {
    transform: none;
  }
}
/* Print styles */
@media print {
  .ds-link {
    color: #000;
    text-decoration: underline;
  }

  .ds-link:visited {
    color: #000;
  }

  .ds-link::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }

  .ds-link-external::after {
    display: none;
  }

  .ds-nav-link {
    background: none;
    color: #000;
    text-decoration: underline;
  }

  .ds-nav-link[aria-current="page"] {
    background: none;
    font-weight: bold;
    text-decoration: none;
  }
}
/* DS: list.css - List component */
/* layer: components */
.ds-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.ds-list-item {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  border-bottom: 1px solid var(--ds-border-primary);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  cursor: pointer;
}
.ds-list-item:last-child {
  border-bottom: none;
}
.ds-list-item:hover {
  background-color: var(--ds-surface-secondary);
}
.ds-list-item:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: -2px;
}
.ds-list-item:active {
  background-color: var(--ds-surface-tertiary);
}
/* List item content */
.ds-list-item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-2xs);
}
.ds-list-item-title {
  font-size: var(--ds-typography-desktop-body-font-size);
  font-weight: 500;
  color: var(--ds-text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.ds-list-item-description {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  margin: 0;
  line-height: 1.4;
}
.ds-list-item-meta {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  color: var(--ds-text-tertiary);
  margin: 0;
}
/* List item prefix/suffix */
.ds-list-item-prefix,
.ds-list-item-suffix {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ds-list-item-prefix {
  color: var(--ds-text-secondary);
}
.ds-list-item-suffix {
  color: var(--ds-text-secondary);
  font-size: var(--ds-typography-desktop-small-font-size);
}
/* List item avatar */
.ds-list-item-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: var(--ds-border-radius-m);
  overflow: hidden;
  flex-shrink: 0;
}
.ds-list-item-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
/* List item icon */
.ds-list-item-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--ds-text-secondary);
  flex-shrink: 0;
}
/* List item checkbox/radio */
.ds-list-item-control {
  flex-shrink: 0;
}
/* List item states */
.ds-list-item-selected {
  background-color: var(--ds-interactive-primary-bg);
  border-color: var(--ds-interactive-primary);
}
.ds-list-item-selected .ds-list-item-title {
  color: var(--ds-interactive-primary);
  font-weight: 600;
}
.ds-list-item-disabled {
  opacity: var(--ds-opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.ds-list-item-disabled .ds-list-item-title,
.ds-list-item-disabled .ds-list-item-description,
.ds-list-item-disabled .ds-list-item-meta {
  color: var(--ds-text-disabled);
}
/* List variants */
.ds-list-bordered {
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  overflow: hidden;
}
.ds-list-bordered .ds-list-item:first-child {
  border-top: 1px solid var(--ds-border-primary);
}
.ds-list-separated .ds-list-item {
  border-bottom: 1px solid var(--ds-border-secondary);
  margin-bottom: var(--ds-spacing-xs);
  border-radius: var(--ds-border-radius-2xs);
}
.ds-list-separated .ds-list-item:last-child {
  margin-bottom: 0;
}
.ds-list-compact .ds-list-item {
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  gap: var(--ds-spacing-xs);
}
.ds-list-compact .ds-list-item-title {
  font-size: var(--ds-typography-desktop-small-font-size);
}
.ds-list-compact .ds-list-item-description {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
}
.ds-list-spacious .ds-list-item {
  padding: var(--ds-spacing-m) var(--ds-spacing-l);
  gap: var(--ds-spacing-m);
}
.ds-list-striped .ds-list-item:nth-child(even) {
  background-color: var(--ds-surface-secondary);
}
.ds-list-striped .ds-list-item:hover:nth-child(even) {
  background-color: var(--ds-surface-tertiary);
}
/* List with dividers */
.ds-list-with-dividers .ds-list-item {
  position: relative;
}
.ds-list-with-dividers .ds-list-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--ds-spacing-m);
  right: var(--ds-spacing-m);
  height: 1px;
  background-color: var(--ds-border-secondary);
}
/* List with drag and drop */
.ds-list-draggable .ds-list-item {
  cursor: grab;
}
.ds-list-draggable .ds-list-item:active {
  cursor: grabbing;
}
.ds-list-dragging .ds-list-item {
  opacity: 0.5;
  transform: rotate(2deg);
}
.ds-list-drop-target {
  position: relative;
}
.ds-list-drop-target::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--ds-interactive-primary);
  z-index: 1;
}
.ds-list-drop-target::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--ds-interactive-primary);
  z-index: 1;
}
/* List with search */
.ds-list-search {
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  border-bottom: 1px solid var(--ds-border-primary);
  background-color: var(--ds-surface-secondary);
}
.ds-list-search-input {
  width: 100%;
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-2xs);
  font-size: var(--ds-typography-desktop-body-font-size);
  background-color: var(--ds-surface-primary);
  color: var(--ds-text-primary);
}
.ds-list-search-input:focus {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
  border-color: var(--ds-interactive-primary);
}
/* List with actions */
.ds-list-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
  margin-left: auto;
}
.ds-list-action {
  width: 1.5rem;
  height: 1.5rem;
  background: none;
  border: none;
  border-radius: var(--ds-border-radius-2xs);
  cursor: pointer;
  color: var(--ds-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-list-action:hover {
  background-color: var(--ds-surface-tertiary);
  color: var(--ds-text-primary);
}
.ds-list-action:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
/* List empty state */
.ds-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--ds-spacing-2xl);
  text-align: center;
  color: var(--ds-text-secondary);
}
.ds-list-empty-icon {
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--ds-spacing-m);
  opacity: 0.5;
}
.ds-list-empty-title {
  font-size: var(--ds-typography-desktop-h4-font-size);
  font-weight: 600;
  margin: 0 0 var(--ds-spacing-s) 0;
  color: var(--ds-text-primary);
}
.ds-list-empty-description {
  font-size: var(--ds-typography-desktop-body-font-size);
  margin: 0;
  max-width: 300px;
}
/* List loading state */
.ds-list-loading .ds-list-item {
  pointer-events: none;
}
.ds-list-loading .ds-list-item-title,
.ds-list-loading .ds-list-item-description {
  background-color: var(--ds-surface-secondary);
  color: transparent;
  border-radius: var(--ds-border-radius-2xs);
}
.ds-list-loading .ds-list-item-title {
  height: 1.2em;
  margin-bottom: var(--ds-spacing-2xs);
}
.ds-list-loading .ds-list-item-description {
  height: 1em;
  width: 80%;
}
/* List with virtual scroll */
.ds-list-virtual {
  height: 300px;
  overflow: auto;
}
.ds-list-virtual-item {
  position: absolute;
  top: var(--virtual-top, 0);
  left: 0;
  right: 0;
  width: 100%;
}
/* List animations */
.ds-list-item-entering {
  animation: listItemSlideIn 0.3s ease-out;
}
.ds-list-item-exiting {
  animation: listItemSlideOut 0.2s ease-in;
}
@keyframes listItemSlideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes listItemSlideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(10px);
  }
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ds-list-item {
    padding: var(--ds-spacing-xs) var(--ds-spacing-s);
    gap: var(--ds-spacing-xs);
  }

  .ds-list-compact .ds-list-item {
    padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
  }

  .ds-list-spacious .ds-list-item {
    padding: var(--ds-spacing-s) var(--ds-spacing-m);
  }

  .ds-list-search {
    padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  }
}
@media (max-width: 480px) {
  .ds-list-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-spacing-2xs);
  }

  .ds-list-item-content {
    width: 100%;
  }

  .ds-list-actions {
    width: 100%;
    justify-content: space-between;
    margin-top: var(--ds-spacing-xs);
    margin-left: 0;
  }

  .ds-list-empty {
    padding: var(--ds-spacing-xl);
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-list-bordered {
    border-width: 2px;
  }

  .ds-list-item {
    border-bottom-width: 2px;
  }

  .ds-list-separated .ds-list-item {
    border-width: 2px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-list-item {
    transition: none;
  }

  .ds-list-action {
    transition: none;
  }

  .ds-list-item-entering,
  .ds-list-item-exiting {
    animation: none;
  }
}
/* Print styles */
@media print {
  .ds-list-item {
    border-bottom: 1px solid #000;
    background: #fff;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }

  .ds-list-actions {
    display: none;
  }

  .ds-list-loading .ds-list-item-title,
  .ds-list-loading .ds-list-item-description {
    background: none;
    color: #000;
  }

  .ds-list-item-entering,
  .ds-list-item-exiting {
    animation: none;
  }
}
/* DS: list-group.css - List group component */
/* layer: components */
.ds-list-group {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-2xs);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ds-list-group-item {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  cursor: pointer;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  position: relative;
}
.ds-list-group-item:hover {
  border-color: var(--ds-border-secondary);
  box-shadow: var(--ds-shadow-xs);
}
.ds-list-group-item:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-list-group-item:active {
  background-color: var(--ds-surface-secondary);
  transform: scale(0.98);
}
/* List group item content */
.ds-list-group-item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-2xs);
}
.ds-list-group-item-title {
  font-size: var(--ds-typography-desktop-body-font-size);
  font-weight: 500;
  color: var(--ds-text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.ds-list-group-item-description {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  margin: 0;
  line-height: 1.4;
}
.ds-list-group-item-meta {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  color: var(--ds-text-tertiary);
  margin: 0;
}
/* List group item prefix/suffix */
.ds-list-group-item-prefix,
.ds-list-group-item-suffix {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ds-list-group-item-prefix {
  color: var(--ds-text-secondary);
}
.ds-list-group-item-suffix {
  color: var(--ds-text-secondary);
  font-size: var(--ds-typography-desktop-small-font-size);
}
/* List group item avatar */
.ds-list-group-item-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--ds-border-radius-m);
  overflow: hidden;
  flex-shrink: 0;
}
.ds-list-group-item-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
/* List group item icon */
.ds-list-group-item-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--ds-text-secondary);
  flex-shrink: 0;
}
/* List group item badge */
.ds-list-group-item-badge {
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
  background-color: var(--ds-surface-secondary);
  border-radius: var(--ds-border-radius-l);
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  font-weight: 500;
  color: var(--ds-text-secondary);
  flex-shrink: 0;
}
/* List group item states */
.ds-list-group-item-selected {
  background-color: var(--ds-interactive-primary-bg);
  border-color: var(--ds-interactive-primary);
  box-shadow: 0 0 0 1px var(--ds-interactive-primary);
}
.ds-list-group-item-selected .ds-list-group-item-title {
  color: var(--ds-interactive-primary);
  font-weight: 600;
}
.ds-list-group-item-disabled {
  opacity: var(--ds-opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.ds-list-group-item-disabled .ds-list-group-item-title,
.ds-list-group-item-disabled .ds-list-group-item-description,
.ds-list-group-item-disabled .ds-list-group-item-meta {
  color: var(--ds-text-disabled);
}
.ds-list-group-item-disabled:hover {
  border-color: var(--ds-border-primary);
  box-shadow: none;
  transform: none;
}
/* List group variants */
.ds-list-group-connected {
  gap: 0;
}
.ds-list-group-connected .ds-list-group-item {
  border-radius: 0;
  border-top-width: 0;
}
.ds-list-group-connected .ds-list-group-item:first-child {
  border-top-width: 1px;
  border-top-left-radius: var(--ds-border-radius-m);
  border-top-right-radius: var(--ds-border-radius-m);
}
.ds-list-group-connected .ds-list-group-item:last-child {
  border-bottom-left-radius: var(--ds-border-radius-m);
  border-bottom-right-radius: var(--ds-border-radius-m);
}
.ds-list-group-connected .ds-list-group-item:only-child {
  border-radius: var(--ds-border-radius-m);
}
.ds-list-group-compact .ds-list-group-item {
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  gap: var(--ds-spacing-xs);
}
.ds-list-group-compact .ds-list-group-item-title {
  font-size: var(--ds-typography-desktop-small-font-size);
}
.ds-list-group-compact .ds-list-group-item-description {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
}
.ds-list-group-spacious .ds-list-group-item {
  padding: var(--ds-spacing-m) var(--ds-spacing-l);
  gap: var(--ds-spacing-m);
}
.ds-list-group-horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--ds-spacing-s);
}
.ds-list-group-horizontal .ds-list-group-item {
  flex: 1;
  min-width: 200px;
}
/* List group with flush */
.ds-list-group-flush .ds-list-group-item {
  border-left: none;
  border-right: none;
  border-radius: 0;
}
.ds-list-group-flush .ds-list-group-item:first-child {
  border-top: none;
}
.ds-list-group-flush .ds-list-group-item:last-child {
  border-bottom: none;
}
/* List group with actions */
.ds-list-group-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
  margin-left: auto;
}
.ds-list-group-action {
  width: 1.5rem;
  height: 1.5rem;
  background: none;
  border: none;
  border-radius: var(--ds-border-radius-2xs);
  cursor: pointer;
  color: var(--ds-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-list-group-action:hover {
  background-color: var(--ds-surface-tertiary);
  color: var(--ds-text-primary);
}
.ds-list-group-action:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
/* List group with status */
.ds-list-group-item-success {
  border-color: var(--ds-status-success);
  background-color: var(--ds-status-success-bg);
}
.ds-list-group-item-success .ds-list-group-item-title {
  color: var(--ds-status-success);
}
.ds-list-group-item-error {
  border-color: var(--ds-status-error);
  background-color: var(--ds-status-error-bg);
}
.ds-list-group-item-error .ds-list-group-item-title {
  color: var(--ds-status-error);
}
.ds-list-group-item-warning {
  border-color: var(--ds-status-warning);
  background-color: var(--ds-status-warning-bg);
}
.ds-list-group-item-warning .ds-list-group-item-title {
  color: var(--ds-status-warning);
}
.ds-list-group-item-info {
  border-color: var(--ds-status-info);
  background-color: var(--ds-status-info-bg);
}
.ds-list-group-item-info .ds-list-group-item-title {
  color: var(--ds-status-info);
}
/* List group with media */
.ds-list-group-media .ds-list-group-item {
  align-items: flex-start;
}
.ds-list-group-media .ds-list-group-item-avatar {
  margin-top: var(--ds-spacing-2xs);
}
.ds-list-group-media .ds-list-group-item-content {
  align-items: flex-start;
}
/* List group with checkbox/radio */
.ds-list-group-item-control {
  flex-shrink: 0;
}
/* List group with drag handle */
.ds-list-group-drag-handle {
  width: 1rem;
  height: 1rem;
  color: var(--ds-text-tertiary);
  cursor: grab;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ds-list-group-drag-handle:active {
  cursor: grabbing;
}
/* List group animations */
.ds-list-group-item-entering {
  animation: listGroupItemFadeIn 0.3s ease-out;
}
.ds-list-group-item-exiting {
  animation: listGroupItemFadeOut 0.2s ease-in;
}
@keyframes listGroupItemFadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes listGroupItemFadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-5px);
  }
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ds-list-group-horizontal {
    flex-direction: column;
  }

  .ds-list-group-horizontal .ds-list-group-item {
    min-width: auto;
  }

  .ds-list-group-item {
    padding: var(--ds-spacing-xs) var(--ds-spacing-s);
    gap: var(--ds-spacing-xs);
  }

  .ds-list-group-compact .ds-list-group-item {
    padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
  }

  .ds-list-group-spacious .ds-list-group-item {
    padding: var(--ds-spacing-s) var(--ds-spacing-m);
  }
}
@media (max-width: 480px) {
  .ds-list-group-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-spacing-2xs);
  }

  .ds-list-group-item-content {
    width: 100%;
  }

  .ds-list-group-actions {
    width: 100%;
    justify-content: space-between;
    margin-top: var(--ds-spacing-xs);
    margin-left: 0;
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-list-group-item {
    border-width: 2px;
  }

  .ds-list-group-item-selected {
    border-width: 3px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-list-group-item {
    transition: none;
  }

  .ds-list-group-action {
    transition: none;
  }

  .ds-list-group-item-entering,
  .ds-list-group-item-exiting {
    animation: none;
  }
}
/* Print styles */
@media print {
  .ds-list-group-item {
    border: 1px solid #000;
    background: #fff;
    box-shadow: none;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }

  .ds-list-group-actions {
    display: none;
  }

  .ds-list-group-item-entering,
  .ds-list-group-item-exiting {
    animation: none;
  }
}
/* DS: list-item.css - List item component */
/* layer: components */
.ds-list-item {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  cursor: pointer;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  position: relative;
  text-decoration: none;
  color: inherit;
}
.ds-list-item:hover {
  border-color: var(--ds-border-secondary);
  box-shadow: var(--ds-shadow-xs);
  text-decoration: none;
  color: inherit;
}
.ds-list-item:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-list-item:active {
  background-color: var(--ds-surface-secondary);
  transform: scale(0.98);
}
/* List item content */
.ds-list-item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-2xs);
}
.ds-list-item-title {
  font-size: var(--ds-typography-desktop-body-font-size);
  font-weight: 500;
  color: var(--ds-text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.ds-list-item-description {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  margin: 0;
  line-height: 1.4;
}
.ds-list-item-meta {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  color: var(--ds-text-tertiary);
  margin: 0;
}
/* List item prefix/suffix */
.ds-list-item-prefix,
.ds-list-item-suffix {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ds-list-item-prefix {
  color: var(--ds-text-secondary);
}
.ds-list-item-suffix {
  color: var(--ds-text-secondary);
  font-size: var(--ds-typography-desktop-small-font-size);
}
/* List item avatar */
.ds-list-item-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--ds-border-radius-m);
  overflow: hidden;
  flex-shrink: 0;
}
.ds-list-item-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
/* List item icon */
.ds-list-item-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--ds-text-secondary);
  flex-shrink: 0;
}
/* List item badge */
.ds-list-item-badge {
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
  background-color: var(--ds-surface-secondary);
  border-radius: var(--ds-border-radius-l);
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  font-weight: 500;
  color: var(--ds-text-secondary);
  flex-shrink: 0;
}
/* List item checkbox/radio */
.ds-list-item-control {
  flex-shrink: 0;
}
/* List item states */
.ds-list-item-selected {
  background-color: var(--ds-interactive-primary-bg);
  border-color: var(--ds-interactive-primary);
  box-shadow: 0 0 0 1px var(--ds-interactive-primary);
}
.ds-list-item-selected .ds-list-item-title {
  color: var(--ds-interactive-primary);
  font-weight: 600;
}
.ds-list-item-disabled {
  opacity: var(--ds-opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.ds-list-item-disabled .ds-list-item-title,
.ds-list-item-disabled .ds-list-item-description,
.ds-list-item-disabled .ds-list-item-meta {
  color: var(--ds-text-disabled);
}
.ds-list-item-disabled:hover {
  border-color: var(--ds-border-primary);
  box-shadow: none;
  transform: none;
}
/* List item variants */
.ds-list-item-compact {
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  gap: var(--ds-spacing-xs);
}
.ds-list-item-compact .ds-list-item-title {
  font-size: var(--ds-typography-desktop-small-font-size);
}
.ds-list-item-compact .ds-list-item-description {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
}
.ds-list-item-spacious {
  padding: var(--ds-spacing-m) var(--ds-spacing-l);
  gap: var(--ds-spacing-m);
}
.ds-list-item-outlined {
  background-color: transparent;
  border-width: 2px;
}
.ds-list-item-filled {
  background-color: var(--ds-surface-secondary);
  border: none;
}
.ds-list-item-ghost {
  background-color: transparent;
  border: none;
  box-shadow: none;
}
.ds-list-item-ghost:hover {
  background-color: var(--ds-surface-secondary);
}
/* List item with actions */
.ds-list-item-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
  margin-left: auto;
}
.ds-list-item-action {
  width: 1.5rem;
  height: 1.5rem;
  background: none;
  border: none;
  border-radius: var(--ds-border-radius-2xs);
  cursor: pointer;
  color: var(--ds-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-list-item-action:hover {
  background-color: var(--ds-surface-tertiary);
  color: var(--ds-text-primary);
}
.ds-list-item-action:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
/* List item with status */
.ds-list-item-success {
  border-color: var(--ds-status-success);
  background-color: var(--ds-status-success-bg);
}
.ds-list-item-success .ds-list-item-title {
  color: var(--ds-status-success);
}
.ds-list-item-error {
  border-color: var(--ds-status-error);
  background-color: var(--ds-status-error-bg);
}
.ds-list-item-error .ds-list-item-title {
  color: var(--ds-status-error);
}
.ds-list-item-warning {
  border-color: var(--ds-status-warning);
  background-color: var(--ds-status-warning-bg);
}
.ds-list-item-warning .ds-list-item-title {
  color: var(--ds-status-warning);
}
.ds-list-item-info {
  border-color: var(--ds-status-info);
  background-color: var(--ds-status-info-bg);
}
.ds-list-item-info .ds-list-item-title {
  color: var(--ds-status-info);
}
/* List item with media */
.ds-list-item-media {
  align-items: flex-start;
}
.ds-list-item-media .ds-list-item-avatar {
  margin-top: var(--ds-spacing-2xs);
}
.ds-list-item-media .ds-list-item-content {
  align-items: flex-start;
}
/* List item with drag handle */
.ds-list-item-drag-handle {
  width: 1rem;
  height: 1rem;
  color: var(--ds-text-tertiary);
  cursor: grab;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ds-list-item-drag-handle:active {
  cursor: grabbing;
}
/* List item with tooltip */
.ds-list-item-with-tooltip {
  position: relative;
}
.ds-list-item-tooltip {
  position: absolute;
  bottom: calc(100% + var(--ds-spacing-xs));
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--ds-surface-primary);
  color: var(--ds-text-primary);
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
  border-radius: var(--ds-border-radius-2xs);
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  font-weight: 500;
  white-space: nowrap;
  box-shadow: var(--ds-shadow-sm);
  opacity: 0;
  visibility: hidden;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  z-index: var(--ds-z-index-tooltip);
}
.ds-list-item:hover .ds-list-item-tooltip {
  opacity: 1;
  visibility: visible;
}
/* List item animations */
.ds-list-item-entering {
  animation: listItemFadeIn 0.3s ease-out;
}
.ds-list-item-exiting {
  animation: listItemFadeOut 0.2s ease-in;
}
@keyframes listItemFadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes listItemFadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-5px);
  }
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ds-list-item {
    padding: var(--ds-spacing-xs) var(--ds-spacing-s);
    gap: var(--ds-spacing-xs);
  }

  .ds-list-item-compact {
    padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
  }

  .ds-list-item-spacious {
    padding: var(--ds-spacing-s) var(--ds-spacing-m);
  }
}
@media (max-width: 480px) {
  .ds-list-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-spacing-2xs);
  }

  .ds-list-item-content {
    width: 100%;
  }

  .ds-list-item-actions {
    width: 100%;
    justify-content: space-between;
    margin-top: var(--ds-spacing-xs);
    margin-left: 0;
  }

  .ds-list-item-tooltip {
    display: none;
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-list-item {
    border-width: 2px;
  }

  .ds-list-item-outlined {
    border-width: 3px;
  }

  .ds-list-item-selected {
    border-width: 3px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-list-item {
    transition: none;
  }

  .ds-list-item-action {
    transition: none;
  }

  .ds-list-item-entering,
  .ds-list-item-exiting {
    animation: none;
  }

  .ds-list-item-tooltip {
    transition: none;
  }
}
/* Print styles */
@media print {
  .ds-list-item {
    border: 1px solid #000;
    background: #fff;
    box-shadow: none;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    text-decoration: none !important;
  }

  .ds-list-item-actions {
    display: none;
  }

  .ds-list-item-tooltip {
    display: none !important;
  }

  .ds-list-item-entering,
  .ds-list-item-exiting {
    animation: none;
  }
}
/* DS: modal.css - Modal dialog component */
/* layer: components */
.ds-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--ds-modal-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--ds-z-index-modal-backdrop);
  opacity: 0;
  animation: modalFadeIn 0.2s ease-out forwards;
}
.ds-modal-overlay.ds-modal-closing {
  animation: modalFadeOut 0.2s ease-in forwards;
}
.ds-modal {
  background-color: var(--ds-modal-bg);
  border: 1px solid var(--ds-modal-border);
  border-radius: var(--ds-border-radius-l);
  box-shadow: var(--ds-modal-shadow-1), var(--ds-modal-shadow-2);
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: var(--ds-z-index-modal);
  transform: scale(0.9) translateY(-20px);
  opacity: 0;
  animation: modalSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.ds-modal-overlay.ds-modal-closing .ds-modal {
  animation: modalSlideOut 0.2s ease-in forwards;
}
.ds-modal-header {
  padding: var(--ds-spacing-l);
  border-bottom: 1px solid var(--ds-border-color-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.ds-modal-title {
  margin: 0;
  font-size: var(--ds-typography-desktop-h3-font-size);
  font-weight: 600;
  color: var(--ds-modal-header-fg);
  line-height: 1.4;
}
.ds-modal-close {
  background: none;
  border: none;
  padding: var(--ds-spacing-xs);
  cursor: pointer;
  color: var(--ds-text-secondary);
  border-radius: var(--ds-border-radius-s);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-left: auto;
}
.ds-modal-close:hover {
  background-color: var(--ds-surface-background-secondary);
  color: var(--ds-text-primary);
}
.ds-modal-close:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-modal-body {
  padding: var(--ds-spacing-l);
  overflow-y: auto;
  flex: 1;
  color: var(--ds-text-primary);
  line-height: 1.6;
}
.ds-modal-body-no-header {
  position: relative;
}
.ds-modal-close-floating {
  position: absolute;
  top: var(--ds-spacing-l);
  right: var(--ds-spacing-l);
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border-radius: var(--ds-radius-m);
  color: var(--ds-text-primary);
}
.ds-modal-close-floating:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.ds-modal-footer {
  padding: var(--ds-spacing-l);
  padding-top: 0;
  border-top: 1px solid var(--ds-border-color-light);
  background-color: var(--ds-modal-footer-bg);
  display: flex;
  gap: var(--ds-spacing-s);
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}
/* Modal sizes */
.ds-modal-sm {
  max-width: 400px;
  width: 100%;
}
.ds-modal-md {
  max-width: 600px;
  width: 100%;
}
.ds-modal-lg {
  max-width: 800px;
  width: 100%;
}
.ds-modal-xl {
  max-width: 1000px;
  width: 100%;
}
.ds-modal-full {
  max-width: none;
  width: 100vw;
  height: 100vh;
  border-radius: 0;
}
/* Modal variants */
.ds-modal-centered .ds-modal-overlay {
  align-items: center;
}
.ds-modal-top .ds-modal-overlay {
  align-items: flex-start;
  padding-top: var(--ds-spacing-xl);
}
.ds-modal-bottom .ds-modal-overlay {
  align-items: flex-end;
  padding-bottom: var(--ds-spacing-xl);
}
/* Scroll lock */
.ds-modal-open {
  overflow: hidden;
}
/* Animations */
@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes modalFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes modalSlideOut {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
}
/* Responsive adjustments */
@media (max-width: 640px) {
  .ds-modal {
    margin: var(--ds-spacing-m);
    max-width: none;
    width: calc(100vw - 2 * var(--ds-spacing-m));
    max-height: calc(100vh - 2 * var(--ds-spacing-m));
  }

  .ds-modal-header,
  .ds-modal-body,
  .ds-modal-footer {
    padding: var(--ds-spacing-m);
  }

  .ds-modal-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .ds-modal-footer .ds-btn {
    width: 100%;
    justify-content: center;
  }
}
/* DS: navbar.css - Navbar component */
/* layer: components */
.ds-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  background-color: var(--ds-navbar-bg);
  border-bottom: 1px solid var(--ds-navbar-border);
  position: relative;
  z-index: var(--ds-z-index-navbar);
}
.ds-navbar-brand {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  font-size: var(--ds-typography-desktop-h4-font-size);
  font-weight: 500;
  color: var(--ds-navbar-brand-fg);
  text-decoration: none;
}
.ds-navbar-brand:hover {
  color: var(--ds-navbar-brand-fg-hover);
  text-decoration: none;
}
.ds-navbar-brand:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-navbar-logo {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}
.ds-navbar-logo img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.ds-navbar-nav {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-l);
  flex: 1;
  justify-content: center;
}
.ds-navbar-nav-list {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-m);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ds-navbar-nav-item {
  position: relative;
}
.ds-navbar-nav-link {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-2xs);
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  color: var(--ds-navbar-nav-fg);
  text-decoration: none;
  font-weight: 400;
  border-radius: var(--ds-border-radius-m);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  position: relative;
}
.ds-navbar-nav-link:hover {
  background-color: var(--ds-navbar-nav-bg-hover);
  color: var(--ds-navbar-nav-fg-hover);
}
.ds-navbar-nav-link:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: -2px;
  background-color: var(--ds-navbar-nav-bg-focus);
  color: var(--ds-navbar-nav-fg-focus);
}
.ds-navbar-nav-link[aria-current="page"] {
  background-color: var(--ds-navbar-nav-bg-active);
  color: var(--ds-navbar-nav-fg-active);
  font-weight: 500;
}
.ds-navbar-nav-link[aria-current="page"]:hover {
  background-color: var(--ds-navbar-nav-bg-active-hover);
}
.ds-navbar-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
}
.ds-navbar-search {
  position: relative;
  max-width: 320px;
  flex: 1;
}
.ds-navbar-search-input {
  width: 100%;
  padding: var(--ds-spacing-2xs) var(--ds-spacing-s);
  padding-right: 2.5rem;
  border: 1px solid var(--ds-navbar-search-border);
  border-radius: var(--ds-border-radius-m);
  background-color: var(--ds-navbar-search-bg);
  color: var(--ds-navbar-search-fg);
  font-size: var(--ds-typography-desktop-body-font-size);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-navbar-search-input:focus {
  outline: none;
  border-color: var(--ds-navbar-search-border-focus);
  box-shadow: var(--ds-navbar-search-shadow-focus);
}
.ds-navbar-search-input::-moz-placeholder {
  color: var(--ds-navbar-search-placeholder);
}
.ds-navbar-search-input::placeholder {
  color: var(--ds-navbar-search-placeholder);
}
.ds-navbar-search-icon {
  position: absolute;
  right: var(--ds-spacing-xs);
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  color: var(--ds-navbar-search-icon);
  pointer-events: none;
}
/* Navbar variants */
.ds-navbar-sticky {
  position: sticky;
  top: 0;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  background-color: rgba(255, 255, 255, 0.95);
  border-bottom-color: rgba(0, 0, 0, 0.1);
}
.ds-navbar-sticky.ds-navbar-dark {
  background-color: rgba(0, 0, 0, 0.95);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.ds-navbar-transparent {
  background-color: transparent;
  border-bottom: none;
}
.ds-navbar-dark {
  background-color: var(--ds-navbar-dark-bg);
  border-bottom-color: var(--ds-navbar-dark-border);
  color: var(--ds-navbar-dark-fg);
}
.ds-navbar-dark .ds-navbar-brand {
  color: var(--ds-navbar-dark-brand-fg);
}
.ds-navbar-dark .ds-navbar-nav-link {
  color: var(--ds-navbar-dark-nav-fg);
}
.ds-navbar-dark .ds-navbar-nav-link:hover {
  background-color: var(--ds-navbar-dark-nav-bg-hover);
  color: var(--ds-navbar-dark-nav-fg-hover);
}
.ds-navbar-dark .ds-navbar-nav-link[aria-current="page"] {
  background-color: var(--ds-navbar-dark-nav-bg-active);
  color: var(--ds-navbar-dark-nav-fg-active);
}
/* Navbar sizes */
.ds-navbar-sm {
  padding: var(--ds-spacing-2xs) var(--ds-spacing-s);
}
.ds-navbar-sm .ds-navbar-brand {
  font-size: var(--ds-typography-desktop-h5-font-size);
}
.ds-navbar-sm .ds-navbar-logo {
  width: 1.5rem;
  height: 1.5rem;
}
.ds-navbar-sm .ds-navbar-nav-link {
  padding: var(--ds-spacing-2xs) var(--ds-spacing-s);
  font-size: var(--ds-typography-desktop-small-font-size);
}
.ds-navbar-lg {
  padding: var(--ds-spacing-m) var(--ds-spacing-l);
}
.ds-navbar-lg .ds-navbar-brand {
  font-size: var(--ds-typography-desktop-h3-font-size);
}
.ds-navbar-lg .ds-navbar-logo {
  width: 2.5rem;
  height: 2.5rem;
}
.ds-navbar-lg .ds-navbar-nav-link {
  padding: var(--ds-spacing-m) var(--ds-spacing-l);
  font-size: var(--ds-typography-desktop-body-font-size);
}
/* Navbar with dropdown */
.ds-navbar-dropdown {
  position: relative;
}
.ds-navbar-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: var(--ds-z-index-dropdown);
  min-width: 200px;
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  box-shadow: var(--ds-shadow-lg);
  padding: var(--ds-spacing-2xs) 0;
  margin-top: var(--ds-spacing-xs);
}
.ds-navbar-dropdown-item {
  display: block;
  width: 100%;
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  color: var(--ds-text-primary);
  text-decoration: none;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-size: var(--ds-typography-desktop-small-font-size);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-navbar-dropdown-item:hover,
.ds-navbar-dropdown-item:focus {
  background-color: var(--ds-surface-secondary);
  outline: none;
}
.ds-navbar-dropdown-item:disabled {
  color: var(--ds-text-disabled);
  cursor: not-allowed;
}
/* Navbar mobile menu */
.ds-navbar-mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 1.5rem;
  height: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--ds-spacing-2xs);
}
.ds-navbar-mobile-toggle span {
  width: 100%;
  height: 2px;
  background-color: var(--ds-navbar-mobile-toggle);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  transform-origin: center;
}
.ds-navbar-mobile-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}
.ds-navbar-mobile-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.ds-navbar-mobile-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}
.ds-navbar-mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--ds-surface-primary);
  border-bottom: 1px solid var(--ds-border-primary);
  box-shadow: var(--ds-shadow-md);
  transform: translateY(-100%);
  opacity: 0;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  pointer-events: none;
}
.ds-navbar-mobile-menu[aria-expanded="true"] {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.ds-navbar-mobile-nav {
  padding: var(--ds-spacing-m);
}
.ds-navbar-mobile-nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-s);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ds-navbar-mobile-nav-link {
  display: block;
  padding: var(--ds-spacing-s);
  color: var(--ds-text-primary);
  text-decoration: none;
  border-radius: var(--ds-border-radius-m);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-navbar-mobile-nav-link:hover,
.ds-navbar-mobile-nav-link:focus {
  background-color: var(--ds-surface-secondary);
}
.ds-navbar-mobile-nav-link[aria-current="page"] {
  background-color: var(--ds-interactive-primary-bg);
  color: var(--ds-interactive-primary);
  font-weight: 600;
}
/* Responsive behavior */
@media (max-width: 768px) {
  .ds-navbar {
    padding: var(--ds-spacing-s);
  }

  .ds-navbar-nav {
    display: none;
  }

  .ds-navbar-mobile-toggle {
    display: flex;
  }

  .ds-navbar-search {
    max-width: 200px;
  }

  .ds-navbar-brand {
    font-size: var(--ds-typography-mobile-h5-font-size);
  }

  .ds-navbar-logo {
    width: 1.5rem;
    height: 1.5rem;
  }
}
@media (max-width: 480px) {
  .ds-navbar {
    padding: var(--ds-spacing-2xs) var(--ds-spacing-s);
  }

  .ds-navbar-search {
    display: none;
  }

  .ds-navbar-actions {
    gap: var(--ds-spacing-2xs);
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-navbar {
    border-bottom-width: 2px;
  }

  .ds-navbar-nav-link {
    border: 1px solid transparent;
  }

  .ds-navbar-nav-link:focus-visible {
    border-color: var(--ds-focus-outline-color);
  }

  .ds-navbar-search-input {
    border-width: 2px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-navbar-nav-link,
  .ds-navbar-search-input,
  .ds-navbar-mobile-menu,
  .ds-navbar-mobile-toggle span {
    transition: none;
  }

  .ds-navbar-sticky {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
}
/* Print styles */
@media print {
  .ds-navbar {
    background: #fff;
    border-bottom: 1px solid #000;
    color: #000;
    position: static;
  }

  .ds-navbar-brand {
    color: #000;
  }

  .ds-navbar-nav-link {
    color: #000;
    text-decoration: none;
  }

  .ds-navbar-mobile-toggle,
  .ds-navbar-mobile-menu {
    display: none;
  }
}
/* DS: notification.css - Notification component */
/* layer: components */
.ds-notification {
  position: fixed;
  z-index: var(--ds-z-index-notification);
  display: flex;
  align-items: flex-start;
  gap: var(--ds-spacing-s);
  padding: var(--ds-spacing-m);
  background-color: var(--ds-notification-bg);
  border: 1px solid var(--ds-border-color-default);
  border-radius: var(--ds-border-radius-m);
  box-shadow: var(--ds-notification-shadow-1), var(--ds-notification-shadow-2);
  min-width: 320px;
  max-width: 480px;
  opacity: 0;
  transform: translateX(100%);
  transition: all var(--ds-motion-duration-slow) var(--ds-motion-easing-standard);
  pointer-events: auto;
}
.ds-notification-show {
  opacity: 1;
  transform: translateX(0);
}
.ds-notification-hide {
  opacity: 0;
  transform: translateX(100%);
}
/* Notification positions */
.ds-notification-top-left {
  top: var(--ds-spacing-l);
  left: var(--ds-spacing-l);
}
.ds-notification-top-right {
  top: var(--ds-spacing-l);
  right: var(--ds-spacing-l);
}
.ds-notification-bottom-left {
  bottom: var(--ds-spacing-l);
  left: var(--ds-spacing-l);
}
.ds-notification-bottom-right {
  bottom: var(--ds-spacing-l);
  right: var(--ds-spacing-l);
}
.ds-notification-top-center {
  top: var(--ds-spacing-l);
  left: 50%;
  transform: translateX(-50%) translateX(100%);
}
.ds-notification-top-center.ds-notification-show {
  transform: translateX(-50%) translateX(0);
}
.ds-notification-top-center.ds-notification-hide {
  transform: translateX(-50%) translateX(100%);
}
.ds-notification-bottom-center {
  bottom: var(--ds-spacing-l);
  left: 50%;
  transform: translateX(-50%) translateX(100%);
}
.ds-notification-bottom-center.ds-notification-show {
  transform: translateX(-50%) translateX(0);
}
.ds-notification-bottom-center.ds-notification-hide {
  transform: translateX(-50%) translateX(100%);
}
/* Notification icon */
.ds-notification-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-top: 1px;
}
/* Notification content */
.ds-notification-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-2xs);
}
.ds-notification-title {
  font-size: var(--ds-typography-desktop-body-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0;
  line-height: 1.4;
}
.ds-notification-description {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  margin: 0;
  line-height: 1.5;
}
/* Notification close button */
.ds-notification-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--ds-spacing-2xs);
  color: var(--ds-text-secondary);
  border-radius: var(--ds-border-radius-2xs);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  flex-shrink: 0;
}
.ds-notification-close:hover {
  background-color: var(--ds-surface-background-secondary);
  color: var(--ds-text-primary);
}
.ds-notification-close:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
/* Notification variants */
.ds-notification-info {
  background-color: var(--ds-notification-bg-info);
  border-color: var(--ds-status-info);
}
.ds-notification-info .ds-notification-icon {
  color: var(--ds-notification-icon-info);
}
.ds-notification-success {
  background-color: var(--ds-notification-bg-success);
  border-color: var(--ds-status-success);
}
.ds-notification-success .ds-notification-icon {
  color: var(--ds-notification-icon-success);
}
.ds-notification-warning {
  background-color: var(--ds-notification-bg-warning);
  border-color: var(--ds-status-warning);
}
.ds-notification-warning .ds-notification-icon {
  color: var(--ds-notification-icon-warning);
}
.ds-notification-error {
  background-color: var(--ds-notification-bg-error);
  border-color: var(--ds-status-error);
}
.ds-notification-error .ds-notification-icon {
  color: var(--ds-notification-icon-error);
}
/* Notification with action */
.ds-notification-action {
  margin-top: var(--ds-spacing-xs);
  display: flex;
  gap: var(--ds-spacing-s);
  align-items: center;
}
/* Notification stack */
.ds-notification-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-s);
}
.ds-notification-stack .ds-notification {
  margin-bottom: 0;
}
/* Notification progress */
.ds-notification-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--ds-notification-progress);
  border-radius: 0 0 var(--ds-border-radius-m) var(--ds-border-radius-m);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform linear;
}
/* Notification sizes */
.ds-notification-sm {
  min-width: 280px;
  max-width: 400px;
  padding: var(--ds-spacing-s);
}
.ds-notification-sm .ds-notification-icon {
  width: 1rem;
  height: 1rem;
}
.ds-notification-lg {
  min-width: 400px;
  max-width: 560px;
  padding: var(--ds-spacing-l);
}
.ds-notification-lg .ds-notification-icon {
  width: 1.5rem;
  height: 1.5rem;
}
/* Notification with avatar */
.ds-notification-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}
/* Responsive notifications */
@media (max-width: 640px) {
  .ds-notification {
    position: fixed !important;
    top: auto !important;
    bottom: 20px !important;
    left: 20px !important;
    right: 20px !important;
    min-width: auto;
    max-width: none;
    transform: translateY(100%) !important;
  }

  .ds-notification-show {
    transform: translateY(0) !important;
  }

  .ds-notification-hide {
    transform: translateY(100%) !important;
  }

  .ds-notification-top-left,
  .ds-notification-top-right,
  .ds-notification-bottom-left,
  .ds-notification-bottom-right,
  .ds-notification-top-center,
  .ds-notification-bottom-center {
    left: 20px !important;
    right: 20px !important;
  }
}
/* DS: pagination.css - Pagination component */
/* layer: components */
.ds-pagination {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
  flex-wrap: wrap;
}
.ds-pagination-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 var(--ds-spacing-xs);
  background-color: var(--ds-pagination-item-bg);
  border: 1px solid var(--ds-border-color-default);
  border-radius: var(--ds-border-radius-s);
  cursor: pointer;
  font-size: var(--ds-typography-desktop-body-font-size);
  font-weight: 500;
  color: var(--ds-pagination-item-fg);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.ds-pagination-item:hover {
  background-color: var(--ds-pagination-item-bg-hover);
  color: var(--ds-pagination-item-fg-hover);
  border-color: var(--ds-border-color-default);
}
.ds-pagination-item:active {
  background-color: var(--ds-pagination-item-bg-pressed);
  color: var(--ds-pagination-item-fg-pressed);
  transform: scale(0.98);
}
.ds-pagination-item:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-pagination-item[data-active="true"] {
  background-color: var(--ds-pagination-item-bg-active);
  color: var(--ds-pagination-item-fg-active);
  border-color: var(--ds-pagination-item-bg-active);
  font-weight: 600;
}
.ds-pagination-item[data-active="true"]:hover {
  background-color: var(--ds-pagination-item-bg-active);
  color: var(--ds-pagination-item-fg-active);
}
.ds-pagination-item:disabled,
.ds-pagination-item[data-disabled="true"] {
  background-color: var(--ds-surface-background-secondary);
  color: var(--ds-text-disabled);
  border-color: var(--ds-border-color-light);
  cursor: not-allowed;
  pointer-events: none;
}
.ds-pagination-prev,
.ds-pagination-next {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
}
.ds-pagination-prev-icon,
.ds-pagination-next-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.ds-pagination-prev-icon {
  transform: rotate(180deg);
}
.ds-pagination-jumper {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
  margin: 0 var(--ds-spacing-s);
}
.ds-pagination-jumper-label {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  white-space: nowrap;
}
.ds-pagination-jumper-input {
  width: 3rem;
  height: 2.5rem;
  padding: 0 var(--ds-spacing-xs);
  border: 1px solid var(--ds-pagination-input-border);
  border-radius: var(--ds-border-radius-s);
  font-size: var(--ds-typography-desktop-body-font-size);
  text-align: center;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-pagination-jumper-input:focus {
  outline: none;
  border-color: var(--ds-pagination-input-border-active);
  box-shadow: var(--ds-pagination-input-shadow-active);
}
.ds-pagination-sizer {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
  margin-left: var(--ds-spacing-m);
}
.ds-pagination-sizer-label {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  white-space: nowrap;
}
.ds-pagination-sizer-select {
  width: auto;
  min-width: 4rem;
}
.ds-pagination-info {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  margin-left: var(--ds-spacing-m);
  white-space: nowrap;
}
/* Pagination sizes */
.ds-pagination-sm .ds-pagination-item {
  min-width: 2rem;
  height: 2rem;
  padding: 0 var(--ds-spacing-2xs);
  font-size: var(--ds-typography-desktop-small-font-size);
}
.ds-pagination-sm .ds-pagination-jumper-input {
  width: 2.5rem;
  height: 2rem;
  font-size: var(--ds-typography-desktop-small-font-size);
}
.ds-pagination-lg .ds-pagination-item {
  min-width: 3rem;
  height: 3rem;
  padding: 0 var(--ds-spacing-s);
  font-size: var(--ds-typography-desktop-h4-font-size);
}
.ds-pagination-lg .ds-pagination-jumper-input {
  width: 3.5rem;
  height: 3rem;
  font-size: var(--ds-typography-desktop-h4-font-size);
}
/* Pagination variants */
.ds-pagination-simple {
  gap: var(--ds-spacing-2xs);
}
.ds-pagination-simple .ds-pagination-item {
  border: none;
  background: none;
  color: var(--ds-link-color);
  min-width: auto;
  height: auto;
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
}
.ds-pagination-simple .ds-pagination-item:hover {
  background-color: var(--ds-surface-background-secondary);
  color: var(--ds-link-color-hover);
}
.ds-pagination-simple .ds-pagination-item[data-active="true"] {
  background-color: var(--ds-surface-background-secondary);
  color: var(--ds-link-color-hover);
  font-weight: 600;
}
.ds-pagination-simple .ds-pagination-prev,
.ds-pagination-simple .ds-pagination-next {
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
  border: 1px solid var(--ds-border-color-default);
  border-radius: var(--ds-border-radius-s);
  background-color: var(--ds-surface-background);
  color: var(--ds-pagination-next-fg);
}
.ds-pagination-simple .ds-pagination-prev:hover,
.ds-pagination-simple .ds-pagination-next:hover {
  background-color: var(--ds-surface-background-secondary);
  color: var(--ds-pagination-next-fg);
}
.ds-pagination-simple .ds-pagination-prev:disabled,
.ds-pagination-simple .ds-pagination-next:disabled {
  color: var(--ds-pagination-next-fg-disabled);
  background-color: var(--ds-surface-background-secondary);
  border-color: var(--ds-border-color-light);
}
.ds-pagination-compact {
  gap: 0;
}
.ds-pagination-compact .ds-pagination-item {
  border-radius: 0;
  border-left-width: 0;
}
.ds-pagination-compact .ds-pagination-item:first-child {
  border-left-width: 1px;
  border-radius: var(--ds-border-radius-s) 0 0 var(--ds-border-radius-s);
}
.ds-pagination-compact .ds-pagination-item:last-child {
  border-radius: 0 var(--ds-border-radius-s) var(--ds-border-radius-s) 0;
}
/* Responsive pagination */
@media (max-width: 640px) {
  .ds-pagination {
    justify-content: center;
  }

  .ds-pagination-jumper,
  .ds-pagination-sizer,
  .ds-pagination-info {
    display: none;
  }

  .ds-pagination-item {
    min-width: 2rem;
    height: 2rem;
    font-size: var(--ds-typography-mobile-small-font-size);
  }
}
/* Pagination with ellipsis */
.ds-pagination-ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 var(--ds-spacing-xs);
  color: var(--ds-text-secondary);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;
}
.ds-pagination-ellipsis::before {
  content: '•••';
  font-size: var(--ds-typography-desktop-body-font-size);
}
/* Pagination with quick jumper */
.ds-pagination-quick-jumper {
  margin-left: var(--ds-spacing-m);
}
.ds-pagination-quick-jumper .ds-pagination-jumper {
  margin: 0;
}
/* DS: panel.css - Panel component */
/* layer: components */
.ds-panel {
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  box-shadow: var(--ds-shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ds-panel-header {
  padding: var(--ds-spacing-m);
  border-bottom: 1px solid var(--ds-border-primary);
  background-color: var(--ds-surface-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-spacing-m);
}
.ds-panel-title {
  font-size: var(--ds-typography-desktop-h4-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0;
  flex: 1;
}
.ds-panel-subtitle {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  margin: var(--ds-spacing-2xs) 0 0 0;
}
.ds-panel-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
  flex-shrink: 0;
}
.ds-panel-body {
  padding: var(--ds-spacing-m);
  flex: 1;
  overflow: auto;
}
.ds-panel-footer {
  padding: var(--ds-spacing-m);
  border-top: 1px solid var(--ds-border-primary);
  background-color: var(--ds-surface-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-spacing-m);
}
.ds-panel-footer-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
}
/* Panel variants */
.ds-panel-elevated {
  box-shadow: var(--ds-shadow-lg);
}
.ds-panel-outlined {
  box-shadow: none;
  border-width: 2px;
}
.ds-panel-filled {
  background-color: var(--ds-surface-secondary);
  border: none;
}
.ds-panel-ghost {
  background-color: transparent;
  border: none;
  box-shadow: none;
}
/* Panel sizes */
.ds-panel-compact .ds-panel-header,
.ds-panel-compact .ds-panel-body,
.ds-panel-compact .ds-panel-footer {
  padding: var(--ds-spacing-s);
}
.ds-panel-spacious .ds-panel-header,
.ds-panel-spacious .ds-panel-body,
.ds-panel-spacious .ds-panel-footer {
  padding: var(--ds-spacing-l);
}
/* Panel with tabs */
.ds-panel-with-tabs .ds-panel-header {
  border-bottom: none;
  padding-bottom: 0;
}
.ds-panel-tabs {
  display: flex;
  gap: var(--ds-spacing-xs);
  border-bottom: 1px solid var(--ds-border-primary);
  margin: 0 var(--ds-spacing-m);
  padding-bottom: var(--ds-spacing-xs);
}
.ds-panel-tab {
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  background: none;
  border: none;
  border-radius: var(--ds-border-radius-2xs);
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-secondary);
  cursor: pointer;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  position: relative;
}
.ds-panel-tab:hover {
  background-color: var(--ds-surface-tertiary);
  color: var(--ds-text-primary);
}
.ds-panel-tab:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-panel-tab-active {
  color: var(--ds-interactive-primary);
  font-weight: 500;
}
.ds-panel-tab-active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--ds-interactive-primary);
  border-radius: 1px;
}
/* Panel collapsible */
.ds-panel-collapsible .ds-panel-header {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.ds-panel-collapsible .ds-panel-header:hover {
  background-color: var(--ds-surface-tertiary);
}
.ds-panel-collapsible-icon {
  width: 1rem;
  height: 1rem;
  color: var(--ds-text-secondary);
  transition: transform var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  flex-shrink: 0;
}
.ds-panel-collapsed .ds-panel-body {
  display: none;
}
.ds-panel-collapsed .ds-panel-collapsible-icon {
  transform: rotate(-90deg);
}
/* Panel resizable */
.ds-panel-resizable {
  position: relative;
  min-height: 200px;
}
.ds-panel-resize-handle {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8px;
  background-color: var(--ds-surface-secondary);
  border-top: 1px solid var(--ds-border-primary);
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ds-panel-resize-handle::before {
  content: '';
  width: 24px;
  height: 2px;
  background-color: var(--ds-border-primary);
  border-radius: 1px;
}
.ds-panel-resize-handle:hover {
  background-color: var(--ds-surface-tertiary);
}
.ds-panel-resize-handle:hover::before {
  background-color: var(--ds-border-secondary);
}
/* Panel with close button */
.ds-panel-close {
  width: 1.5rem;
  height: 1.5rem;
  background: none;
  border: none;
  border-radius: var(--ds-border-radius-2xs);
  cursor: pointer;
  color: var(--ds-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  flex-shrink: 0;
}
.ds-panel-close:hover {
  background-color: var(--ds-surface-tertiary);
  color: var(--ds-text-primary);
}
.ds-panel-close:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
/* Panel with loading state */
.ds-panel-loading {
  position: relative;
}
.ds-panel-loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--ds-surface-primary);
  opacity: 0.8;
  z-index: 1;
}
.ds-panel-loading .ds-panel-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
/* Panel with scroll fade */
.ds-panel-scroll-fade .ds-panel-body {
  position: relative;
}
.ds-panel-scroll-fade .ds-panel-body::before,
.ds-panel-scroll-fade .ds-panel-body::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 20px;
  pointer-events: none;
  z-index: 1;
}
.ds-panel-scroll-fade .ds-panel-body::before {
  top: 0;
  background: linear-gradient(to bottom, var(--ds-surface-primary), transparent);
}
.ds-panel-scroll-fade .ds-panel-body::after {
  bottom: 0;
  background: linear-gradient(to top, var(--ds-surface-primary), transparent);
}
/* Panel grid */
.ds-panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--ds-spacing-m);
}
.ds-panel-grid .ds-panel {
  margin: 0;
}
/* Panel stack */
.ds-panel-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-m);
}
.ds-panel-stack .ds-panel {
  margin: 0;
}
/* Panel with status */
.ds-panel-success {
  border-color: var(--ds-status-success);
}
.ds-panel-success .ds-panel-header {
  background-color: var(--ds-status-success-bg);
  border-bottom-color: var(--ds-status-success);
}
.ds-panel-error {
  border-color: var(--ds-status-error);
}
.ds-panel-error .ds-panel-header {
  background-color: var(--ds-status-error-bg);
  border-bottom-color: var(--ds-status-error);
}
.ds-panel-warning {
  border-color: var(--ds-status-warning);
}
.ds-panel-warning .ds-panel-header {
  background-color: var(--ds-status-warning-bg);
  border-bottom-color: var(--ds-status-warning);
}
.ds-panel-info {
  border-color: var(--ds-status-info);
}
.ds-panel-info .ds-panel-header {
  background-color: var(--ds-status-info-bg);
  border-bottom-color: var(--ds-status-info);
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ds-panel-header,
  .ds-panel-body,
  .ds-panel-footer {
    padding: var(--ds-spacing-s);
  }

  .ds-panel-spacious .ds-panel-header,
  .ds-panel-spacious .ds-panel-body,
  .ds-panel-spacious .ds-panel-footer {
    padding: var(--ds-spacing-m);
  }

  .ds-panel-grid {
    grid-template-columns: 1fr;
  }

  .ds-panel-tabs {
    margin: 0 var(--ds-spacing-s);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ds-panel-tab {
    white-space: nowrap;
    flex-shrink: 0;
  }
}
@media (max-width: 480px) {
  .ds-panel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-spacing-xs);
  }

  .ds-panel-actions {
    width: 100%;
    justify-content: space-between;
  }

  .ds-panel-footer {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ds-spacing-s);
  }

  .ds-panel-footer-actions {
    justify-content: space-between;
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-panel {
    border-width: 2px;
  }

  .ds-panel-outlined {
    border-width: 3px;
  }

  .ds-panel-tab-active::after {
    height: 3px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-panel-tab,
  .ds-panel-close,
  .ds-panel-collapsible-icon {
    transition: none;
  }
}
/* Print styles */
@media print {
  .ds-panel {
    border: 1px solid #000;
    box-shadow: none;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }

  .ds-panel-close,
  .ds-panel-actions {
    display: none;
  }

  .ds-panel-loading::before {
    display: none;
  }

  .ds-panel-resize-handle {
    display: none;
  }
}
/* DS: pill.css - Pill component */
/* layer: components */
.ds-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
  padding: var(--ds-spacing-2xs) var(--ds-spacing-s);
  background-color: var(--ds-surface-secondary);
  border: 1px solid var(--ds-border-secondary);
  border-radius: var(--ds-border-radius-l);
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 500;
  color: var(--ds-text-primary);
  white-space: nowrap;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  cursor: default;
  position: relative;
}
.ds-pill:hover {
  background-color: var(--ds-surface-tertiary);
  border-color: var(--ds-border-primary);
}
/* Pill content */
.ds-pill-content {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
}
.ds-pill-text {
  margin: 0;
  line-height: 1.4;
}
/* Pill icon */
.ds-pill-icon {
  width: 1rem;
  height: 1rem;
  color: var(--ds-text-secondary);
  flex-shrink: 0;
}
.ds-pill:hover .ds-pill-icon {
  color: var(--ds-text-primary);
}
/* Pill avatar */
.ds-pill-avatar {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.ds-pill-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
/* Pill badge */
.ds-pill-badge {
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
  background-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
  border-radius: var(--ds-border-radius-l);
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  font-weight: 600;
  flex-shrink: 0;
}
/* Pill close button */
.ds-pill-close {
  width: 1rem;
  height: 1rem;
  background: none;
  border: none;
  border-radius: var(--ds-border-radius-2xs);
  cursor: pointer;
  color: var(--ds-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  flex-shrink: 0;
  margin-left: var(--ds-spacing-2xs);
}
.ds-pill-close:hover {
  background-color: var(--ds-surface-primary);
  color: var(--ds-text-primary);
}
.ds-pill-close:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
/* Pill states */
.ds-pill-selected {
  background-color: var(--ds-interactive-primary);
  border-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
}
.ds-pill-selected .ds-pill-icon {
  color: var(--ds-text-inverse);
}
.ds-pill-selected .ds-pill-badge {
  background-color: var(--ds-text-inverse);
  color: var(--ds-interactive-primary);
}
.ds-pill-selected .ds-pill-close:hover {
  background-color: var(--ds-interactive-primary-hover);
  color: var(--ds-text-inverse);
}
.ds-pill-disabled {
  opacity: var(--ds-opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.ds-pill-disabled .ds-pill-text {
  color: var(--ds-text-disabled);
}
.ds-pill-disabled .ds-pill-icon {
  color: var(--ds-text-disabled);
}
/* Pill variants */
.ds-pill-primary {
  background-color: var(--ds-interactive-primary-bg);
  border-color: var(--ds-interactive-primary);
  color: var(--ds-interactive-primary);
}
.ds-pill-primary .ds-pill-icon {
  color: var(--ds-interactive-primary);
}
.ds-pill-primary:hover {
  background-color: var(--ds-interactive-primary-hover-bg);
  border-color: var(--ds-interactive-primary-hover);
}
.ds-pill-success {
  background-color: var(--ds-status-success-bg);
  border-color: var(--ds-status-success);
  color: var(--ds-status-success);
}
.ds-pill-success .ds-pill-icon {
  color: var(--ds-status-success);
}
.ds-pill-error {
  background-color: var(--ds-status-error-bg);
  border-color: var(--ds-status-error);
  color: var(--ds-status-error);
}
.ds-pill-error .ds-pill-icon {
  color: var(--ds-status-error);
}
.ds-pill-warning {
  background-color: var(--ds-status-warning-bg);
  border-color: var(--ds-status-warning);
  color: var(--ds-status-warning);
}
.ds-pill-warning .ds-pill-icon {
  color: var(--ds-status-warning);
}
.ds-pill-info {
  background-color: var(--ds-status-info-bg);
  border-color: var(--ds-status-info);
  color: var(--ds-status-info);
}
.ds-pill-info .ds-pill-icon {
  color: var(--ds-status-info);
}
.ds-pill-ghost {
  background-color: transparent;
  border: none;
  color: var(--ds-text-secondary);
}
.ds-pill-ghost:hover {
  background-color: var(--ds-surface-secondary);
  color: var(--ds-text-primary);
}
.ds-pill-ghost .ds-pill-icon {
  color: var(--ds-text-secondary);
}
.ds-pill-ghost:hover .ds-pill-icon {
  color: var(--ds-text-primary);
}
.ds-pill-outlined {
  background-color: transparent;
  border-width: 2px;
}
/* Pill sizes */
.ds-pill-xs {
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
  font-size: var(--ds-typography-desktop-extra-small-font-size);
}
.ds-pill-xs .ds-pill-icon {
  width: 0.75rem;
  height: 0.75rem;
}
.ds-pill-xs .ds-pill-avatar {
  width: 1rem;
  height: 1rem;
}
.ds-pill-xs .ds-pill-badge {
  font-size: 0.625rem;
  padding: 1px var(--ds-spacing-2xs);
}
.ds-pill-xs .ds-pill-close {
  width: 0.75rem;
  height: 0.75rem;
}
.ds-pill-sm {
  padding: var(--ds-spacing-2xs) var(--ds-spacing-s);
  font-size: var(--ds-typography-desktop-extra-small-font-size);
}
.ds-pill-sm .ds-pill-icon {
  width: 0.875rem;
  height: 0.875rem;
}
.ds-pill-sm .ds-pill-avatar {
  width: 1.25rem;
  height: 1.25rem;
}
.ds-pill-sm .ds-pill-badge {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
}
.ds-pill-sm .ds-pill-close {
  width: 0.875rem;
  height: 0.875rem;
}
.ds-pill-lg {
  padding: var(--ds-spacing-xs) var(--ds-spacing-m);
  font-size: var(--ds-typography-desktop-body-font-size);
}
.ds-pill-lg .ds-pill-icon {
  width: 1.25rem;
  height: 1.25rem;
}
.ds-pill-lg .ds-pill-avatar {
  width: 2rem;
  height: 2rem;
}
.ds-pill-lg .ds-pill-badge {
  font-size: var(--ds-typography-desktop-small-font-size);
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
}
.ds-pill-lg .ds-pill-close {
  width: 1.25rem;
  height: 1.25rem;
}
/* Pill with dropdown */
.ds-pill-dropdown {
  position: relative;
}
.ds-pill-dropdown-toggle {
  cursor: pointer;
}
.ds-pill-dropdown-menu {
  position: absolute;
  top: calc(100% + var(--ds-spacing-xs));
  left: 0;
  z-index: var(--ds-z-index-dropdown);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  box-shadow: var(--ds-shadow-lg);
  min-width: 200px;
  padding: var(--ds-spacing-xs);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-pill-dropdown-open .ds-pill-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ds-pill-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  background: none;
  border: none;
  border-radius: var(--ds-border-radius-2xs);
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-primary);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-pill-dropdown-item:hover {
  background-color: var(--ds-surface-secondary);
}
.ds-pill-dropdown-item:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: -2px;
}
.ds-pill-dropdown-item-selected {
  background-color: var(--ds-interactive-primary-bg);
  color: var(--ds-interactive-primary);
  font-weight: 500;
}
/* Pill with tooltip */
.ds-pill-with-tooltip {
  position: relative;
}
.ds-pill-tooltip {
  position: absolute;
  bottom: calc(100% + var(--ds-spacing-xs));
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--ds-surface-primary);
  color: var(--ds-text-primary);
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
  border-radius: var(--ds-border-radius-2xs);
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  font-weight: 500;
  white-space: nowrap;
  box-shadow: var(--ds-shadow-sm);
  opacity: 0;
  visibility: hidden;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  z-index: var(--ds-z-index-tooltip);
}
.ds-pill:hover .ds-pill-tooltip {
  opacity: 1;
  visibility: visible;
}
/* Pill group */
.ds-pill-group {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
  flex-wrap: wrap;
}
.ds-pill-group .ds-pill {
  margin: 0;
}
/* Pill animations */
.ds-pill-entering {
  animation: pillFadeIn 0.3s ease-out;
}
.ds-pill-exiting {
  animation: pillFadeOut 0.2s ease-in;
}
@keyframes pillFadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes pillFadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}
/* Responsive adjustments */
@media (max-width: 480px) {
  .ds-pill-group {
    gap: var(--ds-spacing-2xs);
  }

  .ds-pill {
    font-size: var(--ds-typography-desktop-extra-small-font-size);
    padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
  }

  .ds-pill-dropdown-menu {
    position: fixed;
    top: auto !important;
    left: var(--ds-spacing-m) !important;
    right: var(--ds-spacing-m) !important;
    bottom: var(--ds-spacing-m) !important;
    max-width: none;
    width: auto;
    animation: pillMenuSlideUp 0.3s ease-out;
  }

  .ds-pill-tooltip {
    display: none;
  }

  @keyframes pillMenuSlideUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-pill {
    border-width: 2px;
  }

  .ds-pill-outlined {
    border-width: 3px;
  }

  .ds-pill-selected {
    border-width: 3px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-pill,
  .ds-pill-close,
  .ds-pill-dropdown-item {
    transition: none;
  }

  .ds-pill-dropdown-menu {
    transition: none;
  }

  .ds-pill-tooltip {
    transition: none;
  }

  .ds-pill-entering,
  .ds-pill-exiting {
    animation: none;
  }

  @media (max-width: 480px) {
    .ds-pill-dropdown-menu {
      animation: none;
    }

    @keyframes pillMenuSlideUp {
      animation: none;
    }
  }
}
/* Print styles */
@media print {
  .ds-pill {
    border: 1px solid #000;
    background: #fff;
    color: #000;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }

  .ds-pill-dropdown-menu {
    display: none !important;
  }

  .ds-pill-tooltip {
    display: none !important;
  }

  .ds-pill-entering,
  .ds-pill-exiting {
    animation: none;
  }
}
/* DS: popover.css - Popover component */
/* layer: components */
.ds-popover {
  position: relative;
  display: inline-block;
}
.ds-popover-trigger {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ds-popover-content {
  position: absolute;
  z-index: var(--ds-z-index-tooltip);
  min-width: 200px;
  max-width: 300px;
  padding: var(--ds-spacing-m);
  background-color: var(--ds-popover-bg);
  border: 1px solid var(--ds-border-color-default);
  border-radius: var(--ds-border-radius-m);
  box-shadow: var(--ds-popover-shadow-1), var(--ds-popover-shadow-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  color: var(--ds-popover-content);
}
.ds-popover-open .ds-popover-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Popover positions */
.ds-popover-top .ds-popover-content {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  margin-bottom: var(--ds-spacing-xs);
}
.ds-popover-top.ds-popover-open .ds-popover-content {
  transform: translateX(-50%) translateY(0);
}
.ds-popover-bottom .ds-popover-content {
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  margin-top: var(--ds-spacing-xs);
}
.ds-popover-bottom.ds-popover-open .ds-popover-content {
  transform: translateX(-50%) translateY(0);
}
.ds-popover-left .ds-popover-content {
  right: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(-8px);
  margin-right: var(--ds-spacing-xs);
}
.ds-popover-left.ds-popover-open .ds-popover-content {
  transform: translateY(-50%) translateX(0);
}
.ds-popover-right .ds-popover-content {
  left: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  margin-left: var(--ds-spacing-xs);
}
.ds-popover-right.ds-popover-open .ds-popover-content {
  transform: translateY(-50%) translateX(0);
}
/* Popover arrow */
.ds-popover-content::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 8px solid transparent;
}
.ds-popover-top .ds-popover-content::after {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: var(--ds-popover-arrow-shadow);
  border-bottom: none;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
}
.ds-popover-top .ds-popover-content::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-top-color: var(--ds-popover-bg);
  border-bottom: none;
  z-index: 1;
}
.ds-popover-bottom .ds-popover-content::after {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: var(--ds-popover-arrow-shadow);
  border-top: none;
  filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.1));
}
.ds-popover-bottom .ds-popover-content::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-bottom-color: var(--ds-popover-bg);
  border-top: none;
  z-index: 1;
}
.ds-popover-left .ds-popover-content::after {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: var(--ds-popover-arrow-shadow);
  border-right: none;
  filter: drop-shadow(2px 0 2px rgba(0, 0, 0, 0.1));
}
.ds-popover-left .ds-popover-content::before {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-left-color: var(--ds-popover-bg);
  border-right: none;
  z-index: 1;
}
.ds-popover-right .ds-popover-content::after {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: var(--ds-popover-arrow-shadow);
  border-left: none;
  filter: drop-shadow(-2px 0 2px rgba(0, 0, 0, 0.1));
}
.ds-popover-right .ds-popover-content::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-right-color: var(--ds-popover-bg);
  border-left: none;
  z-index: 1;
}
/* Popover header */
.ds-popover-header {
  padding-bottom: var(--ds-spacing-s);
  margin-bottom: var(--ds-spacing-s);
  border-bottom: 1px solid var(--ds-popover-divider);
}
.ds-popover-title {
  font-size: var(--ds-typography-desktop-body-font-size);
  font-weight: 600;
  color: var(--ds-popover-title);
  margin: 0;
  line-height: 1.4;
}
/* Popover body */
.ds-popover-body {
  color: var(--ds-popover-content);
  line-height: 1.6;
}
/* Popover footer */
.ds-popover-footer {
  padding-top: var(--ds-spacing-s);
  margin-top: var(--ds-spacing-s);
  border-top: 1px solid var(--ds-popover-divider);
  display: flex;
  gap: var(--ds-spacing-s);
  justify-content: flex-end;
}
/* Popover variants */
.ds-popover-inverted .ds-popover-content {
  background-color: var(--ds-popover-bg-inverted);
  color: var(--ds-popover-content-inverted);
}
.ds-popover-inverted .ds-popover-title {
  color: var(--ds-popover-title-inverted);
}
.ds-popover-inverted .ds-popover-content::before {
  border-top-color: var(--ds-popover-bg-inverted);
}
.ds-popover-inverted.ds-popover-bottom .ds-popover-content::before {
  border-bottom-color: var(--ds-popover-bg-inverted);
}
.ds-popover-inverted.ds-popover-left .ds-popover-content::before {
  border-left-color: var(--ds-popover-bg-inverted);
}
.ds-popover-inverted.ds-popover-right .ds-popover-content::before {
  border-right-color: var(--ds-popover-bg-inverted);
}
/* Popover sizes */
.ds-popover-sm .ds-popover-content {
  min-width: 160px;
  max-width: 240px;
  padding: var(--ds-spacing-s);
}
.ds-popover-lg .ds-popover-content {
  min-width: 280px;
  max-width: 400px;
  padding: var(--ds-spacing-l);
}
/* Interactive popover */
.ds-popover-interactive .ds-popover-content {
  pointer-events: auto;
}
/* Popover with close button */
.ds-popover-close {
  position: absolute;
  top: var(--ds-spacing-xs);
  right: var(--ds-spacing-xs);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--ds-spacing-2xs);
  color: var(--ds-text-secondary);
  border-radius: var(--ds-border-radius-2xs);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-popover-close:hover {
  background-color: var(--ds-surface-background-secondary);
  color: var(--ds-text-primary);
}
.ds-popover-close:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
/* Responsive adjustments */
@media (max-width: 640px) {
  .ds-popover-content {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    transform: translateY(100%) !important;
    margin: 0;
    border-radius: var(--ds-border-radius-l) var(--ds-border-radius-l) 0 0;
    max-width: none;
    min-width: auto;
  }

  .ds-popover-open .ds-popover-content {
    transform: translateY(0) !important;
  }

  .ds-popover-content::after,
  .ds-popover-content::before {
    display: none;
  }

  .ds-popover-footer {
    flex-direction: column;
  }

  .ds-popover-footer .ds-btn {
    width: 100%;
    justify-content: center;
  }
}
/* DS: progress.css - Progress component */
/* layer: components */
.ds-progress {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-xs);
}
.ds-progress-track {
  position: relative;
  width: 100%;
  height: 8px;
  background-color: var(--ds-progress-neutral-bg);
  border-radius: var(--ds-border-radius-xl);
  overflow: hidden;
}
.ds-progress-bar {
  height: 100%;
  background-color: var(--ds-progress-neutral);
  border-radius: var(--ds-border-radius-xl);
  transition: width var(--ds-motion-duration-slow) var(--ds-motion-easing-standard);
  position: relative;
}
.ds-progress-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  animation: progressShine 2s infinite;
}
.ds-progress-text {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-progress-text);
  text-align: center;
  margin: 0;
  min-height: 1.2em;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Progress variants */
.ds-progress-success .ds-progress-bar {
  background-color: var(--ds-progress-success);
}
.ds-progress-error .ds-progress-bar {
  background-color: var(--ds-progress-error);
}
.ds-progress-error .ds-progress-bar::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%
  );
}
.ds-progress-warning .ds-progress-bar {
  background-color: var(--ds-progress-warning);
}
.ds-progress-info .ds-progress-bar {
  background-color: var(--ds-progress-info);
}
/* Progress sizes */
.ds-progress-sm .ds-progress-track {
  height: 4px;
}
.ds-progress-lg .ds-progress-track {
  height: 12px;
}
.ds-progress-xl .ds-progress-track {
  height: 16px;
}
/* Progress with steps */
.ds-progress-steps {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
}
.ds-progress-steps .ds-progress-track {
  flex: 1;
  height: 4px;
}
.ds-progress-steps .ds-progress-step {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--ds-progress-neutral-bg);
  border: 2px solid var(--ds-progress-neutral);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  flex-shrink: 0;
}
.ds-progress-steps .ds-progress-step-active {
  background-color: var(--ds-progress-neutral);
  border-color: var(--ds-progress-neutral);
}
.ds-progress-steps.ds-progress-success .ds-progress-step-active {
  background-color: var(--ds-status-success);
  border-color: var(--ds-status-success);
}
.ds-progress-steps.ds-progress-error .ds-progress-step-active {
  background-color: var(--ds-status-error);
  border-color: var(--ds-status-error);
}
/* Circular progress */
.ds-progress-circular {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.ds-progress-circular-track {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: conic-gradient(
    var(--ds-progress-neutral) 0deg,
    var(--ds-progress-neutral-bg) 0deg
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(50% - 4px),
    black calc(50% - 4px)
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(50% - 4px),
    black calc(50% - 4px)
  );
}
.ds-progress-circular-bar {
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  border-radius: 50%;
  background-color: var(--ds-surface-background);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ds-progress-circular-text {
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 600;
  color: var(--ds-progress-text);
}
.ds-progress-circular-sm {
  width: 60px;
  height: 60px;
}
.ds-progress-circular-sm .ds-progress-circular-track {
  width: 60px;
  height: 60px;
}
.ds-progress-circular-sm .ds-progress-circular-bar {
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
}
.ds-progress-circular-lg {
  width: 120px;
  height: 120px;
}
.ds-progress-circular-lg .ds-progress-circular-track {
  width: 120px;
  height: 120px;
}
.ds-progress-circular-lg .ds-progress-circular-bar {
  top: 6px;
  left: 6px;
  right: 6px;
  bottom: 6px;
}
/* Progress with animation */
.ds-progress-animated .ds-progress-bar {
  background: linear-gradient(
    90deg,
    var(--ds-progress-neutral) 0%,
    var(--ds-progress-neutral) 50%,
    rgba(255, 255, 255, 0.5) 75%,
    var(--ds-progress-neutral) 100%
  );
  background-size: 200% 100%;
  animation: progressAnimated 2s infinite;
}
/* Progress with stripes */
.ds-progress-striped .ds-progress-bar {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
  animation: progressStripes 1s linear infinite;
}
/* Progress states */
.ds-progress-paused .ds-progress-bar {
  animation-play-state: paused;
}
.ds-progress-paused .ds-progress-bar::before {
  animation-play-state: paused;
}
/* Progress in card */
.ds-card .ds-progress {
  margin-top: var(--ds-spacing-s);
}
/* Responsive adjustments */
@media (max-width: 640px) {
  .ds-progress-circular {
    width: 60px;
    height: 60px;
  }

  .ds-progress-circular .ds-progress-circular-track {
    width: 60px;
    height: 60px;
  }

  .ds-progress-circular .ds-progress-circular-bar {
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
  }
}
/* Animations */
@keyframes progressShine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes progressAnimated {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
@keyframes progressStripes {
  0% {
    background-position: 1rem 0;
  }
  100% {
    background-position: 0 0;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-progress-animated .ds-progress-bar {
    animation: none;
  }

  .ds-progress-striped .ds-progress-bar {
    animation: none;
  }

  .ds-progress-bar::before {
    animation: none;
  }
}
/* DS: progress-circular.css - Circular progress component */
/* layer: components */
.ds-progress-circular {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ds-progress-circular-track {
  position: relative;
  width: 2rem;
  height: 2rem;
}
.ds-progress-circular-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--ds-surface-tertiary);
  transition: stroke-dashoffset var(--ds-motion-duration-slow) var(--ds-motion-easing-standard);
}
.ds-progress-circular-fill {
  stroke: var(--ds-interactive-primary);
  stroke-width: 2px;
  stroke-linecap: round;
  fill: none;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
/* Progress circular with backdrop */
.ds-progress-circular-with-backdrop .ds-progress-circular-track::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  background-color: var(--ds-surface-primary);
  z-index: -1;
}
/* Progress circular content */
.ds-progress-circular-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 500;
  color: var(--ds-text-primary);
  line-height: 1;
}
/* Progress circular sizes */
.ds-progress-circular-xs {
  width: 1rem;
  height: 1rem;
}
.ds-progress-circular-xs .ds-progress-circular-track {
  width: 1rem;
  height: 1rem;
}
.ds-progress-circular-xs .ds-progress-circular-content {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
}
.ds-progress-circular-sm {
  width: 1.5rem;
  height: 1.5rem;
}
.ds-progress-circular-sm .ds-progress-circular-track {
  width: 1.5rem;
  height: 1.5rem;
}
.ds-progress-circular-sm .ds-progress-circular-content {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
}
.ds-progress-circular-md {
  width: 2rem;
  height: 2rem;
}
.ds-progress-circular-md .ds-progress-circular-track {
  width: 2rem;
  height: 2rem;
}
.ds-progress-circular-lg {
  width: 3rem;
  height: 3rem;
}
.ds-progress-circular-lg .ds-progress-circular-track {
  width: 3rem;
  height: 3rem;
}
.ds-progress-circular-lg .ds-progress-circular-content {
  font-size: var(--ds-typography-desktop-body-font-size);
}
.ds-progress-circular-xl {
  width: 4rem;
  height: 4rem;
}
.ds-progress-circular-xl .ds-progress-circular-track {
  width: 4rem;
  height: 4rem;
}
.ds-progress-circular-xl .ds-progress-circular-content {
  font-size: var(--ds-typography-desktop-h4-font-size);
}
/* Progress circular variants */
.ds-progress-circular-thick .ds-progress-circular-circle,
.ds-progress-circular-thick .ds-progress-circular-fill {
  stroke-width: 4px;
}
.ds-progress-circular-thin .ds-progress-circular-circle,
.ds-progress-circular-thin .ds-progress-circular-fill {
  stroke-width: 1px;
}
/* Progress circular colors */
.ds-progress-circular-success .ds-progress-circular-fill {
  stroke: var(--ds-status-success);
}
.ds-progress-circular-error .ds-progress-circular-fill {
  stroke: var(--ds-status-error);
}
.ds-progress-circular-warning .ds-progress-circular-fill {
  stroke: var(--ds-status-warning);
}
.ds-progress-circular-info .ds-progress-circular-fill {
  stroke: var(--ds-status-info);
}
/* Progress circular with gradient */
.ds-progress-circular-gradient .ds-progress-circular-fill {
  stroke: url(#progress-circular-gradient);
}
/* Progress circular indeterminate */
.ds-progress-circular-indeterminate .ds-progress-circular-fill {
  animation: progressCircularRotate 1.5s linear infinite;
}
@keyframes progressCircularRotate {
  0% {
    transform: rotate(-90deg);
    stroke-dasharray: 0, 100;
  }
  50% {
    stroke-dasharray: 50, 50;
  }
  100% {
    transform: rotate(270deg);
    stroke-dasharray: 0, 100;
  }
}
/* Progress circular with pulse */
.ds-progress-circular-pulse .ds-progress-circular-track {
  animation: progressCircularPulse 2s ease-in-out infinite;
}
@keyframes progressCircularPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
/* Progress circular with label */
.ds-progress-circular-with-label {
  flex-direction: column;
  gap: var(--ds-spacing-xs);
}
.ds-progress-circular-with-label .ds-progress-circular-content {
  position: static;
  transform: none;
  order: 2;
}
.ds-progress-circular-with-label .ds-progress-circular-track {
  order: 1;
}
/* Progress circular overlay */
.ds-progress-circular-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--ds-surface-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--ds-z-index-overlay);
}
.ds-progress-circular-overlay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-spacing-m);
  padding: var(--ds-spacing-xl);
  background-color: var(--ds-surface-primary);
  border-radius: var(--ds-border-radius-m);
  box-shadow: var(--ds-shadow-lg);
}
.ds-progress-circular-overlay-title {
  font-size: var(--ds-typography-desktop-h4-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0;
  text-align: center;
}
.ds-progress-circular-overlay-description {
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-secondary);
  margin: 0;
  text-align: center;
  max-width: 300px;
}
/* Responsive adjustments */
@media (max-width: 480px) {
  .ds-progress-circular-overlay-content {
    padding: var(--ds-spacing-m);
    gap: var(--ds-spacing-s);
  }

  .ds-progress-circular-overlay-title {
    font-size: var(--ds-typography-desktop-h3-font-size);
  }

  .ds-progress-circular-overlay-description {
    font-size: var(--ds-typography-desktop-small-font-size);
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-progress-circular-circle {
    border-width: 3px;
  }

  .ds-progress-circular-fill {
    stroke-width: 3px;
  }

  .ds-progress-circular-thick .ds-progress-circular-circle,
  .ds-progress-circular-thick .ds-progress-circular-fill {
    stroke-width: 5px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-progress-circular-fill {
    transition: none;
  }

  .ds-progress-circular-indeterminate .ds-progress-circular-fill {
    animation: none;
  }

  .ds-progress-circular-pulse .ds-progress-circular-track {
    animation: none;
  }

  @keyframes progressCircularRotate,
  @keyframes progressCircularPulse {
    animation: none;
  }
}
/* Print styles */
@media print {
  .ds-progress-circular {
    display: none !important;
  }

  .ds-progress-circular-overlay {
    display: none !important;
  }
}
/* DS: progress-linear.css - Linear progress component */
/* layer: components */
.ds-progress-linear {
  position: relative;
  width: 100%;
  height: 4px;
  background-color: var(--ds-surface-tertiary);
  border-radius: 2px;
  overflow: hidden;
}
.ds-progress-linear-fill {
  height: 100%;
  background-color: var(--ds-interactive-primary);
  border-radius: inherit;
  transition: width var(--ds-motion-duration-slow) var(--ds-motion-easing-standard);
  position: relative;
}
.ds-progress-linear-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%
  );
  animation: progressLinearShine 2s ease-in-out infinite;
}
@keyframes progressLinearShine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
/* Progress linear with backdrop */
.ds-progress-linear-with-backdrop {
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-2xs);
  padding: 2px;
}
.ds-progress-linear-with-backdrop .ds-progress-linear {
  background-color: var(--ds-surface-tertiary);
  border-radius: 1px;
}
/* Progress linear content */
.ds-progress-linear-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--ds-spacing-xs);
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
}
.ds-progress-linear-value {
  font-weight: 500;
  color: var(--ds-text-primary);
}
.ds-progress-linear-label {
  color: var(--ds-text-tertiary);
}
/* Progress linear sizes */
.ds-progress-linear-sm {
  height: 2px;
}
.ds-progress-linear-lg {
  height: 8px;
}
.ds-progress-linear-xl {
  height: 12px;
}
/* Progress linear variants */
.ds-progress-linear-rounded .ds-progress-linear,
.ds-progress-linear-rounded .ds-progress-linear-fill {
  border-radius: 4px;
}
.ds-progress-linear-square .ds-progress-linear,
.ds-progress-linear-square .ds-progress-linear-fill {
  border-radius: 0;
}
/* Progress linear colors */
.ds-progress-linear-success .ds-progress-linear-fill {
  background-color: var(--ds-status-success);
}
.ds-progress-linear-error .ds-progress-linear-fill {
  background-color: var(--ds-status-error);
}
.ds-progress-linear-warning .ds-progress-linear-fill {
  background-color: var(--ds-status-warning);
}
.ds-progress-linear-info .ds-progress-linear-fill {
  background-color: var(--ds-status-info);
}
/* Progress linear with gradient */
.ds-progress-linear-gradient .ds-progress-linear-fill {
  background: linear-gradient(90deg, var(--ds-interactive-primary), var(--ds-interactive-primary-hover));
}
/* Progress linear striped */
.ds-progress-linear-striped .ds-progress-linear-fill {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
  animation: progressLinearStripe 1s linear infinite;
}
@keyframes progressLinearStripe {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 1rem 0;
  }
}
/* Progress linear indeterminate */
.ds-progress-linear-indeterminate .ds-progress-linear-fill {
  width: 100% !important;
  animation: progressLinearIndeterminate 2s ease-in-out infinite;
}
@keyframes progressLinearIndeterminate {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}
/* Progress linear with buffer */
.ds-progress-linear-with-buffer .ds-progress-linear {
  position: relative;
}
.ds-progress-linear-with-buffer .ds-progress-linear-buffer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: var(--ds-surface-secondary);
  border-radius: inherit;
  transition: width var(--ds-motion-duration-slow) var(--ds-motion-easing-standard);
}
.ds-progress-linear-with-buffer .ds-progress-linear-fill {
  position: relative;
  z-index: 1;
}
/* Progress linear steps */
.ds-progress-linear-steps {
  display: flex;
  align-items: center;
  gap: 2px;
}
.ds-progress-linear-steps .ds-progress-linear {
  flex: 1;
  margin: 0;
}
.ds-progress-linear-steps .ds-progress-linear-fill {
  width: 100%;
}
/* Progress linear vertical */
.ds-progress-linear-vertical {
  width: 4px;
  height: 100%;
  flex-direction: column-reverse;
}
.ds-progress-linear-vertical .ds-progress-linear-fill {
  width: 100%;
  height: var(--progress-value, 0%);
  transition: height var(--ds-motion-duration-slow) var(--ds-motion-easing-standard);
}
.ds-progress-linear-vertical .ds-progress-linear-content {
  margin-top: 0;
  margin-left: var(--ds-spacing-xs);
  flex-direction: column;
  align-items: flex-start;
}
/* Progress linear with tooltip */
.ds-progress-linear-with-tooltip {
  position: relative;
}
.ds-progress-linear-tooltip {
  position: absolute;
  top: -2rem;
  left: var(--tooltip-position, 0%);
  transform: translateX(-50%);
  background-color: var(--ds-surface-primary);
  color: var(--ds-text-primary);
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
  border-radius: var(--ds-border-radius-2xs);
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  font-weight: 500;
  white-space: nowrap;
  box-shadow: var(--ds-shadow-sm);
  opacity: 0;
  visibility: hidden;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  z-index: var(--ds-z-index-tooltip);
}
.ds-progress-linear:hover .ds-progress-linear-tooltip {
  opacity: 1;
  visibility: visible;
}
/* Progress linear with animation */
.ds-progress-linear-animated .ds-progress-linear-fill {
  animation: progressLinearGrow 0.6s ease-out;
}
@keyframes progressLinearGrow {
  from {
    width: 0%;
  }
}
/* Responsive adjustments */
@media (max-width: 480px) {
  .ds-progress-linear-vertical .ds-progress-linear-content {
    margin-left: var(--ds-spacing-2xs);
  }

  .ds-progress-linear-tooltip {
    display: none;
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-progress-linear {
    border: 1px solid var(--ds-border-primary);
  }

  .ds-progress-linear-with-backdrop {
    border-width: 2px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-progress-linear-fill {
    transition: none;
  }

  .ds-progress-linear-fill::after {
    animation: none;
  }

  .ds-progress-linear-striped .ds-progress-linear-fill {
    animation: none;
  }

  .ds-progress-linear-indeterminate .ds-progress-linear-fill {
    animation: none;
  }

  .ds-progress-linear-with-buffer .ds-progress-linear-buffer {
    transition: none;
  }

  .ds-progress-linear-animated .ds-progress-linear-fill {
    animation: none;
  }

  @keyframes progressLinearShine,
  @keyframes progressLinearStripe,
  @keyframes progressLinearIndeterminate,
  @keyframes progressLinearGrow {
    animation: none;
  }
}
/* Print styles */
@media print {
  .ds-progress-linear-fill::after {
    display: none;
  }

  .ds-progress-linear-striped .ds-progress-linear-fill {
    background-image: none;
  }

  .ds-progress-linear-indeterminate .ds-progress-linear-fill {
    animation: none;
    width: 50% !important;
  }

  .ds-progress-linear-tooltip {
    display: none !important;
  }
}
/* DS: radio.css - Radio component */
/* layer: components */
.ds-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
  cursor: pointer;
  position: relative;
  font-size: var(--ds-typography-desktop-body-font-size);
  line-height: 1.5;
  color: var(--ds-text-primary);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.ds-radio-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
.ds-radio-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--ds-border-primary);
  border-radius: 50%;
  background-color: var(--ds-surface-primary);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  flex-shrink: 0;
}
.ds-radio-input:focus-visible ~ .ds-radio-control {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-radio-input:hover ~ .ds-radio-control {
  border-color: var(--ds-border-secondary);
}
.ds-radio-input:checked ~ .ds-radio-control {
  border-color: var(--ds-interactive-primary);
}
.ds-radio-input:checked:hover ~ .ds-radio-control {
  border-color: var(--ds-interactive-primary-hover);
}
.ds-radio-input:checked:active ~ .ds-radio-control {
  border-color: var(--ds-interactive-primary-active);
}
.ds-radio-input:disabled ~ .ds-radio-control {
  background-color: var(--ds-surface-tertiary);
  border-color: var(--ds-border-primary);
  opacity: var(--ds-opacity-disabled);
  cursor: not-allowed;
}
.ds-radio-input:disabled ~ .ds-radio-label {
  color: var(--ds-text-disabled);
  cursor: not-allowed;
}
/* Radio dot */
.ds-radio-control::after {
  content: '';
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--ds-interactive-primary);
  transform: scale(0);
  transition: transform var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-radio-input:checked ~ .ds-radio-control::after {
  transform: scale(1);
}
.ds-radio-input:checked:hover ~ .ds-radio-control::after {
  background-color: var(--ds-interactive-primary-hover);
}
.ds-radio-input:checked:active ~ .ds-radio-control::after {
  background-color: var(--ds-interactive-primary-active);
}
.ds-radio-input:disabled:checked ~ .ds-radio-control::after {
  background-color: var(--ds-surface-tertiary);
  border: 1px solid var(--ds-border-primary);
}
/* Label */
.ds-radio-label {
  cursor: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
/* Radio sizes */
.ds-radio-sm {
  font-size: var(--ds-typography-desktop-small-font-size);
  gap: var(--ds-spacing-2xs);
}
.ds-radio-sm .ds-radio-control {
  width: 1rem;
  height: 1rem;
}
.ds-radio-sm .ds-radio-control::after {
  width: 0.375rem;
  height: 0.375rem;
}
.ds-radio-lg {
  font-size: var(--ds-typography-desktop-h4-font-size);
  gap: var(--ds-spacing-s);
}
.ds-radio-lg .ds-radio-control {
  width: 1.5rem;
  height: 1.5rem;
}
.ds-radio-lg .ds-radio-control::after {
  width: 0.625rem;
  height: 0.625rem;
}
/* Radio variants */
.ds-radio-error .ds-radio-control {
  border-color: var(--ds-status-error);
}
.ds-radio-error .ds-radio-input:focus-visible ~ .ds-radio-control {
  outline-color: var(--ds-status-error);
}
.ds-radio-error .ds-radio-input:checked ~ .ds-radio-control {
  border-color: var(--ds-status-error);
}
.ds-radio-error .ds-radio-input:checked ~ .ds-radio-control::after {
  background-color: var(--ds-status-error);
}
/* Radio group */
.ds-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-s);
}
.ds-radio-group-horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--ds-spacing-m);
}
/* Radio with description */
.ds-radio-with-description {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-spacing-2xs);
}
.ds-radio-description {
  margin: 0;
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  line-height: 1.4;
  padding-left: calc(1.25rem + var(--ds-spacing-xs));
}
.ds-radio-input:disabled ~ .ds-radio-description {
  color: var(--ds-text-disabled);
}
/* Radio card style */
.ds-radio-card {
  padding: var(--ds-spacing-m);
  border: 2px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  background-color: var(--ds-surface-primary);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  cursor: pointer;
  width: 100%;
}
.ds-radio-card:hover {
  border-color: var(--ds-border-secondary);
}
.ds-radio-card.ds-radio-input:checked ~ .ds-radio-card {
  border-color: var(--ds-interactive-primary);
  background-color: var(--ds-interactive-primary-bg);
}
.ds-radio-card .ds-radio {
  margin: 0;
  cursor: inherit;
}
.ds-radio-card .ds-radio-control {
  order: -1;
}
/* Radio segmented style */
.ds-radio-segmented {
  display: flex;
  border-radius: var(--ds-border-radius-m);
  overflow: hidden;
  border: 1px solid var(--ds-border-primary);
  background-color: var(--ds-surface-secondary);
}
.ds-radio-segmented .ds-radio {
  flex: 1;
  margin: 0;
  border-radius: 0;
  border: none;
  justify-content: center;
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  background-color: transparent;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-radio-segmented .ds-radio:not(:last-child) {
  border-right: 1px solid var(--ds-border-primary);
}
.ds-radio-segmented .ds-radio-input:checked ~ .ds-radio-label {
  background-color: var(--ds-surface-primary);
  color: var(--ds-interactive-primary);
  font-weight: 500;
}
.ds-radio-segmented .ds-radio:hover {
  background-color: var(--ds-surface-primary);
}
.ds-radio-segmented .ds-radio-input:checked:hover ~ .ds-radio-label {
  background-color: var(--ds-surface-primary);
}
/* Responsive adjustments */
@media (max-width: 640px) {
  .ds-radio-group-horizontal {
    flex-direction: column;
    gap: var(--ds-spacing-s);
  }

  .ds-radio-with-description .ds-radio-description {
    padding-left: calc(1rem + var(--ds-spacing-2xs));
  }

  .ds-radio-sm .ds-radio-description {
    padding-left: calc(0.875rem + var(--ds-spacing-2xs));
  }

  .ds-radio-segmented {
    flex-direction: column;
  }

  .ds-radio-segmented .ds-radio:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid var(--ds-border-primary);
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-radio-control {
    border-width: 3px;
  }

  .ds-radio-input:checked ~ .ds-radio-control {
    border-color: var(--ds-interactive-primary);
  }

  .ds-radio-error .ds-radio-control {
    border-color: var(--ds-status-error);
  }

  .ds-radio-segmented {
    border-width: 2px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-radio-control,
  .ds-radio-control::after {
    transition: none;
  }
}
/* Print styles */
@media print {
  .ds-radio {
    color: #000;
  }

  .ds-radio-control {
    border: 2px solid #000;
    background: #fff;
  }

  .ds-radio-input:checked ~ .ds-radio-control::after {
    background-color: #000;
  }

  .ds-radio-segmented {
    border: 1px solid #000;
    background: #fff;
  }

  .ds-radio-segmented .ds-radio-input:checked ~ .ds-radio-label {
    background-color: #f0f0f0;
  }
}
/* DS: rating.css - Rating component */
/* layer: components */
.ds-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-spacing-2xs);
  font-size: var(--ds-typography-desktop-body-font-size);
  line-height: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.ds-rating-star {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
  color: var(--ds-rating-star-bg);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-rating-star:hover {
  color: var(--ds-rating-star-bg-hover);
  transform: scale(1.1);
}
.ds-rating-star:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-rating-star svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1;
}
/* Rating filled state */
.ds-rating-star-filled {
  color: var(--ds-rating-star-bg-active);
}
.ds-rating-star-filled:hover {
  color: var(--ds-rating-star-bg-active-hover);
}
/* Rating half-filled state */
.ds-rating-star-half {
  position: relative;
  color: var(--ds-rating-star-bg-active);
}
.ds-rating-star-half::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: var(--ds-rating-star-bg);
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3e%3cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3e%3c/svg%3e") no-repeat center;
          mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3e%3cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3e%3c/svg%3e") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3e%3cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3e%3c/svg%3e") no-repeat center;
  -webkit-mask-size: contain;
}
/* Rating disabled state */
.ds-rating:disabled .ds-rating-star {
  cursor: not-allowed;
  opacity: var(--ds-opacity-disabled);
  transform: none;
}
.ds-rating:disabled .ds-rating-star:hover {
  color: var(--ds-rating-star-bg);
  transform: none;
}
/* Rating readonly state */
.ds-rating-readonly .ds-rating-star {
  cursor: default;
}
.ds-rating-readonly .ds-rating-star:hover {
  transform: none;
}
/* Rating sizes */
.ds-rating-sm .ds-rating-star {
  width: 1.25rem;
  height: 1.25rem;
}
.ds-rating-lg .ds-rating-star {
  width: 2rem;
  height: 2rem;
}
.ds-rating-xl .ds-rating-star {
  width: 2.5rem;
  height: 2.5rem;
}
/* Rating with text */
.ds-rating-with-text {
  align-items: center;
  gap: var(--ds-spacing-s);
}
.ds-rating-text {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  font-weight: 500;
}
/* Rating vertical layout */
.ds-rating-vertical {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-spacing-xs);
}
.ds-rating-vertical .ds-rating-stars {
  flex-direction: row;
}
/* Rating character variants */
.ds-rating-heart .ds-rating-star svg path {
  d: path("M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z");
}
.ds-rating-thumb .ds-rating-star svg path {
  d: path("M14.5 6.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5.67-1.5 1.5-1.5 1.5.67 1.5 1.5zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z");
}
/* Rating animations */
.ds-rating-animated .ds-rating-star {
  animation: ratingPulse 0.3s ease-out;
}
.ds-rating-animated .ds-rating-star:nth-child(1) { animation-delay: 0.1s; }
.ds-rating-animated .ds-rating-star:nth-child(2) { animation-delay: 0.2s; }
.ds-rating-animated .ds-rating-star:nth-child(3) { animation-delay: 0.3s; }
.ds-rating-animated .ds-rating-star:nth-child(4) { animation-delay: 0.4s; }
.ds-rating-animated .ds-rating-star:nth-child(5) { animation-delay: 0.5s; }
@keyframes ratingPulse {
  0% {
    transform: scale(0.8);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
/* Rating tooltip */
.ds-rating-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--ds-surface-primary);
  color: var(--ds-text-primary);
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
  border-radius: var(--ds-border-radius-s);
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  white-space: nowrap;
  box-shadow: var(--ds-shadow-lg);
  z-index: var(--ds-z-index-tooltip);
  opacity: 0;
  visibility: hidden;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-rating-star:hover .ds-rating-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-4px);
}
/* Rating count display */
.ds-rating-count {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  margin-left: var(--ds-spacing-s);
}
.ds-rating-count::before {
  content: '(';
}
.ds-rating-count::after {
  content: ')';
}
/* Rating average display */
.ds-rating-average {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-primary);
}
.ds-rating-average-value {
  font-weight: 600;
  color: var(--ds-rating-star-bg-active);
}
.ds-rating-average-stars {
  font-size: 0.875em;
}
/* Responsive adjustments */
@media (max-width: 640px) {
  .ds-rating {
    gap: var(--ds-spacing-3xs);
  }

  .ds-rating-star {
    width: 1.25rem;
    height: 1.25rem;
  }

  .ds-rating-with-text {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-spacing-2xs);
  }

  .ds-rating-text {
    font-size: var(--ds-typography-mobile-extra-small-font-size);
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-rating-star {
    border: 1px solid currentColor;
    border-radius: var(--ds-border-radius-2xs);
  }

  .ds-rating-star-filled {
    background-color: currentColor;
    border-color: currentColor;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-rating-star:hover {
    transform: none;
  }

  .ds-rating-animated .ds-rating-star {
    animation: none;
  }

  .ds-rating-tooltip {
    transition: none;
  }
}
/* Print styles */
@media print {
  .ds-rating {
    color: #000;
  }

  .ds-rating-star-filled {
    color: #000;
  }

  .ds-rating-tooltip {
    display: none;
  }

  .ds-rating-animated .ds-rating-star {
    animation: none;
  }
}
/* DS: segmented.css - Segmented control component */
/* layer: components */
.ds-segmented {
  display: inline-flex;
  background-color: var(--ds-surface-secondary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  padding: var(--ds-spacing-2xs);
  overflow: hidden;
}
.ds-segmented-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-spacing-xs);
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  background: none;
  border: none;
  border-radius: calc(var(--ds-border-radius-m) - var(--ds-spacing-2xs));
  cursor: pointer;
  font-size: var(--ds-typography-desktop-body-font-size);
  font-weight: 500;
  color: var(--ds-text-secondary);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  position: relative;
  white-space: nowrap;
}
.ds-segmented-item:hover {
  color: var(--ds-text-primary);
  background-color: var(--ds-surface-tertiary);
}
.ds-segmented-item:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
  z-index: 1;
}
.ds-segmented-item:active {
  transform: scale(0.95);
}
.ds-segmented-item-selected {
  background-color: var(--ds-surface-primary);
  color: var(--ds-interactive-primary);
  font-weight: 600;
  box-shadow: var(--ds-shadow-xs);
}
.ds-segmented-item-selected:hover {
  background-color: var(--ds-interactive-primary-bg);
  color: var(--ds-interactive-primary);
}
.ds-segmented-item-disabled {
  opacity: var(--ds-opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.ds-segmented-item-disabled:hover {
  background-color: transparent;
  color: var(--ds-text-secondary);
}
/* Segmented item content */
.ds-segmented-item-text {
  margin: 0;
  line-height: 1.4;
}
/* Segmented item icon */
.ds-segmented-item-icon {
  width: 1rem;
  height: 1rem;
  color: inherit;
  flex-shrink: 0;
}
.ds-segmented-item-selected .ds-segmented-item-icon {
  color: var(--ds-interactive-primary);
}
/* Segmented item badge */
.ds-segmented-item-badge {
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
  background-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
  border-radius: var(--ds-border-radius-l);
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  font-weight: 500;
  flex-shrink: 0;
}
.ds-segmented-item-selected .ds-segmented-item-badge {
  background-color: var(--ds-interactive-primary-hover);
}
/* Segmented sizes */
.ds-segmented-sm .ds-segmented-item {
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
  font-size: var(--ds-typography-desktop-small-font-size);
}
.ds-segmented-sm .ds-segmented-item-icon {
  width: 0.875rem;
  height: 0.875rem;
}
.ds-segmented-lg .ds-segmented-item {
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  font-size: var(--ds-typography-desktop-h4-font-size);
}
.ds-segmented-lg .ds-segmented-item-icon {
  width: 1.25rem;
  height: 1.25rem;
}
/* Segmented variants */
.ds-segmented-outlined {
  background-color: transparent;
  border-width: 2px;
}
.ds-segmented-filled .ds-segmented-item-selected {
  background-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
}
.ds-segmented-filled .ds-segmented-item-selected .ds-segmented-item-icon {
  color: var(--ds-text-inverse);
}
.ds-segmented-filled .ds-segmented-item-selected .ds-segmented-item-badge {
  background-color: var(--ds-text-inverse);
  color: var(--ds-interactive-primary);
}
.ds-segmented-ghost {
  background-color: transparent;
  border: none;
}
.ds-segmented-ghost .ds-segmented-item:hover {
  background-color: var(--ds-surface-secondary);
}
.ds-segmented-ghost .ds-segmented-item-selected {
  background-color: var(--ds-interactive-primary-bg);
  color: var(--ds-interactive-primary);
}
.ds-segmented-block {
  width: 100%;
}
.ds-segmented-block .ds-segmented-item {
  flex: 1;
}
/* Segmented with equal width */
.ds-segmented-equal .ds-segmented-item {
  flex: 1;
}
/* Segmented vertical */
.ds-segmented-vertical {
  flex-direction: column;
  padding: var(--ds-spacing-2xs);
}
.ds-segmented-vertical .ds-segmented-item {
  margin-bottom: 0;
}
/* Segmented with icons only */
.ds-segmented-icons .ds-segmented-item {
  padding: var(--ds-spacing-xs);
  min-width: 2.5rem;
}
.ds-segmented-icons .ds-segmented-item-text {
  display: none;
}
/* Segmented with tooltips */
.ds-segmented-with-tooltips .ds-segmented-item {
  position: relative;
}
.ds-segmented-tooltip {
  position: absolute;
  bottom: calc(100% + var(--ds-spacing-xs));
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--ds-surface-primary);
  color: var(--ds-text-primary);
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
  border-radius: var(--ds-border-radius-2xs);
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  font-weight: 500;
  white-space: nowrap;
  box-shadow: var(--ds-shadow-sm);
  opacity: 0;
  visibility: hidden;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  z-index: var(--ds-z-index-tooltip);
}
.ds-segmented-item:hover .ds-segmented-tooltip {
  opacity: 1;
  visibility: visible;
}
/* Segmented animations */
.ds-segmented-item-entering {
  animation: segmentedItemSlideIn 0.3s ease-out;
}
.ds-segmented-item-exiting {
  animation: segmentedItemSlideOut 0.2s ease-in;
}
@keyframes segmentedItemSlideIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes segmentedItemSlideOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-5px);
  }
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ds-segmented {
    flex-wrap: wrap;
  }

  .ds-segmented-vertical {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ds-segmented-vertical .ds-segmented-item {
    flex-shrink: 0;
  }
}
@media (max-width: 480px) {
  .ds-segmented-item {
    padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
    font-size: var(--ds-typography-desktop-small-font-size);
  }

  .ds-segmented-sm .ds-segmented-item {
    padding: 2px var(--ds-spacing-2xs);
    font-size: var(--ds-typography-desktop-extra-small-font-size);
  }

  .ds-segmented-lg .ds-segmented-item {
    padding: var(--ds-spacing-xs) var(--ds-spacing-s);
    font-size: var(--ds-typography-desktop-body-font-size);
  }

  .ds-segmented-tooltip {
    display: none;
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-segmented {
    border-width: 2px;
  }

  .ds-segmented-outlined {
    border-width: 3px;
  }

  .ds-segmented-item-selected {
    border: 2px solid var(--ds-focus-outline-color);
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-segmented-item {
    transition: none;
  }

  .ds-segmented-tooltip {
    transition: none;
  }

  .ds-segmented-item-entering,
  .ds-segmented-item-exiting {
    animation: none;
  }

  @keyframes segmentedItemSlideIn,
  @keyframes segmentedItemSlideOut {
    animation: none;
  }
}
/* Print styles */
@media print {
  .ds-segmented {
    border: 1px solid #000;
    background: #fff;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }

  .ds-segmented-item-selected {
    background-color: #000;
    color: #fff;
  }

  .ds-segmented-tooltip {
    display: none !important;
  }

  .ds-segmented-item-entering,
  .ds-segmented-item-exiting {
    animation: none;
  }
}
/* DS: select.css - Select component */
/* layer: components */
.ds-select {
  position: relative;
  display: inline-block;
  width: 100%;
}
.ds-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 2.5rem;
  padding: 0 var(--ds-select-padding-x);
  background-color: var(--ds-select-background);
  border: 1px solid var(--ds-select-border);
  border-radius: var(--ds-border-radius-s);
  cursor: pointer;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-select-text);
}
.ds-select-trigger:hover {
  border-color: var(--ds-select-border-hover);
}
.ds-select-trigger:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
  border-color: var(--ds-select-border-focus);
}
.ds-select-open .ds-select-trigger {
  border-color: var(--ds-select-border-focus);
  box-shadow: var(--ds-input-shadow-active);
}
.ds-select-trigger:disabled {
  background-color: var(--ds-select-background-disabled);
  border-color: var(--ds-select-border-disabled);
  color: var(--ds-select-text-disabled);
  cursor: not-allowed;
}
.ds-select-placeholder {
  color: var(--ds-select-placeholder);
  font-size: var(--ds-typography-desktop-body-font-size);
}
.ds-select-value {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
  flex-wrap: wrap;
  min-height: 1.5rem;
}
.ds-select-value-single {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-select-value-multiple {
  flex: 1;
}
.ds-select-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-spacing-2xs);
  padding: 1px var(--ds-spacing-2xs);
  background-color: var(--ds-select-tag-background);
  border-radius: var(--ds-border-radius-2xs);
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-primary);
  margin: 1px 0;
  max-width: 100%;
}
.ds-select-tag-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-select-tag-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: var(--ds-border-radius-2xs);
  cursor: pointer;
  color: var(--ds-select-tag-remove);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  flex-shrink: 0;
}
.ds-select-tag-remove:hover {
  background-color: var(--ds-surface-background-secondary);
  color: var(--ds-text-primary);
}
.ds-select-tag-remove:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-select-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--ds-select-arrow);
  transition: transform var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  flex-shrink: 0;
}
.ds-select-open .ds-select-arrow {
  transform: rotate(180deg);
}
.ds-select-trigger:disabled .ds-select-arrow {
  color: var(--ds-select-arrow-disabled);
}
.ds-select-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--ds-select-clear);
  cursor: pointer;
  border-radius: var(--ds-border-radius-2xs);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  flex-shrink: 0;
}
.ds-select-clear:hover {
  color: var(--ds-select-clear-hover);
  background-color: var(--ds-surface-background-secondary);
}
.ds-select-clear:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-select-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--ds-z-index-dropdown);
  background-color: var(--ds-surface-background);
  border: 1px solid var(--ds-border-color-default);
  border-radius: var(--ds-border-radius-m);
  box-shadow: var(--ds-dropdown-shadow-1), var(--ds-dropdown-shadow-2);
  margin-top: var(--ds-spacing-2xs);
  max-height: 200px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-select-open .ds-select-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ds-select-option {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  padding: var(--ds-spacing-xs) var(--ds-spacing-m);
  cursor: pointer;
  color: var(--ds-select-option-text);
  font-size: var(--ds-typography-desktop-body-font-size);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  position: relative;
}
.ds-select-option:hover {
  background-color: var(--ds-select-option-background-hover);
}
.ds-select-option:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: -2px;
}
.ds-select-option[data-selected="true"] {
  background-color: var(--ds-select-option-background-hover);
  color: var(--ds-select-option-text-checked);
}
.ds-select-option[data-disabled="true"] {
  color: var(--ds-select-option-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.ds-select-option-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ds-select-option-check {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}
.ds-select-option-check svg {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--ds-status-success);
}
.ds-select-option-note {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-select-option-note);
  margin-left: auto;
}
.ds-select-group {
  padding: var(--ds-spacing-xs) var(--ds-spacing-m) var(--ds-spacing-2xs);
}
.ds-select-group-title {
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 600;
  color: var(--ds-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--ds-spacing-2xs);
}
/* Select variants */
.ds-select-sm .ds-select-trigger {
  min-height: 2rem;
  padding: 0 var(--ds-spacing-s);
  font-size: var(--ds-typography-desktop-small-font-size);
}
.ds-select-sm .ds-select-arrow,
.ds-select-sm .ds-select-clear {
  width: 1rem;
  height: 1rem;
}
.ds-select-lg .ds-select-trigger {
  min-height: 3rem;
  padding: 0 var(--ds-spacing-l);
  font-size: var(--ds-typography-desktop-h4-font-size);
}
.ds-select-lg .ds-select-arrow,
.ds-select-lg .ds-select-clear {
  width: 1.5rem;
  height: 1.5rem;
}
.ds-select-borderless .ds-select-trigger {
  border: none;
  background-color: transparent;
  padding: 0 var(--ds-spacing-s);
}
.ds-select-borderless .ds-select-trigger:hover {
  background-color: var(--ds-select-borderless-background-hover);
}
.ds-select-error .ds-select-trigger {
  border-color: var(--ds-select-border-error);
  box-shadow: var(--ds-input-shadow-error);
}
.ds-select-error .ds-select-trigger:hover {
  border-color: var(--ds-select-border-error-hover);
}
/* Select states */
.ds-select-loading .ds-select-trigger {
  pointer-events: none;
}
.ds-select-loading .ds-select-arrow {
  animation: spin 1s linear infinite;
}
/* Select with search */
.ds-select-search {
  position: relative;
}
.ds-select-search-input {
  width: 100%;
  padding: var(--ds-spacing-xs) var(--ds-spacing-m);
  border: 1px solid var(--ds-border-color-light);
  border-radius: var(--ds-border-radius-s);
  font-size: var(--ds-typography-desktop-body-font-size);
  margin: var(--ds-spacing-xs) var(--ds-spacing-m);
  margin-bottom: 0;
}
.ds-select-search-input:focus {
  outline: none;
  border-color: var(--ds-focus-outline-color);
}
/* Select with tags overflow */
.ds-select-tags-overflow {
  position: relative;
}
.ds-select-tags-overflow::after {
  content: '+' attr(data-overflow-count);
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--ds-surface-background-secondary);
  color: var(--ds-text-secondary);
  padding: 1px var(--ds-spacing-2xs);
  border-radius: var(--ds-border-radius-2xs);
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 500;
}
/* Mobile adaptations */
@media (max-width: 640px) {
  .ds-select-menu {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0;
    border-radius: var(--ds-border-radius-l) var(--ds-border-radius-l) 0 0;
    transform: translateY(100%);
    max-height: 50vh;
    width: 100vw;
  }

  .ds-select-open .ds-select-menu {
    transform: translateY(0);
  }

  .ds-select-option {
    padding: var(--ds-spacing-s) var(--ds-spacing-m);
  }
}
/* DS: separator.css - Separator component */
/* layer: components */
.ds-separator {
  border: none;
  margin: 0;
  flex-shrink: 0;
}
.ds-separator-horizontal {
  border-top: 1px solid var(--ds-separator-border);
  width: 100%;
}
.ds-separator-vertical {
  border-left: 1px solid var(--ds-separator-border);
  height: 100%;
  width: 1px;
  align-self: stretch;
}
/* Separator variants */
.ds-separator-dashed {
  border-style: dashed;
}
.ds-separator-dotted {
  border-style: dotted;
}
.ds-separator-thick {
  border-width: 2px;
}
.ds-separator-thin {
  border-width: 0.5px;
}
/* Separator colors */
.ds-separator-primary {
  border-color: var(--ds-separator-border-primary);
}
.ds-separator-secondary {
  border-color: var(--ds-separator-border-secondary);
}
.ds-separator-muted {
  border-color: var(--ds-separator-border-muted);
}
.ds-separator-success {
  border-color: var(--ds-status-success);
}
.ds-separator-warning {
  border-color: var(--ds-status-warning);
}
.ds-separator-error {
  border-color: var(--ds-status-error);
}
.ds-separator-info {
  border-color: var(--ds-status-info);
}
/* Separator with gradient */
.ds-separator-gradient {
  position: relative;
  border: none;
}
.ds-separator-gradient-horizontal {
  height: 1px;
  width: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--ds-separator-border) 20%,
    var(--ds-separator-border) 80%,
    transparent 100%
  );
}
.ds-separator-gradient-vertical {
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--ds-separator-border) 20%,
    var(--ds-separator-border) 80%,
    transparent 100%
  );
}
/* Separator with spacing */
.ds-separator-spacing-xs {
  margin: var(--ds-spacing-xs) 0;
}
.ds-separator-spacing-xs.ds-separator-vertical {
  margin: 0 var(--ds-spacing-xs);
}
.ds-separator-spacing-sm {
  margin: var(--ds-spacing-s) 0;
}
.ds-separator-spacing-sm.ds-separator-vertical {
  margin: 0 var(--ds-spacing-s);
}
.ds-separator-spacing-md {
  margin: var(--ds-spacing-m) 0;
}
.ds-separator-spacing-md.ds-separator-vertical {
  margin: 0 var(--ds-spacing-m);
}
.ds-separator-spacing-lg {
  margin: var(--ds-spacing-l) 0;
}
.ds-separator-spacing-lg.ds-separator-vertical {
  margin: 0 var(--ds-spacing-l);
}
.ds-separator-spacing-xl {
  margin: var(--ds-spacing-xl) 0;
}
.ds-separator-spacing-xl.ds-separator-vertical {
  margin: 0 var(--ds-spacing-xl);
}
/* Separator in different contexts */
.ds-separator-menu {
  border-color: var(--ds-separator-border-muted);
  margin: var(--ds-spacing-xs) 0;
}
.ds-separator-menu.ds-separator-vertical {
  margin: 0 var(--ds-spacing-xs);
}
.ds-separator-card {
  border-color: var(--ds-separator-border-muted);
  margin: var(--ds-spacing-m) 0;
}
.ds-separator-card.ds-separator-vertical {
  margin: 0 var(--ds-spacing-m);
}
.ds-separator-form {
  border-color: var(--ds-separator-border-secondary);
  margin: var(--ds-spacing-l) 0;
}
.ds-separator-form.ds-separator-vertical {
  margin: 0 var(--ds-spacing-l);
}
.ds-separator-list {
  border-color: var(--ds-separator-border-muted);
  margin: var(--ds-spacing-2xs) 0;
}
.ds-separator-list.ds-separator-vertical {
  margin: 0 var(--ds-spacing-2xs);
}
/* Separator with text (similar to divider) */
.ds-separator-with-text {
  display: flex;
  align-items: center;
  text-align: center;
  margin: var(--ds-spacing-m) 0;
}
.ds-separator-with-text::before,
.ds-separator-with-text::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--ds-separator-border);
}
.ds-separator-with-text::before {
  margin-right: var(--ds-spacing-s);
}
.ds-separator-with-text::after {
  margin-left: var(--ds-spacing-s);
}
.ds-separator-text {
  padding: 0 var(--ds-spacing-xs);
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  font-weight: 500;
  color: var(--ds-text-secondary);
  background-color: var(--ds-surface-primary);
  white-space: nowrap;
}
/* Separator orientations for text */
.ds-separator-left.ds-separator-with-text::after {
  flex: none;
  width: 20%;
}
.ds-separator-right.ds-separator-with-text::before {
  flex: none;
  width: 20%;
}
/* Separator decorative */
.ds-separator-decorative {
  position: relative;
  border: none;
}
.ds-separator-decorative-horizontal::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--ds-separator-border) 30%,
    var(--ds-separator-border) 70%,
    transparent 100%
  );
}
.ds-separator-decorative-vertical::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 60px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--ds-separator-border) 30%,
    var(--ds-separator-border) 70%,
    transparent 100%
  );
}
/* Separator with icon */
.ds-separator-with-icon {
  display: flex;
  align-items: center;
  margin: var(--ds-spacing-m) 0;
}
.ds-separator-with-icon::before,
.ds-separator-with-icon::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--ds-separator-border);
}
.ds-separator-with-icon::before {
  margin-right: var(--ds-spacing-s);
}
.ds-separator-with-icon::after {
  margin-left: var(--ds-spacing-s);
}
.ds-separator-icon {
  width: 1rem;
  height: 1rem;
  color: var(--ds-text-secondary);
  flex-shrink: 0;
}
/* Separator animations */
.ds-separator-animated {
  animation: separatorFadeIn 0.3s ease-out;
}
@keyframes separatorFadeIn {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}
.ds-separator-animated.ds-separator-vertical {
  animation: separatorFadeInVertical 0.3s ease-out;
}
@keyframes separatorFadeInVertical {
  from {
    opacity: 0;
    transform: scaleY(0);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}
/* Responsive adjustments */
@media (max-width: 640px) {
  .ds-separator-with-text {
    margin: var(--ds-spacing-s) 0;
  }

  .ds-separator-with-text::before,
  .ds-separator-with-text::after {
    margin-right: var(--ds-spacing-2xs);
    margin-left: var(--ds-spacing-2xs);
  }

  .ds-separator-text {
    padding: 0 2px;
    font-size: 11px;
  }

  .ds-separator-vertical {
    margin: 0 var(--ds-spacing-s);
  }

  .ds-separator-decorative-horizontal::after {
    width: 40px;
  }

  .ds-separator-decorative-vertical::after {
    height: 40px;
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-separator {
    border-width: 2px;
  }

  .ds-separator-thin {
    border-width: 1px;
  }

  .ds-separator-thick {
    border-width: 3px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-separator-animated {
    animation: none;
  }
}
/* Print styles */
@media print {
  .ds-separator {
    border-color: #000;
    background: transparent;
  }

  .ds-separator-gradient-horizontal,
  .ds-separator-gradient-vertical {
    background: #000;
  }

  .ds-separator-with-text::before,
  .ds-separator-with-text::after {
    border-color: #000;
  }

  .ds-separator-text {
    background: #fff;
    color: #000;
  }

  .ds-separator-decorative::after {
    background: #000;
  }

  .ds-separator-animated {
    animation: none;
  }
}
/* DS: sidebar.css - Sidebar component */
/* layer: components */
.ds-sidebar {
  display: flex;
  flex-direction: column;
  width: var(--ds-sidebar-width);
  min-width: var(--ds-sidebar-min-width);
  max-width: var(--ds-sidebar-max-width);
  height: 100%;
  background-color: var(--ds-sidebar-bg);
  border-right: 1px solid var(--ds-sidebar-border);
  position: relative;
  z-index: var(--ds-z-index-sidebar);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-sidebar-header {
  padding: var(--ds-spacing-l);
  border-bottom: 1px solid var(--ds-sidebar-border);
  background-color: var(--ds-sidebar-header-bg);
}
.ds-sidebar-title {
  margin: 0;
  font-size: var(--ds-typography-desktop-h4-font-size);
  font-weight: 600;
  color: var(--ds-sidebar-title-fg);
  line-height: 1.3;
}
.ds-sidebar-subtitle {
  margin: var(--ds-spacing-2xs) 0 0 0;
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-sidebar-subtitle-fg);
  line-height: 1.4;
}
.ds-sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--ds-spacing-m) 0;
}
.ds-sidebar-nav {
  padding: 0 var(--ds-spacing-m);
}
.ds-sidebar-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-2xs);
}
.ds-sidebar-nav-item {
  position: relative;
}
.ds-sidebar-nav-link {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  color: var(--ds-sidebar-nav-fg);
  text-decoration: none;
  border-radius: var(--ds-border-radius-m);
  font-weight: 500;
  font-size: var(--ds-typography-desktop-body-font-size);
  line-height: 1.4;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  position: relative;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.ds-sidebar-nav-link:hover {
  background-color: var(--ds-sidebar-nav-bg-hover);
  color: var(--ds-sidebar-nav-fg-hover);
}
.ds-sidebar-nav-link:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: -2px;
  background-color: var(--ds-sidebar-nav-bg-focus);
  color: var(--ds-sidebar-nav-fg-focus);
}
.ds-sidebar-nav-link[aria-current="page"] {
  background-color: var(--ds-sidebar-nav-bg-active);
  color: var(--ds-sidebar-nav-fg-active);
  font-weight: 600;
}
.ds-sidebar-nav-link[aria-current="page"]:hover {
  background-color: var(--ds-sidebar-nav-bg-active-hover);
}
.ds-sidebar-nav-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: inherit;
  transition: transform var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-sidebar-nav-link:hover .ds-sidebar-nav-icon {
  transform: scale(1.1);
}
.ds-sidebar-nav-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-sidebar-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 var(--ds-spacing-2xs);
  border-radius: var(--ds-border-radius-xl);
  background-color: var(--ds-sidebar-nav-badge-bg);
  color: var(--ds-sidebar-nav-badge-fg);
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  font-weight: 600;
  line-height: 1;
}
/* Sidebar collapsible sections */
.ds-sidebar-section {
  margin-bottom: var(--ds-spacing-l);
}
.ds-sidebar-section:last-child {
  margin-bottom: 0;
}
.ds-sidebar-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  color: var(--ds-sidebar-section-header-fg);
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.ds-sidebar-section-header:hover {
  color: var(--ds-sidebar-section-header-fg-hover);
}
.ds-sidebar-section-header:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: -2px;
}
.ds-sidebar-section-toggle {
  width: 1rem;
  height: 1rem;
  color: inherit;
  transition: transform var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-sidebar-section[aria-expanded="false"] .ds-sidebar-section-toggle {
  transform: rotate(-90deg);
}
.ds-sidebar-section-content {
  overflow: hidden;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-sidebar-section[aria-expanded="false"] .ds-sidebar-section-content {
  max-height: 0;
  opacity: 0;
}
/* Sidebar footer */
.ds-sidebar-footer {
  padding: var(--ds-spacing-l);
  border-top: 1px solid var(--ds-sidebar-border);
  background-color: var(--ds-sidebar-footer-bg);
}
.ds-sidebar-footer-content {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
}
.ds-sidebar-user {
  flex: 1;
  min-width: 0;
}
.ds-sidebar-user-name {
  font-size: var(--ds-typography-desktop-body-font-size);
  font-weight: 500;
  color: var(--ds-sidebar-user-name-fg);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-sidebar-user-role {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-sidebar-user-role-fg);
  margin: var(--ds-spacing-3xs) 0 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-sidebar-user-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  flex-shrink: 0;
}
/* Sidebar toggle button */
.ds-sidebar-toggle {
  position: absolute;
  top: 50%;
  right: -1rem;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  background-color: var(--ds-sidebar-toggle-bg);
  border: 1px solid var(--ds-sidebar-toggle-border);
  border-radius: var(--ds-border-radius-m);
  color: var(--ds-sidebar-toggle-fg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--ds-z-index-sidebar);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-sidebar-toggle:hover {
  background-color: var(--ds-sidebar-toggle-bg-hover);
  border-color: var(--ds-sidebar-toggle-border-hover);
  color: var(--ds-sidebar-toggle-fg-hover);
}
.ds-sidebar-toggle:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-sidebar-toggle-icon {
  width: 1rem;
  height: 1rem;
  transition: transform var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
/* Sidebar variants */
.ds-sidebar-collapsed {
  width: var(--ds-sidebar-collapsed-width);
  min-width: var(--ds-sidebar-collapsed-width);
}
.ds-sidebar-collapsed .ds-sidebar-header,
.ds-sidebar-collapsed .ds-sidebar-content,
.ds-sidebar-collapsed .ds-sidebar-footer {
  padding-left: var(--ds-spacing-s);
  padding-right: var(--ds-spacing-s);
}
.ds-sidebar-collapsed .ds-sidebar-nav-link {
  padding-left: var(--ds-spacing-s);
  padding-right: var(--ds-spacing-s);
  justify-content: center;
}
.ds-sidebar-collapsed .ds-sidebar-nav-text,
.ds-sidebar-collapsed .ds-sidebar-nav-badge {
  display: none;
}
.ds-sidebar-collapsed .ds-sidebar-section-header {
  padding-left: var(--ds-spacing-s);
  padding-right: var(--ds-spacing-s);
  justify-content: center;
}
.ds-sidebar-collapsed .ds-sidebar-section-toggle {
  display: none;
}
.ds-sidebar-collapsed .ds-sidebar-title,
.ds-sidebar-collapsed .ds-sidebar-subtitle {
  text-align: center;
}
.ds-sidebar-collapsed .ds-sidebar-user-name,
.ds-sidebar-collapsed .ds-sidebar-user-role {
  display: none;
}
.ds-sidebar-collapsed .ds-sidebar-user-avatar {
  margin: 0 auto;
}
.ds-sidebar-dark {
  background-color: var(--ds-sidebar-dark-bg);
  border-right-color: var(--ds-sidebar-dark-border);
}
.ds-sidebar-dark .ds-sidebar-title {
  color: var(--ds-sidebar-dark-title-fg);
}
.ds-sidebar-dark .ds-sidebar-nav-link {
  color: var(--ds-sidebar-dark-nav-fg);
}
.ds-sidebar-dark .ds-sidebar-nav-link:hover {
  background-color: var(--ds-sidebar-dark-nav-bg-hover);
  color: var(--ds-sidebar-dark-nav-fg-hover);
}
.ds-sidebar-dark .ds-sidebar-nav-link[aria-current="page"] {
  background-color: var(--ds-sidebar-dark-nav-bg-active);
  color: var(--ds-sidebar-dark-nav-fg-active);
}
/* Sidebar sizes */
.ds-sidebar-sm {
  width: var(--ds-sidebar-sm-width);
}
.ds-sidebar-lg {
  width: var(--ds-sidebar-lg-width);
}
/* Sidebar overlay for mobile */
.ds-sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--ds-sidebar-overlay-bg);
  z-index: var(--ds-z-index-sidebar-overlay);
  opacity: 0;
  visibility: hidden;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-sidebar-overlay.ds-sidebar-overlay-visible {
  opacity: 1;
  visibility: visible;
}
/* Responsive behavior */
@media (max-width: 1024px) {
  .ds-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: var(--ds-z-index-sidebar);
    transform: translateX(-100%);
    transition: transform var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  }

  .ds-sidebar.ds-sidebar-open {
    transform: translateX(0);
  }

  .ds-sidebar-overlay {
    display: block;
  }
}
@media (max-width: 640px) {
  .ds-sidebar {
    width: 100vw;
    max-width: 320px;
  }

  .ds-sidebar-header {
    padding: var(--ds-spacing-m);
  }

  .ds-sidebar-content {
    padding: var(--ds-spacing-s) 0;
  }

  .ds-sidebar-nav {
    padding: 0 var(--ds-spacing-s);
  }

  .ds-sidebar-footer {
    padding: var(--ds-spacing-m);
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-sidebar {
    border-right-width: 2px;
  }

  .ds-sidebar-nav-link {
    border: 1px solid transparent;
  }

  .ds-sidebar-nav-link:focus-visible {
    border-color: var(--ds-focus-outline-color);
  }

  .ds-sidebar-nav-link[aria-current="page"] {
    border-color: var(--ds-interactive-primary);
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-sidebar,
  .ds-sidebar-nav-link,
  .ds-sidebar-section-content,
  .ds-sidebar-section-toggle,
  .ds-sidebar-nav-icon,
  .ds-sidebar-toggle,
  .ds-sidebar-overlay {
    transition: none;
  }

  .ds-sidebar-toggle-icon {
    transition: none;
  }
}
/* Print styles */
@media print {
  .ds-sidebar {
    display: none;
  }

  .ds-sidebar-toggle,
  .ds-sidebar-overlay {
    display: none;
  }
}
/* DS: skeleton.css - Skeleton loading component */
/* layer: components */
.ds-skeleton {
  background-color: var(--ds-surface-background-secondary);
  border-radius: var(--ds-border-radius-s);
  position: relative;
  overflow: hidden;
}
.ds-skeleton::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: skeletonShimmer 1.5s infinite;
  transform: translateX(-100%);
}
/* Skeleton variants */
.ds-skeleton-text {
  height: 1rem;
  margin-bottom: var(--ds-spacing-xs);
}
.ds-skeleton-text:last-child {
  margin-bottom: 0;
}
.ds-skeleton-title {
  height: 1.5rem;
  width: 60%;
  margin-bottom: var(--ds-spacing-s);
}
.ds-skeleton-paragraph {
  margin-bottom: var(--ds-spacing-m);
}
.ds-skeleton-paragraph .ds-skeleton-text:nth-child(1) {
  width: 100%;
}
.ds-skeleton-paragraph .ds-skeleton-text:nth-child(2) {
  width: 85%;
}
.ds-skeleton-paragraph .ds-skeleton-text:nth-child(3) {
  width: 70%;
}
.ds-skeleton-paragraph .ds-skeleton-text:nth-child(4) {
  width: 90%;
}
.ds-skeleton-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
}
.ds-skeleton-button {
  height: 2.25rem;
  width: 6rem;
  border-radius: var(--ds-border-radius-s);
}
.ds-skeleton-input {
  height: 2.5rem;
  width: 100%;
  border-radius: var(--ds-border-radius-s);
}
.ds-skeleton-card {
  padding: var(--ds-spacing-m);
  border-radius: var(--ds-border-radius-m);
  margin-bottom: var(--ds-spacing-m);
}
.ds-skeleton-card-header {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  margin-bottom: var(--ds-spacing-m);
}
.ds-skeleton-card-header .ds-skeleton-avatar {
  flex-shrink: 0;
}
.ds-skeleton-card-header .ds-skeleton-text {
  height: 1.25rem;
  width: 120px;
  margin: 0;
}
.ds-skeleton-card-content .ds-skeleton-text {
  height: 1rem;
  margin-bottom: var(--ds-spacing-xs);
}
.ds-skeleton-card-content .ds-skeleton-text:nth-child(1) {
  width: 100%;
}
.ds-skeleton-card-content .ds-skeleton-text:nth-child(2) {
  width: 85%;
}
.ds-skeleton-card-content .ds-skeleton-text:nth-child(3) {
  width: 70%;
}
.ds-skeleton-table {
  border-radius: var(--ds-border-radius-m);
  padding: var(--ds-spacing-m);
}
.ds-skeleton-table-header {
  display: flex;
  gap: var(--ds-spacing-m);
  margin-bottom: var(--ds-spacing-m);
  padding-bottom: var(--ds-spacing-s);
  border-bottom: 1px solid var(--ds-surface-background-tertiary);
}
.ds-skeleton-table-header .ds-skeleton-text {
  height: 1rem;
  margin: 0;
  flex: 1;
}
.ds-skeleton-table-row {
  display: flex;
  gap: var(--ds-spacing-m);
  margin-bottom: var(--ds-spacing-s);
}
.ds-skeleton-table-row .ds-skeleton-text {
  height: 1rem;
  margin: 0;
  flex: 1;
}
.ds-skeleton-table-row .ds-skeleton-text:nth-child(1) {
  width: 80px;
  flex: none;
}
.ds-skeleton-list {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-s);
}
.ds-skeleton-list-item {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  padding: var(--ds-spacing-s);
  border-radius: var(--ds-border-radius-m);
}
.ds-skeleton-list-item .ds-skeleton-avatar {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}
.ds-skeleton-list-item .ds-skeleton-text {
  height: 1rem;
  margin: 0;
  flex: 1;
}
.ds-skeleton-list-item .ds-skeleton-text:nth-child(1) {
  width: 120px;
}
.ds-skeleton-list-item .ds-skeleton-text:nth-child(2) {
  width: 80px;
}
/* Skeleton sizes */
.ds-skeleton-xs {
  height: 0.75rem;
}
.ds-skeleton-sm {
  height: 1rem;
}
.ds-skeleton-md {
  height: 1.25rem;
}
.ds-skeleton-lg {
  height: 1.5rem;
}
.ds-skeleton-xl {
  height: 2rem;
}
/* Skeleton shapes */
.ds-skeleton-circle {
  border-radius: 50%;
}
.ds-skeleton-square {
  border-radius: 0;
}
.ds-skeleton-rounded {
  border-radius: var(--ds-border-radius-m);
}
/* Skeleton with custom width */
.ds-skeleton-w-full {
  width: 100%;
}
/* В CSS идентификаторе нельзя писать необработанный слэш,
   поэтому экранируем его, чтобы постпроцессоры не падали.
   Класс в HTML по-прежнему может быть "ds-skeleton-w-3/4" и т.п. */
.ds-skeleton-w-3\/4 {
  width: 75%;
}
.ds-skeleton-w-1\/2 {
  width: 50%;
}
.ds-skeleton-w-1\/4 {
  width: 25%;
}
.ds-skeleton-w-1\/3 {
  width: 33.333%;
}
.ds-skeleton-w-2\/3 {
  width: 66.666%;
}
/* Skeleton animation variants */
.ds-skeleton-pulse {
  animation: skeletonPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.ds-skeleton-pulse::after {
  display: none;
}
.ds-skeleton-wave {
  /* Default shimmer animation */
}
.ds-skeleton-none {
  animation: none;
}
.ds-skeleton-none::after {
  display: none;
}
/* Skeleton group */
.ds-skeleton-group {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-s);
}
.ds-skeleton-group-horizontal {
  flex-direction: row;
  align-items: center;
  gap: var(--ds-spacing-m);
}
/* Responsive skeleton */
@media (max-width: 640px) {
  .ds-skeleton-card {
    padding: var(--ds-spacing-s);
    margin-bottom: var(--ds-spacing-s);
  }

  .ds-skeleton-card-header {
    margin-bottom: var(--ds-spacing-s);
  }

  .ds-skeleton-table-row {
    flex-direction: column;
    gap: var(--ds-spacing-xs);
  }

  .ds-skeleton-list-item {
    padding: var(--ds-spacing-xs);
  }
}
/* Animations */
@keyframes skeletonShimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes skeletonPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .ds-skeleton::after {
    animation: none;
  }

  .ds-skeleton-pulse {
    animation: none;
  }
}
/* DS: slider.css - Slider component */
/* layer: components */
.ds-slider {
  position: relative;
  display: inline-block;
  width: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: none;
}
.ds-slider-track {
  position: relative;
  height: 4px;
  background-color: var(--ds-slider-track-bg);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-slider-track:hover {
  background-color: var(--ds-slider-track-bg-hover);
}
.ds-slider-track-active {
  background-color: var(--ds-slider-track-bg-active);
  border-radius: 2px 0 0 2px;
}
.ds-slider-track-disabled {
  background-color: var(--ds-slider-track-bg-disabled);
  cursor: not-allowed;
}
.ds-slider-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1.25rem;
  height: 1.25rem;
  background-color: var(--ds-slider-thumb-bg);
  border: 2px solid var(--ds-slider-thumb-border);
  border-radius: 50%;
  cursor: grab;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  box-shadow: var(--ds-slider-thumb-shadow);
}
.ds-slider-thumb:hover {
  background-color: var(--ds-slider-thumb-bg-hover);
  border-color: var(--ds-slider-thumb-border-hover);
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: var(--ds-slider-thumb-shadow-hover);
}
.ds-slider-thumb:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-slider-thumb:active {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.2);
  box-shadow: var(--ds-slider-thumb-shadow-active);
}
.ds-slider-thumb-disabled {
  background-color: var(--ds-slider-thumb-bg-disabled);
  border-color: var(--ds-slider-thumb-border-disabled);
  cursor: not-allowed;
  transform: translate(-50%, -50%);
  box-shadow: none;
}
.ds-slider-thumb-disabled:hover {
  transform: translate(-50%, -50%);
  background-color: var(--ds-slider-thumb-bg-disabled);
  border-color: var(--ds-slider-thumb-border-disabled);
  box-shadow: none;
}
/* Slider input */
.ds-slider-input {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}
.ds-slider-input:disabled {
  cursor: not-allowed;
}
/* Slider marks */
.ds-slider-marks {
  position: relative;
  margin-top: var(--ds-spacing-s);
}
.ds-slider-mark {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  color: var(--ds-slider-mark-fg);
  white-space: nowrap;
  cursor: pointer;
}
.ds-slider-mark-active {
  color: var(--ds-slider-mark-fg-active);
  font-weight: 600;
}
.ds-slider-mark-line {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 8px;
  background-color: var(--ds-slider-mark-line-bg);
  border-radius: 1px;
}
.ds-slider-mark-line-active {
  background-color: var(--ds-slider-mark-line-bg-active);
}
/* Slider tooltip */
.ds-slider-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--ds-slider-tooltip-bg);
  color: var(--ds-slider-tooltip-fg);
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
  border-radius: var(--ds-border-radius-s);
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  font-weight: 500;
  white-space: nowrap;
  box-shadow: var(--ds-slider-tooltip-shadow);
  opacity: 0;
  visibility: hidden;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  pointer-events: none;
  z-index: var(--ds-z-index-tooltip);
}
.ds-slider-tooltip-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-4px);
}
/* Slider value label */
.ds-slider-value {
  margin-top: var(--ds-spacing-s);
  text-align: center;
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  font-weight: 500;
}
/* Slider range */
.ds-slider-range {
  position: relative;
}
.ds-slider-range .ds-slider-thumb {
  z-index: 2;
}
.ds-slider-range .ds-slider-thumb:first-child {
  z-index: 3;
}
.ds-slider-range-track {
  position: absolute;
  top: 0;
  height: 4px;
  background-color: var(--ds-slider-range-bg);
  border-radius: 2px;
}
/* Slider sizes */
.ds-slider-sm .ds-slider-track {
  height: 3px;
}
.ds-slider-sm .ds-slider-thumb {
  width: 1rem;
  height: 1rem;
}
.ds-slider-lg .ds-slider-track {
  height: 6px;
}
.ds-slider-lg .ds-slider-thumb {
  width: 1.5rem;
  height: 1.5rem;
}
/* Slider variants */
.ds-slider-success .ds-slider-track-active {
  background-color: var(--ds-status-success);
}
.ds-slider-success .ds-slider-thumb {
  background-color: var(--ds-status-success);
  border-color: var(--ds-status-success);
}
.ds-slider-warning .ds-slider-track-active {
  background-color: var(--ds-status-warning);
}
.ds-slider-warning .ds-slider-thumb {
  background-color: var(--ds-status-warning);
  border-color: var(--ds-status-warning);
}
.ds-slider-error .ds-slider-track-active {
  background-color: var(--ds-status-error);
}
.ds-slider-error .ds-slider-thumb {
  background-color: var(--ds-status-error);
  border-color: var(--ds-status-error);
}
/* Slider with steps */
.ds-slider-stepped .ds-slider-mark-line {
  height: 12px;
  top: -12px;
}
/* Slider vertical */
.ds-slider-vertical {
  width: auto;
  height: 200px;
  display: inline-flex;
  align-items: stretch;
}
.ds-slider-vertical .ds-slider-track {
  width: 4px;
  height: 100%;
  margin: 0 auto;
}
.ds-slider-vertical .ds-slider-track-active {
  width: 4px;
  border-radius: 0 0 2px 2px;
}
.ds-slider-vertical .ds-slider-thumb {
  left: 50%;
  top: auto;
}
.ds-slider-vertical .ds-slider-marks {
  margin-top: 0;
  margin-left: var(--ds-spacing-m);
  height: 100%;
}
.ds-slider-vertical .ds-slider-mark {
  top: auto;
  left: 0;
  transform: translateY(50%);
}
.ds-slider-vertical .ds-slider-mark-line {
  top: 50%;
  left: -8px;
  width: 8px;
  height: 2px;
  transform: translateY(-50%);
}
.ds-slider-vertical .ds-slider-tooltip {
  bottom: auto;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: var(--ds-spacing-xs);
}
.ds-slider-vertical .ds-slider-tooltip-visible {
  transform: translateY(-50%) translateX(4px);
}
/* Slider with icons */
.ds-slider-with-icons {
  position: relative;
}
.ds-slider-with-icons::before,
.ds-slider-with-icons::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--ds-text-tertiary);
  pointer-events: none;
}
.ds-slider-with-icons::before {
  left: -1.5rem;
  content: var(--ds-slider-icon-min);
}
.ds-slider-with-icons::after {
  right: -1.5rem;
  content: var(--ds-slider-icon-max);
}
/* Slider loading state */
.ds-slider-loading .ds-slider-thumb {
  animation: sliderPulse 2s infinite;
}
@keyframes sliderPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}
/* Slider with ticks */
.ds-slider-ticks {
  position: relative;
}
.ds-slider-ticks::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  height: 8px;
  background: repeating-linear-gradient(
    90deg,
    var(--ds-slider-tick-bg) 0px,
    var(--ds-slider-tick-bg) 1px,
    transparent 1px,
    transparent 20%
  );
}
/* Responsive adjustments */
@media (max-width: 640px) {
  .ds-slider-with-icons::before,
  .ds-slider-with-icons::after {
    display: none;
  }

  .ds-slider-vertical {
    height: 150px;
  }

  .ds-slider-sm .ds-slider-thumb {
    width: 0.875rem;
    height: 0.875rem;
  }

  .ds-slider-lg .ds-slider-thumb {
    width: 1.25rem;
    height: 1.25rem;
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-slider-track {
    border: 1px solid var(--ds-text-primary);
  }

  .ds-slider-track-active {
    border: 1px solid var(--ds-interactive-primary);
  }

  .ds-slider-thumb {
    border-width: 3px;
  }

  .ds-slider-mark-line-active {
    background-color: var(--ds-interactive-primary);
    height: 12px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-slider-thumb {
    transition: none;
  }

  .ds-slider-thumb:hover {
    transform: translate(-50%, -50%);
  }

  .ds-slider-thumb:active {
    transform: translate(-50%, -50%);
  }

  .ds-slider-tooltip {
    transition: none;
  }

  .ds-slider-loading .ds-slider-thumb {
    animation: none;
  }
}
/* Print styles */
@media print {
  .ds-slider {
    display: none;
  }

  .ds-slider-value {
    display: block;
    color: #000;
    font-size: 12pt;
  }
}
/* DS: spinner.css - Spinner component */
/* layer: components */
.ds-spinner {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--ds-spinner-bg);
  border-top: 2px solid var(--ds-spinner-fg);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  flex-shrink: 0;
}
/* Spinner sizes */
.ds-spinner-xs {
  width: 0.75rem;
  height: 0.75rem;
  border-width: 1px;
}
.ds-spinner-sm {
  width: 1rem;
  height: 1rem;
  border-width: 1.5px;
}
.ds-spinner-md {
  width: 1.25rem;
  height: 1.25rem;
  border-width: 2px;
}
.ds-spinner-lg {
  width: 2rem;
  height: 2rem;
  border-width: 3px;
}
.ds-spinner-xl {
  width: 3rem;
  height: 3rem;
  border-width: 4px;
}
/* Spinner colors */
.ds-spinner-primary {
  border-top-color: var(--ds-status-info);
}
.ds-spinner-success {
  border-top-color: var(--ds-status-success);
}
.ds-spinner-warning {
  border-top-color: var(--ds-status-warning);
}
.ds-spinner-error {
  border-top-color: var(--ds-status-error);
}
.ds-spinner-white {
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
}
.ds-spinner-gray {
  border-color: var(--ds-surface-background-secondary);
  border-top-color: var(--ds-text-secondary);
}
/* Spinner variants */
.ds-spinner-dots {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.ds-spinner-dots::before,
.ds-spinner-dots::after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--ds-spinner-fg);
  animation: pulse 1.5s ease-in-out infinite;
}
.ds-spinner-dots::after {
  animation-delay: 0.5s;
}
.ds-spinner-pulse {
  border: none;
  background-color: var(--ds-spinner-fg);
  animation: pulse 1.5s ease-in-out infinite;
  border-radius: 50%;
}
.ds-spinner-bounce {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.ds-spinner-bounce::before,
.ds-spinner-bounce::after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--ds-spinner-fg);
  animation: bounce 1.4s ease-in-out infinite both;
}
.ds-spinner-bounce::after {
  animation-delay: -0.16s;
}
/* Spinner with text */
.ds-spinner-wrapper {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
}
.ds-spinner-wrapper-vertical {
  flex-direction: column;
  gap: var(--ds-spacing-2xs);
}
.ds-spinner-text {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  white-space: nowrap;
}
/* Spinner overlay */
.ds-spinner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--ds-z-index-modal-backdrop);
}
.ds-spinner-overlay-dark {
  background-color: rgba(0, 0, 0, 0.5);
}
/* Spinner in button */
.ds-btn .ds-spinner {
  margin-right: var(--ds-spacing-xs);
}
.ds-btn .ds-spinner:only-child {
  margin-right: 0;
}
/* Disabled state */
.ds-spinner:disabled {
  animation-play-state: paused;
  opacity: 0.5;
}
/* Animations */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-spinner {
    animation: none;
  }

  .ds-spinner-dots::before,
  .ds-spinner-dots::after {
    animation: none;
  }

  .ds-spinner-pulse {
    animation: none;
  }

  .ds-spinner-bounce::before,
  .ds-spinner-bounce::after {
    animation: none;
  }
}
/* DS: statistic.css - Statistic component */
/* layer: components */
.ds-statistic {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-spacing-2xs);
  font-size: var(--ds-typography-desktop-body-font-size);
  line-height: 1.4;
}
.ds-statistic-value {
  font-size: var(--ds-typography-desktop-h2-font-size);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ds-text-primary);
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: var(--ds-spacing-2xs);
}
.ds-statistic-prefix {
  font-size: 0.75em;
  font-weight: 500;
  color: var(--ds-text-secondary);
  opacity: 0.8;
}
.ds-statistic-suffix {
  font-size: 0.75em;
  font-weight: 500;
  color: var(--ds-text-secondary);
  opacity: 0.8;
}
.ds-statistic-title {
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 500;
  color: var(--ds-text-secondary);
  margin: 0;
  line-height: 1.4;
}
.ds-statistic-description {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  color: var(--ds-text-tertiary);
  margin: 0;
  line-height: 1.4;
}
/* Statistic sizes */
.ds-statistic-sm {
  font-size: var(--ds-typography-desktop-small-font-size);
}
.ds-statistic-sm .ds-statistic-value {
  font-size: var(--ds-typography-desktop-h3-font-size);
}
.ds-statistic-sm .ds-statistic-title {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
}
.ds-statistic-sm .ds-statistic-description {
  font-size: 11px;
}
.ds-statistic-lg {
  font-size: var(--ds-typography-desktop-h4-font-size);
}
.ds-statistic-lg .ds-statistic-value {
  font-size: var(--ds-typography-desktop-h1-font-size);
}
.ds-statistic-lg .ds-statistic-title {
  font-size: var(--ds-typography-desktop-body-font-size);
}
.ds-statistic-lg .ds-statistic-description {
  font-size: var(--ds-typography-desktop-small-font-size);
}
/* Statistic layouts */
.ds-statistic-horizontal {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-spacing-m);
}
.ds-statistic-horizontal .ds-statistic-content {
  flex: 1;
  text-align: right;
}
.ds-statistic-horizontal .ds-statistic-value {
  justify-content: flex-end;
}
.ds-statistic-horizontal .ds-statistic-title {
  text-align: right;
}
.ds-statistic-horizontal .ds-statistic-description {
  text-align: right;
}
.ds-statistic-centered {
  align-items: center;
  text-align: center;
}
.ds-statistic-centered .ds-statistic-value {
  justify-content: center;
}
.ds-statistic-inline {
  flex-direction: row;
  align-items: baseline;
  gap: var(--ds-spacing-s);
}
.ds-statistic-inline .ds-statistic-value {
  margin-bottom: 0;
}
.ds-statistic-inline .ds-statistic-title {
  margin-bottom: 0;
}
/* Statistic with icon */
.ds-statistic-with-icon {
  flex-direction: row;
  align-items: center;
  gap: var(--ds-spacing-s);
}
.ds-statistic-icon {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  color: var(--ds-text-secondary);
}
.ds-statistic-with-icon.ds-statistic-sm .ds-statistic-icon {
  width: 1.5rem;
  height: 1.5rem;
}
.ds-statistic-with-icon.ds-statistic-lg .ds-statistic-icon {
  width: 2.5rem;
  height: 2.5rem;
}
/* Statistic with trend */
.ds-statistic-trend {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-spacing-2xs);
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 500;
  margin-top: var(--ds-spacing-2xs);
}
.ds-statistic-trend-up {
  color: var(--ds-status-success);
}
.ds-statistic-trend-down {
  color: var(--ds-status-error);
}
.ds-statistic-trend-neutral {
  color: var(--ds-text-secondary);
}
.ds-statistic-trend-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
/* Statistic with progress */
.ds-statistic-with-progress {
  gap: var(--ds-spacing-s);
}
.ds-statistic-progress {
  width: 100%;
  height: 4px;
  background-color: var(--ds-surface-tertiary);
  border-radius: 2px;
  overflow: hidden;
  margin-top: var(--ds-spacing-2xs);
}
.ds-statistic-progress-bar {
  height: 100%;
  background-color: var(--ds-interactive-primary);
  border-radius: 2px;
  transition: width var(--ds-motion-duration-slow) var(--ds-motion-easing-standard);
}
/* Statistic with loading state */
.ds-statistic-loading .ds-statistic-value {
  position: relative;
  overflow: hidden;
}
.ds-statistic-loading .ds-statistic-value::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: statisticShimmer 1.5s infinite;
}
@keyframes statisticShimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
.ds-statistic-loading .ds-statistic-title {
  background-color: var(--ds-surface-secondary);
  color: transparent;
  border-radius: var(--ds-border-radius-2xs);
}
.ds-statistic-loading .ds-statistic-description {
  background-color: var(--ds-surface-tertiary);
  color: transparent;
  border-radius: var(--ds-border-radius-2xs);
}
/* Statistic group */
.ds-statistic-group {
  display: flex;
  gap: var(--ds-spacing-xl);
  flex-wrap: wrap;
}
.ds-statistic-group .ds-statistic {
  flex: 1;
  min-width: 120px;
}
.ds-statistic-group-vertical {
  flex-direction: column;
  gap: var(--ds-spacing-l);
}
.ds-statistic-group-vertical .ds-statistic {
  width: 100%;
}
.ds-statistic-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--ds-spacing-l);
}
.ds-statistic-group-grid .ds-statistic {
  width: 100%;
}
/* Statistic variants */
.ds-statistic-card {
  padding: var(--ds-spacing-l);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  box-shadow: var(--ds-shadow-sm);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-statistic-card:hover {
  box-shadow: var(--ds-shadow-md);
  transform: translateY(-2px);
}
.ds-statistic-borderless {
  border: none;
  box-shadow: none;
}
.ds-statistic-borderless:hover {
  box-shadow: none;
  transform: none;
}
/* Statistic colors */
.ds-statistic-success .ds-statistic-value {
  color: var(--ds-status-success);
}
.ds-statistic-error .ds-statistic-value {
  color: var(--ds-status-error);
}
.ds-statistic-warning .ds-statistic-value {
  color: var(--ds-status-warning);
}
.ds-statistic-info .ds-statistic-value {
  color: var(--ds-status-info);
}
/* Statistic formatting */
.ds-statistic-currency .ds-statistic-value::before {
  content: '$';
  font-size: 0.75em;
  font-weight: 500;
  color: var(--ds-text-secondary);
  margin-right: var(--ds-spacing-2xs);
}
.ds-statistic-percentage .ds-statistic-value::after {
  content: '%';
  font-size: 0.75em;
  font-weight: 500;
  color: var(--ds-text-secondary);
  margin-left: var(--ds-spacing-2xs);
}
/* Statistic with countdown */
.ds-statistic-countdown {
  position: relative;
}
.ds-statistic-countdown .ds-statistic-value {
  font-family: var(--ds-typography-font-family-mono);
  font-variant-numeric: tabular-nums;
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ds-statistic-group {
    gap: var(--ds-spacing-l);
  }

  .ds-statistic-horizontal {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-spacing-xs);
    text-align: left;
  }

  .ds-statistic-horizontal .ds-statistic-content {
    text-align: left;
  }

  .ds-statistic-with-icon {
    flex-direction: column;
    text-align: center;
    gap: var(--ds-spacing-xs);
  }

  .ds-statistic-group-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .ds-statistic {
    font-size: var(--ds-typography-mobile-body-font-size);
  }

  .ds-statistic-value {
    font-size: var(--ds-typography-mobile-h3-font-size);
  }

  .ds-statistic-title {
    font-size: var(--ds-typography-mobile-small-font-size);
  }

  .ds-statistic-description {
    font-size: 11px;
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-statistic-card {
    border-width: 2px;
  }

  .ds-statistic-trend-up {
    text-decoration: underline;
  }

  .ds-statistic-trend-down {
    text-decoration: underline;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-statistic-card:hover {
    transform: none;
  }

  .ds-statistic-progress-bar {
    transition: none;
  }

  .ds-statistic-loading .ds-statistic-value::after {
    animation: none;
  }
}
/* Print styles */
@media print {
  .ds-statistic-card {
    border: 1px solid #000;
    box-shadow: none;
    background: #fff;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }

  .ds-statistic-loading .ds-statistic-value::after {
    display: none;
  }

  .ds-statistic-card:hover {
    transform: none;
    box-shadow: none;
  }
}
/* DS: steps.css - Steps component */
/* layer: components */
.ds-steps {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-m);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ds-steps-vertical {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-spacing-l);
}
.ds-step {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  position: relative;
  flex: 1;
}
.ds-steps-vertical .ds-step {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-spacing-xs);
  flex: none;
}
/* Step indicator */
.ds-step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid var(--ds-border-primary);
  background-color: var(--ds-surface-primary);
  color: var(--ds-text-secondary);
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 600;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.ds-step-active .ds-step-indicator {
  background-color: var(--ds-interactive-primary);
  border-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
}
.ds-step-completed .ds-step-indicator {
  background-color: var(--ds-status-success);
  border-color: var(--ds-status-success);
  color: var(--ds-text-inverse);
}
.ds-step-error .ds-step-indicator {
  background-color: var(--ds-status-error);
  border-color: var(--ds-status-error);
  color: var(--ds-text-inverse);
}
.ds-step-disabled .ds-step-indicator {
  background-color: var(--ds-surface-disabled);
  border-color: var(--ds-border-disabled);
  color: var(--ds-text-disabled);
}
/* Step connector */
.ds-step-connector {
  flex: 1;
  height: 2px;
  background-color: var(--ds-border-primary);
  margin: 0 var(--ds-spacing-s);
  transition: background-color var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-steps-vertical .ds-step-connector {
  width: 2px;
  height: 2rem;
  margin: var(--ds-spacing-s) 0 0 0;
  background-color: var(--ds-border-primary);
}
.ds-step-completed + .ds-step .ds-step-connector,
.ds-step-active + .ds-step .ds-step-connector {
  background-color: var(--ds-interactive-primary);
}
.ds-step-error + .ds-step .ds-step-connector {
  background-color: var(--ds-status-error);
}
/* Step content */
.ds-step-content {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-2xs);
  min-width: 0;
}
.ds-step-title {
  font-size: var(--ds-typography-desktop-body-font-size);
  font-weight: 500;
  color: var(--ds-text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-step-description {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  margin: 0;
  line-height: 1.4;
}
.ds-step-active .ds-step-title {
  color: var(--ds-interactive-primary);
  font-weight: 600;
}
.ds-step-error .ds-step-title {
  color: var(--ds-status-error);
}
.ds-step-completed .ds-step-title {
  color: var(--ds-status-success);
}
.ds-step-disabled .ds-step-title,
.ds-step-disabled .ds-step-description {
  color: var(--ds-text-disabled);
}
/* Step icon */
.ds-step-icon {
  width: 1rem;
  height: 1rem;
  color: inherit;
}
.ds-step-indicator .ds-step-icon {
  width: 1rem;
  height: 1rem;
}
/* Step sizes */
.ds-steps-sm .ds-step-indicator {
  width: 1.5rem;
  height: 1.5rem;
  font-size: var(--ds-typography-desktop-extra-small-font-size);
}
.ds-steps-sm .ds-step-connector {
  height: 1px;
}
.ds-steps-sm .ds-steps-vertical .ds-step-connector {
  width: 1px;
  height: 1.5rem;
}
.ds-steps-sm .ds-step-title {
  font-size: var(--ds-typography-desktop-small-font-size);
}
.ds-steps-sm .ds-step-description {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
}
.ds-steps-lg .ds-step-indicator {
  width: 2.5rem;
  height: 2.5rem;
  font-size: var(--ds-typography-desktop-body-font-size);
}
.ds-steps-lg .ds-step-connector {
  height: 3px;
}
.ds-steps-lg .ds-steps-vertical .ds-step-connector {
  width: 3px;
  height: 2.5rem;
}
.ds-steps-lg .ds-step-title {
  font-size: var(--ds-typography-desktop-h4-font-size);
}
.ds-steps-lg .ds-step-description {
  font-size: var(--ds-typography-desktop-body-font-size);
}
/* Step variants */
.ds-steps-dotted .ds-step-indicator {
  border-style: dotted;
}
.ds-steps-numbered .ds-step-indicator::before {
  content: counter(step-counter);
  counter-increment: step-counter;
}
.ds-steps {
  counter-reset: step-counter;
}
/* Step navigation */
.ds-steps-clickable .ds-step {
  cursor: pointer;
}
.ds-steps-clickable .ds-step:hover .ds-step-indicator {
  transform: scale(1.1);
}
.ds-steps-clickable .ds-step:hover .ds-step-title {
  text-decoration: underline;
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ds-steps {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-spacing-l);
  }

  .ds-step {
    width: 100%;
  }

  .ds-step-connector {
    display: none;
  }

  .ds-steps-vertical {
    gap: var(--ds-spacing-m);
  }
}
@media (max-width: 480px) {
  .ds-steps-sm .ds-step-indicator {
    width: 1.25rem;
    height: 1.25rem;
  }

  .ds-steps-lg .ds-step-indicator {
    width: 2rem;
    height: 2rem;
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-step-indicator {
    border-width: 3px;
  }

  .ds-step-connector {
    height: 3px;
  }

  .ds-steps-vertical .ds-step-connector {
    width: 3px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-step-indicator {
    transition: none;
  }

  .ds-step-connector {
    transition: none;
  }

  .ds-steps-clickable .ds-step:hover .ds-step-indicator {
    transform: none;
  }
}
/* Print styles */
@media print {
  .ds-step-connector {
    background-color: #000 !important;
  }

  .ds-step-indicator {
    border: 2px solid #000;
    color: #000;
  }

  .ds-step-active .ds-step-indicator {
    background-color: #000;
    color: #fff;
  }

  .ds-step-completed .ds-step-indicator {
    background-color: #000;
    color: #fff;
  }
}
/* DS: switch.css - Switch component */
/* layer: components */
.ds-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  cursor: pointer;
  position: relative;
  font-size: var(--ds-typography-desktop-body-font-size);
  line-height: 1.5;
  color: var(--ds-text-primary);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.ds-switch-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
.ds-switch-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 2.75rem;
  height: 1.5rem;
  border-radius: 0.75rem;
  background-color: var(--ds-surface-tertiary);
  border: 2px solid var(--ds-border-primary);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  flex-shrink: 0;
}
.ds-switch-thumb {
  position: absolute;
  left: 2px;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: var(--ds-surface-primary);
  border: 2px solid var(--ds-border-primary);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  box-shadow: var(--ds-shadow-xs);
}
.ds-switch-input:focus-visible ~ .ds-switch-track {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-switch-input:hover ~ .ds-switch-track {
  border-color: var(--ds-border-secondary);
}
.ds-switch-input:checked ~ .ds-switch-track {
  background-color: var(--ds-interactive-primary);
  border-color: var(--ds-interactive-primary);
}
.ds-switch-input:checked ~ .ds-switch-track .ds-switch-thumb {
  left: calc(100% - 1rem - 2px);
  background-color: var(--ds-text-inverse);
  border-color: var(--ds-interactive-primary);
  transform: translateX(-2px);
}
.ds-switch-input:checked:hover ~ .ds-switch-track {
  background-color: var(--ds-interactive-primary-hover);
  border-color: var(--ds-interactive-primary-hover);
}
.ds-switch-input:checked:active ~ .ds-switch-track {
  background-color: var(--ds-interactive-primary-active);
}
.ds-switch-input:disabled ~ .ds-switch-track {
  background-color: var(--ds-surface-tertiary);
  border-color: var(--ds-border-primary);
  opacity: var(--ds-opacity-disabled);
  cursor: not-allowed;
}
.ds-switch-input:disabled ~ .ds-switch-thumb {
  background-color: var(--ds-surface-secondary);
  border-color: var(--ds-border-primary);
  cursor: not-allowed;
}
.ds-switch-input:disabled ~ .ds-switch-label {
  color: var(--ds-text-disabled);
  cursor: not-allowed;
}
.ds-switch-input:disabled:checked ~ .ds-switch-track {
  background-color: var(--ds-surface-tertiary);
}
.ds-switch-input:disabled:checked ~ .ds-switch-thumb {
  background-color: var(--ds-surface-secondary);
}
/* Label */
.ds-switch-label {
  cursor: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
/* Switch sizes */
.ds-switch-sm {
  font-size: var(--ds-typography-desktop-small-font-size);
  gap: var(--ds-spacing-xs);
}
.ds-switch-sm .ds-switch-track {
  width: 2.25rem;
  height: 1.25rem;
}
.ds-switch-sm .ds-switch-thumb {
  width: 0.875rem;
  height: 0.875rem;
}
.ds-switch-sm .ds-switch-input:checked ~ .ds-switch-track .ds-switch-thumb {
  left: calc(100% - 0.875rem - 2px);
  transform: translateX(-2px);
}
.ds-switch-lg {
  font-size: var(--ds-typography-desktop-h4-font-size);
  gap: var(--ds-spacing-m);
}
.ds-switch-lg .ds-switch-track {
  width: 3.25rem;
  height: 1.75rem;
}
.ds-switch-lg .ds-switch-thumb {
  width: 1.25rem;
  height: 1.25rem;
}
.ds-switch-lg .ds-switch-input:checked ~ .ds-switch-track .ds-switch-thumb {
  left: calc(100% - 1.25rem - 2px);
  transform: translateX(-2px);
}
/* Switch variants */
.ds-switch-success .ds-switch-input:checked ~ .ds-switch-track {
  background-color: var(--ds-status-success);
  border-color: var(--ds-status-success);
}
.ds-switch-success .ds-switch-input:checked:hover ~ .ds-switch-track {
  background-color: var(--ds-status-success);
  border-color: var(--ds-status-success);
}
.ds-switch-success .ds-switch-input:checked ~ .ds-switch-track .ds-switch-thumb {
  border-color: var(--ds-status-success);
}
.ds-switch-warning .ds-switch-input:checked ~ .ds-switch-track {
  background-color: var(--ds-status-warning);
  border-color: var(--ds-status-warning);
}
.ds-switch-warning .ds-switch-input:checked:hover ~ .ds-switch-track {
  background-color: var(--ds-status-warning);
  border-color: var(--ds-status-warning);
}
.ds-switch-warning .ds-switch-input:checked ~ .ds-switch-track .ds-switch-thumb {
  border-color: var(--ds-status-warning);
}
.ds-switch-error .ds-switch-input:checked ~ .ds-switch-track {
  background-color: var(--ds-status-error);
  border-color: var(--ds-status-error);
}
.ds-switch-error .ds-switch-input:checked:hover ~ .ds-switch-track {
  background-color: var(--ds-status-error);
  border-color: var(--ds-status-error);
}
.ds-switch-error .ds-switch-input:checked ~ .ds-switch-track .ds-switch-thumb {
  border-color: var(--ds-status-error);
}
.ds-switch-info .ds-switch-input:checked ~ .ds-switch-track {
  background-color: var(--ds-status-info);
  border-color: var(--ds-status-info);
}
.ds-switch-info .ds-switch-input:checked:hover ~ .ds-switch-track {
  background-color: var(--ds-status-info);
  border-color: var(--ds-status-info);
}
.ds-switch-info .ds-switch-input:checked ~ .ds-switch-track .ds-switch-thumb {
  border-color: var(--ds-status-info);
}
/* Switch with description */
.ds-switch-with-description {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-spacing-2xs);
}
.ds-switch-description {
  margin: 0;
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  line-height: 1.4;
  padding-left: calc(2.75rem + var(--ds-spacing-s));
}
.ds-switch-input:disabled ~ .ds-switch-description {
  color: var(--ds-text-disabled);
}
/* Switch group */
.ds-switch-group {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-m);
}
.ds-switch-group-horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--ds-spacing-xl);
}
/* Switch with loading state */
.ds-switch-loading .ds-switch-thumb {
  position: relative;
  overflow: hidden;
}
.ds-switch-loading .ds-switch-thumb::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: -0.25rem;
  margin-top: -0.25rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-right-color: transparent;
  animation: switchSpin 1s linear infinite;
}
@keyframes switchSpin {
  to {
    transform: rotate(360deg);
  }
}
.ds-switch-loading .ds-switch-track,
.ds-switch-loading .ds-switch-thumb {
  cursor: not-allowed;
}
/* Switch with icon */
.ds-switch-icon-on,
.ds-switch-icon-off {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  color: inherit;
  opacity: 0;
  transition: opacity var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-switch-icon-on {
  right: 4px;
}
.ds-switch-icon-off {
  left: 4px;
}
.ds-switch-input:checked ~ .ds-switch-track .ds-switch-icon-on {
  opacity: 1;
}
.ds-switch-input:not(:checked) ~ .ds-switch-track .ds-switch-icon-off {
  opacity: 1;
}
/* Responsive adjustments */
@media (max-width: 640px) {
  .ds-switch-group-horizontal {
    flex-direction: column;
    gap: var(--ds-spacing-m);
  }

  .ds-switch-with-description .ds-switch-description {
    padding-left: calc(2.25rem + var(--ds-spacing-xs));
  }

  .ds-switch-sm .ds-switch-description {
    padding-left: calc(1.875rem + var(--ds-spacing-xs));
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-switch-track {
    border-width: 3px;
  }

  .ds-switch-thumb {
    border-width: 3px;
  }

  .ds-switch-input:checked ~ .ds-switch-track {
    border-color: var(--ds-interactive-primary);
  }

  .ds-switch-success .ds-switch-input:checked ~ .ds-switch-track {
    border-color: var(--ds-status-success);
  }

  .ds-switch-warning .ds-switch-input:checked ~ .ds-switch-track {
    border-color: var(--ds-status-warning);
  }

  .ds-switch-error .ds-switch-input:checked ~ .ds-switch-track {
    border-color: var(--ds-status-error);
  }

  .ds-switch-info .ds-switch-input:checked ~ .ds-switch-track {
    border-color: var(--ds-status-info);
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-switch-track,
  .ds-switch-thumb,
  .ds-switch-thumb::after {
    transition: none;
  }

  .ds-switch-loading .ds-switch-thumb::after {
    animation: none;
  }
}
/* Print styles */
@media print {
  .ds-switch {
    color: #000;
  }

  .ds-switch-track {
    border: 2px solid #000;
    background: #fff;
  }

  .ds-switch-thumb {
    border: 2px solid #000;
    background: #fff;
  }

  .ds-switch-input:checked ~ .ds-switch-track {
    background: #000;
  }

  .ds-switch-input:checked ~ .ds-switch-track .ds-switch-thumb {
    background: #fff;
    border-color: #000;
  }

  .ds-switch-loading .ds-switch-thumb::after {
    display: none;
  }
}
/* DS: table.css - Table component */
/* layer: components */
.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ds-typography-desktop-body-font-size);
  line-height: 1.5;
}
.ds-table th,
.ds-table td {
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  text-align: left;
  border-bottom: 1px solid var(--ds-table-border);
  vertical-align: middle;
}
.ds-table th {
  font-weight: 600;
  color: var(--ds-table-header-fg);
  background-color: var(--ds-surface-background-secondary);
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.ds-table td {
  color: var(--ds-text-primary);
}
.ds-table tbody tr:hover {
  background-color: var(--ds-table-row-hover-bg);
}
/* Table variants */
.ds-table-striped tbody tr:nth-child(even) {
  background-color: var(--ds-surface-background-secondary);
}
.ds-table-bordered {
  border: 1px solid var(--ds-table-border);
}
.ds-table-bordered th,
.ds-table-bordered td {
  border-right: 1px solid var(--ds-table-border);
}
.ds-table-bordered th:last-child,
.ds-table-bordered td:last-child {
  border-right: none;
}
/* Table sizes */
.ds-table-compact th,
.ds-table-compact td {
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
  font-size: var(--ds-typography-desktop-small-font-size);
}
.ds-table-spacious th,
.ds-table-spacious td {
  padding: var(--ds-spacing-m) var(--ds-spacing-l);
}
/* Sortable headers */
.ds-table-sortable th {
  cursor: pointer;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-table-sortable th:hover {
  background-color: var(--ds-surface-background-tertiary);
  color: var(--ds-table-sorter-hover);
}
.ds-table-sortable th.ds-table-sort-asc::after,
.ds-table-sortable th.ds-table-sort-desc::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: var(--ds-spacing-xs);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  vertical-align: middle;
}
.ds-table-sortable th.ds-table-sort-asc::after {
  border-bottom: 4px solid var(--ds-table-sorter-hover);
}
.ds-table-sortable th.ds-table-sort-desc::after {
  border-top: 4px solid var(--ds-table-sorter-hover);
}
/* Filterable headers */
.ds-table-filterable th {
  position: relative;
}
.ds-table-filter-trigger {
  background: none;
  border: none;
  padding: var(--ds-spacing-2xs);
  cursor: pointer;
  color: var(--ds-table-filter-hover);
  border-radius: var(--ds-border-radius-2xs);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: var(--ds-spacing-xs);
}
.ds-table-filter-trigger:hover {
  background-color: var(--ds-surface-background-tertiary);
  color: var(--ds-text-primary);
}
.ds-table-filter-trigger:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-table-filter-active .ds-table-filter-trigger {
  color: var(--ds-status-info);
}
/* Expandable rows */
.ds-table-expandable .ds-table-expand-icon {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ds-table-expand-chevron);
  border-radius: var(--ds-border-radius-2xs);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  margin-right: var(--ds-spacing-xs);
}
.ds-table-expandable .ds-table-expand-icon:hover {
  background-color: var(--ds-surface-background-secondary);
  color: var(--ds-table-expand-chevron-hover);
}
.ds-table-expandable .ds-table-expand-icon:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-table-expandable .ds-table-expanded .ds-table-expand-icon {
  transform: rotate(90deg);
}
.ds-table-expanded-row {
  background-color: var(--ds-surface-background-secondary);
}
.ds-table-expanded-row > td {
  border-bottom: none;
  padding: 0;
}
.ds-table-expanded-content {
  padding: var(--ds-spacing-m);
  border-bottom: 1px solid var(--ds-table-border);
}
/* Selection */
.ds-table-selectable .ds-table-checkbox {
  width: 1rem;
  height: 1rem;
  margin-right: var(--ds-spacing-s);
}
.ds-table-row-selected {
  background-color: var(--ds-table-row-selected-bg);
}
.ds-table-row-selected:hover {
  background-color: var(--ds-table-row-selected-bg);
}
/* Loading state */
.ds-table-loading {
  position: relative;
}
.ds-table-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.ds-table-loading .ds-spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--ds-surface-background-secondary);
  border-top: 3px solid var(--ds-status-info);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
/* Empty state */
.ds-table-empty {
  text-align: center;
  padding: var(--ds-spacing-xl);
  color: var(--ds-text-secondary);
}
.ds-table-empty-icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto var(--ds-spacing-m);
  color: var(--ds-text-tertiary);
}
.ds-table-empty-title {
  font-size: var(--ds-typography-desktop-h4-font-size);
  font-weight: 600;
  margin-bottom: var(--ds-spacing-xs);
  color: var(--ds-text-primary);
}
.ds-table-empty-description {
  color: var(--ds-text-secondary);
  max-width: 300px;
  margin: 0 auto;
}
/* Responsive table */
.ds-table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ds-table-responsive .ds-table {
  min-width: 600px;
}
/* Table pagination wrapper */
.ds-table-wrapper {
  display: flex;
  flex-direction: column;
  /* Вертикальный зазор между таблицей и пагинацией делаем компактнее */
  gap: var(--ds-spacing-xs);
}
/* Toolbar above table (e.g., fit toggle) */
.ds-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ds-spacing-s);
}
.ds-table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* горизонтальные отступы как у содержимого карточки (используем токен m) */
  padding: var(--ds-spacing-m) var(--ds-spacing-m);
}
.ds-table-pagination-info {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
}
/* Fit/Scroll modes */
.ds-table-fit .ds-table-responsive {
  overflow-x: hidden !important;
}
.ds-table-fit .ds-table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed;
}
.ds-table-fit .ds-table th,
.ds-table-fit .ds-table td {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ds-table-scroll .ds-table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ds-table-scroll .ds-table {
  width: -moz-max-content;
  width: max-content; /* override base width:100% */
  min-width: 600px;
  table-layout: auto;
}
.ds-table-scroll .ds-table th,
.ds-table-scroll .ds-table td {
  white-space: nowrap;
}
/* Mobile table */
@media (max-width: 768px) {
  .ds-table-responsive .ds-table,
  .ds-table-responsive .ds-table thead,
  .ds-table-responsive .ds-table tbody,
  .ds-table-responsive .ds-table th,
  .ds-table-responsive .ds-table td,
  .ds-table-responsive .ds-table tr {
    display: block;
  }

  .ds-table-responsive .ds-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .ds-table-responsive .ds-table tr {
    border: 1px solid var(--ds-table-border);
    border-radius: var(--ds-border-radius-s);
    margin-bottom: var(--ds-spacing-s);
    padding: var(--ds-spacing-m);
  }

  .ds-table-responsive .ds-table td {
    border: none;
    border-bottom: 1px solid var(--ds-border-color-light);
    position: relative;
    padding: var(--ds-spacing-xs) 0;
    text-align: left;
  }

  .ds-table-responsive .ds-table td:last-child {
    border-bottom: none;
  }

  .ds-table-responsive .ds-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--ds-text-secondary);
    display: block;
    font-size: var(--ds-typography-desktop-small-font-size);
    margin-bottom: var(--ds-spacing-2xs);
  }
}
/* DS: table.filter.css - Table filter component */
/* layer: components */
.ds-table-filter {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  background-color: var(--ds-surface-secondary);
  border-bottom: 1px solid var(--ds-border-primary);
  flex-wrap: wrap;
}
.ds-table-filter-group {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
  flex-wrap: wrap;
}
.ds-table-filter-item {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
}
.ds-table-filter-label {
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 500;
  color: var(--ds-text-primary);
  white-space: nowrap;
}
/* Table filter search */
.ds-table-filter-search {
  position: relative;
  min-width: 200px;
}
.ds-table-filter-search-input {
  width: 100%;
  padding: var(--ds-spacing-xs) var(--ds-spacing-s) var(--ds-spacing-xs) 2.5rem;
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-2xs);
  background-color: var(--ds-surface-primary);
  color: var(--ds-text-primary);
  font-size: var(--ds-typography-desktop-body-font-size);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-table-filter-search-input:focus {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
  border-color: var(--ds-interactive-primary);
}
.ds-table-filter-search-input::-moz-placeholder {
  color: var(--ds-text-tertiary);
}
.ds-table-filter-search-input::placeholder {
  color: var(--ds-text-tertiary);
}
.ds-table-filter-search-icon {
  position: absolute;
  left: var(--ds-spacing-xs);
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--ds-text-secondary);
  pointer-events: none;
}
/* Table filter select */
.ds-table-filter-select {
  min-width: 120px;
}
.ds-table-filter-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-spacing-xs);
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-2xs);
  cursor: pointer;
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-primary);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  white-space: nowrap;
}
.ds-table-filter-select-trigger:hover {
  border-color: var(--ds-border-secondary);
}
.ds-table-filter-select-trigger:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-table-filter-select-icon {
  width: 1rem;
  height: 1rem;
  color: var(--ds-text-secondary);
  transition: transform var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-table-filter-select-open .ds-table-filter-select-icon {
  transform: rotate(180deg);
}
.ds-table-filter-select-menu {
  position: absolute;
  top: calc(100% + var(--ds-spacing-xs));
  left: 0;
  z-index: var(--ds-z-index-dropdown);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  box-shadow: var(--ds-shadow-lg);
  min-width: 200px;
  max-height: 300px;
  overflow-y: auto;
  padding: var(--ds-spacing-xs);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-table-filter-select-open .ds-table-filter-select-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ds-table-filter-select-option {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  background: none;
  border: none;
  border-radius: var(--ds-border-radius-2xs);
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-primary);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-table-filter-select-option:hover {
  background-color: var(--ds-surface-secondary);
}
.ds-table-filter-select-option:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: -2px;
}
.ds-table-filter-select-option-selected {
  background-color: var(--ds-interactive-primary-bg);
  color: var(--ds-interactive-primary);
  font-weight: 500;
}
.ds-table-filter-select-option-icon {
  width: 1rem;
  height: 1rem;
  color: var(--ds-text-secondary);
  flex-shrink: 0;
}
/* Table filter date range */
.ds-table-filter-daterange {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
}
.ds-table-filter-daterange .ds-table-filter-label {
  margin-right: var(--ds-spacing-xs);
}
/* Table filter buttons */
.ds-table-filter-buttons {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
  margin-left: auto;
}
.ds-table-filter-button {
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-2xs);
  background-color: var(--ds-surface-primary);
  color: var(--ds-text-primary);
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-table-filter-button:hover {
  background-color: var(--ds-surface-secondary);
  border-color: var(--ds-border-secondary);
}
.ds-table-filter-button:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-table-filter-button:active {
  transform: scale(0.95);
}
.ds-table-filter-button:disabled {
  opacity: var(--ds-opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.ds-table-filter-button:disabled:hover {
  background-color: var(--ds-surface-primary);
  border-color: var(--ds-border-primary);
  transform: none;
}
.ds-table-filter-button-primary {
  background-color: var(--ds-interactive-primary);
  border-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
}
.ds-table-filter-button-primary:hover {
  background-color: var(--ds-interactive-primary-hover);
  border-color: var(--ds-interactive-primary-hover);
}
.ds-table-filter-button-ghost {
  background-color: transparent;
  border: none;
  color: var(--ds-text-secondary);
}
.ds-table-filter-button-ghost:hover {
  background-color: var(--ds-surface-secondary);
  color: var(--ds-text-primary);
}
/* Table filter chips */
.ds-table-filter-chips {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
  flex-wrap: wrap;
}
.ds-table-filter-chip {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
  background-color: var(--ds-interactive-primary-bg);
  border: 1px solid var(--ds-interactive-primary);
  border-radius: var(--ds-border-radius-l);
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  font-weight: 500;
  color: var(--ds-interactive-primary);
  white-space: nowrap;
}
.ds-table-filter-chip-remove {
  width: 1rem;
  height: 1rem;
  background: none;
  border: none;
  border-radius: var(--ds-border-radius-2xs);
  cursor: pointer;
  color: var(--ds-interactive-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-table-filter-chip-remove:hover {
  background-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
}
/* Table filter advanced */
.ds-table-filter-advanced {
  padding: var(--ds-spacing-m);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  box-shadow: var(--ds-shadow-lg);
  position: absolute;
  top: calc(100% + var(--ds-spacing-xs));
  left: 0;
  z-index: var(--ds-z-index-dropdown);
  min-width: 400px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-table-filter-advanced-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ds-table-filter-advanced-header {
  padding-bottom: var(--ds-spacing-m);
  border-bottom: 1px solid var(--ds-border-primary);
  margin-bottom: var(--ds-spacing-m);
}
.ds-table-filter-advanced-title {
  font-size: var(--ds-typography-desktop-h4-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-spacing-xs) 0;
}
.ds-table-filter-advanced-description {
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-secondary);
  margin: 0;
}
/* Table filter loading */
.ds-table-filter-loading .ds-table-filter-search-input {
  color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.ds-table-filter-loading .ds-table-filter-search-input::-moz-placeholder {
  color: transparent;
}
.ds-table-filter-loading .ds-table-filter-search-input::placeholder {
  color: transparent;
}
.ds-table-filter-spinner {
  position: absolute;
  right: var(--ds-spacing-xs);
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--ds-interactive-primary);
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ds-table-filter {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ds-spacing-s);
  }

  .ds-table-filter-group {
    justify-content: space-between;
  }

  .ds-table-filter-buttons {
    margin-left: 0;
    justify-content: space-between;
  }

  .ds-table-filter-search {
    min-width: auto;
    width: 100%;
  }

  .ds-table-filter-advanced {
    position: fixed;
    top: var(--ds-spacing-m) !important;
    left: var(--ds-spacing-m) !important;
    right: var(--ds-spacing-m) !important;
    bottom: var(--ds-spacing-m) !important;
    max-width: none;
    width: auto;
    min-width: auto;
  }
}
@media (max-width: 480px) {
  .ds-table-filter-group {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ds-spacing-xs);
  }

  .ds-table-filter-item {
    justify-content: space-between;
  }

  .ds-table-filter-chips {
    justify-content: center;
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-table-filter-select-trigger,
  .ds-table-filter-search-input,
  .ds-table-filter-button {
    border-width: 2px;
  }

  .ds-table-filter-chip {
    border-width: 2px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-table-filter-search-input,
  .ds-table-filter-select-trigger,
  .ds-table-filter-button,
  .ds-table-filter-select-icon,
  .ds-table-filter-chip-remove,
  .ds-table-filter-select-menu,
  .ds-table-filter-advanced {
    transition: none;
  }
}
/* Print styles */
@media print {
  .ds-table-filter {
    background: #fff;
    border-bottom: 2px solid #000;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }

  .ds-table-filter-select-menu,
  .ds-table-filter-advanced {
    display: none !important;
  }

  .ds-table-filter-loading .ds-table-filter-search-input {
    color: #000;
  }
}
/* DS: table.resize.css - Table resize component */
/* layer: components */
.ds-table-resizable .ds-table-header-cell {
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.ds-table-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  opacity: 0;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  z-index: 1;
}
.ds-table-resize-handle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 60%;
  background-color: var(--ds-border-primary);
  border-radius: 1px;
  transition: background-color var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-table-header-cell:hover .ds-table-resize-handle {
  opacity: 1;
}
.ds-table-resize-handle:hover::before,
.ds-table-resize-handle-active::before {
  background-color: var(--ds-interactive-primary);
}
.ds-table-resize-handle-active {
  opacity: 1;
}
.ds-table-resize-handle-active::before {
  width: 3px;
  height: 80%;
}
/* Table resize preview */
.ds-table-resize-preview {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--ds-interactive-primary);
  opacity: 0.8;
  pointer-events: none;
  z-index: 10;
}
/* Table resize overlay */
.ds-table-resize-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
  z-index: var(--ds-z-index-modal-backdrop);
  cursor: col-resize;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
/* Table resize tooltip */
.ds-table-resize-tooltip {
  position: fixed;
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-2xs);
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  font-weight: 500;
  color: var(--ds-text-primary);
  white-space: nowrap;
  box-shadow: var(--ds-shadow-sm);
  z-index: var(--ds-z-index-tooltip);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-table-resize-tooltip-visible {
  opacity: 1;
  visibility: visible;
}
/* Table resize constraints */
.ds-table-resize-min-width {
  min-width: 80px;
}
.ds-table-resize-max-width {
  max-width: 400px;
}
/* Table resize persistence */
.ds-table-resize-persist {
  position: relative;
}
.ds-table-resize-reset {
  position: absolute;
  top: var(--ds-spacing-xs);
  right: var(--ds-spacing-xs);
  width: 1.5rem;
  height: 1.5rem;
  background: none;
  border: none;
  border-radius: var(--ds-border-radius-2xs);
  cursor: pointer;
  color: var(--ds-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-table-header:hover .ds-table-resize-reset {
  opacity: 1;
}
.ds-table-resize-reset:hover {
  background-color: var(--ds-surface-secondary);
  color: var(--ds-text-primary);
}
.ds-table-resize-reset:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
/* Table resize feedback */
.ds-table-resize-feedback {
  position: fixed;
  bottom: var(--ds-spacing-m);
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  box-shadow: var(--ds-shadow-lg);
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-primary);
  white-space: nowrap;
  z-index: var(--ds-z-index-tooltip);
  opacity: 0;
  visibility: hidden;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-table-resize-feedback-visible {
  opacity: 1;
  visibility: visible;
}
.ds-table-resize-feedback-success {
  border-color: var(--ds-status-success);
  background-color: var(--ds-status-success-bg);
  color: var(--ds-status-success);
}
.ds-table-resize-feedback-error {
  border-color: var(--ds-status-error);
  background-color: var(--ds-status-error-bg);
  color: var(--ds-status-error);
}
/* Table resize keyboard support */
.ds-table-resize-handle:focus-visible {
  opacity: 1;
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
/* Table resize touch support */
@media (hover: none) and (pointer: coarse) {
  .ds-table-resize-handle {
    opacity: 1;
    width: 12px;
  }

  .ds-table-resize-handle::before {
    width: 3px;
  }
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ds-table-resize-handle {
    width: 12px;
  }

  .ds-table-resize-tooltip {
    display: none;
  }

  .ds-table-resize-feedback {
    left: var(--ds-spacing-m);
    right: var(--ds-spacing-m);
    transform: none;
    white-space: normal;
    text-align: center;
  }
}
@media (max-width: 480px) {
  .ds-table-resize-handle {
    width: 16px;
  }

  .ds-table-resize-feedback {
    bottom: var(--ds-spacing-s);
    left: var(--ds-spacing-s);
    right: var(--ds-spacing-s);
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-table-resize-handle::before {
    background-color: var(--ds-text-primary);
    width: 3px;
  }

  .ds-table-resize-handle-active::before {
    background-color: var(--ds-interactive-primary);
    width: 4px;
  }

  .ds-table-resize-preview {
    background-color: var(--ds-text-primary);
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-table-resize-handle,
  .ds-table-resize-tooltip,
  .ds-table-resize-feedback {
    transition: none;
  }

  .ds-table-resize-handle::before {
    transition: none;
  }
}
/* Print styles */
@media print {
  .ds-table-resize-handle,
  .ds-table-resize-preview,
  .ds-table-resize-overlay,
  .ds-table-resize-tooltip,
  .ds-table-resize-feedback,
  .ds-table-resize-reset {
    display: none !important;
  }
}
/* DS: table.select.css - Table select component */
/* layer: components */
.ds-table-selectable .ds-table-row {
  cursor: pointer;
}
.ds-table-selectable .ds-table-row:hover {
  background-color: var(--ds-surface-secondary);
}
/* Table select checkbox */
.ds-table-select-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0 var(--ds-spacing-xs);
  flex-shrink: 0;
}
.ds-table-select-checkbox input[type="checkbox"] {
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
/* Table select header */
.ds-table-select-header {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  background-color: var(--ds-surface-secondary);
  border-bottom: 1px solid var(--ds-border-primary);
}
.ds-table-select-header-checkbox {
  flex-shrink: 0;
}
.ds-table-select-header-info {
  flex: 1;
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
}
.ds-table-select-header-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
}
.ds-table-select-action {
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-2xs);
  background-color: var(--ds-surface-primary);
  color: var(--ds-text-primary);
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-table-select-action:hover {
  background-color: var(--ds-surface-tertiary);
  border-color: var(--ds-border-secondary);
}
.ds-table-select-action:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-table-select-action:disabled {
  opacity: var(--ds-opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
/* Table select states */
.ds-table-row-selected {
  background-color: var(--ds-interactive-primary-bg);
  border-color: var(--ds-interactive-primary);
}
.ds-table-row-selected .ds-table-cell {
  border-color: var(--ds-interactive-primary);
}
.ds-table-row-selected:hover {
  background-color: var(--ds-interactive-primary-hover-bg);
}
/* Table select modes */
.ds-table-select-single .ds-table-row-selected::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--ds-interactive-primary);
}
.ds-table-select-multiple .ds-table-row-selected {
  position: relative;
}
.ds-table-select-multiple .ds-table-row-selected::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--ds-interactive-primary);
}
/* Table select range */
.ds-table-select-range .ds-table-row {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.ds-table-select-range .ds-table-row-selected {
  background-color: var(--ds-interactive-primary-bg);
}
.ds-table-select-range-start,
.ds-table-select-range-end {
  background-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
}
.ds-table-select-range-middle {
  background-color: var(--ds-interactive-primary-bg);
  opacity: 0.7;
}
/* Table select keyboard */
.ds-table-select-keyboard .ds-table-row:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: -2px;
}
.ds-table-select-keyboard .ds-table-row-selected:focus-visible {
  outline-color: var(--ds-interactive-primary);
}
/* Table select bulk actions */
.ds-table-select-bulk {
  position: sticky;
  top: 0;
  z-index: var(--ds-z-index-sticky);
  background-color: var(--ds-surface-primary);
  border-bottom: 1px solid var(--ds-border-primary);
  box-shadow: var(--ds-shadow-sm);
  animation: tableSelectBulkSlideIn 0.3s ease-out;
}
@keyframes tableSelectBulkSlideIn {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.ds-table-select-bulk-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  gap: var(--ds-spacing-m);
}
.ds-table-select-bulk-info {
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-primary);
  font-weight: 500;
}
.ds-table-select-bulk-count {
  background-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
  border-radius: var(--ds-border-radius-l);
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 600;
  margin-left: var(--ds-spacing-xs);
}
.ds-table-select-bulk-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
}
.ds-table-select-bulk-action {
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-2xs);
  background-color: var(--ds-surface-primary);
  color: var(--ds-text-primary);
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-table-select-bulk-action:hover {
  background-color: var(--ds-surface-secondary);
  border-color: var(--ds-border-secondary);
}
.ds-table-select-bulk-action:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-table-select-bulk-action-primary {
  background-color: var(--ds-interactive-primary);
  border-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
}
.ds-table-select-bulk-action-primary:hover {
  background-color: var(--ds-interactive-primary-hover);
  border-color: var(--ds-interactive-primary-hover);
}
.ds-table-select-bulk-action-danger {
  background-color: var(--ds-status-error);
  border-color: var(--ds-status-error);
  color: var(--ds-text-inverse);
}
.ds-table-select-bulk-action-danger:hover {
  background-color: var(--ds-status-error-hover);
  border-color: var(--ds-status-error-hover);
}
/* Table select loading */
.ds-table-select-loading .ds-table-select-checkbox input[type="checkbox"] {
  pointer-events: none;
}
.ds-table-select-spinner {
  width: 1rem;
  height: 1rem;
  color: var(--ds-interactive-primary);
}
/* Table select pagination */
.ds-table-select-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  background-color: var(--ds-surface-secondary);
  border-top: 1px solid var(--ds-border-primary);
}
.ds-table-select-pagination-info {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
}
.ds-table-select-pagination-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ds-table-select-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ds-spacing-s);
  }

  .ds-table-select-header-actions {
    justify-content: space-between;
  }

  .ds-table-select-bulk-content {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ds-spacing-s);
  }

  .ds-table-select-bulk-actions {
    justify-content: space-between;
  }

  .ds-table-select-pagination {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ds-spacing-s);
  }

  .ds-table-select-pagination-actions {
    justify-content: space-between;
  }
}
@media (max-width: 480px) {
  .ds-table-select-header {
    padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  }

  .ds-table-select-bulk-content {
    padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  }

  .ds-table-select-bulk-actions {
    flex-direction: column;
    width: 100%;
  }

  .ds-table-select-bulk-action {
    width: 100%;
    justify-content: center;
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-table-row-selected {
    border-width: 2px;
  }

  .ds-table-row-selected::before {
    width: 4px;
  }

  .ds-table-select-action,
  .ds-table-select-bulk-action {
    border-width: 2px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-table-row,
  .ds-table-select-action,
  .ds-table-select-bulk,
  .ds-table-select-bulk-action {
    transition: none;
  }

  .ds-table-select-bulk {
    animation: none;
  }

  @keyframes tableSelectBulkSlideIn {
    animation: none;
  }
}
/* Print styles */
@media print {
  .ds-table-select-header,
  .ds-table-select-bulk,
  .ds-table-select-pagination {
    display: none !important;
  }

  .ds-table-row-selected {
    background-color: #f0f0f0 !important;
    border: 1px solid #000 !important;
  }

  .ds-table-row-selected::before {
    background-color: #000;
  }
}
/* DS: table.sort.css - Table sort component */
/* layer: components */
.ds-table-sortable .ds-table-header-cell {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: background-color var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-table-sortable .ds-table-header-cell:hover {
  background-color: var(--ds-surface-secondary);
}
.ds-table-sortable .ds-table-header-cell:active {
  background-color: var(--ds-surface-tertiary);
}
/* Table sort indicator */
.ds-table-sort-indicator {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-left: var(--ds-spacing-xs);
  width: 1rem;
  height: 1rem;
  opacity: 0.5;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-table-sort-indicator svg {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--ds-text-secondary);
}
.ds-table-header-cell:hover .ds-table-sort-indicator {
  opacity: 1;
}
.ds-table-sort-active .ds-table-sort-indicator {
  opacity: 1;
}
.ds-table-sort-active .ds-table-sort-indicator svg {
  color: var(--ds-interactive-primary);
}
.ds-table-sort-asc .ds-table-sort-indicator svg {
  transform: rotate(180deg);
}
.ds-table-sort-desc .ds-table-sort-indicator svg {
  transform: rotate(0deg);
}
/* Table sort states */
.ds-table-sort-active {
  background-color: var(--ds-interactive-primary-bg);
  color: var(--ds-interactive-primary);
  font-weight: 600;
}
.ds-table-sort-active:hover {
  background-color: var(--ds-interactive-primary-hover-bg);
}
/* Table sort loading */
.ds-table-sort-loading .ds-table-sort-indicator {
  opacity: 1;
}
.ds-table-sort-loading .ds-table-sort-indicator svg {
  display: none;
}
.ds-table-sort-spinner {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--ds-interactive-primary);
  animation: tableSortSpin 1s linear infinite;
}
@keyframes tableSortSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* Table sort multiple */
.ds-table-sort-multiple .ds-table-sort-indicator {
  position: relative;
}
.ds-table-sort-multiple .ds-table-sort-indicator::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 6px;
  height: 6px;
  background-color: var(--ds-interactive-primary);
  border-radius: 50%;
  display: none;
}
.ds-table-sort-multiple.ds-table-sort-active .ds-table-sort-indicator::after {
  display: block;
}
.ds-table-sort-priority {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 1rem;
  height: 1rem;
  background-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
  border-radius: 50%;
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* Table sort tooltip */
.ds-table-sort-tooltip {
  position: absolute;
  top: calc(100% + var(--ds-spacing-xs));
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-2xs);
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  color: var(--ds-text-primary);
  white-space: nowrap;
  box-shadow: var(--ds-shadow-sm);
  opacity: 0;
  visibility: hidden;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  z-index: var(--ds-z-index-tooltip);
  pointer-events: none;
}
.ds-table-sort-tooltip-visible {
  opacity: 1;
  visibility: visible;
}
/* Table sort menu */
.ds-table-sort-menu {
  position: absolute;
  top: calc(100% + var(--ds-spacing-xs));
  right: 0;
  z-index: var(--ds-z-index-dropdown);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  box-shadow: var(--ds-shadow-lg);
  min-width: 200px;
  padding: var(--ds-spacing-xs);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-table-sort-menu-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ds-table-sort-menu-item {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  background: none;
  border: none;
  border-radius: var(--ds-border-radius-2xs);
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-primary);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-table-sort-menu-item:hover {
  background-color: var(--ds-surface-secondary);
}
.ds-table-sort-menu-item:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: -2px;
}
.ds-table-sort-menu-item-selected {
  background-color: var(--ds-interactive-primary-bg);
  color: var(--ds-interactive-primary);
  font-weight: 500;
}
.ds-table-sort-menu-item-icon {
  width: 1rem;
  height: 1rem;
  color: var(--ds-text-secondary);
  flex-shrink: 0;
}
.ds-table-sort-menu-item-selected .ds-table-sort-menu-item-icon {
  color: var(--ds-interactive-primary);
}
/* Table sort keyboard support */
.ds-table-sortable .ds-table-header-cell:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: -2px;
}
.ds-table-sort-active:focus-visible {
  outline-color: var(--ds-interactive-primary);
}
/* Table sort touch support */
@media (hover: none) and (pointer: coarse) {
  .ds-table-sort-indicator {
    opacity: 1;
  }

  .ds-table-sortable .ds-table-header-cell {
    padding: var(--ds-spacing-s) var(--ds-spacing-m);
  }
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ds-table-sort-tooltip,
  .ds-table-sort-menu {
    position: fixed;
    top: auto !important;
    left: var(--ds-spacing-m) !important;
    right: var(--ds-spacing-m) !important;
    bottom: var(--ds-spacing-m) !important;
    transform: none !important;
    max-width: none;
    width: auto;
  }

  .ds-table-sort-tooltip {
    text-align: center;
  }
}
@media (max-width: 480px) {
  .ds-table-sort-indicator {
    margin-left: var(--ds-spacing-2xs);
    width: 0.875rem;
    height: 0.875rem;
  }

  .ds-table-sort-indicator svg {
    width: 0.625rem;
    height: 0.625rem;
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-table-sort-indicator {
    opacity: 1;
  }

  .ds-table-sort-indicator svg {
    color: var(--ds-text-primary);
  }

  .ds-table-sort-active .ds-table-sort-indicator svg {
    color: var(--ds-interactive-primary);
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-table-sortable .ds-table-header-cell,
  .ds-table-sort-indicator,
  .ds-table-sort-tooltip,
  .ds-table-sort-menu {
    transition: none;
  }

  .ds-table-sort-loading .ds-table-sort-spinner {
    animation: none;
  }

  @keyframes tableSortSpin {
    animation: none;
  }
}
/* Print styles */
@media print {
  .ds-table-sort-indicator,
  .ds-table-sort-tooltip,
  .ds-table-sort-menu {
    display: none !important;
  }

  .ds-table-sort-active {
    background-color: #f0f0f0 !important;
    font-weight: bold;
  }

  .ds-table-sort-loading .ds-table-sort-indicator {
    display: none;
  }
}
/* DS: table.sticky.css - Table sticky component */
/* layer: components */
.ds-table-sticky {
  position: relative;
}
.ds-table-sticky-header {
  position: sticky;
  top: 0;
  z-index: var(--ds-z-index-sticky);
  background-color: var(--ds-surface-primary);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.ds-table-sticky-footer {
  position: sticky;
  bottom: 0;
  z-index: var(--ds-z-index-sticky);
  background-color: var(--ds-surface-primary);
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}
/* Table sticky columns */
.ds-table-sticky-left {
  position: sticky;
  left: 0;
  z-index: var(--ds-z-index-sticky);
  background-color: var(--ds-surface-primary);
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
}
.ds-table-sticky-right {
  position: sticky;
  right: 0;
  z-index: var(--ds-z-index-sticky);
  background-color: var(--ds-surface-primary);
  box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1);
}
/* Table sticky multiple levels */
.ds-table-sticky-left-1 {
  left: 0;
}
.ds-table-sticky-left-2 {
  left: 80px;
}
.ds-table-sticky-left-3 {
  left: 160px;
}
.ds-table-sticky-right-1 {
  right: 0;
}
.ds-table-sticky-right-2 {
  right: 80px;
}
.ds-table-sticky-right-3 {
  right: 160px;
}
/* Table sticky borders */
.ds-table-sticky-left::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--ds-border-primary);
}
.ds-table-sticky-right::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--ds-border-primary);
}
/* Table sticky header with borders */
.ds-table-sticky-header .ds-table-header-cell:first-child {
  border-left: none;
}
.ds-table-sticky-header .ds-table-header-cell:last-child {
  border-right: none;
}
/* Table sticky scroll indicators */
.ds-table-sticky-scroll-left,
.ds-table-sticky-scroll-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  background: linear-gradient(to right, var(--ds-surface-primary), transparent);
  pointer-events: none;
  z-index: var(--ds-z-index-sticky);
  opacity: 0;
  transition: opacity var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-table-sticky-scroll-left {
  left: 0;
  background: linear-gradient(to right, var(--ds-surface-primary), transparent);
}
.ds-table-sticky-scroll-right {
  right: 0;
  background: linear-gradient(to left, var(--ds-surface-primary), transparent);
}
.ds-table-sticky-has-scroll-left .ds-table-sticky-scroll-left {
  opacity: 1;
}
.ds-table-sticky-has-scroll-right .ds-table-sticky-scroll-right {
  opacity: 1;
}
/* Table sticky loading */
.ds-table-sticky-loading {
  position: relative;
}
.ds-table-sticky-loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--ds-surface-primary);
  opacity: 0.8;
  z-index: var(--ds-z-index-modal);
}
.ds-table-sticky-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--ds-z-index-modal);
  width: 2rem;
  height: 2rem;
  color: var(--ds-interactive-primary);
}
/* Table sticky responsive */
.ds-table-sticky-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ds-table-sticky-responsive .ds-table-sticky-left,
.ds-table-sticky-responsive .ds-table-sticky-right {
  position: static;
  box-shadow: none;
}
.ds-table-sticky-responsive .ds-table-sticky-left::after,
.ds-table-sticky-responsive .ds-table-sticky-right::before {
  display: none;
}
/* Table sticky with pagination */
.ds-table-sticky-with-pagination .ds-table-sticky-footer {
  border-top: 1px solid var(--ds-border-primary);
}
/* Table sticky with filters */
.ds-table-sticky-with-filters .ds-table-sticky-header {
  border-bottom: 1px solid var(--ds-border-primary);
}
/* Table sticky animations */
.ds-table-sticky-entering {
  animation: tableStickyFadeIn 0.3s ease-out;
}
@keyframes tableStickyFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ds-table-sticky {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ds-table-sticky-left,
  .ds-table-sticky-right {
    position: static;
    box-shadow: none;
  }

  .ds-table-sticky-left::after,
  .ds-table-sticky-right::before {
    display: none;
  }

  .ds-table-sticky-scroll-left,
  .ds-table-sticky-scroll-right {
    display: none;
  }
}
@media (max-width: 480px) {
  .ds-table-sticky-header,
  .ds-table-sticky-footer {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }

  .ds-table-sticky-header {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }

  .ds-table-sticky-footer {
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.1);
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-table-sticky-header,
  .ds-table-sticky-footer {
    border: 2px solid var(--ds-border-primary);
  }

  .ds-table-sticky-left,
  .ds-table-sticky-right {
    border: 2px solid var(--ds-border-primary);
  }

  .ds-table-sticky-left::after,
  .ds-table-sticky-right::before {
    background-color: var(--ds-border-primary);
    width: 2px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-table-sticky-scroll-left,
  .ds-table-sticky-scroll-right {
    transition: none;
  }

  .ds-table-sticky-entering {
    animation: none;
  }

  @keyframes tableStickyFadeIn {
    animation: none;
  }
}
/* Print styles */
@media print {
  .ds-table-sticky {
    position: static;
  }

  .ds-table-sticky-header,
  .ds-table-sticky-footer {
    position: static;
    box-shadow: none;
    border: 1px solid #000;
  }

  .ds-table-sticky-left,
  .ds-table-sticky-right {
    position: static;
    box-shadow: none;
  }

  .ds-table-sticky-left::after,
  .ds-table-sticky-right::before {
    display: none;
  }

  .ds-table-sticky-scroll-left,
  .ds-table-sticky-scroll-right {
    display: none;
  }

  .ds-table-sticky-loading::before {
    display: none;
  }

  .ds-table-sticky-spinner {
    display: none;
  }

  .ds-table-sticky-entering {
    animation: none;
  }
}
/* DS: tabs.css - Tabs component */
/* layer: components */
.ds-tabs {
  display: flex;
  flex-direction: column;
}
.ds-tabs-list {
  display: flex;
  border-bottom: 1px solid var(--ds-tabs-content-border);
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ds-tabs-list::-webkit-scrollbar {
  display: none;
}
.ds-tabs-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-spacing-xs);
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--ds-typography-desktop-body-font-size);
  font-weight: 500;
  color: var(--ds-tabs-tab-fg);
  border-radius: var(--ds-border-radius-s) var(--ds-border-radius-s) 0 0;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  position: relative;
  white-space: nowrap;
  flex-shrink: 0;
}
.ds-tabs-trigger:hover {
  color: var(--ds-tabs-tab-fg-hover);
}
.ds-tabs-trigger:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: -2px;
}
.ds-tabs-trigger[data-state="active"] {
  color: var(--ds-tabs-tab-fg-active);
}
.ds-tabs-trigger[data-state="active"]::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--ds-tabs-indicator);
  border-radius: 1px 1px 0 0;
}
.ds-tabs-trigger:disabled {
  color: var(--ds-tabs-tab-fg-disabled);
  cursor: not-allowed;
}
.ds-tabs-content {
  padding: var(--ds-spacing-m) 0;
  color: var(--ds-text-primary);
  line-height: 1.6;
  outline: none;
}
/* Tab sizes */
.ds-tabs-sm .ds-tabs-trigger {
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  font-size: var(--ds-typography-desktop-small-font-size);
}
.ds-tabs-lg .ds-tabs-trigger {
  padding: var(--ds-spacing-m) var(--ds-spacing-l);
  font-size: var(--ds-typography-desktop-h4-font-size);
}
/* Tab variants */
.ds-tabs-vertical {
  flex-direction: row;
}
.ds-tabs-vertical .ds-tabs-list {
  flex-direction: column;
  border-bottom: none;
  border-right: 1px solid var(--ds-tabs-content-border);
  width: 200px;
  flex-shrink: 0;
}
.ds-tabs-vertical .ds-tabs-trigger {
  justify-content: flex-start;
  border-radius: 0 var(--ds-border-radius-s) var(--ds-border-radius-s) 0;
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
}
.ds-tabs-vertical .ds-tabs-trigger[data-state="active"]::after {
  top: 0;
  bottom: 0;
  left: auto;
  right: 0;
  width: 2px;
  height: auto;
  border-radius: 0 1px 1px 0;
}
.ds-tabs-vertical .ds-tabs-content {
  flex: 1;
  padding: var(--ds-spacing-m);
}
/* Pills variant */
.ds-tabs-pills .ds-tabs-list {
  border-bottom: none;
  background-color: var(--ds-surface-background-secondary);
  padding: var(--ds-spacing-xs);
  border-radius: var(--ds-border-radius-m);
}
.ds-tabs-pills .ds-tabs-trigger {
  border-radius: var(--ds-border-radius-s);
  margin: 0 var(--ds-spacing-2xs);
}
.ds-tabs-pills .ds-tabs-trigger[data-state="active"] {
  background-color: var(--ds-surface-background);
  box-shadow: var(--ds-shadow-sm);
}
.ds-tabs-pills .ds-tabs-trigger[data-state="active"]::after {
  display: none;
}
/* Underline variant */
.ds-tabs-underline .ds-tabs-trigger {
  border-radius: 0;
  padding: var(--ds-spacing-s) var(--ds-spacing-m) var(--ds-spacing-m);
}
.ds-tabs-underline .ds-tabs-trigger[data-state="active"] {
  color: var(--ds-tabs-tab-fg-active);
}
.ds-tabs-underline .ds-tabs-trigger[data-state="active"]::after {
  bottom: var(--ds-spacing-s);
  height: 2px;
}
/* Scrollable tabs */
.ds-tabs-scrollable .ds-tabs-list {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ds-tabs-scrollable .ds-tabs-list::-webkit-scrollbar {
  display: none;
}
.ds-tabs-scrollable .ds-tabs-list::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 20px;
  background: linear-gradient(to left, var(--ds-surface-background), transparent);
  pointer-events: none;
}
.ds-tabs-scrollable .ds-tabs-list::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 20px;
  background: linear-gradient(to right, var(--ds-surface-background), transparent);
  pointer-events: none;
  z-index: 1;
}
/* Tab with icon */
.ds-tabs-trigger .ds-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}
.ds-tabs-trigger .ds-icon:only-child {
  margin: 0;
}
/* Tab with badge */
.ds-tabs-trigger .ds-badge {
  margin-left: var(--ds-spacing-xs);
  font-size: var(--ds-typography-desktop-small-font-size);
}
/* Tab with close button */
.ds-tabs-trigger .ds-tabs-close {
  margin-left: var(--ds-spacing-xs);
  padding: var(--ds-spacing-2xs);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ds-text-secondary);
  border-radius: var(--ds-border-radius-2xs);
  opacity: 0.6;
  transition: opacity var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-tabs-trigger .ds-tabs-close:hover {
  opacity: 1;
  background-color: var(--ds-surface-background-secondary);
}
.ds-tabs-trigger .ds-tabs-close:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
  opacity: 1;
}
/* Responsive adjustments */
@media (max-width: 640px) {
  .ds-tabs-vertical {
    flex-direction: column;
  }

  .ds-tabs-vertical .ds-tabs-list {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--ds-tabs-content-border);
  }

  .ds-tabs-vertical .ds-tabs-trigger {
    justify-content: center;
    border-radius: var(--ds-border-radius-s) var(--ds-border-radius-s) 0 0;
  }

  .ds-tabs-vertical .ds-tabs-trigger[data-state="active"]::after {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    height: 2px;
    border-radius: 0;
  }

  .ds-tabs-vertical .ds-tabs-content {
    padding: var(--ds-spacing-m) 0;
  }
}
/* Animation for tab content changes */
.ds-tabs-content[data-state="active"] {
  animation: tabContentFadeIn 0.2s ease-out;
}
.ds-tabs-content[data-state="inactive"] {
  animation: tabContentFadeOut 0.2s ease-in;
}
@keyframes tabContentFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes tabContentFadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-4px);
  }
}
/* DS: tabs.scrollable.css - Tabs scrollable component */
/* layer: components */
.ds-tabs-scrollable {
  position: relative;
  overflow: hidden;
}
.ds-tabs-scrollable .ds-tabs-list {
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ds-tabs-scrollable .ds-tabs-list::-webkit-scrollbar {
  display: none;
}
/* Tabs scroll buttons */
.ds-tabs-scroll-button {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2rem;
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  opacity: 0;
  visibility: hidden;
}
.ds-tabs-scroll-button:hover {
  background-color: var(--ds-surface-secondary);
}
.ds-tabs-scroll-button:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-tabs-scroll-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.ds-tabs-scroll-button-prev {
  left: 0;
  border-right: none;
  border-radius: var(--ds-border-radius-m) 0 0 var(--ds-border-radius-m);
}
.ds-tabs-scroll-button-next {
  right: 0;
  border-left: none;
  border-radius: 0 var(--ds-border-radius-m) var(--ds-border-radius-m) 0;
}
.ds-tabs-scroll-button-icon {
  width: 1rem;
  height: 1rem;
  color: var(--ds-text-secondary);
  transition: color var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-tabs-scroll-button:hover .ds-tabs-scroll-button-icon {
  color: var(--ds-text-primary);
}
/* Tabs scrollable with fade */
.ds-tabs-scrollable-fade .ds-tabs-list {
  position: relative;
}
.ds-tabs-scrollable-fade .ds-tabs-list::before,
.ds-tabs-scrollable-fade .ds-tabs-list::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-tabs-scrollable-fade .ds-tabs-list::before {
  left: 0;
  background: linear-gradient(to right, var(--ds-surface-primary), transparent);
}
.ds-tabs-scrollable-fade .ds-tabs-list::after {
  right: 0;
  background: linear-gradient(to left, var(--ds-surface-primary), transparent);
}
.ds-tabs-scrollable-has-overflow-start .ds-tabs-list::before {
  opacity: 1;
}
.ds-tabs-scrollable-has-overflow-end .ds-tabs-list::after {
  opacity: 1;
}
/* Tabs scrollable with buttons */
.ds-tabs-scrollable-buttons:hover .ds-tabs-scroll-button {
  opacity: 1;
  visibility: visible;
}
.ds-tabs-scrollable-buttons.ds-tabs-scrollable-has-overflow-start .ds-tabs-scroll-button-prev {
  opacity: 1;
  visibility: visible;
}
.ds-tabs-scrollable-buttons.ds-tabs-scrollable-has-overflow-end .ds-tabs-scroll-button-next {
  opacity: 1;
  visibility: visible;
}
/* Tabs scrollable always show buttons */
.ds-tabs-scrollable-always .ds-tabs-scroll-button {
  opacity: 1;
  visibility: visible;
}
.ds-tabs-scrollable-always:not(.ds-tabs-scrollable-has-overflow-start) .ds-tabs-scroll-button-prev {
  opacity: 0.5;
}
.ds-tabs-scrollable-always:not(.ds-tabs-scrollable-has-overflow-end) .ds-tabs-scroll-button-next {
  opacity: 0.5;
}
/* Tabs scrollable with indicator */
.ds-tabs-scrollable-indicator {
  position: relative;
}
.ds-tabs-scroll-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background-color: var(--ds-interactive-primary);
  border-radius: 1px;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  opacity: 0;
  visibility: hidden;
}
.ds-tabs-scrollable-has-overflow .ds-tabs-scroll-indicator {
  opacity: 1;
  visibility: visible;
}
/* Tabs scrollable with menu */
.ds-tabs-scrollable-menu {
  position: relative;
}
.ds-tabs-scroll-menu-button {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2rem;
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-left: none;
  border-radius: 0 var(--ds-border-radius-m) var(--ds-border-radius-m) 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  opacity: 0;
  visibility: hidden;
}
.ds-tabs-scrollable-has-hidden-tabs .ds-tabs-scroll-menu-button {
  opacity: 1;
  visibility: visible;
}
.ds-tabs-scroll-menu-button:hover {
  background-color: var(--ds-surface-secondary);
}
.ds-tabs-scroll-menu-button:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-tabs-scroll-menu {
  position: absolute;
  top: calc(100% + var(--ds-spacing-xs));
  right: 0;
  z-index: var(--ds-z-index-dropdown);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  box-shadow: var(--ds-shadow-lg);
  min-width: 200px;
  max-height: 300px;
  overflow-y: auto;
  padding: var(--ds-spacing-xs);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-tabs-scroll-menu-open .ds-tabs-scroll-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ds-tabs-scroll-menu-item {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  background: none;
  border: none;
  border-radius: var(--ds-border-radius-2xs);
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-primary);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-tabs-scroll-menu-item:hover {
  background-color: var(--ds-surface-secondary);
}
.ds-tabs-scroll-menu-item:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: -2px;
}
.ds-tabs-scroll-menu-item-selected {
  background-color: var(--ds-interactive-primary-bg);
  color: var(--ds-interactive-primary);
  font-weight: 500;
}
.ds-tabs-scroll-menu-item-icon {
  width: 1rem;
  height: 1rem;
  color: var(--ds-text-secondary);
  flex-shrink: 0;
}
/* Tabs scrollable keyboard support */
.ds-tabs-scrollable .ds-tabs-list:focus-within {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ds-tabs-scrollable .ds-tabs-list {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .ds-tabs-scroll-button {
    width: 2.5rem;
  }

  .ds-tabs-scrollable-buttons .ds-tabs-scroll-button {
    opacity: 1;
    visibility: visible;
  }
}
@media (max-width: 480px) {
  .ds-tabs-scrollable .ds-tabs-list {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .ds-tabs-scroll-button {
    width: 1.5rem;
  }

  .ds-tabs-scroll-button-icon {
    width: 0.875rem;
    height: 0.875rem;
  }

  .ds-tabs-scroll-menu-button {
    width: 1.5rem;
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-tabs-scroll-button,
  .ds-tabs-scroll-menu-button {
    border-width: 2px;
  }

  .ds-tabs-scrollable-fade .ds-tabs-list::before,
  .ds-tabs-scrollable-fade .ds-tabs-list::after {
    width: 30px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-tabs-scroll-button,
  .ds-tabs-scroll-menu-button {
    transition: none;
  }

  .ds-tabs-scrollable-fade .ds-tabs-list::before,
  .ds-tabs-scrollable-fade .ds-tabs-list::after {
    transition: none;
  }

  .ds-tabs-scroll-indicator {
    transition: none;
  }

  .ds-tabs-scroll-menu {
    transition: none;
  }
}
/* Print styles */
@media print {
  .ds-tabs-scrollable .ds-tabs-list {
    overflow: visible !important;
    flex-wrap: wrap;
  }

  .ds-tabs-scroll-button,
  .ds-tabs-scroll-menu-button,
  .ds-tabs-scroll-indicator {
    display: none !important;
  }

  .ds-tabs-scroll-menu {
    display: none !important;
  }

  .ds-tabs-scrollable-fade .ds-tabs-list::before,
  .ds-tabs-scrollable-fade .ds-tabs-list::after {
    display: none;
  }
}
/* DS: tabs.variants.css - Tabs variants component */
/* layer: components */
.ds-tabs-outlined .ds-tabs-list {
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  background-color: var(--ds-surface-secondary);
}
.ds-tabs-outlined .ds-tabs-item {
  border: none;
  background-color: transparent;
}
.ds-tabs-outlined .ds-tabs-item:hover {
  background-color: var(--ds-surface-tertiary);
}
.ds-tabs-outlined .ds-tabs-item-selected {
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-interactive-primary);
  box-shadow: var(--ds-shadow-xs);
  margin: -1px;
  position: relative;
  z-index: 1;
}
.ds-tabs-filled .ds-tabs-list {
  background-color: var(--ds-surface-secondary);
  border-radius: var(--ds-border-radius-m);
  padding: var(--ds-spacing-2xs);
}
.ds-tabs-filled .ds-tabs-item {
  border-radius: calc(var(--ds-border-radius-m) - var(--ds-spacing-2xs));
  background-color: transparent;
  border: none;
}
.ds-tabs-filled .ds-tabs-item:hover {
  background-color: var(--ds-surface-tertiary);
}
.ds-tabs-filled .ds-tabs-item-selected {
  background-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
  font-weight: 600;
  box-shadow: var(--ds-shadow-xs);
}
.ds-tabs-filled .ds-tabs-item-selected:hover {
  background-color: var(--ds-interactive-primary-hover);
}
.ds-tabs-ghost .ds-tabs-list {
  background-color: transparent;
  border: none;
}
.ds-tabs-ghost .ds-tabs-item {
  background-color: transparent;
  border: none;
  border-radius: var(--ds-border-radius-2xs);
}
.ds-tabs-ghost .ds-tabs-item:hover {
  background-color: var(--ds-surface-secondary);
}
.ds-tabs-ghost .ds-tabs-item-selected {
  background-color: var(--ds-interactive-primary-bg);
  color: var(--ds-interactive-primary);
  font-weight: 600;
}
.ds-tabs-ghost .ds-tabs-item-selected:hover {
  background-color: var(--ds-interactive-primary-hover-bg);
}
.ds-tabs-underlined .ds-tabs-list {
  border-bottom: 2px solid var(--ds-border-primary);
  background-color: transparent;
}
.ds-tabs-underlined .ds-tabs-item {
  background-color: transparent;
  border: none;
  border-radius: var(--ds-border-radius-2xs) var(--ds-border-radius-2xs) 0 0;
  margin-bottom: -2px;
  position: relative;
}
.ds-tabs-underlined .ds-tabs-item:hover {
  background-color: var(--ds-surface-secondary);
}
.ds-tabs-underlined .ds-tabs-item-selected {
  background-color: var(--ds-surface-primary);
  color: var(--ds-interactive-primary);
  font-weight: 600;
  border-bottom: 2px solid var(--ds-interactive-primary);
}
.ds-tabs-underlined .ds-tabs-item-selected:hover {
  background-color: var(--ds-surface-tertiary);
}
.ds-tabs-button .ds-tabs-list {
  background-color: transparent;
  border: none;
  gap: var(--ds-spacing-xs);
}
.ds-tabs-button .ds-tabs-item {
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-2xs);
  box-shadow: var(--ds-shadow-xs);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-tabs-button .ds-tabs-item:hover {
  background-color: var(--ds-surface-secondary);
  border-color: var(--ds-border-secondary);
  transform: translateY(-1px);
  box-shadow: var(--ds-shadow-sm);
}
.ds-tabs-button .ds-tabs-item-selected {
  background-color: var(--ds-interactive-primary);
  border-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
  font-weight: 600;
  transform: translateY(-1px);
  box-shadow: var(--ds-shadow-sm);
}
.ds-tabs-button .ds-tabs-item-selected:hover {
  background-color: var(--ds-interactive-primary-hover);
  border-color: var(--ds-interactive-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-md);
}
.ds-tabs-pill .ds-tabs-list {
  background-color: var(--ds-surface-secondary);
  border-radius: var(--ds-border-radius-l);
  padding: var(--ds-spacing-2xs);
}
.ds-tabs-pill .ds-tabs-item {
  border-radius: calc(var(--ds-border-radius-l) - var(--ds-spacing-2xs));
  background-color: transparent;
  border: none;
}
.ds-tabs-pill .ds-tabs-item:hover {
  background-color: var(--ds-surface-tertiary);
}
.ds-tabs-pill .ds-tabs-item-selected {
  background-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
  font-weight: 600;
  box-shadow: var(--ds-shadow-xs);
}
.ds-tabs-pill .ds-tabs-item-selected:hover {
  background-color: var(--ds-interactive-primary-hover);
}
.ds-tabs-segmented .ds-tabs-list {
  background-color: var(--ds-surface-secondary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  padding: var(--ds-spacing-2xs);
}
.ds-tabs-segmented .ds-tabs-item {
  border-radius: calc(var(--ds-border-radius-m) - var(--ds-spacing-2xs));
  background-color: transparent;
  border: none;
  flex: 1;
  justify-content: center;
}
.ds-tabs-segmented .ds-tabs-item:hover {
  background-color: var(--ds-surface-tertiary);
}
.ds-tabs-segmented .ds-tabs-item-selected {
  background-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
  font-weight: 600;
  box-shadow: var(--ds-shadow-xs);
}
.ds-tabs-segmented .ds-tabs-item-selected:hover {
  background-color: var(--ds-interactive-primary-hover);
}
.ds-tabs-card .ds-tabs-list {
  background-color: transparent;
  border: none;
  gap: var(--ds-spacing-s);
}
.ds-tabs-card .ds-tabs-item {
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  box-shadow: var(--ds-shadow-xs);
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-tabs-card .ds-tabs-item:hover {
  background-color: var(--ds-surface-secondary);
  border-color: var(--ds-border-secondary);
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-sm);
}
.ds-tabs-card .ds-tabs-item-selected {
  background-color: var(--ds-interactive-primary-bg);
  border-color: var(--ds-interactive-primary);
  color: var(--ds-interactive-primary);
  font-weight: 600;
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-sm);
}
.ds-tabs-card .ds-tabs-item-selected:hover {
  background-color: var(--ds-interactive-primary-hover-bg);
  border-color: var(--ds-interactive-primary-hover);
  transform: translateY(-4px);
  box-shadow: var(--ds-shadow-md);
}
.ds-tabs-compact .ds-tabs-list {
  gap: var(--ds-spacing-2xs);
}
.ds-tabs-compact .ds-tabs-item {
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  font-size: var(--ds-typography-desktop-small-font-size);
}
.ds-tabs-spacious .ds-tabs-list {
  gap: var(--ds-spacing-m);
}
.ds-tabs-spacious .ds-tabs-item {
  padding: var(--ds-spacing-m) var(--ds-spacing-l);
  font-size: var(--ds-typography-desktop-h4-font-size);
}
.ds-tabs-vertical .ds-tabs-list {
  flex-direction: column;
  align-items: stretch;
  background-color: transparent;
  border: none;
  padding: 0;
}
.ds-tabs-vertical .ds-tabs-item {
  justify-content: flex-start;
  border-radius: 0;
  margin: 0;
  border-bottom: 1px solid var(--ds-border-primary);
}
.ds-tabs-vertical .ds-tabs-item:last-child {
  border-bottom: none;
}
.ds-tabs-vertical .ds-tabs-item:hover {
  background-color: var(--ds-surface-secondary);
}
.ds-tabs-vertical .ds-tabs-item-selected {
  background-color: var(--ds-interactive-primary-bg);
  border-left: 3px solid var(--ds-interactive-primary);
  color: var(--ds-interactive-primary);
  font-weight: 600;
}
.ds-tabs-vertical .ds-tabs-item-selected:hover {
  background-color: var(--ds-interactive-primary-hover-bg);
}
/* Tabs variants with icons */
.ds-tabs-with-icons .ds-tabs-item {
  gap: var(--ds-spacing-xs);
}
.ds-tabs-with-icons .ds-tabs-item-icon {
  width: 1rem;
  height: 1rem;
  color: var(--ds-text-secondary);
  flex-shrink: 0;
}
.ds-tabs-with-icons .ds-tabs-item:hover .ds-tabs-item-icon {
  color: var(--ds-text-primary);
}
.ds-tabs-with-icons .ds-tabs-item-selected .ds-tabs-item-icon {
  color: var(--ds-interactive-primary);
}
.ds-tabs-filled .ds-tabs-item-selected .ds-tabs-item-icon,
.ds-tabs-pill .ds-tabs-item-selected .ds-tabs-item-icon,
.ds-tabs-segmented .ds-tabs-item-selected .ds-tabs-item-icon {
  color: var(--ds-text-inverse);
}
/* Tabs variants with badges */
.ds-tabs-with-badges .ds-tabs-item {
  position: relative;
}
.ds-tabs-with-badges .ds-tabs-item-badge {
  position: absolute;
  top: var(--ds-spacing-2xs);
  right: var(--ds-spacing-2xs);
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
  background-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
  border-radius: var(--ds-border-radius-l);
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  font-weight: 500;
  line-height: 1;
}
/* Tabs variants with close buttons */
.ds-tabs-closable .ds-tabs-item {
  position: relative;
  padding-right: 2.5rem;
}
.ds-tabs-closable .ds-tabs-item-close {
  position: absolute;
  top: 50%;
  right: var(--ds-spacing-xs);
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  background: none;
  border: none;
  border-radius: var(--ds-border-radius-2xs);
  cursor: pointer;
  color: var(--ds-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-tabs-closable .ds-tabs-item:hover .ds-tabs-item-close {
  opacity: 1;
}
.ds-tabs-closable .ds-tabs-item-close:hover {
  background-color: var(--ds-surface-tertiary);
  color: var(--ds-text-primary);
}
.ds-tabs-closable .ds-tabs-item-close:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ds-tabs-vertical {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ds-tabs-vertical .ds-tabs-item {
    border-bottom: none;
    border-right: 1px solid var(--ds-border-primary);
    flex-shrink: 0;
  }

  .ds-tabs-vertical .ds-tabs-item:last-child {
    border-right: none;
  }

  .ds-tabs-vertical .ds-tabs-item-selected {
    border-left: none;
    border-bottom: 3px solid var(--ds-interactive-primary);
  }
}
@media (max-width: 480px) {
  .ds-tabs-compact .ds-tabs-item {
    padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
    font-size: var(--ds-typography-desktop-extra-small-font-size);
  }

  .ds-tabs-spacious .ds-tabs-item {
    padding: var(--ds-spacing-s) var(--ds-spacing-m);
    font-size: var(--ds-typography-desktop-body-font-size);
  }

  .ds-tabs-with-icons .ds-tabs-item-icon {
    width: 0.875rem;
    height: 0.875rem;
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-tabs-outlined .ds-tabs-list,
  .ds-tabs-underlined .ds-tabs-list {
    border-width: 2px;
  }

  .ds-tabs-outlined .ds-tabs-item-selected {
    border-width: 2px;
  }

  .ds-tabs-underlined .ds-tabs-item-selected {
    border-bottom-width: 3px;
  }

  .ds-tabs-vertical .ds-tabs-item {
    border-bottom-width: 2px;
  }

  .ds-tabs-vertical .ds-tabs-item-selected {
    border-left-width: 4px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-tabs-outlined .ds-tabs-item,
  .ds-tabs-filled .ds-tabs-item,
  .ds-tabs-ghost .ds-tabs-item,
  .ds-tabs-underlined .ds-tabs-item,
  .ds-tabs-button .ds-tabs-item,
  .ds-tabs-pill .ds-tabs-item,
  .ds-tabs-segmented .ds-tabs-item,
  .ds-tabs-card .ds-tabs-item,
  .ds-tabs-closable .ds-tabs-item-close {
    transition: none;
  }
}
/* Print styles */
@media print {
  .ds-tabs-outlined .ds-tabs-list,
  .ds-tabs-filled .ds-tabs-list,
  .ds-tabs-ghost .ds-tabs-list,
  .ds-tabs-underlined .ds-tabs-list,
  .ds-tabs-button .ds-tabs-list,
  .ds-tabs-pill .ds-tabs-list,
  .ds-tabs-segmented .ds-tabs-list,
  .ds-tabs-card .ds-tabs-list {
    border: 1px solid #000;
    background: #fff;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }

  .ds-tabs-outlined .ds-tabs-item-selected,
  .ds-tabs-underlined .ds-tabs-item-selected,
  .ds-tabs-button .ds-tabs-item-selected,
  .ds-tabs-card .ds-tabs-item-selected {
    border: 1px solid #000;
  }

  .ds-tabs-filled .ds-tabs-item-selected,
  .ds-tabs-pill .ds-tabs-item-selected,
  .ds-tabs-segmented .ds-tabs-item-selected {
    background-color: #000;
    color: #fff;
  }

  .ds-tabs-closable .ds-tabs-item-close {
    display: none;
  }
}
/* DS: tag.css - Tag component */
/* layer: components */
.ds-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-spacing-2xs);
  padding: var(--ds-spacing-3xs) var(--ds-spacing-xs);
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 500;
  line-height: 1.4;
  border-radius: var(--ds-border-radius-s);
  white-space: nowrap;
  vertical-align: middle;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-tag:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
/* Tag variants */
.ds-tag-default {
  background-color: var(--ds-tag-bg);
  color: var(--ds-tag-fg);
  border: 1px solid var(--ds-tag-border);
}
.ds-tag-default:hover {
  background-color: var(--ds-tag-bg-hover);
  color: var(--ds-tag-fg-hover);
}
.ds-tag-outlined {
  background-color: transparent;
  color: var(--ds-tag-fg-outlined);
  border: 1px solid var(--ds-tag-border-outlined);
}
.ds-tag-outlined:hover {
  background-color: var(--ds-tag-bg-outlined-hover);
  color: var(--ds-tag-fg-outlined-hover);
}
.ds-tag-solid {
  background-color: var(--ds-tag-bg-solid);
  color: var(--ds-tag-fg-solid);
  border: 1px solid var(--ds-tag-bg-solid);
}
.ds-tag-solid:hover {
  background-color: var(--ds-tag-bg-solid-hover);
  color: var(--ds-tag-fg-solid-hover);
}
/* Tag status variants */
.ds-tag-success {
  background-color: var(--ds-tag-bg-success);
  color: var(--ds-tag-fg-success);
  border: 1px solid var(--ds-tag-border-success);
}
.ds-tag-success:hover {
  background-color: var(--ds-tag-bg-success-hover);
}
.ds-tag-error {
  background-color: var(--ds-tag-bg-error);
  color: var(--ds-tag-fg-error);
  border: 1px solid var(--ds-tag-border-error);
}
.ds-tag-error:hover {
  background-color: var(--ds-tag-bg-error-hover);
}
.ds-tag-warning {
  background-color: var(--ds-tag-bg-warning);
  color: var(--ds-tag-fg-warning);
  border: 1px solid var(--ds-tag-border-warning);
}
.ds-tag-warning:hover {
  background-color: var(--ds-tag-bg-warning-hover);
}
.ds-tag-info {
  background-color: var(--ds-tag-bg-info);
  color: var(--ds-tag-fg-info);
  border: 1px solid var(--ds-tag-border-info);
}
.ds-tag-info:hover {
  background-color: var(--ds-tag-bg-info-hover);
}
/* Tag sizes */
.ds-tag-sm {
  padding: 1px var(--ds-spacing-2xs);
  font-size: var(--ds-typography-desktop-extra-small-font-size);
}
.ds-tag-lg {
  padding: var(--ds-spacing-2xs) var(--ds-spacing-s);
  font-size: var(--ds-typography-desktop-body-font-size);
}
/* Tag with icon */
.ds-tag .ds-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.ds-tag-sm .ds-icon {
  width: 0.875rem;
  height: 0.875rem;
}
.ds-tag-lg .ds-icon {
  width: 1.125rem;
  height: 1.125rem;
}
/* Tag with close button */
.ds-tag-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  border-radius: var(--ds-border-radius-2xs);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  flex-shrink: 0;
}
.ds-tag-close:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.2);
}
.ds-tag-close:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-tag-sm .ds-tag-close {
  width: 0.875rem;
  height: 0.875rem;
}
.ds-tag-lg .ds-tag-close {
  width: 1.125rem;
  height: 1.125rem;
}
/* Tag with avatar */
.ds-tag-avatar {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.ds-tag-sm .ds-tag-avatar {
  width: 1rem;
  height: 1rem;
}
.ds-tag-lg .ds-tag-avatar {
  width: 1.5rem;
  height: 1.5rem;
}
/* Tag group */
.ds-tag-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--ds-spacing-xs);
  align-items: center;
}
/* Tag states */
.ds-tag:disabled,
.ds-tag[aria-disabled="true"] {
  opacity: var(--ds-opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.ds-tag[aria-selected="true"] {
  background-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
  border-color: var(--ds-interactive-primary);
}
/* Tag animations */
.ds-tag-entering {
  animation: tagFadeIn 0.2s ease-out;
}
.ds-tag-exiting {
  animation: tagFadeOut 0.15s ease-in;
}
@keyframes tagFadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes tagFadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}
/* Tag in input */
.ds-input .ds-tag {
  margin: 2px;
  border-radius: var(--ds-border-radius-2xs);
}
.ds-input .ds-tag-close {
  width: 0.75rem;
  height: 0.75rem;
}
/* Tag in select */
.ds-select .ds-tag {
  margin: 1px;
  max-width: calc(100% - 2px);
}
.ds-select .ds-tag-close {
  width: 0.75rem;
  height: 0.75rem;
}
/* Responsive adjustments */
@media (max-width: 640px) {
  .ds-tag {
    font-size: var(--ds-typography-mobile-small-font-size);
  }

  .ds-tag-sm {
    font-size: 11px;
  }

  .ds-tag-lg {
    font-size: var(--ds-typography-mobile-body-font-size);
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-tag {
    border-width: 2px;
  }

  .ds-tag-outlined {
    border-width: 2px;
  }

  .ds-tag-close:hover {
    background-color: var(--ds-surface-primary);
    border: 1px solid var(--ds-text-primary);
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-tag-entering,
  .ds-tag-exiting {
    animation: none;
  }

  .ds-tag {
    transition: none;
  }
}
/* Print styles */
@media print {
  .ds-tag {
    border: 1px solid #000;
    background: #fff;
    color: #000;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }

  .ds-tag-close {
    display: none;
  }
}
/* DS: textarea.css - Textarea component */
/* layer: components */
.ds-textarea {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-2xs);
}
.ds-textarea-field {
  width: 100%;
  min-height: 80px;
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  background-color: var(--ds-surface-primary);
  color: var(--ds-text-primary);
  font-size: var(--ds-typography-desktop-body-font-size);
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-textarea-field:focus {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
  border-color: var(--ds-interactive-primary);
}
.ds-textarea-field:hover:not(:focus) {
  border-color: var(--ds-border-secondary);
}
.ds-textarea-field::-moz-placeholder {
  color: var(--ds-text-tertiary);
  opacity: 1;
}
.ds-textarea-field::placeholder {
  color: var(--ds-text-tertiary);
  opacity: 1;
}
.ds-textarea-field:disabled {
  background-color: var(--ds-surface-disabled);
  color: var(--ds-text-disabled);
  cursor: not-allowed;
  opacity: var(--ds-opacity-disabled);
}
.ds-textarea-field:disabled:hover {
  border-color: var(--ds-border-primary);
}
/* Textarea label */
.ds-textarea-label {
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 500;
  color: var(--ds-text-primary);
  margin: 0;
}
.ds-textarea-label-required::after {
  content: ' *';
  color: var(--ds-status-error);
}
/* Textarea hint */
.ds-textarea-hint {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  color: var(--ds-text-secondary);
  margin: 0;
  line-height: 1.4;
}
/* Textarea error */
.ds-textarea-error {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  color: var(--ds-status-error);
  margin: 0;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: var(--ds-spacing-2xs);
}
.ds-textarea-error-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
/* Textarea states */
.ds-textarea-error .ds-textarea-field {
  border-color: var(--ds-status-error);
}
.ds-textarea-error .ds-textarea-field:focus {
  outline-color: var(--ds-status-error);
}
.ds-textarea-success .ds-textarea-field {
  border-color: var(--ds-status-success);
}
.ds-textarea-success .ds-textarea-field:focus {
  outline-color: var(--ds-status-success);
}
.ds-textarea-warning .ds-textarea-field {
  border-color: var(--ds-status-warning);
}
.ds-textarea-warning .ds-textarea-field:focus {
  outline-color: var(--ds-status-warning);
}
/* Textarea variants */
.ds-textarea-bordered .ds-textarea-field {
  border-width: 2px;
}
.ds-textarea-underline .ds-textarea-field {
  border: none;
  border-bottom: 1px solid var(--ds-border-primary);
  border-radius: 0;
  background-color: transparent;
}
.ds-textarea-underline .ds-textarea-field:focus {
  border-bottom-color: var(--ds-interactive-primary);
  outline: none;
}
.ds-textarea-ghost .ds-textarea-field {
  border: none;
  background-color: var(--ds-surface-secondary);
}
.ds-textarea-ghost .ds-textarea-field:focus {
  outline: 1px solid var(--ds-interactive-primary);
  background-color: var(--ds-surface-primary);
}
/* Textarea sizes */
.ds-textarea-sm .ds-textarea-field {
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  font-size: var(--ds-typography-desktop-small-font-size);
  min-height: 64px;
}
.ds-textarea-lg .ds-textarea-field {
  padding: var(--ds-spacing-m) var(--ds-spacing-l);
  font-size: var(--ds-typography-desktop-h4-font-size);
  min-height: 120px;
}
/* Textarea with counter */
.ds-textarea-with-counter {
  position: relative;
}
.ds-textarea-counter {
  position: absolute;
  bottom: var(--ds-spacing-xs);
  right: var(--ds-spacing-s);
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  color: var(--ds-text-tertiary);
  background-color: var(--ds-surface-primary);
  padding: 0 var(--ds-spacing-2xs);
  border-radius: var(--ds-border-radius-2xs);
  line-height: 1;
}
.ds-textarea-field:focus + .ds-textarea-counter {
  color: var(--ds-text-secondary);
}
.ds-textarea-counter-warning {
  color: var(--ds-status-warning);
}
.ds-textarea-counter-error {
  color: var(--ds-status-error);
}
/* Textarea with resize handle */
.ds-textarea-resize-both .ds-textarea-field {
  resize: both;
}
.ds-textarea-resize-none .ds-textarea-field {
  resize: none;
}
.ds-textarea-resize-horizontal .ds-textarea-field {
  resize: horizontal;
}
/* Textarea with prefix/suffix */
.ds-textarea-with-prefix .ds-textarea-field,
.ds-textarea-with-suffix .ds-textarea-field {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
.ds-textarea-prefix,
.ds-textarea-suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ds-text-secondary);
  pointer-events: none;
}
.ds-textarea-prefix {
  left: var(--ds-spacing-s);
}
.ds-textarea-suffix {
  right: var(--ds-spacing-s);
}
/* Textarea with loading */
.ds-textarea-loading .ds-textarea-field {
  color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.ds-textarea-loading .ds-textarea-field::-moz-placeholder {
  color: transparent;
}
.ds-textarea-loading .ds-textarea-field::placeholder {
  color: transparent;
}
.ds-textarea-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1rem;
  height: 1rem;
  color: var(--ds-interactive-primary);
}
/* Textarea group */
.ds-textarea-group {
  display: flex;
  gap: var(--ds-spacing-2xs);
}
.ds-textarea-group .ds-textarea {
  flex: 1;
}
.ds-textarea-group .ds-textarea-field {
  border-radius: 0;
}
.ds-textarea-group .ds-textarea:first-child .ds-textarea-field {
  border-top-left-radius: var(--ds-border-radius-m);
  border-bottom-left-radius: var(--ds-border-radius-m);
}
.ds-textarea-group .ds-textarea:last-child .ds-textarea-field {
  border-top-right-radius: var(--ds-border-radius-m);
  border-bottom-right-radius: var(--ds-border-radius-m);
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ds-textarea-field {
    font-size: var(--ds-typography-desktop-small-font-size);
  }

  .ds-textarea-lg .ds-textarea-field {
    padding: var(--ds-spacing-s) var(--ds-spacing-m);
    font-size: var(--ds-typography-desktop-body-font-size);
  }
}
@media (max-width: 480px) {
  .ds-textarea-field {
    padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  }

  .ds-textarea-with-prefix .ds-textarea-field,
  .ds-textarea-with-suffix .ds-textarea-field {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .ds-textarea-prefix,
  .ds-textarea-suffix {
    width: 1.25rem;
    height: 1.25rem;
  }

  .ds-textarea-prefix {
    left: var(--ds-spacing-xs);
  }

  .ds-textarea-suffix {
    right: var(--ds-spacing-xs);
  }

  .ds-textarea-counter {
    right: var(--ds-spacing-xs);
    bottom: var(--ds-spacing-2xs);
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-textarea-field {
    border-width: 2px;
  }

  .ds-textarea-bordered .ds-textarea-field {
    border-width: 3px;
  }

  .ds-textarea-underline .ds-textarea-field {
    border-bottom-width: 2px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-textarea-field {
    transition: none;
  }
}
/* Print styles */
@media print {
  .ds-textarea-field {
    border: 1px solid #000;
    background: #fff;
    color: #000;
    resize: none;
  }

  .ds-textarea-field::-moz-placeholder {
    color: #666;
  }

  .ds-textarea-field::placeholder {
    color: #666;
  }

  .ds-textarea-field:disabled {
    background: #f5f5f5;
    opacity: 1;
    color: #999;
  }

  .ds-textarea-label,
  .ds-textarea-hint,
  .ds-textarea-error,
  .ds-textarea-counter {
    display: none;
  }

  .ds-textarea-prefix,
  .ds-textarea-suffix {
    display: none;
  }
}
/* DS: timeline.css - Timeline component */
/* layer: components */
.ds-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-m);
  position: relative;
}
.ds-timeline-vertical {
  flex-direction: column;
}
.ds-timeline-horizontal {
  flex-direction: row;
  gap: var(--ds-spacing-l);
}
/* Timeline item */
.ds-timeline-item {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-spacing-m);
  position: relative;
}
.ds-timeline-item-vertical {
  flex-direction: column;
  align-items: flex-start;
}
.ds-timeline-item-horizontal {
  flex-direction: row;
  align-items: center;
}
/* Timeline dot */
.ds-timeline-dot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: var(--ds-timeline-dot-bg);
  border: 2px solid var(--ds-timeline-dot-border);
  flex-shrink: 0;
  z-index: 1;
}
.ds-timeline-dot-success {
  background-color: var(--ds-status-success);
  border-color: var(--ds-status-success);
}
.ds-timeline-dot-error {
  background-color: var(--ds-status-error);
  border-color: var(--ds-status-error);
}
.ds-timeline-dot-warning {
  background-color: var(--ds-status-warning);
  border-color: var(--ds-status-warning);
}
.ds-timeline-dot-info {
  background-color: var(--ds-status-info);
  border-color: var(--ds-status-info);
}
.ds-timeline-dot-processing {
  background-color: var(--ds-status-info);
  border-color: var(--ds-status-info);
  animation: timelinePulse 2s infinite;
}
.ds-timeline-dot-custom {
  background-color: var(--ds-interactive-primary);
  border-color: var(--ds-interactive-primary);
}
.ds-timeline-dot-outline {
  background-color: transparent;
  border-color: var(--ds-timeline-dot-border-outline);
}
/* Timeline line */
.ds-timeline-line {
  position: absolute;
  background-color: var(--ds-timeline-line-bg);
  z-index: 0;
}
.ds-timeline-vertical .ds-timeline-line {
  left: 0.5rem;
  top: 1rem;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
}
.ds-timeline-horizontal .ds-timeline-line {
  top: 0.5rem;
  left: 1rem;
  right: 0;
  height: 2px;
  transform: translateY(-50%);
}
/* Timeline content */
.ds-timeline-content {
  flex: 1;
  padding-bottom: var(--ds-spacing-m);
}
.ds-timeline-content:last-child {
  padding-bottom: 0;
}
.ds-timeline-title {
  margin: 0 0 var(--ds-spacing-2xs) 0;
  font-size: var(--ds-typography-desktop-body-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  line-height: 1.4;
}
.ds-timeline-description {
  margin: 0;
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  line-height: 1.5;
}
.ds-timeline-time {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  color: var(--ds-text-tertiary);
  font-weight: 500;
  margin-top: var(--ds-spacing-2xs);
}
/* Timeline item layouts */
.ds-timeline-item-left {
  flex-direction: row-reverse;
  text-align: right;
}
.ds-timeline-item-left .ds-timeline-content {
  text-align: right;
}
.ds-timeline-item-alternate:nth-child(even) {
  flex-direction: row-reverse;
  text-align: right;
}
.ds-timeline-item-alternate:nth-child(even) .ds-timeline-content {
  text-align: right;
}
/* Timeline with icon */
.ds-timeline-icon {
  width: 1rem;
  height: 1rem;
  color: inherit;
  flex-shrink: 0;
}
.ds-timeline-dot-with-icon {
  background-color: transparent;
  border: none;
}
.ds-timeline-dot-with-icon .ds-timeline-icon {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--ds-timeline-icon-fg);
}
/* Timeline sizes */
.ds-timeline-sm .ds-timeline-dot {
  width: 0.75rem;
  height: 0.75rem;
}
.ds-timeline-sm .ds-timeline-title {
  font-size: var(--ds-typography-desktop-small-font-size);
}
.ds-timeline-sm .ds-timeline-description {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
}
.ds-timeline-lg .ds-timeline-dot {
  width: 1.25rem;
  height: 1.25rem;
}
.ds-timeline-lg .ds-timeline-title {
  font-size: var(--ds-typography-desktop-h4-font-size);
}
.ds-timeline-lg .ds-timeline-description {
  font-size: var(--ds-typography-desktop-body-font-size);
}
/* Timeline variants */
.ds-timeline-outlined .ds-timeline-dot {
  background-color: transparent;
  border-width: 2px;
}
.ds-timeline-outlined .ds-timeline-line {
  background-color: var(--ds-timeline-line-bg-outlined);
}
.ds-timeline-solid .ds-timeline-dot {
  border: none;
}
.ds-timeline-solid .ds-timeline-line {
  background-color: var(--ds-timeline-line-bg-solid);
}
/* Timeline with cards */
.ds-timeline-card .ds-timeline-content {
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  padding: var(--ds-spacing-m);
  box-shadow: var(--ds-shadow-sm);
  margin-top: var(--ds-spacing-2xs);
}
.ds-timeline-card .ds-timeline-title {
  margin-bottom: var(--ds-spacing-xs);
}
.ds-timeline-card .ds-timeline-description {
  margin-bottom: var(--ds-spacing-s);
}
/* Timeline with media */
.ds-timeline-media {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-spacing-s);
  margin-top: var(--ds-spacing-xs);
}
.ds-timeline-media-image {
  width: 3rem;
  height: 3rem;
  border-radius: var(--ds-border-radius-m);
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
}
.ds-timeline-media-content {
  flex: 1;
}
/* Timeline reverse */
.ds-timeline-reverse {
  flex-direction: column-reverse;
}
.ds-timeline-reverse .ds-timeline-line {
  top: 0;
  bottom: 1rem;
}
/* Timeline loading state */
.ds-timeline-loading .ds-timeline-dot {
  background-color: var(--ds-surface-tertiary);
  border-color: var(--ds-border-primary);
  animation: timelinePulse 2s infinite;
}
.ds-timeline-loading .ds-timeline-title,
.ds-timeline-loading .ds-timeline-description {
  background-color: var(--ds-surface-secondary);
  color: transparent;
  border-radius: var(--ds-border-radius-2xs);
}
.ds-timeline-loading .ds-timeline-title {
  height: 1.2em;
  margin-bottom: var(--ds-spacing-xs);
}
.ds-timeline-loading .ds-timeline-description {
  height: 3em;
}
/* Timeline animations */
.ds-timeline-animated .ds-timeline-item {
  animation: timelineSlideIn 0.5s ease-out;
  animation-fill-mode: both;
}
.ds-timeline-animated .ds-timeline-item:nth-child(1) { animation-delay: 0.1s; }
.ds-timeline-animated .ds-timeline-item:nth-child(2) { animation-delay: 0.2s; }
.ds-timeline-animated .ds-timeline-item:nth-child(3) { animation-delay: 0.3s; }
.ds-timeline-animated .ds-timeline-item:nth-child(4) { animation-delay: 0.4s; }
.ds-timeline-animated .ds-timeline-item:nth-child(5) { animation-delay: 0.5s; }
@keyframes timelineSlideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes timelinePulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ds-timeline-horizontal {
    flex-direction: column;
    gap: var(--ds-spacing-m);
  }

  .ds-timeline-horizontal .ds-timeline-line {
    left: 0.5rem;
    top: 1rem;
    bottom: 0;
    width: 2px;
    height: auto;
    transform: translateX(-50%);
  }

  .ds-timeline-item-horizontal {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .ds-timeline-media {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .ds-timeline-media-image {
    width: 4rem;
    height: 4rem;
  }
}
@media (max-width: 480px) {
  .ds-timeline {
    gap: var(--ds-spacing-s);
  }

  .ds-timeline-item {
    gap: var(--ds-spacing-s);
  }

  .ds-timeline-content {
    padding-bottom: var(--ds-spacing-s);
  }

  .ds-timeline-title {
    font-size: var(--ds-typography-mobile-body-font-size);
  }

  .ds-timeline-description {
    font-size: var(--ds-typography-mobile-small-font-size);
  }

  .ds-timeline-card .ds-timeline-content {
    padding: var(--ds-spacing-s);
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-timeline-line {
    background-color: var(--ds-text-primary);
  }

  .ds-timeline-dot {
    border-width: 3px;
  }

  .ds-timeline-card .ds-timeline-content {
    border-width: 2px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-timeline-dot-processing,
  .ds-timeline-loading .ds-timeline-dot {
    animation: none;
  }

  .ds-timeline-animated .ds-timeline-item {
    animation: none;
  }
}
/* Print styles */
@media print {
  .ds-timeline {
    gap: 1rem;
  }

  .ds-timeline-line {
    background-color: #000;
  }

  .ds-timeline-dot {
    background-color: #000;
    border-color: #000;
  }

  .ds-timeline-card .ds-timeline-content {
    border: 1px solid #000;
    box-shadow: none;
    background: #fff;
  }

  .ds-timeline-loading .ds-timeline-dot {
    animation: none;
    background-color: #ccc;
  }

  .ds-timeline-animated .ds-timeline-item {
    animation: none;
  }
}
/* DS: timepicker.css - Time picker component */
/* layer: components */
.ds-timepicker {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
}
.ds-timepicker-input {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-primary);
  cursor: pointer;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  min-width: 140px;
}
.ds-timepicker-input:hover {
  border-color: var(--ds-border-secondary);
}
.ds-timepicker-input:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
  border-color: var(--ds-interactive-primary);
}
.ds-timepicker-input:disabled {
  background-color: var(--ds-surface-disabled);
  color: var(--ds-text-disabled);
  cursor: not-allowed;
  opacity: var(--ds-opacity-disabled);
}
.ds-timepicker-input:disabled:hover {
  border-color: var(--ds-border-primary);
}
.ds-timepicker-value {
  flex: 1;
  text-align: left;
}
.ds-timepicker-placeholder {
  color: var(--ds-text-secondary);
}
.ds-timepicker-icon {
  width: 1rem;
  height: 1rem;
  color: var(--ds-text-secondary);
  flex-shrink: 0;
  transition: transform var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-timepicker-open .ds-timepicker-icon {
  transform: rotate(180deg);
}
/* Timepicker states */
.ds-timepicker-error .ds-timepicker-input {
  border-color: var(--ds-status-error);
}
.ds-timepicker-error .ds-timepicker-input:focus-visible {
  outline-color: var(--ds-status-error);
}
/* Timepicker dropdown */
.ds-timepicker-dropdown {
  position: absolute;
  top: calc(100% + var(--ds-spacing-xs));
  left: 0;
  z-index: var(--ds-z-index-dropdown);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  box-shadow: var(--ds-shadow-lg);
  min-width: 200px;
  animation: timepickerFadeIn 0.2s ease-out;
}
.ds-timepicker-dropdown-hidden {
  display: none;
}
@keyframes timepickerFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Timepicker clock interface */
.ds-timepicker-clock {
  padding: var(--ds-spacing-m);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-spacing-m);
}
.ds-timepicker-clock-face {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background-color: var(--ds-surface-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ds-timepicker-clock-center {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--ds-interactive-primary);
  position: relative;
  z-index: 2;
}
.ds-timepicker-clock-hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  width: 2px;
  height: 60px;
  background-color: var(--ds-interactive-primary);
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(0deg);
  border-radius: 1px;
  transition: transform var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-timepicker-clock-hand-minutes {
  height: 50px;
  background-color: var(--ds-interactive-primary-hover);
}
.ds-timepicker-clock-markers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.ds-timepicker-clock-marker {
  position: absolute;
  width: 2px;
  height: 8px;
  background-color: var(--ds-text-secondary);
  transform-origin: bottom center;
}
.ds-timepicker-clock-marker:nth-child(5n+1) {
  height: 12px;
  background-color: var(--ds-text-primary);
}
.ds-timepicker-clock-numbers {
  position: absolute;
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 500;
  color: var(--ds-text-primary);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.ds-timepicker-clock-numbers:nth-child(1) { top: 8px; left: 50%; transform: translateX(-50%); }
.ds-timepicker-clock-numbers:nth-child(2) { top: 24px; right: 16px; }
.ds-timepicker-clock-numbers:nth-child(3) { top: 50%; right: 8px; transform: translateY(-50%); }
.ds-timepicker-clock-numbers:nth-child(4) { bottom: 24px; right: 16px; }
.ds-timepicker-clock-numbers:nth-child(5) { bottom: 8px; left: 50%; transform: translateX(-50%); }
.ds-timepicker-clock-numbers:nth-child(6) { bottom: 24px; left: 16px; }
.ds-timepicker-clock-numbers:nth-child(7) { top: 50%; left: 8px; transform: translateY(-50%); }
.ds-timepicker-clock-numbers:nth-child(8) { top: 24px; left: 16px; }
.ds-timepicker-clock-numbers:nth-child(9) { top: 8px; left: 50%; transform: translateX(-50%); }
.ds-timepicker-clock-numbers:nth-child(10) { top: 24px; right: 16px; }
.ds-timepicker-clock-numbers:nth-child(11) { top: 50%; right: 8px; transform: translateY(-50%); }
.ds-timepicker-clock-numbers:nth-child(12) { bottom: 24px; right: 16px; }
/* Timepicker digital input */
.ds-timepicker-digital {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  padding: var(--ds-spacing-m);
  border-top: 1px solid var(--ds-border-primary);
}
.ds-timepicker-digital-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-spacing-xs);
}
.ds-timepicker-digital-input {
  width: 3rem;
  height: 2.5rem;
  padding: var(--ds-spacing-xs);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-2xs);
  text-align: center;
  font-size: var(--ds-typography-desktop-body-font-size);
  font-weight: 500;
  color: var(--ds-text-primary);
  background-color: var(--ds-surface-primary);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-timepicker-digital-input:focus {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
  border-color: var(--ds-interactive-primary);
}
.ds-timepicker-digital-label {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  color: var(--ds-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  font-weight: 500;
}
.ds-timepicker-separator {
  font-size: var(--ds-typography-desktop-h4-font-size);
  color: var(--ds-text-secondary);
  font-weight: 500;
}
/* Timepicker actions */
.ds-timepicker-actions {
  display: flex;
  gap: var(--ds-spacing-xs);
  padding: var(--ds-spacing-m);
  border-top: 1px solid var(--ds-border-primary);
  background-color: var(--ds-surface-secondary);
}
.ds-timepicker-action {
  flex: 1;
  padding: var(--ds-spacing-xs) var(--ds-spacing-m);
  background: none;
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-2xs);
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 500;
  color: var(--ds-text-primary);
  cursor: pointer;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-timepicker-action:hover {
  background-color: var(--ds-surface-primary);
  border-color: var(--ds-border-secondary);
}
.ds-timepicker-action:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-timepicker-action:disabled {
  opacity: var(--ds-opacity-disabled);
  cursor: not-allowed;
}
.ds-timepicker-action:disabled:hover {
  background-color: transparent;
  border-color: var(--ds-border-primary);
}
/* Timepicker presets */
.ds-timepicker-presets {
  padding: var(--ds-spacing-m);
  border-bottom: 1px solid var(--ds-border-primary);
}
.ds-timepicker-preset {
  display: block;
  width: 100%;
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  background: none;
  border: none;
  border-radius: var(--ds-border-radius-2xs);
  text-align: left;
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-primary);
  cursor: pointer;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-timepicker-preset:hover {
  background-color: var(--ds-surface-secondary);
}
.ds-timepicker-preset:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: -2px;
}
.ds-timepicker-preset-selected {
  background-color: var(--ds-interactive-primary-bg);
  color: var(--ds-interactive-primary);
  font-weight: 500;
}
/* Timepicker sizes */
.ds-timepicker-sm .ds-timepicker-input {
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  font-size: var(--ds-typography-desktop-small-font-size);
  min-width: 120px;
}
.ds-timepicker-sm .ds-timepicker-dropdown {
  min-width: 180px;
}
.ds-timepicker-sm .ds-timepicker-clock-face {
  width: 120px;
  height: 120px;
}
.ds-timepicker-lg .ds-timepicker-input {
  padding: var(--ds-spacing-m);
  font-size: var(--ds-typography-desktop-h4-font-size);
  min-width: 160px;
}
.ds-timepicker-lg .ds-timepicker-dropdown {
  min-width: 240px;
}
.ds-timepicker-lg .ds-timepicker-clock-face {
  width: 200px;
  height: 200px;
}
/* Timepicker variants */
.ds-timepicker-inline {
  position: static;
}
.ds-timepicker-inline .ds-timepicker-dropdown {
  position: static;
  box-shadow: none;
  border: none;
  animation: none;
  margin-top: var(--ds-spacing-s);
}
.ds-timepicker-bordered .ds-timepicker-input {
  border-width: 2px;
}
/* Timepicker with seconds */
.ds-timepicker-with-seconds .ds-timepicker-digital {
  gap: var(--ds-spacing-m);
}
/* Timepicker 12-hour format */
.ds-timepicker-12h .ds-timepicker-digital-group:last-child .ds-timepicker-digital-label {
  content: 'AM/PM';
}
/* Responsive adjustments */
@media (max-width: 640px) {
  .ds-timepicker-dropdown {
    position: fixed;
    top: auto !important;
    left: var(--ds-spacing-m) !important;
    right: var(--ds-spacing-m) !important;
    bottom: var(--ds-spacing-m) !important;
    max-width: none;
    width: auto;
    animation: timepickerSlideUp 0.3s ease-out;
  }

  .ds-timepicker-clock {
    padding: var(--ds-spacing-s);
  }

  .ds-timepicker-clock-face {
    width: 120px;
    height: 120px;
  }

  .ds-timepicker-digital {
    padding: var(--ds-spacing-s);
    flex-wrap: wrap;
    justify-content: center;
  }

  @keyframes timepickerSlideUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-timepicker-input {
    border-width: 2px;
  }

  .ds-timepicker-bordered .ds-timepicker-input {
    border-width: 3px;
  }

  .ds-timepicker-action {
    border-width: 2px;
  }

  .ds-timepicker-clock-face {
    border: 2px solid var(--ds-border-primary);
  }

  .ds-timepicker-digital-input {
    border-width: 2px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-timepicker-input,
  .ds-timepicker-preset,
  .ds-timepicker-action,
  .ds-timepicker-icon,
  .ds-timepicker-clock-hand {
    transition: none;
  }

  .ds-timepicker-dropdown {
    animation: none;
  }

  @media (max-width: 640px) {
    .ds-timepicker-dropdown {
      animation: none;
    }

    @keyframes timepickerSlideUp {
      animation: none;
    }
  }
}
/* Print styles */
@media print {
  .ds-timepicker-dropdown {
    display: none !important;
  }

  .ds-timepicker-input {
    border: 1px solid #000;
    background: #fff;
    color: #000;
  }

  .ds-timepicker-input:disabled {
    background: #fff;
    opacity: 1;
    color: #999;
  }
}
/* DS: toast.css - Toast component */
/* layer: components */
.ds-toast {
  position: fixed;
  z-index: var(--ds-z-index-toast);
  display: flex;
  align-items: flex-start;
  gap: var(--ds-spacing-s);
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  background-color: var(--ds-toast-bg);
  border: 1px solid var(--ds-toast-border);
  border-radius: var(--ds-border-radius-m);
  box-shadow: var(--ds-toast-shadow-1), var(--ds-toast-shadow-2);
  min-width: 280px;
  max-width: 400px;
  opacity: 0;
  transform: translateY(-100%);
  transition: all var(--ds-motion-duration-slow) var(--ds-motion-easing-standard);
  pointer-events: auto;
}
.ds-toast-show {
  opacity: 1;
  transform: translateY(0);
}
.ds-toast-hide {
  opacity: 0;
  transform: translateY(-100%);
}
/* Toast positions */
.ds-toast-top-left {
  top: var(--ds-spacing-l);
  left: var(--ds-spacing-l);
}
.ds-toast-top-right {
  top: var(--ds-spacing-l);
  right: var(--ds-spacing-l);
}
.ds-toast-bottom-left {
  bottom: var(--ds-spacing-l);
  left: var(--ds-spacing-l);
  transform: translateY(100%);
}
.ds-toast-bottom-left.ds-toast-show {
  transform: translateY(0);
}
.ds-toast-bottom-left.ds-toast-hide {
  transform: translateY(100%);
}
.ds-toast-bottom-right {
  bottom: var(--ds-spacing-l);
  right: var(--ds-spacing-l);
  transform: translateY(100%);
}
.ds-toast-bottom-right.ds-toast-show {
  transform: translateY(0);
}
.ds-toast-bottom-right.ds-toast-hide {
  transform: translateY(100%);
}
.ds-toast-top-center {
  top: var(--ds-spacing-l);
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
}
.ds-toast-top-center.ds-toast-show {
  transform: translateX(-50%) translateY(0);
}
.ds-toast-top-center.ds-toast-hide {
  transform: translateX(-50%) translateY(-100%);
}
.ds-toast-bottom-center {
  bottom: var(--ds-spacing-l);
  left: 50%;
  transform: translateX(-50%) translateY(100%);
}
.ds-toast-bottom-center.ds-toast-show {
  transform: translateX(-50%) translateY(0);
}
.ds-toast-bottom-center.ds-toast-hide {
  transform: translateX(-50%) translateY(100%);
}
/* Toast icon */
.ds-toast-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-top: 1px;
}
/* Toast content */
.ds-toast-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-2xs);
}
.ds-toast-title {
  font-size: var(--ds-typography-desktop-body-font-size);
  font-weight: 600;
  color: var(--ds-toast-fg);
  margin: 0;
  line-height: 1.4;
}
.ds-toast-description {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-toast-fg);
  margin: 0;
  line-height: 1.5;
  opacity: 0.9;
}
/* Toast close button */
.ds-toast-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--ds-spacing-2xs);
  color: var(--ds-toast-fg);
  border-radius: var(--ds-border-radius-2xs);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  flex-shrink: 0;
  opacity: 0.7;
}
.ds-toast-close:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.1);
}
.ds-toast-close:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
  opacity: 1;
}
/* Toast variants */
.ds-toast-info {
  background-color: var(--ds-toast-bg-info);
}
.ds-toast-success {
  background-color: var(--ds-toast-bg-success);
}
.ds-toast-warning {
  background-color: var(--ds-toast-bg-warning);
}
.ds-toast-error {
  background-color: var(--ds-toast-bg-error);
}
/* Toast with action */
.ds-toast-action {
  margin-top: var(--ds-spacing-xs);
  display: flex;
  gap: var(--ds-spacing-s);
  align-items: center;
}
.ds-toast-action .ds-btn {
  font-size: var(--ds-typography-desktop-small-font-size);
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
}
/* Toast stack */
.ds-toast-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-s);
}
.ds-toast-stack .ds-toast {
  margin-bottom: 0;
}
/* Toast progress bar */
.ds-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--ds-toast-progress);
  border-radius: 0 0 var(--ds-border-radius-m) var(--ds-border-radius-m);
  transform-origin: left;
  transform: scaleX(1);
  transition: transform linear;
}
.ds-toast-progress-paused {
  animation-play-state: paused;
}
/* Toast sizes */
.ds-toast-sm {
  min-width: 240px;
  max-width: 320px;
  padding: var(--ds-spacing-2xs) var(--ds-spacing-s);
}
.ds-toast-sm .ds-toast-icon {
  width: 1rem;
  height: 1rem;
}
.ds-toast-lg {
  min-width: 320px;
  max-width: 480px;
  padding: var(--ds-spacing-m) var(--ds-spacing-l);
}
.ds-toast-lg .ds-toast-icon {
  width: 1.5rem;
  height: 1.5rem;
}
/* Toast with undo action */
.ds-toast-undo {
  background-color: var(--ds-toast-bg);
  border-color: var(--ds-status-info);
}
.ds-toast-undo .ds-toast-action {
  margin-top: 0;
}
/* Swipe to dismiss */
.ds-toast-swipe {
  touch-action: pan-y;
  transform-origin: center;
}
.ds-toast-swipe.ds-toast-hide {
  transform: translateX(100%);
}
/* Toast container */
.ds-toast-container {
  position: fixed;
  pointer-events: none;
  z-index: var(--ds-z-index-toast);
}
.ds-toast-container-top-left {
  top: var(--ds-spacing-l);
  left: var(--ds-spacing-l);
}
.ds-toast-container-top-right {
  top: var(--ds-spacing-l);
  right: var(--ds-spacing-l);
}
.ds-toast-container-bottom-left {
  bottom: var(--ds-spacing-l);
  left: var(--ds-spacing-l);
}
.ds-toast-container-bottom-right {
  bottom: var(--ds-spacing-l);
  right: var(--ds-spacing-l);
}
.ds-toast-container-top-center {
  top: var(--ds-spacing-l);
  left: 50%;
  transform: translateX(-50%);
}
.ds-toast-container-bottom-center {
  bottom: var(--ds-spacing-l);
  left: 50%;
  transform: translateX(-50%);
}
/* Responsive toasts */
@media (max-width: 640px) {
  .ds-toast {
    position: fixed !important;
    top: auto !important;
    bottom: 20px !important;
    left: 20px !important;
    right: 20px !important;
    min-width: auto;
    max-width: none;
    transform: translateY(100%) !important;
  }

  .ds-toast-show {
    transform: translateY(0) !important;
  }

  .ds-toast-hide {
    transform: translateY(100%) !important;
  }

  .ds-toast-top-left,
  .ds-toast-top-right,
  .ds-toast-bottom-left,
  .ds-toast-bottom-right,
  .ds-toast-top-center,
  .ds-toast-bottom-center {
    left: 20px !important;
    right: 20px !important;
  }

  .ds-toast-container {
    left: 20px !important;
    right: 20px !important;
    width: auto !important;
  }
}
/* DS: toolbar.css - Toolbar component */
/* layer: components */
.ds-toolbar {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  flex-wrap: wrap;
}
.ds-toolbar-group {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-2xs);
  border-right: 1px solid var(--ds-border-secondary);
  padding-right: var(--ds-spacing-s);
  margin-right: var(--ds-spacing-xs);
}
.ds-toolbar-group:last-child {
  border-right: none;
  padding-right: 0;
  margin-right: 0;
}
.ds-toolbar-item {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  background: none;
  border: none;
  border-radius: var(--ds-border-radius-2xs);
  cursor: pointer;
  color: var(--ds-text-primary);
  font-size: var(--ds-typography-desktop-body-font-size);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  white-space: nowrap;
}
.ds-toolbar-item:hover {
  background-color: var(--ds-surface-secondary);
}
.ds-toolbar-item:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-toolbar-item:active {
  background-color: var(--ds-surface-tertiary);
  transform: scale(0.95);
}
.ds-toolbar-item:disabled {
  opacity: var(--ds-opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.ds-toolbar-item:disabled:hover {
  background-color: transparent;
  transform: none;
}
/* Toolbar item content */
.ds-toolbar-item-icon {
  width: 1rem;
  height: 1rem;
  color: var(--ds-text-secondary);
  flex-shrink: 0;
}
.ds-toolbar-item:hover .ds-toolbar-item-icon {
  color: var(--ds-text-primary);
}
.ds-toolbar-item-text {
  margin: 0;
  line-height: 1.4;
}
/* Toolbar item with badge */
.ds-toolbar-item-badge {
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
  background-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
  border-radius: var(--ds-border-radius-l);
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  font-weight: 500;
  flex-shrink: 0;
}
/* Toolbar item states */
.ds-toolbar-item-selected {
  background-color: var(--ds-interactive-primary-bg);
  color: var(--ds-interactive-primary);
  font-weight: 500;
}
.ds-toolbar-item-selected .ds-toolbar-item-icon {
  color: var(--ds-interactive-primary);
}
.ds-toolbar-item-selected:hover {
  background-color: var(--ds-interactive-primary-hover-bg);
}
/* Toolbar variants */
.ds-toolbar-compact {
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  gap: var(--ds-spacing-2xs);
}
.ds-toolbar-compact .ds-toolbar-group {
  padding-right: var(--ds-spacing-xs);
  margin-right: var(--ds-spacing-2xs);
}
.ds-toolbar-compact .ds-toolbar-item {
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
  gap: var(--ds-spacing-2xs);
}
.ds-toolbar-compact .ds-toolbar-item-icon {
  width: 0.875rem;
  height: 0.875rem;
}
.ds-toolbar-spacious {
  padding: var(--ds-spacing-m) var(--ds-spacing-l);
  gap: var(--ds-spacing-s);
}
.ds-toolbar-spacious .ds-toolbar-group {
  padding-right: var(--ds-spacing-m);
  margin-right: var(--ds-spacing-s);
}
.ds-toolbar-spacious .ds-toolbar-item {
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  gap: var(--ds-spacing-s);
}
.ds-toolbar-vertical {
  flex-direction: column;
  align-items: stretch;
  padding: var(--ds-spacing-m) var(--ds-spacing-s);
  gap: var(--ds-spacing-2xs);
}
.ds-toolbar-vertical .ds-toolbar-group {
  flex-direction: column;
  border-right: none;
  border-bottom: 1px solid var(--ds-border-secondary);
  padding-right: 0;
  padding-bottom: var(--ds-spacing-xs);
  margin-right: 0;
  margin-bottom: var(--ds-spacing-xs);
}
.ds-toolbar-vertical .ds-toolbar-group:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.ds-toolbar-vertical .ds-toolbar-item {
  justify-content: flex-start;
  width: 100%;
}
.ds-toolbar-transparent {
  background-color: transparent;
  border: none;
}
.ds-toolbar-bordered {
  border-width: 2px;
}
/* Toolbar with search */
.ds-toolbar-search {
  position: relative;
  flex: 1;
  min-width: 200px;
  margin-left: auto;
}
.ds-toolbar-search-input {
  width: 100%;
  padding: var(--ds-spacing-xs) var(--ds-spacing-s) var(--ds-spacing-xs) 2.5rem;
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-2xs);
  background-color: var(--ds-surface-secondary);
  color: var(--ds-text-primary);
  font-size: var(--ds-typography-desktop-body-font-size);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-toolbar-search-input:focus {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
  border-color: var(--ds-interactive-primary);
  background-color: var(--ds-surface-primary);
}
.ds-toolbar-search-input::-moz-placeholder {
  color: var(--ds-text-tertiary);
}
.ds-toolbar-search-input::placeholder {
  color: var(--ds-text-tertiary);
}
.ds-toolbar-search-icon {
  position: absolute;
  left: var(--ds-spacing-xs);
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--ds-text-secondary);
  pointer-events: none;
}
/* Toolbar with dropdown */
.ds-toolbar-dropdown {
  position: relative;
}
.ds-toolbar-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  background: none;
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-2xs);
  cursor: pointer;
  color: var(--ds-text-primary);
  font-size: var(--ds-typography-desktop-body-font-size);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-toolbar-dropdown-toggle:hover {
  background-color: var(--ds-surface-secondary);
  border-color: var(--ds-border-secondary);
}
.ds-toolbar-dropdown-toggle:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-toolbar-dropdown-menu {
  position: absolute;
  top: calc(100% + var(--ds-spacing-xs));
  right: 0;
  z-index: var(--ds-z-index-dropdown);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  box-shadow: var(--ds-shadow-lg);
  min-width: 200px;
  padding: var(--ds-spacing-xs);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-toolbar-dropdown-open .ds-toolbar-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ds-toolbar-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  background: none;
  border: none;
  border-radius: var(--ds-border-radius-2xs);
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-primary);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-toolbar-dropdown-item:hover {
  background-color: var(--ds-surface-secondary);
}
.ds-toolbar-dropdown-item:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: -2px;
}
.ds-toolbar-dropdown-item-selected {
  background-color: var(--ds-interactive-primary-bg);
  color: var(--ds-interactive-primary);
  font-weight: 500;
}
/* Toolbar overflow */
.ds-toolbar-overflow {
  position: relative;
}
.ds-toolbar-overflow-menu {
  position: absolute;
  top: calc(100% + var(--ds-spacing-xs));
  right: 0;
  z-index: var(--ds-z-index-dropdown);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  box-shadow: var(--ds-shadow-lg);
  min-width: 200px;
  padding: var(--ds-spacing-xs);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-toolbar-overflow-open .ds-toolbar-overflow-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Toolbar animations */
.ds-toolbar-item-entering {
  animation: toolbarItemFadeIn 0.3s ease-out;
}
.ds-toolbar-item-exiting {
  animation: toolbarItemFadeOut 0.2s ease-in;
}
@keyframes toolbarItemFadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes toolbarItemFadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ds-toolbar {
    padding: var(--ds-spacing-xs) var(--ds-spacing-s);
    gap: var(--ds-spacing-2xs);
  }

  .ds-toolbar-compact {
    padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
  }

  .ds-toolbar-spacious {
    padding: var(--ds-spacing-s) var(--ds-spacing-m);
  }

  .ds-toolbar-vertical {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ds-toolbar-vertical .ds-toolbar-group {
    flex-direction: row;
    border-bottom: none;
    border-right: 1px solid var(--ds-border-secondary);
    padding-bottom: 0;
    padding-right: var(--ds-spacing-xs);
    margin-bottom: 0;
    margin-right: var(--ds-spacing-xs);
  }

  .ds-toolbar-vertical .ds-toolbar-item {
    justify-content: center;
  }

  .ds-toolbar-search {
    min-width: 150px;
  }
}
@media (max-width: 480px) {
  .ds-toolbar {
    flex-direction: column;
    align-items: stretch;
    padding: var(--ds-spacing-xs);
    gap: var(--ds-spacing-2xs);
  }

  .ds-toolbar-group {
    flex-direction: column;
    border-right: none;
    border-bottom: 1px solid var(--ds-border-secondary);
    padding-right: 0;
    padding-bottom: var(--ds-spacing-xs);
    margin-right: 0;
    margin-bottom: var(--ds-spacing-xs);
  }

  .ds-toolbar-group:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .ds-toolbar-item {
    justify-content: flex-start;
    width: 100%;
  }

  .ds-toolbar-search {
    min-width: auto;
    margin-left: 0;
    margin-top: var(--ds-spacing-xs);
  }

  .ds-toolbar-dropdown-menu,
  .ds-toolbar-overflow-menu {
    position: fixed;
    top: auto !important;
    left: var(--ds-spacing-m) !important;
    right: var(--ds-spacing-m) !important;
    bottom: var(--ds-spacing-m) !important;
    max-width: none;
    width: auto;
    animation: toolbarMenuSlideUp 0.3s ease-out;
  }

  @keyframes toolbarMenuSlideUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-toolbar {
    border-width: 2px;
  }

  .ds-toolbar-group {
    border-right-width: 2px;
  }

  .ds-toolbar-vertical .ds-toolbar-group {
    border-bottom-width: 2px;
  }

  .ds-toolbar-bordered {
    border-width: 3px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-toolbar-item,
  .ds-toolbar-search-input,
  .ds-toolbar-dropdown-toggle,
  .ds-toolbar-dropdown-item {
    transition: none;
  }

  .ds-toolbar-dropdown-menu,
  .ds-toolbar-overflow-menu {
    transition: none;
  }

  .ds-toolbar-item-entering,
  .ds-toolbar-item-exiting {
    animation: none;
  }

  @media (max-width: 480px) {
    .ds-toolbar-dropdown-menu,
    .ds-toolbar-overflow-menu {
      animation: none;
    }

    @keyframes toolbarMenuSlideUp {
      animation: none;
    }
  }
}
/* Print styles */
@media print {
  .ds-toolbar {
    border: 1px solid #000;
    background: #fff;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }

  .ds-toolbar-dropdown-menu,
  .ds-toolbar-overflow-menu {
    display: none !important;
  }

  .ds-toolbar-item-entering,
  .ds-toolbar-item-exiting {
    animation: none;
  }
}
/* DS: toolbar-group.css - Toolbar group component */
/* layer: components */
.ds-toolbar-group {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
  padding: var(--ds-spacing-xs);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  flex-wrap: wrap;
}
.ds-toolbar-group-item {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  background-color: var(--ds-surface-secondary);
  border: 1px solid var(--ds-border-secondary);
  border-radius: var(--ds-border-radius-2xs);
  cursor: pointer;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  position: relative;
  white-space: nowrap;
}
.ds-toolbar-group-item:hover {
  background-color: var(--ds-surface-tertiary);
  border-color: var(--ds-border-primary);
}
.ds-toolbar-group-item:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-toolbar-group-item:active {
  background-color: var(--ds-surface-primary);
  transform: scale(0.95);
}
/* Toolbar group item content */
.ds-toolbar-group-item-content {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
}
.ds-toolbar-group-item-text {
  font-size: var(--ds-typography-desktop-body-font-size);
  font-weight: 500;
  color: var(--ds-text-primary);
  margin: 0;
}
/* Toolbar group item icon */
.ds-toolbar-group-item-icon {
  width: 1rem;
  height: 1rem;
  color: var(--ds-text-secondary);
  flex-shrink: 0;
}
.ds-toolbar-group-item:hover .ds-toolbar-group-item-icon {
  color: var(--ds-text-primary);
}
/* Toolbar group item badge */
.ds-toolbar-group-item-badge {
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
  background-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
  border-radius: var(--ds-border-radius-l);
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  font-weight: 500;
  flex-shrink: 0;
}
/* Toolbar group item states */
.ds-toolbar-group-item-selected {
  background-color: var(--ds-interactive-primary);
  border-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
}
.ds-toolbar-group-item-selected .ds-toolbar-group-item-text {
  color: var(--ds-text-inverse);
}
.ds-toolbar-group-item-selected .ds-toolbar-group-item-icon {
  color: var(--ds-text-inverse);
}
.ds-toolbar-group-item-selected .ds-toolbar-group-item-badge {
  background-color: var(--ds-text-inverse);
  color: var(--ds-interactive-primary);
}
.ds-toolbar-group-item-disabled {
  opacity: var(--ds-opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.ds-toolbar-group-item-disabled .ds-toolbar-group-item-text {
  color: var(--ds-text-disabled);
}
.ds-toolbar-group-item-disabled .ds-toolbar-group-item-icon {
  color: var(--ds-text-disabled);
}
/* Toolbar group variants */
.ds-toolbar-group-compact {
  padding: var(--ds-spacing-2xs);
  gap: var(--ds-spacing-2xs);
}
.ds-toolbar-group-compact .ds-toolbar-group-item {
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
  gap: var(--ds-spacing-2xs);
}
.ds-toolbar-group-compact .ds-toolbar-group-item-text {
  font-size: var(--ds-typography-desktop-small-font-size);
}
.ds-toolbar-group-spacious {
  padding: var(--ds-spacing-s);
  gap: var(--ds-spacing-s);
}
.ds-toolbar-group-spacious .ds-toolbar-group-item {
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  gap: var(--ds-spacing-s);
}
.ds-toolbar-group-vertical {
  flex-direction: column;
  align-items: stretch;
  gap: var(--ds-spacing-2xs);
}
.ds-toolbar-group-vertical .ds-toolbar-group-item {
  justify-content: flex-start;
}
.ds-toolbar-group-connected {
  border-radius: var(--ds-border-radius-m);
  overflow: hidden;
  padding: 0;
}
.ds-toolbar-group-connected .ds-toolbar-group-item {
  border-radius: 0;
  border-left-width: 0;
  margin-left: 0;
}
.ds-toolbar-group-connected .ds-toolbar-group-item:first-child {
  border-left-width: 1px;
  border-top-left-radius: var(--ds-border-radius-m);
  border-bottom-left-radius: var(--ds-border-radius-m);
}
.ds-toolbar-group-connected .ds-toolbar-group-item:last-child {
  border-top-right-radius: var(--ds-border-radius-m);
  border-bottom-right-radius: var(--ds-border-radius-m);
}
.ds-toolbar-group-connected .ds-toolbar-group-item:only-child {
  border-radius: var(--ds-border-radius-m);
}
/* Toolbar group with dropdown */
.ds-toolbar-group-dropdown {
  position: relative;
}
.ds-toolbar-group-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  background-color: var(--ds-surface-secondary);
  border: 1px solid var(--ds-border-secondary);
  border-radius: var(--ds-border-radius-2xs);
  cursor: pointer;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-toolbar-group-dropdown-toggle:hover {
  background-color: var(--ds-surface-tertiary);
  border-color: var(--ds-border-primary);
}
.ds-toolbar-group-dropdown-toggle:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-toolbar-group-dropdown-menu {
  position: absolute;
  top: calc(100% + var(--ds-spacing-xs));
  left: 0;
  z-index: var(--ds-z-index-dropdown);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  box-shadow: var(--ds-shadow-lg);
  min-width: 200px;
  padding: var(--ds-spacing-xs);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-toolbar-group-dropdown-open .ds-toolbar-group-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ds-toolbar-group-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  background: none;
  border: none;
  border-radius: var(--ds-border-radius-2xs);
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-toolbar-group-dropdown-item:hover {
  background-color: var(--ds-surface-secondary);
}
.ds-toolbar-group-dropdown-item:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: -2px;
}
.ds-toolbar-group-dropdown-item-selected {
  background-color: var(--ds-interactive-primary-bg);
  color: var(--ds-interactive-primary);
  font-weight: 500;
}
/* Toolbar group with search */
.ds-toolbar-group-search {
  position: relative;
}
.ds-toolbar-group-search-input {
  padding-left: 2.5rem;
  background-color: var(--ds-surface-secondary);
  border: 1px solid var(--ds-border-secondary);
  border-radius: var(--ds-border-radius-2xs);
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-primary);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-toolbar-group-search-input:focus {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
  border-color: var(--ds-interactive-primary);
}
.ds-toolbar-group-search-icon {
  position: absolute;
  left: var(--ds-spacing-xs);
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--ds-text-secondary);
  pointer-events: none;
}
/* Toolbar group with overflow */
.ds-toolbar-group-overflow {
  position: relative;
}
.ds-toolbar-group-overflow-menu {
  position: absolute;
  top: calc(100% + var(--ds-spacing-xs));
  right: 0;
  z-index: var(--ds-z-index-dropdown);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  box-shadow: var(--ds-shadow-lg);
  min-width: 200px;
  padding: var(--ds-spacing-xs);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-toolbar-group-overflow-open .ds-toolbar-group-overflow-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Toolbar group animations */
.ds-toolbar-group-item-entering {
  animation: toolbarGroupItemSlideIn 0.3s ease-out;
}
.ds-toolbar-group-item-exiting {
  animation: toolbarGroupItemSlideOut 0.2s ease-in;
}
@keyframes toolbarGroupItemSlideIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes toolbarGroupItemSlideOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ds-toolbar-group {
    gap: var(--ds-spacing-2xs);
  }

  .ds-toolbar-group-compact {
    padding: var(--ds-spacing-2xs);
  }

  .ds-toolbar-group-spacious {
    padding: var(--ds-spacing-xs);
  }

  .ds-toolbar-group-vertical {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ds-toolbar-group-connected {
    flex-wrap: wrap;
  }
}
@media (max-width: 480px) {
  .ds-toolbar-group {
    padding: var(--ds-spacing-2xs);
    gap: var(--ds-spacing-2xs);
  }

  .ds-toolbar-group-item {
    padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
    min-width: 0;
    flex-shrink: 1;
  }

  .ds-toolbar-group-item-text {
    font-size: var(--ds-typography-desktop-small-font-size);
  }

  .ds-toolbar-group-dropdown-menu,
  .ds-toolbar-group-overflow-menu {
    position: fixed;
    top: auto !important;
    left: var(--ds-spacing-m) !important;
    right: var(--ds-spacing-m) !important;
    bottom: var(--ds-spacing-m) !important;
    max-width: none;
    width: auto;
    animation: toolbarGroupMenuSlideUp 0.3s ease-out;
  }

  @keyframes toolbarGroupMenuSlideUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-toolbar-group {
    border-width: 2px;
  }

  .ds-toolbar-group-item {
    border-width: 2px;
  }

  .ds-toolbar-group-item-selected {
    border-width: 3px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-toolbar-group-item,
  .ds-toolbar-group-dropdown-toggle,
  .ds-toolbar-group-dropdown-item,
  .ds-toolbar-group-search-input {
    transition: none;
  }

  .ds-toolbar-group-dropdown-menu,
  .ds-toolbar-group-overflow-menu {
    transition: none;
  }

  .ds-toolbar-group-item-entering,
  .ds-toolbar-group-item-exiting {
    animation: none;
  }

  @media (max-width: 480px) {
    .ds-toolbar-group-dropdown-menu,
    .ds-toolbar-group-overflow-menu {
      animation: none;
    }

    @keyframes toolbarGroupMenuSlideUp {
      animation: none;
    }
  }
}
/* Print styles */
@media print {
  .ds-toolbar-group {
    border: 1px solid #000;
    background: #fff;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }

  .ds-toolbar-group-dropdown-menu,
  .ds-toolbar-group-overflow-menu {
    display: none !important;
  }

  .ds-toolbar-group-item-entering,
  .ds-toolbar-group-item-exiting {
    animation: none;
  }
}
/* DS: tooltip.css - Tooltip component */
/* layer: components */
.ds-tooltip {
  position: relative;
  display: inline-block;
}
.ds-tooltip-trigger {
  cursor: help;
}
.ds-tooltip-content {
  position: absolute;
  z-index: var(--ds-z-index-tooltip);
  max-width: var(--ds-tooltip-max-width);
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  background-color: var(--ds-tooltip-bg);
  color: var(--ds-tooltip-fg);
  border-radius: var(--ds-border-radius-s);
  font-size: var(--ds-typography-desktop-small-font-size);
  line-height: 1.4;
  text-align: center;
  box-shadow: var(--ds-tooltip-shadow-1), var(--ds-tooltip-shadow-2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  white-space: normal;
  word-wrap: break-word;
}
.ds-tooltip-open .ds-tooltip-content {
  opacity: 1;
  visibility: visible;
}
/* Tooltip positions */
.ds-tooltip-top .ds-tooltip-content {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  margin-bottom: var(--ds-spacing-xs);
}
.ds-tooltip-top.ds-tooltip-open .ds-tooltip-content {
  transform: translateX(-50%) translateY(0);
}
.ds-tooltip-bottom .ds-tooltip-content {
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  margin-top: var(--ds-spacing-xs);
}
.ds-tooltip-bottom.ds-tooltip-open .ds-tooltip-content {
  transform: translateX(-50%) translateY(0);
}
.ds-tooltip-left .ds-tooltip-content {
  right: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(-8px);
  margin-right: var(--ds-spacing-xs);
}
.ds-tooltip-left.ds-tooltip-open .ds-tooltip-content {
  transform: translateY(-50%) translateX(0);
}
.ds-tooltip-right .ds-tooltip-content {
  left: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  margin-left: var(--ds-spacing-xs);
}
.ds-tooltip-right.ds-tooltip-open .ds-tooltip-content {
  transform: translateY(-50%) translateX(0);
}
/* Tooltip arrow */
.ds-tooltip-content::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 6px solid transparent;
}
.ds-tooltip-top .ds-tooltip-content::after {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: var(--ds-tooltip-arrow);
  border-bottom: none;
}
.ds-tooltip-bottom .ds-tooltip-content::after {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: var(--ds-tooltip-arrow);
  border-top: none;
}
.ds-tooltip-left .ds-tooltip-content::after {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: var(--ds-tooltip-arrow);
  border-right: none;
}
.ds-tooltip-right .ds-tooltip-content::after {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: var(--ds-tooltip-arrow);
  border-left: none;
}
/* Tooltip variants */
.ds-tooltip-light .ds-tooltip-content {
  background-color: var(--ds-tooltip-bg);
  color: var(--ds-tooltip-fg);
}
.ds-tooltip-dark .ds-tooltip-content {
  background-color: var(--ds-tooltip-bg);
  color: var(--ds-tooltip-fg);
}
.ds-tooltip-success .ds-tooltip-content {
  background-color: var(--ds-status-success);
  color: white;
}
.ds-tooltip-success .ds-tooltip-content::after {
  border-top-color: var(--ds-status-success);
}
.ds-tooltip-error .ds-tooltip-content {
  background-color: var(--ds-status-error);
  color: white;
}
.ds-tooltip-error .ds-tooltip-content::after {
  border-top-color: var(--ds-status-error);
}
.ds-tooltip-warning .ds-tooltip-content {
  background-color: var(--ds-status-warning);
  color: white;
}
.ds-tooltip-warning .ds-tooltip-content::after {
  border-top-color: var(--ds-status-warning);
}
.ds-tooltip-info .ds-tooltip-content {
  background-color: var(--ds-status-info);
  color: white;
}
.ds-tooltip-info .ds-tooltip-content::after {
  border-top-color: var(--ds-status-info);
}
/* Tooltip sizes */
.ds-tooltip-sm .ds-tooltip-content {
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
  font-size: var(--ds-typography-desktop-extra-small-font-size);
}
.ds-tooltip-lg .ds-tooltip-content {
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
  font-size: var(--ds-typography-desktop-body-font-size);
}
/* Interactive tooltip */
.ds-tooltip-interactive .ds-tooltip-content {
  pointer-events: auto;
}
.ds-tooltip-interactive .ds-tooltip-content:hover {
  opacity: 1;
  visibility: visible;
}
/* Tooltip with delay */
.ds-tooltip-delayed .ds-tooltip-content {
  transition-delay: 0.5s;
}
.ds-tooltip-delayed.ds-tooltip-open .ds-tooltip-content {
  transition-delay: 0s;
}
/* Disabled tooltip */
.ds-tooltip-disabled {
  cursor: not-allowed;
}
.ds-tooltip-disabled .ds-tooltip-trigger {
  cursor: not-allowed;
}
/* Responsive tooltips */
@media (max-width: 640px) {
  .ds-tooltip-content {
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    right: 20px !important;
    top: auto !important;
    transform: translateY(100%) !important;
    margin: 0;
    max-width: none;
    text-align: center;
  }

  .ds-tooltip-open .ds-tooltip-content {
    transform: translateY(0) !important;
  }

  .ds-tooltip-content::after {
    display: none;
  }
}
/* DS: tour.css - Tour component */
/* layer: components */
.ds-tour {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--ds-z-index-modal);
  pointer-events: none;
}
.ds-tour-step {
  position: absolute;
  z-index: var(--ds-z-index-modal);
  pointer-events: auto;
  max-width: 320px;
}
.ds-tour-step-content {
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  box-shadow: var(--ds-shadow-xl);
  padding: var(--ds-spacing-l);
  position: relative;
}
.ds-tour-step-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}
.ds-tour-step-arrow-top {
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px 8px 0 8px;
  border-color: var(--ds-surface-primary) transparent transparent transparent;
}
.ds-tour-step-arrow-top::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -8px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 8px 0 8px;
  border-color: var(--ds-border-primary) transparent transparent transparent;
}
.ds-tour-step-arrow-bottom {
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent var(--ds-surface-primary) transparent;
}
.ds-tour-step-arrow-bottom::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: -8px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent var(--ds-border-primary) transparent;
}
.ds-tour-step-arrow-left {
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 8px 0 8px 8px;
  border-color: transparent transparent transparent var(--ds-surface-primary);
}
.ds-tour-step-arrow-left::before {
  content: '';
  position: absolute;
  left: -1px;
  top: -8px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 8px;
  border-color: transparent transparent transparent var(--ds-border-primary);
}
.ds-tour-step-arrow-right {
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 8px 8px 8px 0;
  border-color: transparent var(--ds-surface-primary) transparent transparent;
}
.ds-tour-step-arrow-right::before {
  content: '';
  position: absolute;
  right: -1px;
  top: -8px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 8px 8px 0;
  border-color: transparent var(--ds-border-primary) transparent transparent;
}
/* Tour step header */
.ds-tour-step-header {
  margin-bottom: var(--ds-spacing-m);
}
.ds-tour-step-title {
  font-size: var(--ds-typography-desktop-h4-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-spacing-xs) 0;
}
.ds-tour-step-description {
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-secondary);
  margin: 0;
  line-height: 1.5;
}
/* Tour step actions */
.ds-tour-step-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--ds-spacing-l);
  gap: var(--ds-spacing-s);
}
.ds-tour-step-prev,
.ds-tour-step-next,
.ds-tour-step-finish {
  padding: var(--ds-spacing-xs) var(--ds-spacing-m);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-2xs);
  background-color: var(--ds-surface-primary);
  color: var(--ds-text-primary);
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-tour-step-prev:hover,
.ds-tour-step-next:hover,
.ds-tour-step-finish:hover {
  background-color: var(--ds-surface-secondary);
  border-color: var(--ds-border-secondary);
}
.ds-tour-step-prev:focus-visible,
.ds-tour-step-next:focus-visible,
.ds-tour-step-finish:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-tour-step-prev:disabled,
.ds-tour-step-next:disabled {
  opacity: var(--ds-opacity-disabled);
  cursor: not-allowed;
}
.ds-tour-step-prev:disabled:hover,
.ds-tour-step-next:disabled:hover {
  background-color: var(--ds-surface-primary);
  border-color: var(--ds-border-primary);
}
.ds-tour-step-next {
  background-color: var(--ds-interactive-primary);
  border-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
}
.ds-tour-step-next:hover {
  background-color: var(--ds-interactive-primary-hover);
  border-color: var(--ds-interactive-primary-hover);
}
.ds-tour-step-finish {
  background-color: var(--ds-status-success);
  border-color: var(--ds-status-success);
  color: var(--ds-text-inverse);
}
.ds-tour-step-finish:hover {
  background-color: var(--ds-status-success-hover);
  border-color: var(--ds-status-success-hover);
}
/* Tour step close */
.ds-tour-step-close {
  position: absolute;
  top: var(--ds-spacing-s);
  right: var(--ds-spacing-s);
  width: 1.5rem;
  height: 1.5rem;
  background: none;
  border: none;
  border-radius: var(--ds-border-radius-2xs);
  cursor: pointer;
  color: var(--ds-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-tour-step-close:hover {
  background-color: var(--ds-surface-secondary);
  color: var(--ds-text-primary);
}
.ds-tour-step-close:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
/* Tour step progress */
.ds-tour-step-progress {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
  margin-bottom: var(--ds-spacing-m);
}
.ds-tour-step-dots {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-2xs);
}
.ds-tour-step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--ds-surface-tertiary);
  transition: background-color var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-tour-step-dot-active {
  background-color: var(--ds-interactive-primary);
}
.ds-tour-step-counter {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  font-weight: 500;
}
/* Tour overlay */
.ds-tour-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--ds-surface-overlay);
  z-index: var(--ds-z-index-modal-backdrop);
  pointer-events: auto;
}
/* Tour spotlight */
.ds-tour-spotlight {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: var(--ds-border-radius-m);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: var(--ds-z-index-modal-backdrop);
}
.ds-tour-spotlight-round {
  border-radius: 50%;
}
/* Tour beacon */
.ds-tour-beacon {
  position: absolute;
  width: 24px;
  height: 24px;
  background-color: var(--ds-interactive-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: var(--ds-z-index-modal);
  animation: tourBeaconPulse 2s ease-in-out infinite;
}
@keyframes tourBeaconPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
}
.ds-tour-beacon-icon {
  width: 12px;
  height: 12px;
  color: var(--ds-text-inverse);
}
/* Tour animations */
.ds-tour-step-entering {
  animation: tourStepFadeIn 0.3s ease-out;
}
.ds-tour-step-exiting {
  animation: tourStepFadeOut 0.2s ease-in;
}
@keyframes tourStepFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes tourStepFadeOut {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.9) translateY(-10px);
  }
}
/* Tour sizes */
.ds-tour-step-sm {
  max-width: 280px;
}
.ds-tour-step-sm .ds-tour-step-content {
  padding: var(--ds-spacing-m);
}
.ds-tour-step-lg {
  max-width: 400px;
}
.ds-tour-step-lg .ds-tour-step-content {
  padding: var(--ds-spacing-xl);
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ds-tour-step {
    position: fixed !important;
    top: auto !important;
    left: var(--ds-spacing-m) !important;
    right: var(--ds-spacing-m) !important;
    bottom: var(--ds-spacing-m) !important;
    max-width: none;
    transform: none !important;
  }

  .ds-tour-step-content {
    margin: 0;
  }

  .ds-tour-step-arrow {
    display: none;
  }

  .ds-tour-step-actions {
    flex-direction: column;
    align-items: stretch;
  }
}
@media (max-width: 480px) {
  .ds-tour-step {
    left: var(--ds-spacing-s) !important;
    right: var(--ds-spacing-s) !important;
    bottom: var(--ds-spacing-s) !important;
  }

  .ds-tour-step-content {
    padding: var(--ds-spacing-m);
  }

  .ds-tour-step-title {
    font-size: var(--ds-typography-desktop-h3-font-size);
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-tour-step-content {
    border-width: 2px;
  }

  .ds-tour-step-arrow-top::before,
  .ds-tour-step-arrow-bottom::before,
  .ds-tour-step-arrow-left::before,
  .ds-tour-step-arrow-right::before {
    border-width: 9px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-tour-step-prev,
  .ds-tour-step-next,
  .ds-tour-step-finish,
  .ds-tour-step-close {
    transition: none;
  }

  .ds-tour-beacon {
    animation: none;
  }

  .ds-tour-step-dot {
    transition: none;
  }

  .ds-tour-step-entering,
  .ds-tour-step-exiting {
    animation: none;
  }

  @keyframes tourBeaconPulse,
  @keyframes tourStepFadeIn,
  @keyframes tourStepFadeOut {
    animation: none;
  }
}
/* Print styles */
@media print {
  .ds-tour,
  .ds-tour-overlay,
  .ds-tour-spotlight,
  .ds-tour-beacon {
    display: none !important;
  }
}
/* DS: tree.css - Tree component for decision tree builder */
/* layer: components */
.tree-node {
  transition: margin var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.tree-children {
  margin-top: var(--ds-spacing-s);
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tree-node {
    transition: none;
  }
}
/* DS: splitter.css - Splitter component for resizable panels */
/* layer: components */
.ds-splitter {
  display: grid;
  grid-template-columns: calc(var(--left, 60) * 1%) 4px calc((100 - var(--left, 60)) * 1%);
  gap: 0;
}
.ds-splitter-handle {
  background-color: var(--ds-border-primary);
  cursor: col-resize;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: relative;
  transition: background-color var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}
.ds-splitter-handle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 32px;
  background-color: var(--ds-text-tertiary);
  border-radius: 1px;
}
.ds-splitter-handle:hover {
  background-color: var(--ds-border-secondary);
}
.ds-splitter-handle:hover::before {
  background-color: var(--ds-text-secondary);
}
.ds-splitter-handle:active {
  background-color: var(--ds-interactive-primary);
}
/* Panel within splitter */
.ds-splitter .ds-panel {
  min-width: 0;
}
.ds-splitter .ds-panel-body {
  overflow: visible;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-splitter-handle {
    transition: none;
  }
}
/* DS: upload.css - Upload component */
/* layer: components */
.ds-upload {
  display: inline-block;
  position: relative;
}
.ds-upload-input {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}
.ds-upload-input:disabled {
  cursor: not-allowed;
}
/* Upload drag and drop */
.ds-upload-draggable {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: var(--ds-spacing-l);
  border: 2px dashed var(--ds-upload-border);
  border-radius: var(--ds-border-radius-m);
  background-color: var(--ds-upload-bg);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  cursor: pointer;
}
.ds-upload-draggable:hover {
  border-color: var(--ds-upload-border-hover);
  background-color: var(--ds-upload-bg-hover);
}
.ds-upload-draggable.ds-upload-drag-over {
  border-color: var(--ds-interactive-primary);
  background-color: var(--ds-interactive-primary-bg);
  transform: scale(1.02);
}
.ds-upload-draggable.ds-upload-disabled {
  border-color: var(--ds-upload-border-disabled);
  background-color: var(--ds-upload-bg-disabled);
  cursor: not-allowed;
  opacity: var(--ds-opacity-disabled);
}
.ds-upload-draggable.ds-upload-disabled:hover {
  border-color: var(--ds-upload-border-disabled);
  background-color: var(--ds-upload-bg-disabled);
  transform: none;
}
/* Upload content */
.ds-upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-spacing-s);
  text-align: center;
  color: var(--ds-upload-fg);
}
.ds-upload-icon {
  width: 2rem;
  height: 2rem;
  color: var(--ds-upload-icon-fg);
  flex-shrink: 0;
}
.ds-upload-text {
  font-size: var(--ds-typography-desktop-body-font-size);
  font-weight: 500;
  color: var(--ds-upload-text-fg);
}
.ds-upload-hint {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-upload-hint-fg);
  margin: 0;
}
/* Upload button style */
.ds-upload-button {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
  padding: var(--ds-spacing-xs) var(--ds-spacing-m);
  background-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
  border: 1px solid var(--ds-interactive-primary);
  border-radius: var(--ds-border-radius-m);
  font-size: var(--ds-typography-desktop-body-font-size);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  text-decoration: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.ds-upload-button:hover {
  background-color: var(--ds-interactive-primary-hover);
  border-color: var(--ds-interactive-primary-hover);
}
.ds-upload-button:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-upload-button:active {
  background-color: var(--ds-interactive-primary-active);
  transform: translateY(1px);
}
.ds-upload-button:disabled {
  background-color: var(--ds-surface-tertiary);
  border-color: var(--ds-border-primary);
  color: var(--ds-text-disabled);
  cursor: not-allowed;
  transform: none;
}
.ds-upload-button-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
/* Upload picture card */
.ds-upload-picture-card {
  position: relative;
  display: inline-block;
  width: 104px;
  height: 104px;
  margin-right: var(--ds-spacing-s);
  margin-bottom: var(--ds-spacing-s);
  text-align: center;
  vertical-align: top;
  background-color: var(--ds-surface-secondary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  cursor: pointer;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
  overflow: hidden;
}
.ds-upload-picture-card:hover {
  border-color: var(--ds-interactive-primary);
}
.ds-upload-picture-card-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--ds-text-tertiary);
}
.ds-upload-picture-card-upload .ds-upload-icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: var(--ds-spacing-2xs);
}
.ds-upload-picture-card-upload-text {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  margin: 0;
}
.ds-upload-picture-card-loading {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
}
.ds-upload-picture-card img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.ds-upload-picture-card-remove {
  position: absolute;
  top: var(--ds-spacing-2xs);
  right: var(--ds-spacing-2xs);
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-upload-picture-card:hover .ds-upload-picture-card-remove {
  opacity: 1;
}
.ds-upload-picture-card-remove:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
/* Upload file list */
.ds-upload-list {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-s);
}
.ds-upload-list-item {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  padding: var(--ds-spacing-s);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-upload-list-item:hover {
  border-color: var(--ds-border-secondary);
}
.ds-upload-list-item-error {
  border-color: var(--ds-status-error);
  background-color: var(--ds-status-error-bg);
}
.ds-upload-list-item-success {
  border-color: var(--ds-status-success);
  background-color: var(--ds-status-success-bg);
}
.ds-upload-list-item-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--ds-text-secondary);
  flex-shrink: 0;
}
.ds-upload-list-item-info {
  flex: 1;
  min-width: 0;
}
.ds-upload-list-item-name {
  font-size: var(--ds-typography-desktop-body-font-size);
  font-weight: 500;
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-spacing-2xs) 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-upload-list-item-size {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  margin: 0;
}
.ds-upload-list-item-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
}
.ds-upload-list-item-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--ds-text-secondary);
  border-radius: var(--ds-border-radius-2xs);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-upload-list-item-action:hover {
  background-color: var(--ds-surface-secondary);
  color: var(--ds-text-primary);
}
.ds-upload-list-item-action:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
/* Upload progress */
.ds-upload-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--ds-surface-tertiary);
  border-radius: 0 0 var(--ds-border-radius-m) var(--ds-border-radius-m);
  overflow: hidden;
}
.ds-upload-progress-bar {
  height: 100%;
  background-color: var(--ds-interactive-primary);
  transition: width var(--ds-motion-duration-slow) var(--ds-motion-easing-standard);
  border-radius: inherit;
}
.ds-upload-progress-error .ds-upload-progress-bar {
  background-color: var(--ds-status-error);
}
.ds-upload-progress-success .ds-upload-progress-bar {
  background-color: var(--ds-status-success);
}
/* Upload multiple */
.ds-upload-multiple .ds-upload-draggable {
  margin-bottom: var(--ds-spacing-m);
}
/* Upload directory */
.ds-upload-directory {
  /* Special styling for directory uploads */
}
.ds-upload-directory .ds-upload-icon {
  color: var(--ds-status-info);
}
/* Upload sizes */
.ds-upload-sm .ds-upload-draggable {
  min-height: 80px;
  padding: var(--ds-spacing-m);
}
.ds-upload-sm .ds-upload-icon {
  width: 1.5rem;
  height: 1.5rem;
}
.ds-upload-lg .ds-upload-draggable {
  min-height: 160px;
  padding: var(--ds-spacing-xl);
}
.ds-upload-lg .ds-upload-icon {
  width: 3rem;
  height: 3rem;
}
/* Upload states */
.ds-upload-loading .ds-upload-draggable {
  pointer-events: none;
}
.ds-upload-loading .ds-upload-icon {
  animation: uploadSpin 1s linear infinite;
}
@keyframes uploadSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* Responsive adjustments */
@media (max-width: 640px) {
  .ds-upload-draggable {
    min-height: 100px;
    padding: var(--ds-spacing-m);
  }

  .ds-upload-content {
    gap: var(--ds-spacing-xs);
  }

  .ds-upload-text {
    font-size: var(--ds-typography-mobile-body-font-size);
  }

  .ds-upload-hint {
    font-size: var(--ds-typography-mobile-small-font-size);
  }

  .ds-upload-picture-card {
    width: 80px;
    height: 80px;
  }

  .ds-upload-list-item {
    padding: var(--ds-spacing-xs);
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-upload-draggable {
    border-width: 3px;
  }

  .ds-upload-button {
    border-width: 2px;
  }

  .ds-upload-picture-card {
    border-width: 2px;
  }

  .ds-upload-list-item {
    border-width: 2px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-upload-draggable {
    transition: none;
  }

  .ds-upload-draggable.ds-upload-drag-over {
    transform: none;
  }

  .ds-upload-button {
    transition: none;
  }

  .ds-upload-button:active {
    transform: none;
  }

  .ds-upload-picture-card {
    transition: none;
  }

  .ds-upload-list-item {
    transition: none;
  }

  .ds-upload-progress-bar {
    transition: none;
  }

  .ds-upload-picture-card-remove {
    transition: none;
  }

  .ds-upload-list-item-action {
    transition: none;
  }

  .ds-upload-loading .ds-upload-icon {
    animation: none;
  }
}
/* Print styles */
@media print {
  .ds-upload-draggable,
  .ds-upload-button,
  .ds-upload-picture-card {
    border: 2px dashed #000;
    background: #fff;
  }

  .ds-upload-input {
    display: none;
  }

  .ds-upload-content {
    color: #000;
  }

  .ds-upload-progress {
    display: none;
  }
}
/* DS: wizard.css - Wizard component */
/* layer: components */
.ds-wizard {
  display: flex;
  flex-direction: column;
  min-height: 400px;
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  overflow: hidden;
}
/* Wizard header */
.ds-wizard-header {
  padding: var(--ds-spacing-l) var(--ds-spacing-xl);
  border-bottom: 1px solid var(--ds-border-primary);
  background-color: var(--ds-surface-secondary);
}
.ds-wizard-title {
  font-size: var(--ds-typography-desktop-h3-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-spacing-xs) 0;
}
.ds-wizard-description {
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-secondary);
  margin: 0;
  line-height: 1.5;
}
/* Wizard steps */
.ds-wizard-steps {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-m);
  padding: var(--ds-spacing-l) var(--ds-spacing-xl);
  border-bottom: 1px solid var(--ds-border-primary);
  background-color: var(--ds-surface-tertiary);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ds-wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-spacing-xs);
  min-width: 80px;
  position: relative;
}
.ds-wizard-step-connector {
  position: absolute;
  top: 16px;
  left: calc(100% + var(--ds-spacing-s));
  right: calc(-100% - var(--ds-spacing-s));
  height: 2px;
  background-color: var(--ds-border-primary);
  z-index: 1;
}
.ds-wizard-step:last-child .ds-wizard-step-connector {
  display: none;
}
.ds-wizard-step-completed .ds-wizard-step-connector,
.ds-wizard-step-active .ds-wizard-step-connector {
  background-color: var(--ds-interactive-primary);
}
/* Wizard step indicator */
.ds-wizard-step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--ds-border-primary);
  background-color: var(--ds-surface-primary);
  color: var(--ds-text-secondary);
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 600;
  position: relative;
  z-index: 2;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-wizard-step-completed .ds-wizard-step-indicator {
  background-color: var(--ds-status-success);
  border-color: var(--ds-status-success);
  color: var(--ds-text-inverse);
}
.ds-wizard-step-active .ds-wizard-step-indicator {
  background-color: var(--ds-interactive-primary);
  border-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
  transform: scale(1.1);
}
.ds-wizard-step-error .ds-wizard-step-indicator {
  background-color: var(--ds-status-error);
  border-color: var(--ds-status-error);
  color: var(--ds-text-inverse);
}
.ds-wizard-step-disabled .ds-wizard-step-indicator {
  background-color: var(--ds-surface-disabled);
  border-color: var(--ds-border-disabled);
  color: var(--ds-text-disabled);
}
/* Wizard step content */
.ds-wizard-step-content {
  text-align: center;
}
.ds-wizard-step-title {
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 500;
  color: var(--ds-text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-wizard-step-description {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  color: var(--ds-text-secondary);
  margin: var(--ds-spacing-2xs) 0 0 0;
  line-height: 1.3;
}
.ds-wizard-step-active .ds-wizard-step-title {
  color: var(--ds-interactive-primary);
  font-weight: 600;
}
.ds-wizard-step-error .ds-wizard-step-title {
  color: var(--ds-status-error);
}
.ds-wizard-step-completed .ds-wizard-step-title {
  color: var(--ds-status-success);
}
.ds-wizard-step-disabled .ds-wizard-step-title,
.ds-wizard-step-disabled .ds-wizard-step-description {
  color: var(--ds-text-disabled);
}
/* Wizard body */
.ds-wizard-body {
  flex: 1;
  padding: var(--ds-spacing-xl);
  display: flex;
  flex-direction: column;
}
/* Wizard content */
.ds-wizard-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-m);
}
.ds-wizard-step-content {
  display: none;
}
.ds-wizard-step-active .ds-wizard-step-content {
  display: block;
  animation: wizardContentFadeIn 0.3s ease-out;
}
@keyframes wizardContentFadeIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* Wizard footer */
.ds-wizard-footer {
  padding: var(--ds-spacing-l) var(--ds-spacing-xl);
  border-top: 1px solid var(--ds-border-primary);
  background-color: var(--ds-surface-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-spacing-m);
}
.ds-wizard-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
}
.ds-wizard-prev,
.ds-wizard-next,
.ds-wizard-finish {
  padding: var(--ds-spacing-s) var(--ds-spacing-l);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-2xs);
  background-color: var(--ds-surface-primary);
  color: var(--ds-text-primary);
  font-size: var(--ds-typography-desktop-body-font-size);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-wizard-prev:hover,
.ds-wizard-next:hover,
.ds-wizard-finish:hover {
  background-color: var(--ds-surface-tertiary);
  border-color: var(--ds-border-secondary);
}
.ds-wizard-prev:focus-visible,
.ds-wizard-next:focus-visible,
.ds-wizard-finish:focus-visible {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
}
.ds-wizard-prev:disabled,
.ds-wizard-next:disabled {
  opacity: var(--ds-opacity-disabled);
  cursor: not-allowed;
}
.ds-wizard-prev:disabled:hover,
.ds-wizard-next:disabled:hover {
  background-color: var(--ds-surface-primary);
  border-color: var(--ds-border-primary);
}
.ds-wizard-next {
  background-color: var(--ds-interactive-primary);
  border-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
}
.ds-wizard-next:hover {
  background-color: var(--ds-interactive-primary-hover);
  border-color: var(--ds-interactive-primary-hover);
}
.ds-wizard-finish {
  background-color: var(--ds-status-success);
  border-color: var(--ds-status-success);
  color: var(--ds-text-inverse);
}
.ds-wizard-finish:hover {
  background-color: var(--ds-status-success-hover);
  border-color: var(--ds-status-success-hover);
}
/* Wizard progress */
.ds-wizard-progress {
  flex: 1;
  margin: 0 var(--ds-spacing-m);
}
.ds-wizard-progress-bar {
  width: 100%;
  height: 4px;
  background-color: var(--ds-surface-tertiary);
  border-radius: 2px;
  overflow: hidden;
}
.ds-wizard-progress-fill {
  height: 100%;
  background-color: var(--ds-interactive-primary);
  border-radius: inherit;
  transition: width var(--ds-motion-duration-slow) var(--ds-motion-easing-standard);
}
/* Wizard variants */
.ds-wizard-vertical {
  flex-direction: row;
}
.ds-wizard-vertical .ds-wizard-steps {
  flex-direction: column;
  align-items: flex-start;
  width: 200px;
  border-right: 1px solid var(--ds-border-primary);
  border-bottom: none;
  padding: var(--ds-spacing-l);
}
.ds-wizard-vertical .ds-wizard-step {
  flex-direction: row;
  align-items: center;
  width: 100%;
  min-width: auto;
}
.ds-wizard-vertical .ds-wizard-step-connector {
  top: 50%;
  left: 16px;
  right: auto;
  bottom: auto;
  width: 2px;
  height: calc(100% + var(--ds-spacing-m));
  transform: translateY(-50%);
}
.ds-wizard-vertical .ds-wizard-step-content {
  text-align: left;
  margin-left: var(--ds-spacing-s);
}
.ds-wizard-vertical .ds-wizard-body {
  flex: 1;
}
/* Wizard with sidebar */
.ds-wizard-sidebar {
  width: 300px;
  border-right: 1px solid var(--ds-border-primary);
  background-color: var(--ds-surface-secondary);
  padding: var(--ds-spacing-l);
}
/* Wizard compact */
.ds-wizard-compact .ds-wizard-steps {
  padding: var(--ds-spacing-s) var(--ds-spacing-m);
}
.ds-wizard-compact .ds-wizard-step-indicator {
  width: 24px;
  height: 24px;
  font-size: var(--ds-typography-desktop-extra-small-font-size);
}
.ds-wizard-compact .ds-wizard-step-title {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ds-wizard-vertical {
    flex-direction: column;
  }

  .ds-wizard-vertical .ds-wizard-steps {
    width: auto;
    border-right: none;
    border-bottom: 1px solid var(--ds-border-primary);
  }

  .ds-wizard-vertical .ds-wizard-step {
    flex-direction: column;
  }

  .ds-wizard-vertical .ds-wizard-step-connector {
    display: none;
  }

  .ds-wizard-vertical .ds-wizard-step-content {
    text-align: center;
    margin-left: 0;
  }

  .ds-wizard-footer {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ds-spacing-s);
  }

  .ds-wizard-actions {
    justify-content: space-between;
  }
}
@media (max-width: 480px) {
  .ds-wizard-steps {
    padding: var(--ds-spacing-s);
    gap: var(--ds-spacing-s);
  }

  .ds-wizard-step {
    min-width: 60px;
  }

  .ds-wizard-step-indicator {
    width: 28px;
    height: 28px;
  }

  .ds-wizard-header,
  .ds-wizard-body,
  .ds-wizard-footer {
    padding-left: var(--ds-spacing-m);
    padding-right: var(--ds-spacing-m);
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-wizard {
    border-width: 2px;
  }

  .ds-wizard-step-indicator {
    border-width: 3px;
  }

  .ds-wizard-step-connector {
    height: 3px;
  }

  .ds-wizard-vertical .ds-wizard-step-connector {
    width: 3px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-wizard-step-indicator {
    transition: none;
  }

  .ds-wizard-prev,
  .ds-wizard-next,
  .ds-wizard-finish {
    transition: none;
  }

  .ds-wizard-progress-fill {
    transition: none;
  }

  .ds-wizard-step-active .ds-wizard-step-content {
    animation: none;
  }

  @keyframes wizardContentFadeIn {
    animation: none;
  }
}
/* Print styles */
@media print {
  .ds-wizard {
    border: 1px solid #000;
    page-break-inside: avoid;
  }

  .ds-wizard-steps {
    background: #f5f5f5;
  }

  .ds-wizard-step-connector {
    background-color: #000;
  }

  .ds-wizard-step-completed .ds-wizard-step-connector,
  .ds-wizard-step-active .ds-wizard-step-connector {
    background-color: #000;
  }

  .ds-wizard-step-indicator {
    border: 2px solid #000;
    color: #000;
  }

  .ds-wizard-step-completed .ds-wizard-step-indicator,
  .ds-wizard-step-active .ds-wizard-step-indicator {
    background-color: #000;
    color: #fff;
  }
}
/* DS: dark.css - Dark theme variables */
/* layer: themes */
[data-theme="dark"] {
  /* === COLORS === */

  /* Base colors */
  --ds-color-white: #ffffff;
  --ds-color-black: #000000;

  /* Gray scale (inverted) */
  --ds-color-gray-50: #0f172a;
  --ds-color-gray-100: #1e293b;
  --ds-color-gray-200: #334155;
  --ds-color-gray-300: #475569;
  --ds-color-gray-400: #64748b;
  --ds-color-gray-500: #94a3b8;
  --ds-color-gray-600: #cbd5e1;
  --ds-color-gray-700: #e2e8f0;
  --ds-color-gray-800: #f1f5f9;
  --ds-color-gray-900: #f8fafc;

  /* Blue scale (primary) */
  --ds-color-blue-50: #1e3a8a;
  --ds-color-blue-100: #1e40af;
  --ds-color-blue-200: #1d4ed8;
  --ds-color-blue-300: #2563eb;
  --ds-color-blue-400: #3b82f6;
  --ds-color-blue-500: #60a5fa;
  --ds-color-blue-600: #93c5fd;
  --ds-color-blue-700: #bfdbfe;
  --ds-color-blue-800: #dbeafe;
  --ds-color-blue-900: #eff6ff;

  /* Green scale (success) */
  --ds-color-green-50: #14532d;
  --ds-color-green-100: #166534;
  --ds-color-green-200: #15803d;
  --ds-color-green-300: #16a34a;
  --ds-color-green-400: #22c55e;
  --ds-color-green-500: #4ade80;
  --ds-color-green-600: #86efac;
  --ds-color-green-700: #bbf7d0;
  --ds-color-green-800: #dcfce7;
  --ds-color-green-900: #f0fdf4;

  /* Red scale (error) */
  --ds-color-red-50: #7f1d1d;
  --ds-color-red-100: #991b1b;
  --ds-color-red-200: #b91c1c;
  --ds-color-red-300: #dc2626;
  --ds-color-red-400: #ef4444;
  --ds-color-red-500: #f87171;
  --ds-color-red-600: #fca5a5;
  --ds-color-red-700: #fecaca;
  --ds-color-red-800: #fee2e2;
  --ds-color-red-900: #fef2f2;

  /* Yellow scale (warning) */
  --ds-color-yellow-50: #78350f;
  --ds-color-yellow-100: #92400e;
  --ds-color-yellow-200: #b45309;
  --ds-color-yellow-300: #d97706;
  --ds-color-yellow-400: #f59e0b;
  --ds-color-yellow-500: #fbbf24;
  --ds-color-yellow-600: #fcd34d;
  --ds-color-yellow-700: #fde68a;
  --ds-color-yellow-800: #fef3c7;
  --ds-color-yellow-900: #fffbeb;

  /* Purple scale (info) */
  --ds-color-purple-50: #581c87;
  --ds-color-purple-100: #6b21a8;
  --ds-color-purple-200: #7c3aed;
  --ds-color-purple-300: #9333ea;
  --ds-color-purple-400: #a855f7;
  --ds-color-purple-500: #c084fc;
  --ds-color-purple-600: #d8b4fe;
  --ds-color-purple-700: #e9d5ff;
  --ds-color-purple-800: #f3e8ff;
  --ds-color-purple-900: #faf5ff;

  /* === SEMANTIC COLORS === */

  /* Text colors */
  --ds-text-primary: var(--ds-color-gray-100);
  --ds-text-secondary: var(--ds-color-gray-400);
  --ds-text-tertiary: var(--ds-color-gray-500);
  --ds-text-inverse: var(--ds-color-gray-900);
  --ds-text-disabled: var(--ds-color-gray-600);

  /* Surface colors */
  --ds-surface-primary: var(--ds-color-gray-900);
  --ds-surface-secondary: var(--ds-color-gray-800);
  --ds-surface-tertiary: var(--ds-color-gray-700);
  --ds-surface-inverse: var(--ds-color-white);

  /* Interactive colors */
  --ds-interactive-primary: var(--ds-color-blue-400);
  --ds-interactive-primary-hover: var(--ds-color-blue-300);
  --ds-interactive-primary-active: var(--ds-color-blue-200);
  --ds-interactive-secondary: var(--ds-color-gray-700);
  --ds-interactive-secondary-hover: var(--ds-color-gray-600);
  --ds-interactive-secondary-active: var(--ds-color-gray-500);

  /* Status colors */
  --ds-status-success: var(--ds-color-green-400);
  --ds-status-success-bg: var(--ds-color-green-900);
  --ds-status-error: var(--ds-color-red-400);
  --ds-status-error-bg: var(--ds-color-red-900);
  --ds-status-warning: var(--ds-color-yellow-400);
  --ds-status-warning-bg: var(--ds-color-yellow-900);
  --ds-status-info: var(--ds-color-blue-400);
  --ds-status-info-bg: var(--ds-color-blue-900);

  /* Border colors */
  --ds-border-primary: var(--ds-color-gray-700);
  --ds-border-secondary: var(--ds-color-gray-600);
  --ds-border-tertiary: var(--ds-color-gray-500);
  --ds-border-focus: var(--ds-color-blue-500);
  --ds-border-error: var(--ds-color-red-400);

  /* === COMPONENT TOKENS === */

  /* Button colors */
  --ds-button-primary-bg: var(--ds-interactive-primary);
  --ds-button-primary-fg: var(--ds-text-inverse);
  --ds-button-primary-border: var(--ds-interactive-primary);
  --ds-button-primary-bg-hover: var(--ds-interactive-primary-hover);
  --ds-button-primary-border-hover: var(--ds-interactive-primary-hover);
  --ds-button-primary-bg-active: var(--ds-interactive-primary-active);

  --ds-button-secondary-bg: var(--ds-surface-primary);
  --ds-button-secondary-fg: var(--ds-text-primary);
  --ds-button-secondary-border: var(--ds-border-primary);
  --ds-button-secondary-bg-hover: var(--ds-surface-secondary);
  --ds-button-secondary-border-hover: var(--ds-border-secondary);
  --ds-button-secondary-bg-active: var(--ds-surface-tertiary);
  --ds-button-secondary-border-active: var(--ds-border-tertiary);

  --ds-button-ghost-bg: transparent;
  --ds-button-ghost-fg: var(--ds-text-primary);
  --ds-button-ghost-border: transparent;
  --ds-button-ghost-bg-hover: var(--ds-surface-secondary);
  --ds-button-ghost-fg-hover: var(--ds-text-primary);
  --ds-button-ghost-bg-active: var(--ds-surface-tertiary);
  --ds-button-ghost-fg-active: var(--ds-text-primary);

  /* Input colors */
  --ds-input-bg: var(--ds-surface-primary);
  --ds-input-fg: var(--ds-text-primary);
  --ds-input-border: var(--ds-border-primary);
  --ds-input-bg-hover: var(--ds-surface-primary);
  --ds-input-border-hover: var(--ds-border-secondary);
  --ds-input-bg-focus: var(--ds-surface-primary);
  --ds-input-border-focus: var(--ds-border-focus);
  --ds-input-placeholder: var(--ds-text-tertiary);

  /* Card colors */
  --ds-card-bg: var(--ds-surface-primary);
  --ds-card-border: var(--ds-border-primary);
  --ds-card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);

  /* Modal colors */
  --ds-modal-bg: var(--ds-surface-primary);
  --ds-modal-border: var(--ds-border-primary);
  --ds-modal-backdrop: rgba(0, 0, 0, 0.7);
  --ds-modal-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);

  /* Dropdown colors */
  --ds-dropdown-bg: var(--ds-surface-primary);
  --ds-dropdown-border: var(--ds-border-primary);
  --ds-dropdown-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);

  /* === FOCUS TOKENS === */
  --ds-focus-outline-color: var(--ds-border-focus);
  --ds-focus-outline-width: 2px;
  --ds-focus-outline-offset: 2px;

  /* === SHADOW TOKENS === */
  --ds-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --ds-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --ds-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --ds-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --ds-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  --ds-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);

  /* === CONTAINER TOKENS === */
  --ds-container-sm: 640px;
  --ds-container-md: 768px;
  --ds-container-lg: 1024px;
  --ds-container-xl: 1280px;
  --ds-container-2xl: 1536px;
}
/* DS: green-dark.css - Green accent dark theme variables */
/* layer: themes */
[data-theme="green-dark"] {
  /* === COLORS === */

  /* Base colors */
  --ds-color-white: #ffffff;
  --ds-color-black: #000000;

  /* Gray scale (inverted) */
  --ds-color-gray-50: #0f172a;
  --ds-color-gray-100: #1e293b;
  --ds-color-gray-200: #334155;
  --ds-color-gray-300: #475569;
  --ds-color-gray-400: #64748b;
  --ds-color-gray-500: #94a3b8;
  --ds-color-gray-600: #cbd5e1;
  --ds-color-gray-700: #e2e8f0;
  --ds-color-gray-800: #f1f5f9;
  --ds-color-gray-900: #f8fafc;

  /* Green scale (primary accent) */
  --ds-color-green-50: #14532d;
  --ds-color-green-100: #166534;
  --ds-color-green-200: #15803d;
  --ds-color-green-300: #16a34a;
  --ds-color-green-400: #22c55e;
  --ds-color-green-500: #4ade80;
  --ds-color-green-600: #86efac;
  --ds-color-green-700: #bbf7d0;
  --ds-color-green-800: #dcfce7;
  --ds-color-green-900: #f0fdf4;

  /* Blue scale (secondary) */
  --ds-color-blue-50: #1e3a8a;
  --ds-color-blue-100: #1e40af;
  --ds-color-blue-200: #1d4ed8;
  --ds-color-blue-300: #2563eb;
  --ds-color-blue-400: #3b82f6;
  --ds-color-blue-500: #60a5fa;
  --ds-color-blue-600: #93c5fd;
  --ds-color-blue-700: #bfdbfe;
  --ds-color-blue-800: #dbeafe;
  --ds-color-blue-900: #eff6ff;

  /* Red scale (error) */
  --ds-color-red-50: #7f1d1d;
  --ds-color-red-100: #991b1b;
  --ds-color-red-200: #b91c1c;
  --ds-color-red-300: #dc2626;
  --ds-color-red-400: #ef4444;
  --ds-color-red-500: #f87171;
  --ds-color-red-600: #fca5a5;
  --ds-color-red-700: #fecaca;
  --ds-color-red-800: #fee2e2;
  --ds-color-red-900: #fef2f2;

  /* Yellow scale (warning) */
  --ds-color-yellow-50: #78350f;
  --ds-color-yellow-100: #92400e;
  --ds-color-yellow-200: #b45309;
  --ds-color-yellow-300: #d97706;
  --ds-color-yellow-400: #f59e0b;
  --ds-color-yellow-500: #fbbf24;
  --ds-color-yellow-600: #fcd34d;
  --ds-color-yellow-700: #fde68a;
  --ds-color-yellow-800: #fef3c7;
  --ds-color-yellow-900: #fffbeb;

  /* Purple scale (info) */
  --ds-color-purple-50: #581c87;
  --ds-color-purple-100: #6b21a8;
  --ds-color-purple-200: #7c3aed;
  --ds-color-purple-300: #9333ea;
  --ds-color-purple-400: #a855f7;
  --ds-color-purple-500: #c084fc;
  --ds-color-purple-600: #d8b4fe;
  --ds-color-purple-700: #e9d5ff;
  --ds-color-purple-800: #f3e8ff;
  --ds-color-purple-900: #faf5ff;

  /* === SEMANTIC COLORS === */

  /* Text colors */
  --ds-text-primary: var(--ds-color-gray-100);
  --ds-text-secondary: var(--ds-color-gray-400);
  --ds-text-tertiary: var(--ds-color-gray-500);
  --ds-text-inverse: var(--ds-color-gray-900);
  --ds-text-disabled: var(--ds-color-gray-600);

  /* Surface colors */
  --ds-surface-primary: var(--ds-color-gray-900);
  --ds-surface-secondary: var(--ds-color-gray-800);
  --ds-surface-tertiary: var(--ds-color-gray-700);
  --ds-surface-inverse: var(--ds-color-white);

  /* Interactive colors - Green primary */
  --ds-interactive-primary: var(--ds-color-green-400);
  --ds-interactive-primary-hover: var(--ds-color-green-300);
  --ds-interactive-primary-active: var(--ds-color-green-200);
  --ds-interactive-secondary: var(--ds-color-gray-700);
  --ds-interactive-secondary-hover: var(--ds-color-gray-600);
  --ds-interactive-secondary-active: var(--ds-color-gray-500);

  /* Status colors */
  --ds-status-success: var(--ds-color-green-400);
  --ds-status-success-bg: var(--ds-color-green-900);
  --ds-status-error: var(--ds-color-red-400);
  --ds-status-error-bg: var(--ds-color-red-900);
  --ds-status-warning: var(--ds-color-yellow-400);
  --ds-status-warning-bg: var(--ds-color-yellow-900);
  --ds-status-info: var(--ds-color-blue-400);
  --ds-status-info-bg: var(--ds-color-blue-900);

  /* Border colors */
  --ds-border-primary: var(--ds-color-gray-700);
  --ds-border-secondary: var(--ds-color-gray-600);
  --ds-border-tertiary: var(--ds-color-gray-500);
  --ds-border-focus: var(--ds-color-green-500);
  --ds-border-error: var(--ds-color-red-400);

  /* === COMPONENT TOKENS === */

  /* Button colors */
  --ds-button-primary-bg: var(--ds-interactive-primary);
  --ds-button-primary-fg: var(--ds-text-inverse);
  --ds-button-primary-border: var(--ds-interactive-primary);
  --ds-button-primary-bg-hover: var(--ds-interactive-primary-hover);
  --ds-button-primary-border-hover: var(--ds-interactive-primary-hover);
  --ds-button-primary-bg-active: var(--ds-interactive-primary-active);

  --ds-button-secondary-bg: var(--ds-surface-primary);
  --ds-button-secondary-fg: var(--ds-text-primary);
  --ds-button-secondary-border: var(--ds-border-primary);
  --ds-button-secondary-bg-hover: var(--ds-surface-secondary);
  --ds-button-secondary-border-hover: var(--ds-border-secondary);
  --ds-button-secondary-bg-active: var(--ds-surface-tertiary);
  --ds-button-secondary-border-active: var(--ds-border-tertiary);

  --ds-button-ghost-bg: transparent;
  --ds-button-ghost-fg: var(--ds-text-primary);
  --ds-button-ghost-border: transparent;
  --ds-button-ghost-bg-hover: var(--ds-surface-secondary);
  --ds-button-ghost-fg-hover: var(--ds-text-primary);
  --ds-button-ghost-bg-active: var(--ds-surface-tertiary);
  --ds-button-ghost-fg-active: var(--ds-text-primary);

  /* Input colors */
  --ds-input-bg: var(--ds-surface-primary);
  --ds-input-fg: var(--ds-text-primary);
  --ds-input-border: var(--ds-border-primary);
  --ds-input-bg-hover: var(--ds-surface-primary);
  --ds-input-border-hover: var(--ds-border-secondary);
  --ds-input-bg-focus: var(--ds-surface-primary);
  --ds-input-border-focus: var(--ds-border-focus);
  --ds-input-placeholder: var(--ds-text-tertiary);

  /* Card colors */
  --ds-card-bg: var(--ds-surface-primary);
  --ds-card-border: var(--ds-border-primary);
  --ds-card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);

  /* Modal colors */
  --ds-modal-bg: var(--ds-surface-primary);
  --ds-modal-border: var(--ds-border-primary);
  --ds-modal-backdrop: rgba(0, 0, 0, 0.7);
  --ds-modal-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);

  /* Dropdown colors */
  --ds-dropdown-bg: var(--ds-surface-primary);
  --ds-dropdown-border: var(--ds-border-primary);
  --ds-dropdown-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);

  /* === FOCUS TOKENS === */
  --ds-focus-outline-color: var(--ds-border-focus);
  --ds-focus-outline-width: 2px;
  --ds-focus-outline-offset: 2px;

  /* === SHADOW TOKENS === */
  --ds-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --ds-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --ds-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --ds-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --ds-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  --ds-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);

  /* === CONTAINER TOKENS === */
  --ds-container-sm: 640px;
  --ds-container-md: 768px;
  --ds-container-lg: 1024px;
  --ds-container-xl: 1280px;
  --ds-container-2xl: 1536px;
}
/* DS: green-light.css - Green accent light theme variables */
/* layer: themes */
[data-theme="green-light"],
[data-theme="green-light"]:root {
  /* === COLORS === */

  /* Base colors */
  --ds-color-white: #ffffff;
  --ds-color-black: #000000;

  /* Gray scale */
  --ds-color-gray-50: #f8fafc;
  --ds-color-gray-100: #f1f5f9;
  --ds-color-gray-200: #e2e8f0;
  --ds-color-gray-300: #cbd5e1;
  --ds-color-gray-400: #94a3b8;
  --ds-color-gray-500: #64748b;
  --ds-color-gray-600: #475569;
  --ds-color-gray-700: #334155;
  --ds-color-gray-800: #1e293b;
  --ds-color-gray-900: #0f172a;

  /* Green scale (primary accent) */
  --ds-color-green-50: #f0fdf4;
  --ds-color-green-100: #dcfce7;
  --ds-color-green-200: #bbf7d0;
  --ds-color-green-300: #86efac;
  --ds-color-green-400: #4ade80;
  --ds-color-green-500: #22c55e;
  --ds-color-green-600: #16a34a;
  --ds-color-green-700: #15803d;
  --ds-color-green-800: #166534;
  --ds-color-green-900: #14532d;

  /* Blue scale (secondary) */
  --ds-color-blue-50: #eff6ff;
  --ds-color-blue-100: #dbeafe;
  --ds-color-blue-200: #bfdbfe;
  --ds-color-blue-300: #93c5fd;
  --ds-color-blue-400: #60a5fa;
  --ds-color-blue-500: #3b82f6;
  --ds-color-blue-600: #2563eb;
  --ds-color-blue-700: #1d4ed8;
  --ds-color-blue-800: #1e40af;
  --ds-color-blue-900: #1e3a8a;

  /* Red scale (error) */
  --ds-color-red-50: #fef2f2;
  --ds-color-red-100: #fee2e2;
  --ds-color-red-200: #fecaca;
  --ds-color-red-300: #fca5a5;
  --ds-color-red-400: #f87171;
  --ds-color-red-500: #ef4444;
  --ds-color-red-600: #dc2626;
  --ds-color-red-700: #b91c1c;
  --ds-color-red-800: #991b1b;
  --ds-color-red-900: #7f1d1d;

  /* Yellow scale (warning) */
  --ds-color-yellow-50: #fffbeb;
  --ds-color-yellow-100: #fef3c7;
  --ds-color-yellow-200: #fde68a;
  --ds-color-yellow-300: #fcd34d;
  --ds-color-yellow-400: #fbbf24;
  --ds-color-yellow-500: #f59e0b;
  --ds-color-yellow-600: #d97706;
  --ds-color-yellow-700: #b45309;
  --ds-color-yellow-800: #92400e;
  --ds-color-yellow-900: #78350f;

  /* Purple scale (info) */
  --ds-color-purple-50: #faf5ff;
  --ds-color-purple-100: #f3e8ff;
  --ds-color-purple-200: #e9d5ff;
  --ds-color-purple-300: #d8b4fe;
  --ds-color-purple-400: #c084fc;
  --ds-color-purple-500: #a855f7;
  --ds-color-purple-600: #9333ea;
  --ds-color-purple-700: #7c3aed;
  --ds-color-purple-800: #6b21a8;
  --ds-color-purple-900: #581c87;

  /* === SEMANTIC COLORS === */

  /* Text colors */
  --ds-text-primary: var(--ds-color-gray-900);
  --ds-text-secondary: var(--ds-color-gray-600);
  --ds-text-tertiary: var(--ds-color-gray-500);
  --ds-text-inverse: var(--ds-color-white);
  --ds-text-disabled: var(--ds-color-gray-400);

  /* Surface colors */
  --ds-surface-primary: var(--ds-color-white);
  --ds-surface-secondary: var(--ds-color-gray-50);
  --ds-surface-tertiary: var(--ds-color-gray-100);
  --ds-surface-inverse: var(--ds-color-gray-900);

  /* Interactive colors - Green primary */
  --ds-interactive-primary: var(--ds-color-green-600);
  --ds-interactive-primary-hover: var(--ds-color-green-700);
  --ds-interactive-primary-active: var(--ds-color-green-800);
  --ds-interactive-secondary: var(--ds-color-gray-200);
  --ds-interactive-secondary-hover: var(--ds-color-gray-300);
  --ds-interactive-secondary-active: var(--ds-color-gray-400);

  /* Status colors */
  --ds-status-success: var(--ds-color-green-600);
  --ds-status-success-bg: var(--ds-color-green-50);
  --ds-status-error: var(--ds-color-red-600);
  --ds-status-error-bg: var(--ds-color-red-50);
  --ds-status-warning: var(--ds-color-yellow-600);
  --ds-status-warning-bg: var(--ds-color-yellow-50);
  --ds-status-info: var(--ds-color-blue-600);
  --ds-status-info-bg: var(--ds-color-blue-50);

  /* Border colors */
  --ds-border-primary: var(--ds-color-gray-200);
  --ds-border-secondary: var(--ds-color-gray-300);
  --ds-border-tertiary: var(--ds-color-gray-400);
  --ds-border-focus: var(--ds-color-green-500);
  --ds-border-error: var(--ds-color-red-500);

  /* === COMPONENT TOKENS === */

  /* Button colors */
  --ds-button-primary-bg: var(--ds-interactive-primary);
  --ds-button-primary-fg: var(--ds-text-inverse);
  --ds-button-primary-border: var(--ds-interactive-primary);
  --ds-button-primary-bg-hover: var(--ds-interactive-primary-hover);
  --ds-button-primary-border-hover: var(--ds-interactive-primary-hover);
  --ds-button-primary-bg-active: var(--ds-interactive-primary-active);

  --ds-button-secondary-bg: var(--ds-surface-primary);
  --ds-button-secondary-fg: var(--ds-text-primary);
  --ds-button-secondary-border: var(--ds-border-primary);
  --ds-button-secondary-bg-hover: var(--ds-surface-secondary);
  --ds-button-secondary-border-hover: var(--ds-border-secondary);
  --ds-button-secondary-bg-active: var(--ds-surface-tertiary);
  --ds-button-secondary-border-active: var(--ds-border-tertiary);

  --ds-button-ghost-bg: transparent;
  --ds-button-ghost-fg: var(--ds-text-primary);
  --ds-button-ghost-border: transparent;
  --ds-button-ghost-bg-hover: var(--ds-surface-secondary);
  --ds-button-ghost-fg-hover: var(--ds-text-primary);
  --ds-button-ghost-bg-active: var(--ds-surface-tertiary);
  --ds-button-ghost-fg-active: var(--ds-text-primary);

  /* Input colors */
  --ds-input-bg: var(--ds-surface-primary);
  --ds-input-fg: var(--ds-text-primary);
  --ds-input-border: var(--ds-border-primary);
  --ds-input-bg-hover: var(--ds-surface-primary);
  --ds-input-border-hover: var(--ds-border-secondary);
  --ds-input-bg-focus: var(--ds-surface-primary);
  --ds-input-border-focus: var(--ds-border-focus);
  --ds-input-placeholder: var(--ds-text-tertiary);

  /* Card colors */
  --ds-card-bg: var(--ds-surface-primary);
  --ds-card-border: var(--ds-border-primary);
  --ds-card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);

  /* Modal colors */
  --ds-modal-bg: var(--ds-surface-primary);
  --ds-modal-border: var(--ds-border-primary);
  --ds-modal-backdrop: rgba(0, 0, 0, 0.5);
  --ds-modal-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Dropdown colors */
  --ds-dropdown-bg: var(--ds-surface-primary);
  --ds-dropdown-border: var(--ds-border-primary);
  --ds-dropdown-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* === FOCUS TOKENS === */
  --ds-focus-outline-color: var(--ds-border-focus);
  --ds-focus-outline-width: 2px;
  --ds-focus-outline-offset: 2px;

  /* === SHADOW TOKENS === */
  --ds-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --ds-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --ds-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --ds-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --ds-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --ds-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* === CONTAINER TOKENS === */
  --ds-container-sm: 640px;
  --ds-container-md: 768px;
  --ds-container-lg: 1024px;
  --ds-container-xl: 1280px;
  --ds-container-2xl: 1536px;
}
/* DS: high-contrast.css - High contrast theme for accessibility */
/* layer: themes */
[data-theme="high-contrast"],
[data-theme="high-contrast"]:root {
  /* === COLORS - HIGH CONTRAST === */

  /* Base colors - pure black/white */
  --ds-color-white: #ffffff;
  --ds-color-black: #000000;

  /* Gray scale - high contrast */
  --ds-color-gray-50: #000000;
  --ds-color-gray-100: #000000;
  --ds-color-gray-200: #000000;
  --ds-color-gray-300: #ffffff;
  --ds-color-gray-400: #ffffff;
  --ds-color-gray-500: #ffffff;
  --ds-color-gray-600: #ffffff;
  --ds-color-gray-700: #ffffff;
  --ds-color-gray-800: #ffffff;
  --ds-color-gray-900: #ffffff;

  /* Blue scale - high contrast */
  --ds-color-blue-50: #000000;
  --ds-color-blue-100: #000000;
  --ds-color-blue-200: #000000;
  --ds-color-blue-300: #ffffff;
  --ds-color-blue-400: #ffffff;
  --ds-color-blue-500: #ffffff;
  --ds-color-blue-600: #ffffff;
  --ds-color-blue-700: #ffffff;
  --ds-color-blue-800: #ffffff;
  --ds-color-blue-900: #ffffff;

  /* Green scale - high contrast */
  --ds-color-green-50: #000000;
  --ds-color-green-100: #000000;
  --ds-color-green-200: #000000;
  --ds-color-green-300: #ffffff;
  --ds-color-green-400: #ffffff;
  --ds-color-green-500: #ffffff;
  --ds-color-green-600: #ffffff;
  --ds-color-green-700: #ffffff;
  --ds-color-green-800: #ffffff;
  --ds-color-green-900: #ffffff;

  /* Red scale - high contrast */
  --ds-color-red-50: #000000;
  --ds-color-red-100: #000000;
  --ds-color-red-200: #000000;
  --ds-color-red-300: #ffffff;
  --ds-color-red-400: #ffffff;
  --ds-color-red-500: #ffffff;
  --ds-color-red-600: #ffffff;
  --ds-color-red-700: #ffffff;
  --ds-color-red-800: #ffffff;
  --ds-color-red-900: #ffffff;

  /* Yellow scale - high contrast */
  --ds-color-yellow-50: #000000;
  --ds-color-yellow-100: #000000;
  --ds-color-yellow-200: #000000;
  --ds-color-yellow-300: #ffffff;
  --ds-color-yellow-400: #ffffff;
  --ds-color-yellow-500: #ffffff;
  --ds-color-yellow-600: #ffffff;
  --ds-color-yellow-700: #ffffff;
  --ds-color-yellow-800: #ffffff;
  --ds-color-yellow-900: #ffffff;

  /* Purple scale - high contrast */
  --ds-color-purple-50: #000000;
  --ds-color-purple-100: #000000;
  --ds-color-purple-200: #000000;
  --ds-color-purple-300: #ffffff;
  --ds-color-purple-400: #ffffff;
  --ds-color-purple-500: #ffffff;
  --ds-color-purple-600: #ffffff;
  --ds-color-purple-700: #ffffff;
  --ds-color-purple-800: #ffffff;
  --ds-color-purple-900: #ffffff;

  /* === SEMANTIC COLORS - HIGH CONTRAST === */

  /* Text colors - pure contrast */
  --ds-text-primary: #ffffff;
  --ds-text-secondary: #ffffff;
  --ds-text-tertiary: #ffffff;
  --ds-text-inverse: #000000;
  --ds-text-disabled: #ffffff;

  /* Surface colors - pure black/white */
  --ds-surface-primary: #000000;
  --ds-surface-secondary: #000000;
  --ds-surface-tertiary: #000000;
  --ds-surface-inverse: #ffffff;

  /* Interactive colors - high contrast */
  --ds-interactive-primary: #ffffff;
  --ds-interactive-primary-hover: #ffffff;
  --ds-interactive-primary-active: #ffffff;
  --ds-interactive-secondary: #000000;
  --ds-interactive-secondary-hover: #000000;
  --ds-interactive-secondary-active: #000000;

  /* Status colors - high contrast */
  --ds-status-success: #ffffff;
  --ds-status-success-bg: #000000;
  --ds-status-error: #ffffff;
  --ds-status-error-bg: #000000;
  --ds-status-warning: #ffffff;
  --ds-status-warning-bg: #000000;
  --ds-status-info: #ffffff;
  --ds-status-info-bg: #000000;

  /* Border colors - pure white */
  --ds-border-primary: #ffffff;
  --ds-border-secondary: #ffffff;
  --ds-border-tertiary: #ffffff;
  --ds-border-focus: #ffffff;
  --ds-border-error: #ffffff;

  /* === COMPONENT TOKENS - HIGH CONTRAST === */

  /* Button colors - extreme contrast */
  --ds-button-primary-bg: #ffffff;
  --ds-button-primary-fg: #000000;
  --ds-button-primary-border: #ffffff;
  --ds-button-primary-bg-hover: #ffffff;
  --ds-button-primary-border-hover: #ffffff;
  --ds-button-primary-bg-active: #ffffff;

  --ds-button-secondary-bg: #000000;
  --ds-button-secondary-fg: #ffffff;
  --ds-button-secondary-border: #ffffff;
  --ds-button-secondary-bg-hover: #000000;
  --ds-button-secondary-border-hover: #ffffff;
  --ds-button-secondary-bg-active: #000000;
  --ds-button-secondary-border-active: #ffffff;

  --ds-button-ghost-bg: transparent;
  --ds-button-ghost-fg: #ffffff;
  --ds-button-ghost-border: #ffffff;
  --ds-button-ghost-bg-hover: #000000;
  --ds-button-ghost-fg-hover: #ffffff;
  --ds-button-ghost-bg-active: #000000;
  --ds-button-ghost-fg-active: #ffffff;

  /* Input colors - high contrast */
  --ds-input-bg: #000000;
  --ds-input-fg: #ffffff;
  --ds-input-border: #ffffff;
  --ds-input-bg-hover: #000000;
  --ds-input-border-hover: #ffffff;
  --ds-input-bg-focus: #000000;
  --ds-input-border-focus: #ffffff;
  --ds-input-placeholder: #ffffff;

  /* Card colors - high contrast */
  --ds-card-bg: #000000;
  --ds-card-border: #ffffff;
  --ds-card-shadow: 0 0 0 2px #ffffff;

  /* Modal colors - high contrast */
  --ds-modal-bg: #000000;
  --ds-modal-border: #ffffff;
  --ds-modal-backdrop: #000000;
  --ds-modal-shadow: 0 0 0 4px #ffffff;

  /* Dropdown colors - high contrast */
  --ds-dropdown-bg: #000000;
  --ds-dropdown-border: #ffffff;
  --ds-dropdown-shadow: 0 0 0 2px #ffffff;

  /* === FOCUS TOKENS - HIGH CONTRAST === */
  --ds-focus-outline-color: #ffffff;
  --ds-focus-outline-width: 4px;
  --ds-focus-outline-offset: 2px;

  /* === SHADOW TOKENS - HIGH CONTRAST === */
  --ds-shadow-xs: 0 0 0 1px #ffffff;
  --ds-shadow-sm: 0 0 0 2px #ffffff;
  --ds-shadow-md: 0 0 0 3px #ffffff;
  --ds-shadow-lg: 0 0 0 4px #ffffff;
  --ds-shadow-xl: 0 0 0 5px #ffffff;
  --ds-shadow-2xl: 0 0 0 6px #ffffff;

  /* === CONTAINER TOKENS === */
  --ds-container-sm: 640px;
  --ds-container-md: 768px;
  --ds-container-lg: 1024px;
  --ds-container-xl: 1280px;
  --ds-container-2xl: 1536px;
}
/* DS: light.css - Light theme variables */
/* layer: themes */
[data-theme="light"],
:root {
  /* === COLORS === */

  /* Base colors */
  --ds-color-white: #ffffff;
  --ds-color-black: #000000;

  /* Gray scale */
  --ds-color-gray-50: #f8fafc;
  --ds-color-gray-100: #f1f5f9;
  --ds-color-gray-200: #e2e8f0;
  --ds-color-gray-300: #cbd5e1;
  --ds-color-gray-400: #94a3b8;
  --ds-color-gray-500: #64748b;
  --ds-color-gray-600: #475569;
  --ds-color-gray-700: #334155;
  --ds-color-gray-800: #1e293b;
  --ds-color-gray-900: #0f172a;

  /* Blue scale (primary) */
  --ds-color-blue-50: #eff6ff;
  --ds-color-blue-100: #dbeafe;
  --ds-color-blue-200: #bfdbfe;
  --ds-color-blue-300: #93c5fd;
  --ds-color-blue-400: #60a5fa;
  --ds-color-blue-500: #3b82f6;
  --ds-color-blue-600: #2563eb;
  --ds-color-blue-700: #1d4ed8;
  --ds-color-blue-800: #1e40af;
  --ds-color-blue-900: #1e3a8a;

  /* Green scale (success) */
  --ds-color-green-50: #f0fdf4;
  --ds-color-green-100: #dcfce7;
  --ds-color-green-200: #bbf7d0;
  --ds-color-green-300: #86efac;
  --ds-color-green-400: #4ade80;
  --ds-color-green-500: #22c55e;
  --ds-color-green-600: #16a34a;
  --ds-color-green-700: #15803d;
  --ds-color-green-800: #166534;
  --ds-color-green-900: #14532d;

  /* Red scale (error) */
  --ds-color-red-50: #fef2f2;
  --ds-color-red-100: #fee2e2;
  --ds-color-red-200: #fecaca;
  --ds-color-red-300: #fca5a5;
  --ds-color-red-400: #f87171;
  --ds-color-red-500: #ef4444;
  --ds-color-red-600: #dc2626;
  --ds-color-red-700: #b91c1c;
  --ds-color-red-800: #991b1b;
  --ds-color-red-900: #7f1d1d;

  /* Yellow scale (warning) */
  --ds-color-yellow-50: #fffbeb;
  --ds-color-yellow-100: #fef3c7;
  --ds-color-yellow-200: #fde68a;
  --ds-color-yellow-300: #fcd34d;
  --ds-color-yellow-400: #fbbf24;
  --ds-color-yellow-500: #f59e0b;
  --ds-color-yellow-600: #d97706;
  --ds-color-yellow-700: #b45309;
  --ds-color-yellow-800: #92400e;
  --ds-color-yellow-900: #78350f;

  /* Purple scale (info) */
  --ds-color-purple-50: #faf5ff;
  --ds-color-purple-100: #f3e8ff;
  --ds-color-purple-200: #e9d5ff;
  --ds-color-purple-300: #d8b4fe;
  --ds-color-purple-400: #c084fc;
  --ds-color-purple-500: #a855f7;
  --ds-color-purple-600: #9333ea;
  --ds-color-purple-700: #7c3aed;
  --ds-color-purple-800: #6b21a8;
  --ds-color-purple-900: #581c87;

  /* === SEMANTIC COLORS === */

  /* Text colors */
  --ds-text-primary: var(--ds-color-gray-900);
  --ds-text-secondary: var(--ds-color-gray-600);
  --ds-text-tertiary: var(--ds-color-gray-500);
  --ds-text-inverse: var(--ds-color-white);
  --ds-text-disabled: var(--ds-color-gray-400);

  /* Surface colors */
  --ds-surface-primary: var(--ds-color-white);
  --ds-surface-secondary: var(--ds-color-gray-50);
  --ds-surface-tertiary: var(--ds-color-gray-100);
  --ds-surface-inverse: var(--ds-color-gray-900);

  /* Interactive colors */
  --ds-interactive-primary: var(--ds-color-blue-600);
  --ds-interactive-primary-hover: var(--ds-color-blue-700);
  --ds-interactive-primary-active: var(--ds-color-blue-800);
  --ds-interactive-secondary: var(--ds-color-gray-200);
  --ds-interactive-secondary-hover: var(--ds-color-gray-300);
  --ds-interactive-secondary-active: var(--ds-color-gray-400);

  /* Status colors */
  --ds-status-success: var(--ds-color-green-600);
  --ds-status-success-bg: var(--ds-color-green-50);
  --ds-status-error: var(--ds-color-red-600);
  --ds-status-error-bg: var(--ds-color-red-50);
  --ds-status-warning: var(--ds-color-yellow-600);
  --ds-status-warning-bg: var(--ds-color-yellow-50);
  --ds-status-info: var(--ds-color-blue-600);
  --ds-status-info-bg: var(--ds-color-blue-50);

  /* Border colors */
  --ds-border-primary: var(--ds-color-gray-200);
  --ds-border-secondary: var(--ds-color-gray-300);
  --ds-border-tertiary: var(--ds-color-gray-400);
  --ds-border-focus: var(--ds-color-blue-500);
  --ds-border-error: var(--ds-color-red-500);

  /* === COMPONENT TOKENS === */

  /* Button colors */
  --ds-button-primary-bg: var(--ds-interactive-primary);
  --ds-button-primary-fg: var(--ds-text-inverse);
  --ds-button-primary-border: var(--ds-interactive-primary);
  --ds-button-primary-bg-hover: var(--ds-interactive-primary-hover);
  --ds-button-primary-border-hover: var(--ds-interactive-primary-hover);
  --ds-button-primary-bg-active: var(--ds-interactive-primary-active);

  --ds-button-secondary-bg: var(--ds-surface-primary);
  --ds-button-secondary-fg: var(--ds-text-primary);
  --ds-button-secondary-border: var(--ds-border-primary);
  --ds-button-secondary-bg-hover: var(--ds-surface-secondary);
  --ds-button-secondary-border-hover: var(--ds-border-secondary);
  --ds-button-secondary-bg-active: var(--ds-surface-tertiary);
  --ds-button-secondary-border-active: var(--ds-border-tertiary);

  --ds-button-ghost-bg: transparent;
  --ds-button-ghost-fg: var(--ds-text-primary);
  --ds-button-ghost-border: transparent;
  --ds-button-ghost-bg-hover: var(--ds-surface-secondary);
  --ds-button-ghost-fg-hover: var(--ds-text-primary);
  --ds-button-ghost-bg-active: var(--ds-surface-tertiary);
  --ds-button-ghost-fg-active: var(--ds-text-primary);

  /* Input colors (aliases for component tokens) */
  --ds-input-background: var(--ds-surface-primary);
  --ds-input-text: var(--ds-text-primary);
  --ds-input-border: var(--ds-border-primary);
  --ds-input-background-hover: var(--ds-surface-primary);
  --ds-input-border-hover: var(--ds-border-secondary);
  --ds-input-background-focus: var(--ds-surface-primary);
  --ds-input-border-focus: var(--ds-border-focus);
  --ds-input-placeholder: var(--ds-text-tertiary);
  --ds-input-placeholder-hover: var(--ds-text-tertiary);
  --ds-input-placeholder-focus: var(--ds-text-tertiary);
  --ds-input-background-disabled: var(--ds-surface-tertiary);
  --ds-input-text-disabled: var(--ds-text-disabled);
  --ds-input-border-disabled: var(--ds-border-secondary);
  --ds-input-clear: var(--ds-text-secondary);
  --ds-input-clear-hover: var(--ds-text-primary);
  --ds-input-clear-focus: var(--ds-text-primary);
  --ds-input-password-toggle: var(--ds-text-secondary);
  --ds-input-password-toggle-hover: var(--ds-text-primary);
  --ds-input-password-toggle-focus: var(--ds-text-primary);
  --ds-input-shadow-active: 0 0 0 2px rgba(37, 99, 235, 0.15);
  --ds-input-shadow-error: 0 0 0 2px rgba(239, 68, 68, 0.15);
  --ds-input-border-error: var(--ds-status-error);
  --ds-input-border-error-hover: var(--ds-status-error);

  /* Navbar tokens */
  --ds-navbar-bg: var(--ds-surface-primary);
  --ds-navbar-border: var(--ds-border-primary);
  --ds-navbar-brand-fg: var(--ds-text-primary);
  --ds-navbar-brand-fg-hover: var(--ds-text-primary);
  --ds-navbar-nav-fg: var(--ds-text-secondary);
  --ds-navbar-nav-fg-hover: var(--ds-text-primary);
  --ds-navbar-nav-bg-hover: var(--ds-surface-secondary);
  --ds-navbar-nav-bg-focus: var(--ds-surface-secondary);
  --ds-navbar-nav-fg-focus: var(--ds-text-primary);
  --ds-navbar-nav-bg-active: var(--ds-interactive-primary-bg);
  --ds-navbar-nav-bg-active-hover: var(--ds-interactive-primary-bg);
  --ds-navbar-nav-fg-active: var(--ds-interactive-primary);
  --ds-navbar-search-bg: var(--ds-surface-primary);
  --ds-navbar-search-border: var(--ds-border-primary);
  --ds-navbar-search-border-focus: var(--ds-border-focus);
  --ds-navbar-search-shadow-focus: 0 0 0 2px var(--ds-interactive-primary-bg);
  --ds-navbar-search-placeholder: var(--ds-text-tertiary);
  --ds-navbar-mobile-toggle: var(--ds-text-secondary);

  /* Card colors */
  --ds-card-bg: var(--ds-surface-primary);
  --ds-card-border: var(--ds-border-primary);
  --ds-card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);

  /* Modal colors */
  --ds-modal-bg: var(--ds-surface-primary);
  --ds-modal-border: var(--ds-border-primary);
  --ds-modal-backdrop: rgba(0, 0, 0, 0.5);
  --ds-modal-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Dropdown colors */
  --ds-dropdown-bg: var(--ds-surface-primary);
  --ds-dropdown-border: var(--ds-border-primary);
  --ds-dropdown-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* === FOCUS TOKENS === */
  --ds-focus-outline-color: var(--ds-border-focus);
  --ds-focus-outline-width: 2px;
  --ds-focus-outline-offset: 2px;

  /* === SHADOW TOKENS === */
  --ds-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --ds-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --ds-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --ds-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --ds-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --ds-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* === CONTAINER TOKENS === */
  --ds-container-sm: 640px;
  --ds-container-md: 768px;
  --ds-container-lg: 1024px;
  --ds-container-xl: 1280px;
  --ds-container-2xl: 1536px;
}
/* DS: print.css - Print-optimized theme */
/* layer: themes */
@media print {
  /* === PRINT OPTIMIZATIONS === */

  /* Hide non-essential elements */
  .ds-btn,
  .ds-dropdown,
  .ds-modal,
  .ds-tooltip,
  .ds-popover,
  .ds-toast,
  .ds-notification,
  nav[aria-label="breadcrumbs"],
  .ds-sidebar,
  .ds-tabs-scrollable,
  [data-print-hidden] {
    display: none !important;
  }

  /* Show print-only elements */
  [data-print-only] {
    display: block !important;
  }

  /* === COLORS - PRINT FRIENDLY === */

  /* Force black text on white background */
  --ds-color-white: #ffffff;
  --ds-color-black: #000000;

  /* Gray scale - simplified for print */
  --ds-color-gray-50: #ffffff;
  --ds-color-gray-100: #ffffff;
  --ds-color-gray-200: #f8f8f8;
  --ds-color-gray-300: #e8e8e8;
  --ds-color-gray-400: #d0d0d0;
  --ds-color-gray-500: #b8b8b8;
  --ds-color-gray-600: #888888;
  --ds-color-gray-700: #666666;
  --ds-color-gray-800: #333333;
  --ds-color-gray-900: #000000;

  /* All accent colors become black for print */
  --ds-color-blue-50: #ffffff;
  --ds-color-blue-100: #ffffff;
  --ds-color-blue-200: #f8f8f8;
  --ds-color-blue-300: #e8e8e8;
  --ds-color-blue-400: #d0d0d0;
  --ds-color-blue-500: #b8b8b8;
  --ds-color-blue-600: #888888;
  --ds-color-blue-700: #666666;
  --ds-color-blue-800: #333333;
  --ds-color-blue-900: #000000;

  --ds-color-green-50: #ffffff;
  --ds-color-green-100: #ffffff;
  --ds-color-green-200: #f8f8f8;
  --ds-color-green-300: #e8e8e8;
  --ds-color-green-400: #d0d0d0;
  --ds-color-green-500: #b8b8b8;
  --ds-color-green-600: #888888;
  --ds-color-green-700: #666666;
  --ds-color-green-800: #333333;
  --ds-color-green-900: #000000;

  --ds-color-red-50: #ffffff;
  --ds-color-red-100: #ffffff;
  --ds-color-red-200: #f8f8f8;
  --ds-color-red-300: #e8e8e8;
  --ds-color-red-400: #d0d0d0;
  --ds-color-red-500: #b8b8b8;
  --ds-color-red-600: #888888;
  --ds-color-red-700: #666666;
  --ds-color-red-800: #333333;
  --ds-color-red-900: #000000;

  --ds-color-yellow-50: #ffffff;
  --ds-color-yellow-100: #ffffff;
  --ds-color-yellow-200: #f8f8f8;
  --ds-color-yellow-300: #e8e8e8;
  --ds-color-yellow-400: #d0d0d0;
  --ds-color-yellow-500: #b8b8b8;
  --ds-color-yellow-600: #888888;
  --ds-color-yellow-700: #666666;
  --ds-color-yellow-800: #333333;
  --ds-color-yellow-900: #000000;

  --ds-color-purple-50: #ffffff;
  --ds-color-purple-100: #ffffff;
  --ds-color-purple-200: #f8f8f8;
  --ds-color-purple-300: #e8e8e8;
  --ds-color-purple-400: #d0d0d0;
  --ds-color-purple-500: #b8b8b8;
  --ds-color-purple-600: #888888;
  --ds-color-purple-700: #666666;
  --ds-color-purple-800: #333333;
  --ds-color-purple-900: #000000;

  /* === SEMANTIC COLORS - PRINT === */

  /* Text colors - high contrast for print */
  --ds-text-primary: #000000;
  --ds-text-secondary: #333333;
  --ds-text-tertiary: #666666;
  --ds-text-inverse: #ffffff;
  --ds-text-disabled: #888888;

  /* Surface colors - white background */
  --ds-surface-primary: #ffffff;
  --ds-surface-secondary: #f8f8f8;
  --ds-surface-tertiary: #e8e8e8;
  --ds-surface-inverse: #000000;

  /* Interactive colors - simplified */
  --ds-interactive-primary: #000000;
  --ds-interactive-primary-hover: #000000;
  --ds-interactive-primary-active: #000000;
  --ds-interactive-secondary: #666666;
  --ds-interactive-secondary-hover: #666666;
  --ds-interactive-secondary-active: #666666;

  /* Status colors - use patterns instead of colors */
  --ds-status-success: #000000;
  --ds-status-success-bg: #ffffff;
  --ds-status-error: #000000;
  --ds-status-error-bg: #ffffff;
  --ds-status-warning: #000000;
  --ds-status-warning-bg: #ffffff;
  --ds-status-info: #000000;
  --ds-status-info-bg: #ffffff;

  /* Border colors - black borders */
  --ds-border-primary: #000000;
  --ds-border-secondary: #666666;
  --ds-border-tertiary: #888888;
  --ds-border-focus: #000000;
  --ds-border-error: #000000;

  /* === COMPONENT TOKENS - PRINT === */

  /* Button colors - no buttons in print */
  --ds-button-primary-bg: transparent;
  --ds-button-primary-fg: #000000;
  --ds-button-primary-border: #000000;
  --ds-button-primary-bg-hover: transparent;
  --ds-button-primary-border-hover: #000000;
  --ds-button-primary-bg-active: transparent;

  --ds-button-secondary-bg: transparent;
  --ds-button-secondary-fg: #000000;
  --ds-button-secondary-border: #666666;
  --ds-button-secondary-bg-hover: transparent;
  --ds-button-secondary-border-hover: #666666;
  --ds-button-secondary-bg-active: transparent;
  --ds-button-secondary-border-active: #666666;

  --ds-button-ghost-bg: transparent;
  --ds-button-ghost-fg: #000000;
  --ds-button-ghost-border: transparent;
  --ds-button-ghost-bg-hover: transparent;
  --ds-button-ghost-fg-hover: #000000;
  --ds-button-ghost-bg-active: transparent;
  --ds-button-ghost-fg-active: #000000;

  /* Input colors - borders only */
  --ds-input-bg: transparent;
  --ds-input-fg: #000000;
  --ds-input-border: #000000;
  --ds-input-bg-hover: transparent;
  --ds-input-border-hover: #000000;
  --ds-input-bg-focus: transparent;
  --ds-input-border-focus: #000000;
  --ds-input-placeholder: #666666;

  /* Card colors - borders for separation */
  --ds-card-bg: #ffffff;
  --ds-card-border: #000000;
  --ds-card-shadow: none;

  /* Modal colors - no modals in print */
  --ds-modal-bg: #ffffff;
  --ds-modal-border: #000000;
  --ds-modal-backdrop: transparent;
  --ds-modal-shadow: none;

  /* Dropdown colors - no dropdowns in print */
  --ds-dropdown-bg: #ffffff;
  --ds-dropdown-border: #000000;
  --ds-dropdown-shadow: none;

  /* === FOCUS TOKENS - PRINT === */
  --ds-focus-outline-color: #000000;
  --ds-focus-outline-width: 1px;
  --ds-focus-outline-offset: 1px;

  /* === SHADOW TOKENS - PRINT === */
  --ds-shadow-xs: none;
  --ds-shadow-sm: none;
  --ds-shadow-md: none;
  --ds-shadow-lg: none;
  --ds-shadow-xl: none;
  --ds-shadow-2xl: none;

  /* === PRINT SPECIFIC RULES === */

  /* Page breaks */
  .ds-page-break-before {
    page-break-before: always;
  }

  .ds-page-break-after {
    page-break-after: always;
  }

  .ds-page-break-inside-avoid {
    page-break-inside: avoid;
  }

  /* Typography adjustments for print */
  * {
    color: #000000 !important;
    background: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Table optimizations */
  table {
    border-collapse: collapse !important;
    width: 100% !important;
  }

  th, td {
    border: 1px solid #000000 !important;
    padding: 8px !important;
  }

  /* Link styling for print */
  a {
    color: #000000 !important;
    text-decoration: underline !important;
  }

  a::after {
    content: " (" attr(href) ")" !important;
    font-size: 0.8em !important;
    color: #666666 !important;
  }

  /* Image optimizations */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* === CONTAINER TOKENS === */
  --ds-container-sm: 100%;
  --ds-container-md: 100%;
  --ds-container-lg: 100%;
  --ds-container-xl: 100%;
  --ds-container-2xl: 100%;
}
/* DS: integrations/ant/ant-override.css - Ant Design integration */
/* layer: integrations */
/* Ant Design Button overrides */
.ant-btn {
  border-radius: var(--ds-border-radius-m) !important;
  font-family: inherit !important;
  font-size: var(--ds-typography-desktop-body-font-size) !important;
  font-weight: 500 !important;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard) !important;
}
.ant-btn-primary {
  background-color: var(--ds-interactive-primary) !important;
  border-color: var(--ds-interactive-primary) !important;
  color: var(--ds-text-inverse) !important;
}
.ant-btn-primary:hover {
  background-color: var(--ds-interactive-primary-hover) !important;
  border-color: var(--ds-interactive-primary-hover) !important;
}
.ant-btn-default {
  border-color: var(--ds-border-primary) !important;
  color: var(--ds-text-primary) !important;
}
.ant-btn-default:hover {
  border-color: var(--ds-border-secondary) !important;
  background-color: var(--ds-surface-secondary) !important;
}
.ant-btn-ghost {
  border-color: transparent !important;
  color: var(--ds-text-primary) !important;
}
.ant-btn-ghost:hover {
  background-color: var(--ds-surface-secondary) !important;
}
/* Ant Design Input overrides */
.ant-input {
  border-radius: var(--ds-border-radius-m) !important;
  border-color: var(--ds-border-primary) !important;
  font-family: inherit !important;
  font-size: var(--ds-typography-desktop-body-font-size) !important;
  color: var(--ds-text-primary) !important;
  background-color: var(--ds-surface-primary) !important;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard) !important;
}
.ant-input:focus,
.ant-input-focused {
  border-color: var(--ds-interactive-primary) !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important;
  outline: 2px solid var(--ds-focus-outline-color) !important;
  outline-offset: 2px !important;
}
.ant-input:hover {
  border-color: var(--ds-border-secondary) !important;
}
.ant-input-affix-wrapper {
  border-radius: var(--ds-border-radius-m) !important;
}
.ant-input-affix-wrapper-focused {
  border-color: var(--ds-interactive-primary) !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important;
}
/* Ant Design Select overrides */
.ant-select-selector {
  border-radius: var(--ds-border-radius-m) !important;
  border-color: var(--ds-border-primary) !important;
  font-family: inherit !important;
  font-size: var(--ds-typography-desktop-body-font-size) !important;
  color: var(--ds-text-primary) !important;
  background-color: var(--ds-surface-primary) !important;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard) !important;
}
.ant-select-focused .ant-select-selector {
  border-color: var(--ds-interactive-primary) !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important;
  outline: 2px solid var(--ds-focus-outline-color) !important;
  outline-offset: 2px !important;
}
.ant-select:hover .ant-select-selector {
  border-color: var(--ds-border-secondary) !important;
}
.ant-select-dropdown {
  border-radius: var(--ds-border-radius-m) !important;
  border: 1px solid var(--ds-border-primary) !important;
  box-shadow: var(--ds-shadow-lg) !important;
  background-color: var(--ds-surface-primary) !important;
}
.ant-select-dropdown .ant-select-item {
  color: var(--ds-text-primary) !important;
  font-family: inherit !important;
  font-size: var(--ds-typography-desktop-body-font-size) !important;
}
.ant-select-dropdown .ant-select-item:hover {
  background-color: var(--ds-surface-secondary) !important;
}
.ant-select-dropdown .ant-select-item-option-selected {
  background-color: var(--ds-interactive-primary-bg) !important;
  color: var(--ds-interactive-primary) !important;
  font-weight: 500 !important;
}
/* Ant Design Modal overrides */
.ant-modal {
  font-family: inherit !important;
}
.ant-modal-content {
  border-radius: var(--ds-border-radius-xl) !important;
  border: 1px solid var(--ds-border-primary) !important;
  box-shadow: var(--ds-shadow-2xl) !important;
  background-color: var(--ds-surface-primary) !important;
}
.ant-modal-header {
  border-bottom: 1px solid var(--ds-border-primary) !important;
  background-color: var(--ds-surface-secondary) !important;
  border-radius: var(--ds-border-radius-xl) var(--ds-border-radius-xl) 0 0 !important;
}
.ant-modal-title {
  font-size: var(--ds-typography-desktop-h3-font-size) !important;
  font-weight: 600 !important;
  color: var(--ds-text-primary) !important;
}
.ant-modal-body {
  color: var(--ds-text-primary) !important;
  font-size: var(--ds-typography-desktop-body-font-size) !important;
}
.ant-modal-footer {
  border-top: 1px solid var(--ds-border-primary) !important;
  background-color: var(--ds-surface-secondary) !important;
  border-radius: 0 0 var(--ds-border-radius-xl) var(--ds-border-radius-xl) !important;
}
.ant-modal-close {
  color: var(--ds-text-secondary) !important;
}
.ant-modal-close:hover {
  color: var(--ds-text-primary) !important;
}
.ant-modal-close:focus {
  outline: 2px solid var(--ds-focus-outline-color) !important;
  outline-offset: 2px !important;
}
/* Ant Design Table overrides */
.ant-table {
  font-family: inherit !important;
  color: var(--ds-text-primary) !important;
}
.ant-table-thead > tr > th {
  background-color: var(--ds-surface-secondary) !important;
  border-bottom: 1px solid var(--ds-border-primary) !important;
  color: var(--ds-text-primary) !important;
  font-weight: 600 !important;
  font-size: var(--ds-typography-desktop-small-font-size) !important;
}
.ant-table-tbody > tr > td {
  border-bottom: 1px solid var(--ds-border-secondary) !important;
  color: var(--ds-text-primary) !important;
  font-size: var(--ds-typography-desktop-body-font-size) !important;
}
.ant-table-tbody > tr:hover > td {
  background-color: var(--ds-surface-secondary) !important;
}
.ant-table-tbody > tr.ant-table-row-selected > td {
  background-color: var(--ds-interactive-primary-bg) !important;
}
.ant-pagination {
  font-family: inherit !important;
}
.ant-pagination-item {
  border: 1px solid var(--ds-border-primary) !important;
  border-radius: var(--ds-border-radius-2xs) !important;
}
.ant-pagination-item:hover {
  border-color: var(--ds-border-secondary) !important;
}
.ant-pagination-item-active {
  background-color: var(--ds-interactive-primary) !important;
  border-color: var(--ds-interactive-primary) !important;
  color: var(--ds-text-inverse) !important;
}
/* Ant Design Form overrides */
.ant-form-item-label > label {
  font-size: var(--ds-typography-desktop-small-font-size) !important;
  font-weight: 500 !important;
  color: var(--ds-text-primary) !important;
}
.ant-form-item-explain {
  font-size: var(--ds-typography-desktop-extra-small-font-size) !important;
  color: var(--ds-status-error) !important;
}
.ant-form-item-has-error .ant-input,
.ant-form-item-has-error .ant-input-affix-wrapper,
.ant-form-item-has-error .ant-select-selector {
  border-color: var(--ds-status-error) !important;
}
.ant-form-item-has-error .ant-input:focus,
.ant-form-item-has-error .ant-input-affix-wrapper-focused,
.ant-form-item-has-error .ant-select-focused .ant-select-selector {
  border-color: var(--ds-status-error) !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1) !important;
}
/* Ant Design Card overrides */
.ant-card {
  border-radius: var(--ds-border-radius-l) !important;
  border: 1px solid var(--ds-border-primary) !important;
  box-shadow: var(--ds-shadow-sm) !important;
  background-color: var(--ds-surface-primary) !important;
}
.ant-card-head {
  border-bottom: 1px solid var(--ds-border-primary) !important;
  background-color: var(--ds-surface-secondary) !important;
  border-radius: var(--ds-border-radius-l) var(--ds-border-radius-l) 0 0 !important;
}
.ant-card-head-title {
  font-size: var(--ds-typography-desktop-h4-font-size) !important;
  font-weight: 600 !important;
  color: var(--ds-text-primary) !important;
}
.ant-card-body {
  color: var(--ds-text-primary) !important;
  font-size: var(--ds-typography-desktop-body-font-size) !important;
}
/* Ant Design Notification overrides */
.ant-notification {
  font-family: inherit !important;
}
.ant-notification-notice {
  border-radius: var(--ds-border-radius-m) !important;
  border: 1px solid var(--ds-border-primary) !important;
  box-shadow: var(--ds-shadow-lg) !important;
  background-color: var(--ds-surface-primary) !important;
}
.ant-notification-notice-message {
  font-size: var(--ds-typography-desktop-body-font-size) !important;
  font-weight: 600 !important;
  color: var(--ds-text-primary) !important;
}
.ant-notification-notice-description {
  font-size: var(--ds-typography-desktop-small-font-size) !important;
  color: var(--ds-text-secondary) !important;
}
/* Ant Design Message overrides */
.ant-message {
  font-family: inherit !important;
}
.ant-message-notice {
  border-radius: var(--ds-border-radius-m) !important;
  border: 1px solid var(--ds-border-primary) !important;
  box-shadow: var(--ds-shadow-lg) !important;
  background-color: var(--ds-surface-primary) !important;
}
.ant-message-notice-content {
  font-size: var(--ds-typography-desktop-body-font-size) !important;
  color: var(--ds-text-primary) !important;
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ant-modal {
    margin: var(--ds-spacing-m) !important;
    max-width: none !important;
    width: calc(100vw - 2 * var(--ds-spacing-m)) !important;
  }

  .ant-modal-content {
    border-radius: var(--ds-border-radius-m) !important;
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ant-btn,
  .ant-input,
  .ant-select-selector,
  .ant-modal-content,
  .ant-card,
  .ant-notification-notice,
  .ant-message-notice {
    border-width: 2px !important;
  }

  .ant-table-thead > tr > th {
    border-bottom-width: 2px !important;
  }

  .ant-table-tbody > tr > td {
    border-bottom-width: 2px !important;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ant-btn,
  .ant-input,
  .ant-select-selector,
  .ant-pagination-item {
    transition: none !important;
  }
}
/* Print styles */
@media print {
  .ant-modal,
  .ant-notification,
  .ant-message {
    display: none !important;
  }

  .ant-table {
    border-collapse: collapse !important;
  }

  .ant-table-thead > tr > th,
  .ant-table-tbody > tr > td {
    border: 1px solid #000 !important;
  }
}
/* DS: integrations/charts/chartjs.css - Chart.js integration */
/* layer: integrations */
.ds-chartjs-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 300px;
}
.ds-chartjs-canvas {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
}
/* Chart.js tooltip override */
.ds-chartjs-tooltip {
  background-color: var(--ds-surface-primary) !important;
  border: 1px solid var(--ds-border-primary) !important;
  border-radius: var(--ds-border-radius-m) !important;
  box-shadow: var(--ds-shadow-lg) !important;
  color: var(--ds-text-primary) !important;
  font-family: inherit !important;
  font-size: var(--ds-typography-desktop-small-font-size) !important;
  padding: var(--ds-spacing-s) var(--ds-spacing-m) !important;
  pointer-events: none !important;
  position: absolute !important;
  transform: translate(-50%, 0) !important;
  z-index: var(--ds-z-index-tooltip) !important;
}
.ds-chartjs-tooltip-title {
  font-weight: 600 !important;
  margin-bottom: var(--ds-spacing-2xs) !important;
  color: var(--ds-text-primary) !important;
}
.ds-chartjs-tooltip-body {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ds-spacing-2xs) !important;
}
.ds-chartjs-tooltip-item {
  display: flex !important;
  align-items: center !important;
  gap: var(--ds-spacing-s) !important;
  font-size: var(--ds-typography-desktop-small-font-size) !important;
}
.ds-chartjs-tooltip-item-color {
  width: 0.75rem !important;
  height: 0.75rem !important;
  border-radius: var(--ds-border-radius-2xs) !important;
  flex-shrink: 0 !important;
}
.ds-chartjs-tooltip-arrow {
  width: 0 !important;
  height: 0 !important;
  border-style: solid !important;
  position: absolute !important;
}
.ds-chartjs-tooltip-arrow-top {
  border-width: 8px 8px 0 8px !important;
  border-color: var(--ds-surface-primary) transparent transparent transparent !important;
  bottom: -8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
.ds-chartjs-tooltip-arrow-top::before {
  content: '' !important;
  position: absolute !important;
  top: -1px !important;
  left: -8px !important;
  width: 0 !important;
  height: 0 !important;
  border-style: solid !important;
  border-width: 8px 8px 0 8px !important;
  border-color: var(--ds-border-primary) transparent transparent transparent !important;
}
/* Chart.js legend override */
.ds-chartjs-legend {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--ds-spacing-m) !important;
  justify-content: center !important;
  padding: var(--ds-spacing-m) !important;
  background-color: var(--ds-surface-primary) !important;
  border: 1px solid var(--ds-border-primary) !important;
  border-radius: var(--ds-border-radius-m) !important;
  margin: var(--ds-spacing-m) 0 !important;
}
.ds-chartjs-legend-item {
  display: flex !important;
  align-items: center !important;
  gap: var(--ds-spacing-s) !important;
  cursor: pointer !important;
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs) !important;
  border-radius: var(--ds-border-radius-2xs) !important;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard) !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
}
.ds-chartjs-legend-item:hover {
  background-color: var(--ds-surface-secondary) !important;
}
.ds-chartjs-legend-item-hidden {
  opacity: var(--ds-opacity-disabled) !important;
}
.ds-chartjs-legend-item-hidden .ds-chartjs-legend-item-text {
  text-decoration: line-through !important;
}
.ds-chartjs-legend-item-color {
  width: 0.75rem !important;
  height: 0.75rem !important;
  border-radius: var(--ds-border-radius-2xs) !important;
  flex-shrink: 0 !important;
}
.ds-chartjs-legend-item-text {
  font-size: var(--ds-typography-desktop-small-font-size) !important;
  color: var(--ds-text-primary) !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
/* Chart.js responsive adjustments */
@media (max-width: 768px) {
  .ds-chartjs-legend {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--ds-spacing-s) !important;
  }

  .ds-chartjs-tooltip {
    max-width: 250px !important;
    font-size: var(--ds-typography-desktop-extra-small-font-size) !important;
  }
}
/* Chart.js high contrast */
@media (prefers-contrast: high) {
  .ds-chartjs-tooltip {
    border-width: 2px !important;
  }

  .ds-chartjs-legend {
    border-width: 2px !important;
  }
}
/* Chart.js print styles */
@media print {
  .ds-chartjs-tooltip {
    display: none !important;
  }

  .ds-chartjs-legend {
    border: 1px solid #000 !important;
    background: #fff !important;
    -moz-column-break-inside: avoid !important;
         break-inside: avoid !important;
  }
}
/* DS: integrations/charts/echarts.css - ECharts integration */
/* layer: integrations */
.ds-echarts-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 300px;
}
.ds-echarts-canvas {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
}
/* ECharts tooltip override */
.ds-echarts-tooltip {
  background-color: var(--ds-surface-primary) !important;
  border: 1px solid var(--ds-border-primary) !important;
  border-radius: var(--ds-border-radius-m) !important;
  box-shadow: var(--ds-shadow-lg) !important;
  color: var(--ds-text-primary) !important;
  font-family: inherit !important;
  font-size: var(--ds-typography-desktop-small-font-size) !important;
  padding: var(--ds-spacing-s) var(--ds-spacing-m) !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: var(--ds-z-index-tooltip) !important;
}
.ds-echarts-tooltip-title {
  font-weight: 600 !important;
  margin-bottom: var(--ds-spacing-2xs) !important;
  color: var(--ds-text-primary) !important;
}
.ds-echarts-tooltip-content {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ds-spacing-2xs) !important;
}
.ds-echarts-tooltip-item {
  display: flex !important;
  align-items: center !important;
  gap: var(--ds-spacing-s) !important;
  font-size: var(--ds-typography-desktop-small-font-size) !important;
}
.ds-echarts-tooltip-item-marker {
  width: 0.75rem !important;
  height: 0.75rem !important;
  border-radius: var(--ds-border-radius-2xs) !important;
  flex-shrink: 0 !important;
}
.ds-echarts-tooltip-arrow {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  border-style: solid !important;
}
.ds-echarts-tooltip-arrow-top {
  border-width: 8px 8px 0 8px !important;
  border-color: var(--ds-surface-primary) transparent transparent transparent !important;
  bottom: -8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
.ds-echarts-tooltip-arrow-top::before {
  content: '' !important;
  position: absolute !important;
  top: -1px !important;
  left: -8px !important;
  width: 0 !important;
  height: 0 !important;
  border-style: solid !important;
  border-width: 8px 8px 0 8px !important;
  border-color: var(--ds-border-primary) transparent transparent transparent !important;
}
/* ECharts legend override */
.ds-echarts-legend {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--ds-spacing-m) !important;
  justify-content: center !important;
  padding: var(--ds-spacing-m) !important;
  background-color: var(--ds-surface-primary) !important;
  border: 1px solid var(--ds-border-primary) !important;
  border-radius: var(--ds-border-radius-m) !important;
}
.ds-echarts-legend-item {
  display: flex !important;
  align-items: center !important;
  gap: var(--ds-spacing-s) !important;
  cursor: pointer !important;
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs) !important;
  border-radius: var(--ds-border-radius-2xs) !important;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard) !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
}
.ds-echarts-legend-item:hover {
  background-color: var(--ds-surface-secondary) !important;
}
.ds-echarts-legend-item-inactive {
  opacity: var(--ds-opacity-disabled) !important;
}
.ds-echarts-legend-item-inactive .ds-echarts-legend-item-text {
  text-decoration: line-through !important;
}
.ds-echarts-legend-item-icon {
  width: 0.75rem !important;
  height: 0.75rem !important;
  border-radius: var(--ds-border-radius-2xs) !important;
  flex-shrink: 0 !important;
}
.ds-echarts-legend-item-text {
  font-size: var(--ds-typography-desktop-small-font-size) !important;
  color: var(--ds-text-primary) !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
/* ECharts axis labels */
.ds-echarts-axis-label {
  font-size: var(--ds-typography-desktop-small-font-size) !important;
  color: var(--ds-text-secondary) !important;
  font-family: inherit !important;
}
.ds-echarts-axis-title {
  font-size: var(--ds-typography-desktop-body-font-size) !important;
  font-weight: 600 !important;
  color: var(--ds-text-primary) !important;
  font-family: inherit !important;
}
/* ECharts grid lines */
.ds-echarts-grid-line {
  stroke: var(--ds-border-primary) !important;
  stroke-width: 1 !important;
}
.ds-echarts-grid-line-major {
  stroke: var(--ds-border-secondary) !important;
  stroke-width: 1 !important;
}
/* ECharts data zoom */
.ds-echarts-data-zoom {
  background-color: var(--ds-surface-primary) !important;
  border: 1px solid var(--ds-border-primary) !important;
  border-radius: var(--ds-border-radius-2xs) !important;
}
.ds-echarts-data-zoom-handle {
  background-color: var(--ds-interactive-primary) !important;
  border: 2px solid var(--ds-surface-primary) !important;
  border-radius: var(--ds-border-radius-2xs) !important;
}
.ds-echarts-data-zoom-mask {
  background-color: rgba(255, 255, 255, 0.8) !important;
}
/* ECharts toolbox */
.ds-echarts-toolbox {
  background-color: var(--ds-surface-primary) !important;
  border: 1px solid var(--ds-border-primary) !important;
  border-radius: var(--ds-border-radius-m) !important;
  box-shadow: var(--ds-shadow-sm) !important;
}
.ds-echarts-toolbox-item {
  color: var(--ds-text-secondary) !important;
  border-radius: var(--ds-border-radius-2xs) !important;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard) !important;
}
.ds-echarts-toolbox-item:hover {
  background-color: var(--ds-surface-secondary) !important;
  color: var(--ds-text-primary) !important;
}
/* ECharts loading */
.ds-echarts-loading {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: var(--ds-z-index-modal) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--ds-spacing-s) !important;
  background-color: var(--ds-surface-primary) !important;
  border: 1px solid var(--ds-border-primary) !important;
  border-radius: var(--ds-border-radius-m) !important;
  padding: var(--ds-spacing-m) !important;
  box-shadow: var(--ds-shadow-lg) !important;
}
.ds-echarts-loading-text {
  font-size: var(--ds-typography-desktop-body-font-size) !important;
  color: var(--ds-text-primary) !important;
  margin: 0 !important;
}
/* ECharts responsive adjustments */
@media (max-width: 768px) {
  .ds-echarts-legend {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--ds-spacing-s) !important;
  }

  .ds-echarts-tooltip {
    max-width: 250px !important;
    font-size: var(--ds-typography-desktop-extra-small-font-size) !important;
  }

  .ds-echarts-loading {
    padding: var(--ds-spacing-s) !important;
  }
}
/* ECharts high contrast */
@media (prefers-contrast: high) {
  .ds-echarts-tooltip {
    border-width: 2px !important;
  }

  .ds-echarts-legend {
    border-width: 2px !important;
  }

  .ds-echarts-grid-line {
    stroke-width: 2 !important;
  }
}
/* ECharts print styles */
@media print {
  .ds-echarts-tooltip {
    display: none !important;
  }

  .ds-echarts-legend {
    border: 1px solid #000 !important;
    background: #fff !important;
    -moz-column-break-inside: avoid !important;
         break-inside: avoid !important;
  }

  .ds-echarts-loading {
    display: none !important;
  }
}
/* DS: integrations/charts/nivo.css - Nivo integration */
/* layer: integrations */
.ds-nivo-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 300px;
}
.ds-nivo-svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}
/* Nivo tooltip override */
.ds-nivo-tooltip {
  background-color: var(--ds-surface-primary) !important;
  border: 1px solid var(--ds-border-primary) !important;
  border-radius: var(--ds-border-radius-m) !important;
  box-shadow: var(--ds-shadow-lg) !important;
  color: var(--ds-text-primary) !important;
  font-family: inherit !important;
  font-size: var(--ds-typography-desktop-small-font-size) !important;
  padding: var(--ds-spacing-s) var(--ds-spacing-m) !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: var(--ds-z-index-tooltip) !important;
}
.ds-nivo-tooltip-title {
  font-weight: 600 !important;
  margin-bottom: var(--ds-spacing-2xs) !important;
  color: var(--ds-text-primary) !important;
}
.ds-nivo-tooltip-content {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ds-spacing-2xs) !important;
}
.ds-nivo-tooltip-item {
  display: flex !important;
  align-items: center !important;
  gap: var(--ds-spacing-s) !important;
  font-size: var(--ds-typography-desktop-small-font-size) !important;
}
.ds-nivo-tooltip-item-color {
  width: 0.75rem !important;
  height: 0.75rem !important;
  border-radius: var(--ds-border-radius-2xs) !important;
  flex-shrink: 0 !important;
}
.ds-nivo-tooltip-item-label {
  color: var(--ds-text-primary) !important;
  margin: 0 !important;
}
.ds-nivo-tooltip-item-value {
  color: var(--ds-text-secondary) !important;
  margin: 0 0 0 auto !important;
  font-weight: 600 !important;
}
/* Nivo legend override */
.ds-nivo-legend {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--ds-spacing-m) !important;
  justify-content: center !important;
  padding: var(--ds-spacing-m) !important;
  background-color: var(--ds-surface-primary) !important;
  border: 1px solid var(--ds-border-primary) !important;
  border-radius: var(--ds-border-radius-m) !important;
}
.ds-nivo-legend-item {
  display: flex !important;
  align-items: center !important;
  gap: var(--ds-spacing-s) !important;
  cursor: pointer !important;
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs) !important;
  border-radius: var(--ds-border-radius-2xs) !important;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard) !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
}
.ds-nivo-legend-item:hover {
  background-color: var(--ds-surface-secondary) !important;
}
.ds-nivo-legend-item-hidden {
  opacity: var(--ds-opacity-disabled) !important;
}
.ds-nivo-legend-item-hidden .ds-nivo-legend-item-text {
  text-decoration: line-through !important;
}
.ds-nivo-legend-item-color {
  width: 0.75rem !important;
  height: 0.75rem !important;
  border-radius: var(--ds-border-radius-2xs) !important;
  flex-shrink: 0 !important;
}
.ds-nivo-legend-item-text {
  font-size: var(--ds-typography-desktop-small-font-size) !important;
  color: var(--ds-text-primary) !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
/* Nivo axis styles */
.ds-nivo-axis {
  font-size: var(--ds-typography-desktop-small-font-size) !important;
  color: var(--ds-text-secondary) !important;
  font-family: inherit !important;
}
.ds-nivo-axis-title {
  font-size: var(--ds-typography-desktop-body-font-size) !important;
  font-weight: 600 !important;
  color: var(--ds-text-primary) !important;
  font-family: inherit !important;
}
.ds-nivo-axis-tick-line {
  stroke: var(--ds-border-primary) !important;
  stroke-width: 1 !important;
}
.ds-nivo-axis-domain {
  stroke: var(--ds-border-primary) !important;
  stroke-width: 1 !important;
}
/* Nivo grid styles */
.ds-nivo-grid-line {
  stroke: var(--ds-border-primary) !important;
  stroke-width: 1 !important;
  opacity: 0.5 !important;
}
/* Nivo annotations */
.ds-nivo-annotation {
  fill: var(--ds-text-primary) !important;
  font-size: var(--ds-typography-desktop-small-font-size) !important;
  font-family: inherit !important;
}
/* Nivo interactive elements */
.ds-nivo-slice {
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard) !important;
}
.ds-nivo-slice:hover {
  transform: scale(1.05) !important;
}
.ds-nivo-bar {
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard) !important;
}
.ds-nivo-bar:hover {
  opacity: 0.8 !important;
}
.ds-nivo-dot {
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard) !important;
}
.ds-nivo-dot:hover {
  transform: scale(1.2) !important;
  stroke-width: 2 !important;
}
/* Nivo loading */
.ds-nivo-loading {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: var(--ds-z-index-modal) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--ds-spacing-s) !important;
  background-color: var(--ds-surface-primary) !important;
  border: 1px solid var(--ds-border-primary) !important;
  border-radius: var(--ds-border-radius-m) !important;
  padding: var(--ds-spacing-m) !important;
  box-shadow: var(--ds-shadow-lg) !important;
}
.ds-nivo-loading-text {
  font-size: var(--ds-typography-desktop-body-font-size) !important;
  color: var(--ds-text-primary) !important;
  margin: 0 !important;
}
/* Nivo responsive adjustments */
@media (max-width: 768px) {
  .ds-nivo-legend {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--ds-spacing-s) !important;
  }

  .ds-nivo-tooltip {
    max-width: 250px !important;
    font-size: var(--ds-typography-desktop-extra-small-font-size) !important;
  }

  .ds-nivo-loading {
    padding: var(--ds-spacing-s) !important;
  }
}
/* Nivo high contrast */
@media (prefers-contrast: high) {
  .ds-nivo-tooltip {
    border-width: 2px !important;
  }

  .ds-nivo-legend {
    border-width: 2px !important;
  }

  .ds-nivo-axis-tick-line,
  .ds-nivo-axis-domain {
    stroke-width: 2 !important;
  }

  .ds-nivo-grid-line {
    stroke-width: 2 !important;
    opacity: 1 !important;
  }
}
/* Nivo reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-nivo-slice,
  .ds-nivo-bar,
  .ds-nivo-dot {
    transition: none !important;
  }

  .ds-nivo-slice:hover {
    transform: none !important;
  }

  .ds-nivo-bar:hover {
    opacity: 1 !important;
  }

  .ds-nivo-dot:hover {
    transform: none !important;
    stroke-width: 1 !important;
  }
}
/* Nivo print styles */
@media print {
  .ds-nivo-tooltip {
    display: none !important;
  }

  .ds-nivo-legend {
    border: 1px solid #000 !important;
    background: #fff !important;
    -moz-column-break-inside: avoid !important;
         break-inside: avoid !important;
  }

  .ds-nivo-loading {
    display: none !important;
  }
}
/* DS: integrations/charts/plotly.css - Plotly integration */
/* layer: integrations */
.ds-plotly-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 300px;
}
.ds-plotly-graph {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
}
/* Plotly modebar override */
.ds-plotly-modebar {
  background-color: var(--ds-surface-primary) !important;
  border: 1px solid var(--ds-border-primary) !important;
  border-radius: var(--ds-border-radius-m) !important;
  box-shadow: var(--ds-shadow-sm) !important;
}
.ds-plotly-modebar-button {
  color: var(--ds-text-secondary) !important;
  border-radius: var(--ds-border-radius-2xs) !important;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard) !important;
}
.ds-plotly-modebar-button:hover {
  background-color: var(--ds-surface-secondary) !important;
  color: var(--ds-text-primary) !important;
}
.ds-plotly-modebar-button.active {
  background-color: var(--ds-interactive-primary-bg) !important;
  color: var(--ds-interactive-primary) !important;
}
/* Plotly tooltip override */
.ds-plotly-tooltip {
  background-color: var(--ds-surface-primary) !important;
  border: 1px solid var(--ds-border-primary) !important;
  border-radius: var(--ds-border-radius-m) !important;
  box-shadow: var(--ds-shadow-lg) !important;
  color: var(--ds-text-primary) !important;
  font-family: inherit !important;
  font-size: var(--ds-typography-desktop-small-font-size) !important;
  padding: var(--ds-spacing-s) var(--ds-spacing-m) !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: var(--ds-z-index-tooltip) !important;
}
.ds-plotly-tooltip-title {
  font-weight: 600 !important;
  margin-bottom: var(--ds-spacing-2xs) !important;
  color: var(--ds-text-primary) !important;
}
.ds-plotly-tooltip-content {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ds-spacing-2xs) !important;
}
.ds-plotly-tooltip-item {
  display: flex !important;
  align-items: center !important;
  gap: var(--ds-spacing-s) !important;
  font-size: var(--ds-typography-desktop-small-font-size) !important;
}
.ds-plotly-tooltip-item-color {
  width: 0.75rem !important;
  height: 0.75rem !important;
  border-radius: var(--ds-border-radius-2xs) !important;
  flex-shrink: 0 !important;
}
/* Plotly legend override */
.ds-plotly-legend {
  background-color: var(--ds-surface-primary) !important;
  border: 1px solid var(--ds-border-primary) !important;
  border-radius: var(--ds-border-radius-m) !important;
  box-shadow: var(--ds-shadow-sm) !important;
  font-family: inherit !important;
}
.ds-plotly-legend-item {
  color: var(--ds-text-primary) !important;
  cursor: pointer !important;
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs) !important;
  border-radius: var(--ds-border-radius-2xs) !important;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard) !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
}
.ds-plotly-legend-item:hover {
  background-color: var(--ds-surface-secondary) !important;
}
.ds-plotly-legend-item.inactive {
  opacity: var(--ds-opacity-disabled) !important;
}
.ds-plotly-legend-item.inactive .ds-plotly-legend-item-text {
  text-decoration: line-through !important;
}
.ds-plotly-legend-item-text {
  font-size: var(--ds-typography-desktop-small-font-size) !important;
  color: var(--ds-text-primary) !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
/* Plotly axis labels */
.ds-plotly-axis-text {
  font-family: inherit !important;
  font-size: var(--ds-typography-desktop-small-font-size) !important;
  color: var(--ds-text-secondary) !important;
  fill: var(--ds-text-secondary) !important;
}
.ds-plotly-axis-title {
  font-family: inherit !important;
  font-size: var(--ds-typography-desktop-body-font-size) !important;
  font-weight: 600 !important;
  color: var(--ds-text-primary) !important;
  fill: var(--ds-text-primary) !important;
}
/* Plotly grid lines */
.ds-plotly-grid-line {
  stroke: var(--ds-border-primary) !important;
  stroke-width: 1 !important;
  opacity: 0.5 !important;
}
.ds-plotly-zero-line {
  stroke: var(--ds-border-primary) !important;
  stroke-width: 2 !important;
}
/* Plotly hover effects */
.ds-plotly-hover-layer {
  pointer-events: none !important;
}
.ds-plotly-point {
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard) !important;
}
.ds-plotly-point:hover {
  transform: scale(1.2) !important;
}
.ds-plotly-bar:hover {
  opacity: 0.8 !important;
}
/* Plotly slider */
.ds-plotly-slider {
  background-color: var(--ds-surface-primary) !important;
  border: 1px solid var(--ds-border-primary) !important;
  border-radius: var(--ds-border-radius-2xs) !important;
}
.ds-plotly-slider-handle {
  background-color: var(--ds-interactive-primary) !important;
  border: 2px solid var(--ds-surface-primary) !important;
  border-radius: var(--ds-border-radius-2xs) !important;
}
/* Plotly loading */
.ds-plotly-loading {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: var(--ds-z-index-modal) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--ds-spacing-s) !important;
  background-color: var(--ds-surface-primary) !important;
  border: 1px solid var(--ds-border-primary) !important;
  border-radius: var(--ds-border-radius-m) !important;
  padding: var(--ds-spacing-m) !important;
  box-shadow: var(--ds-shadow-lg) !important;
}
.ds-plotly-loading-text {
  font-size: var(--ds-typography-desktop-body-font-size) !important;
  color: var(--ds-text-primary) !important;
  margin: 0 !important;
}
/* Plotly responsive adjustments */
@media (max-width: 768px) {
  .ds-plotly-modebar {
    font-size: 0.75rem !important;
  }

  .ds-plotly-tooltip {
    max-width: 250px !important;
    font-size: var(--ds-typography-desktop-extra-small-font-size) !important;
  }

  .ds-plotly-loading {
    padding: var(--ds-spacing-s) !important;
  }
}
/* Plotly high contrast */
@media (prefers-contrast: high) {
  .ds-plotly-tooltip {
    border-width: 2px !important;
  }

  .ds-plotly-legend {
    border-width: 2px !important;
  }

  .ds-plotly-grid-line {
    stroke-width: 2 !important;
    opacity: 1 !important;
  }

  .ds-plotly-zero-line {
    stroke-width: 3 !important;
  }
}
/* Plotly reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-plotly-modebar-button {
    transition: none !important;
  }

  .ds-plotly-legend-item {
    transition: none !important;
  }

  .ds-plotly-point {
    transition: none !important;
  }

  .ds-plotly-point:hover {
    transform: none !important;
  }

  .ds-plotly-bar:hover {
    opacity: 1 !important;
  }
}
/* Plotly print styles */
@media print {
  .ds-plotly-modebar {
    display: none !important;
  }

  .ds-plotly-tooltip {
    display: none !important;
  }

  .ds-plotly-legend {
    border: 1px solid #000 !important;
    background: #fff !important;
    -moz-column-break-inside: avoid !important;
         break-inside: avoid !important;
  }

  .ds-plotly-loading {
    display: none !important;
  }
}
/* DS: integrations/charts/uplot.css - uPlot integration */
/* layer: integrations */
.ds-uplot-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 300px;
}
.ds-uplot-canvas {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
}
/* uPlot tooltip override */
.ds-uplot-tooltip {
  background-color: var(--ds-surface-primary) !important;
  border: 1px solid var(--ds-border-primary) !important;
  border-radius: var(--ds-border-radius-m) !important;
  box-shadow: var(--ds-shadow-lg) !important;
  color: var(--ds-text-primary) !important;
  font-family: inherit !important;
  font-size: var(--ds-typography-desktop-small-font-size) !important;
  padding: var(--ds-spacing-s) var(--ds-spacing-m) !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: var(--ds-z-index-tooltip) !important;
  white-space: nowrap !important;
}
.ds-uplot-tooltip-title {
  font-weight: 600 !important;
  margin-bottom: var(--ds-spacing-2xs) !important;
  color: var(--ds-text-primary) !important;
}
.ds-uplot-tooltip-content {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ds-spacing-2xs) !important;
}
.ds-uplot-tooltip-item {
  display: flex !important;
  align-items: center !important;
  gap: var(--ds-spacing-s) !important;
  font-size: var(--ds-typography-desktop-small-font-size) !important;
}
.ds-uplot-tooltip-item-color {
  width: 0.75rem !important;
  height: 0.75rem !important;
  border-radius: var(--ds-border-radius-2xs) !important;
  flex-shrink: 0 !important;
}
/* uPlot legend override */
.ds-uplot-legend {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--ds-spacing-m) !important;
  justify-content: center !important;
  padding: var(--ds-spacing-m) !important;
  background-color: var(--ds-surface-primary) !important;
  border: 1px solid var(--ds-border-primary) !important;
  border-radius: var(--ds-border-radius-m) !important;
}
.ds-uplot-legend-item {
  display: flex !important;
  align-items: center !important;
  gap: var(--ds-spacing-s) !important;
  cursor: pointer !important;
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs) !important;
  border-radius: var(--ds-border-radius-2xs) !important;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard) !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
}
.ds-uplot-legend-item:hover {
  background-color: var(--ds-surface-secondary) !important;
}
.ds-uplot-legend-item-off {
  opacity: var(--ds-opacity-disabled) !important;
}
.ds-uplot-legend-item-off .ds-uplot-legend-item-text {
  text-decoration: line-through !important;
}
.ds-uplot-legend-item-color {
  width: 0.75rem !important;
  height: 0.75rem !important;
  border-radius: var(--ds-border-radius-2xs) !important;
  flex-shrink: 0 !important;
}
.ds-uplot-legend-item-text {
  font-size: var(--ds-typography-desktop-small-font-size) !important;
  color: var(--ds-text-primary) !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
/* uPlot axis styles */
.ds-uplot-axis {
  font-family: inherit !important;
  font-size: var(--ds-typography-desktop-small-font-size) !important;
  color: var(--ds-text-secondary) !important;
}
.ds-uplot-axis-title {
  font-family: inherit !important;
  font-size: var(--ds-typography-desktop-body-font-size) !important;
  font-weight: 600 !important;
  color: var(--ds-text-primary) !important;
}
.ds-uplot-axis-line {
  stroke: var(--ds-border-primary) !important;
  stroke-width: 1 !important;
}
.ds-uplot-axis-tick {
  stroke: var(--ds-border-primary) !important;
  stroke-width: 1 !important;
}
/* uPlot grid styles */
.ds-uplot-grid {
  stroke: var(--ds-border-primary) !important;
  stroke-width: 1 !important;
  opacity: 0.5 !important;
}
.ds-uplot-grid-major {
  stroke: var(--ds-border-secondary) !important;
  stroke-width: 1 !important;
  opacity: 0.7 !important;
}
/* uPlot series styles */
.ds-uplot-series {
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard) !important;
}
.ds-uplot-series:hover {
  stroke-width: 3 !important;
  opacity: 1 !important;
}
.ds-uplot-point {
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard) !important;
}
.ds-uplot-point:hover {
  transform: scale(1.5) !important;
  stroke-width: 2 !important;
}
/* uPlot band styles */
.ds-uplot-band {
  fill-opacity: 0.1 !important;
  stroke: var(--ds-border-primary) !important;
  stroke-width: 1 !important;
}
/* uPlot cursor */
.ds-uplot-cursor-x {
  stroke: var(--ds-interactive-primary) !important;
  stroke-width: 1 !important;
}
.ds-uplot-cursor-y {
  stroke: var(--ds-interactive-primary) !important;
  stroke-width: 1 !important;
}
/* uPlot selection */
.ds-uplot-select {
  fill: var(--ds-interactive-primary) !important;
  fill-opacity: 0.1 !important;
  stroke: var(--ds-interactive-primary) !important;
  stroke-width: 1 !important;
}
/* uPlot loading */
.ds-uplot-loading {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: var(--ds-z-index-modal) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--ds-spacing-s) !important;
  background-color: var(--ds-surface-primary) !important;
  border: 1px solid var(--ds-border-primary) !important;
  border-radius: var(--ds-border-radius-m) !important;
  padding: var(--ds-spacing-m) !important;
  box-shadow: var(--ds-shadow-lg) !important;
}
.ds-uplot-loading-text {
  font-size: var(--ds-typography-desktop-body-font-size) !important;
  color: var(--ds-text-primary) !important;
  margin: 0 !important;
}
/* uPlot responsive adjustments */
@media (max-width: 768px) {
  .ds-uplot-legend {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--ds-spacing-s) !important;
  }

  .ds-uplot-tooltip {
    max-width: 250px !important;
    font-size: var(--ds-typography-desktop-extra-small-font-size) !important;
    white-space: normal !important;
  }

  .ds-uplot-loading {
    padding: var(--ds-spacing-s) !important;
  }
}
/* uPlot high contrast */
@media (prefers-contrast: high) {
  .ds-uplot-tooltip {
    border-width: 2px !important;
  }

  .ds-uplot-legend {
    border-width: 2px !important;
  }

  .ds-uplot-axis-line,
  .ds-uplot-axis-tick {
    stroke-width: 2 !important;
  }

  .ds-uplot-grid,
  .ds-uplot-grid-major {
    stroke-width: 2 !important;
    opacity: 1 !important;
  }

  .ds-uplot-cursor-x,
  .ds-uplot-cursor-y {
    stroke-width: 2 !important;
  }

  .ds-uplot-select {
    stroke-width: 2 !important;
    fill-opacity: 0.2 !important;
  }
}
/* uPlot reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-uplot-series {
    transition: none !important;
  }

  .ds-uplot-series:hover {
    stroke-width: 1 !important;
    opacity: 1 !important;
  }

  .ds-uplot-point {
    transition: none !important;
  }

  .ds-uplot-point:hover {
    transform: none !important;
    stroke-width: 1 !important;
  }
}
/* uPlot print styles */
@media print {
  .ds-uplot-tooltip {
    display: none !important;
  }

  .ds-uplot-legend {
    border: 1px solid #000 !important;
    background: #fff !important;
    -moz-column-break-inside: avoid !important;
         break-inside: avoid !important;
  }

  .ds-uplot-loading {
    display: none !important;
  }
}
/* DS: integrations/charts/visx.css - Visx integration */
/* layer: integrations */
.ds-visx-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 300px;
}
.ds-visx-svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}
/* Visx tooltip override */
.ds-visx-tooltip {
  background-color: var(--ds-surface-primary) !important;
  border: 1px solid var(--ds-border-primary) !important;
  border-radius: var(--ds-border-radius-m) !important;
  box-shadow: var(--ds-shadow-lg) !important;
  color: var(--ds-text-primary) !important;
  font-family: inherit !important;
  font-size: var(--ds-typography-desktop-small-font-size) !important;
  padding: var(--ds-spacing-s) var(--ds-spacing-m) !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: var(--ds-z-index-tooltip) !important;
}
.ds-visx-tooltip-title {
  font-weight: 600 !important;
  margin-bottom: var(--ds-spacing-2xs) !important;
  color: var(--ds-text-primary) !important;
}
.ds-visx-tooltip-content {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ds-spacing-2xs) !important;
}
.ds-visx-tooltip-item {
  display: flex !important;
  align-items: center !important;
  gap: var(--ds-spacing-s) !important;
  font-size: var(--ds-typography-desktop-small-font-size) !important;
}
.ds-visx-tooltip-item-color {
  width: 0.75rem !important;
  height: 0.75rem !important;
  border-radius: var(--ds-border-radius-2xs) !important;
  flex-shrink: 0 !important;
}
.ds-visx-tooltip-arrow {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  border-style: solid !important;
}
.ds-visx-tooltip-arrow-top {
  border-width: 8px 8px 0 8px !important;
  border-color: var(--ds-surface-primary) transparent transparent transparent !important;
  bottom: -8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
.ds-visx-tooltip-arrow-top::before {
  content: '' !important;
  position: absolute !important;
  top: -1px !important;
  left: -8px !important;
  width: 0 !important;
  height: 0 !important;
  border-style: solid !important;
  border-width: 8px 8px 0 8px !important;
  border-color: var(--ds-border-primary) transparent transparent transparent !important;
}
/* Visx legend override */
.ds-visx-legend {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--ds-spacing-m) !important;
  justify-content: center !important;
  padding: var(--ds-spacing-m) !important;
  background-color: var(--ds-surface-primary) !important;
  border: 1px solid var(--ds-border-primary) !important;
  border-radius: var(--ds-border-radius-m) !important;
}
.ds-visx-legend-item {
  display: flex !important;
  align-items: center !important;
  gap: var(--ds-spacing-s) !important;
  cursor: pointer !important;
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs) !important;
  border-radius: var(--ds-border-radius-2xs) !important;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard) !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
}
.ds-visx-legend-item:hover {
  background-color: var(--ds-surface-secondary) !important;
}
.ds-visx-legend-item-hidden {
  opacity: var(--ds-opacity-disabled) !important;
}
.ds-visx-legend-item-hidden .ds-visx-legend-item-text {
  text-decoration: line-through !important;
}
.ds-visx-legend-item-color {
  width: 0.75rem !important;
  height: 0.75rem !important;
  border-radius: var(--ds-border-radius-2xs) !important;
  flex-shrink: 0 !important;
}
.ds-visx-legend-item-text {
  font-size: var(--ds-typography-desktop-small-font-size) !important;
  color: var(--ds-text-primary) !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
/* Visx axis styles */
.ds-visx-axis {
  font-family: inherit !important;
  font-size: var(--ds-typography-desktop-small-font-size) !important;
  color: var(--ds-text-secondary) !important;
  fill: var(--ds-text-secondary) !important;
}
.ds-visx-axis-title {
  font-family: inherit !important;
  font-size: var(--ds-typography-desktop-body-font-size) !important;
  font-weight: 600 !important;
  color: var(--ds-text-primary) !important;
  fill: var(--ds-text-primary) !important;
}
.ds-visx-axis-line {
  stroke: var(--ds-border-primary) !important;
  stroke-width: 1 !important;
}
.ds-visx-axis-tick {
  stroke: var(--ds-border-primary) !important;
  stroke-width: 1 !important;
}
/* Visx grid styles */
.ds-visx-grid {
  stroke: var(--ds-border-primary) !important;
  stroke-width: 1 !important;
  opacity: 0.5 !important;
}
.ds-visx-grid-rows {
  stroke: var(--ds-border-primary) !important;
  stroke-width: 1 !important;
  opacity: 0.3 !important;
}
.ds-visx-grid-columns {
  stroke: var(--ds-border-primary) !important;
  stroke-width: 1 !important;
  opacity: 0.3 !important;
}
/* Visx bar styles */
.ds-visx-bar {
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard) !important;
}
.ds-visx-bar:hover {
  opacity: 0.8 !important;
}
/* Visx point styles */
.ds-visx-point {
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard) !important;
}
.ds-visx-point:hover {
  transform: scale(1.2) !important;
  stroke-width: 2 !important;
}
/* Visx area styles */
.ds-visx-area {
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard) !important;
}
.ds-visx-area:hover {
  opacity: 0.8 !important;
}
/* Visx line styles */
.ds-visx-line {
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard) !important;
}
.ds-visx-line:hover {
  stroke-width: 3 !important;
}
/* Visx annotation styles */
.ds-visx-annotation {
  fill: var(--ds-text-primary) !important;
  font-family: inherit !important;
  font-size: var(--ds-typography-desktop-small-font-size) !important;
  font-weight: 500 !important;
}
.ds-visx-annotation-line {
  stroke: var(--ds-border-primary) !important;
  stroke-width: 1 !important;
}
.ds-visx-annotation-connector {
  fill: none !important;
  stroke: var(--ds-border-primary) !important;
  stroke-width: 1 !important;
}
/* Visx brush styles */
.ds-visx-brush {
  fill: var(--ds-interactive-primary) !important;
  fill-opacity: 0.1 !important;
  stroke: var(--ds-interactive-primary) !important;
  stroke-width: 1 !important;
}
.ds-visx-brush-handle {
  fill: var(--ds-interactive-primary) !important;
  stroke: var(--ds-surface-primary) !important;
  stroke-width: 2 !important;
}
/* Visx loading */
.ds-visx-loading {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: var(--ds-z-index-modal) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--ds-spacing-s) !important;
  background-color: var(--ds-surface-primary) !important;
  border: 1px solid var(--ds-border-primary) !important;
  border-radius: var(--ds-border-radius-m) !important;
  padding: var(--ds-spacing-m) !important;
  box-shadow: var(--ds-shadow-lg) !important;
}
.ds-visx-loading-text {
  font-size: var(--ds-typography-desktop-body-font-size) !important;
  color: var(--ds-text-primary) !important;
  margin: 0 !important;
}
/* Visx responsive adjustments */
@media (max-width: 768px) {
  .ds-visx-legend {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--ds-spacing-s) !important;
  }

  .ds-visx-tooltip {
    max-width: 250px !important;
    font-size: var(--ds-typography-desktop-extra-small-font-size) !important;
  }

  .ds-visx-loading {
    padding: var(--ds-spacing-s) !important;
  }
}
/* Visx high contrast */
@media (prefers-contrast: high) {
  .ds-visx-tooltip {
    border-width: 2px !important;
  }

  .ds-visx-legend {
    border-width: 2px !important;
  }

  .ds-visx-axis-line,
  .ds-visx-axis-tick {
    stroke-width: 2 !important;
  }

  .ds-visx-grid,
  .ds-visx-grid-rows,
  .ds-visx-grid-columns {
    stroke-width: 2 !important;
    opacity: 1 !important;
  }

  .ds-visx-annotation-line,
  .ds-visx-annotation-connector {
    stroke-width: 2 !important;
  }

  .ds-visx-brush,
  .ds-visx-brush-handle {
    stroke-width: 2 !important;
  }
}
/* Visx reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-visx-bar {
    transition: none !important;
  }

  .ds-visx-bar:hover {
    opacity: 1 !important;
  }

  .ds-visx-point {
    transition: none !important;
  }

  .ds-visx-point:hover {
    transform: none !important;
    stroke-width: 1 !important;
  }

  .ds-visx-area {
    transition: none !important;
  }

  .ds-visx-area:hover {
    opacity: 1 !important;
  }

  .ds-visx-line {
    transition: none !important;
  }

  .ds-visx-line:hover {
    stroke-width: 1 !important;
  }
}
/* Visx print styles */
@media print {
  .ds-visx-tooltip {
    display: none !important;
  }

  .ds-visx-legend {
    border: 1px solid #000 !important;
    background: #fff !important;
    -moz-column-break-inside: avoid !important;
         break-inside: avoid !important;
  }

  .ds-visx-loading {
    display: none !important;
  }
}
/* DS Integration: Analytics Charts */
/* Общие отступы для полей */
.charts-field-wrap { gap: var(--ds-spacing-xs); }
/* Мета обязательного поля */
.required-field .ds-form-label::after {
    content: " *";
    color: var(--ds-status-danger);
    font-weight: 600;
  }
/* Подсветка незаполненных */
.charts-missing .ds-form-label { color: var(--ds-status-danger); }
.charts-missing-input {
    border-color: var(--ds-status-danger) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ds-status-danger) 18%, transparent) !important;
  }
/* Панели графиков */
.charts-panel { margin-bottom: var(--ds-spacing-s); }
/* Легенда в модуле графиков */
#analytics-charts-host .ds-chart-legend { margin-top: var(--ds-spacing-s); }
/* Совместимость: bootstrap invalid */
.is-invalid {
    border-color: var(--ds-status-danger) !important;
  }
/* --- Charts UI layout normalization --- */
/* Много колонок только внутри дочерних блоков (charts-ui-block),
     родительские секции остаются одной колонкой */
.charts-ui .charts-ui-block > .ds-panel-body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--ds-spacing-s);
  }
.charts-ui .charts-roles-row,
  .charts-ui .charts-params-row,
  .charts-ui .charts-transform-row,
  .charts-ui .charts-transform-params {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--ds-spacing-s);
  }
/* Bindings specific styles */
.charts-bindings-group {
    gap: var(--ds-spacing-s);
  }
.charts-role-row {
    margin-bottom: var(--ds-spacing-xs);
  }
.charts-field-wrap {
    gap: var(--ds-spacing-xs);
  }
.charts-ui .ds-form-field { gap: var(--ds-spacing-2xs); }
/* Чекбоксы всегда выравниваем влево */
.charts-ui .ds-checkbox { justify-content: flex-start; }
/* И сами чекбокс-поля ставим в левую колонку грида */
.charts-ui .charts-ui-block > .ds-panel-body > .ds-form-field:has(.ds-checkbox) {
    grid-column: 1;
    justify-self: start;
  }
/* Выровнять высоту кнопок и полей в тулбаре — единый ряд */
/* (Удалено) Не фиксируем высоту контролов тулбара — используем базовые размеры DS */
/* Выровнять элементы тулбара по нижней линии, чтобы кнопки без лейблов не "прыгали" */
.charts-toolbar {
    align-items: flex-end !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--ds-spacing-xs) !important;
    margin-bottom: var(--ds-spacing-s) !important;
  }
/* Выравнивание элементов и внутри контейнеров групп тулбара */
.charts-toolbar .ds-toolbar-group {
    align-items: flex-end !important;
    display: flex !important;
    gap: var(--ds-spacing-xs) !important;
  }
.charts-toolbar .ds-form-field {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
/* Drawer настройки графика */
.charts-drawer.ds-drawer-right { width: min(30vw, 640px); }
.charts-settings-toggle { position: absolute; top: var(--ds-spacing-s); right: var(--ds-spacing-s); }
/* Боковой отступ только на уровне корневого контейнера настроек */
.charts-drawer .ds-drawer-body { padding-left: var(--ds-spacing-s); padding-right: var(--ds-spacing-s); padding-top: 0 !important; }
/* Убираем боковые отступы у внутренних контейнеров панели настроек */
.charts-drawer .ds-panel,
  .charts-drawer .ds-toolbar,
  .charts-drawer .ds-alert,
  .charts-drawer .ds-panel-body,
  .charts-drawer .ds-form {
    padding-left: 0;
    padding-right: 0;
  }
/* Тулбар в drawer: без рамок и боковых паддингов полностью */
.charts-drawer .ds-toolbar,
  .charts-drawer .charts-toolbar {
    border: none !important;
    border-radius: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
/* Конкретно для компактного прозрачного тулбара в charts — убираем верхний отступ */
.charts-drawer .ds-toolbar.ds-toolbar-compact.ds-toolbar-transparent.charts-toolbar {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
/* Возвращаем стандартные отступы для заголовков и алертов */
.charts-drawer .ds-panel-header { padding-left: var(--ds-spacing-m); padding-right: var(--ds-spacing-m); }
.charts-drawer .ds-alert { padding-left: var(--ds-spacing-m); padding-right: var(--ds-spacing-m); }
.charts-drawer .ds-alert-content { padding-left: var(--ds-spacing-m); padding-right: var(--ds-spacing-m); }
/* Убираем боковые границы — только верх/низ остаются */
.charts-drawer .ds-panel,
  .charts-drawer .ds-toolbar,
  .charts-drawer .ds-alert {
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
/* Legend visibility states */
.charts-legend-hidden {
    display: none !important;
  }
.charts-legend-visible {
    display: block !important;
  }
/* Legend color box styling via data attribute */
.charts-legend-color[data-color] {
    background-color: attr(data-color) !important;
  }
/* Legend gradient bar styling via data attribute */
.charts-legend-gradient-bar[data-gradient-colors] {
    background: linear-gradient(to right, attr(data-gradient-colors)) !important;
  }
/* Brushing stats visibility states */
.charts-brushing-stats-hidden {
    display: none !important;
  }
.charts-brushing-stats-visible {
    display: block !important;
  }
/* Chart layout margins */
.analytics-chart-render-host {
    margin-top: var(--ds-spacing-xs) !important;
  }
#charts-legend-host.ds-chart-legend.ds-chart-legend-inline {
    margin-top: var(--ds-spacing-xs) !important;
  }
/* Brushing stats flex layout */
.charts-brushing-stats-flex {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
/* Render error styling */
.charts-render-error {
    color: var(--ds-status-danger) !important;
    padding: var(--ds-spacing-l) !important;
  }
/* Brushing stats details */
.charts-brushing-stats-details {
    margin-top: var(--ds-spacing-xs) !important;
    font-size: 0.9em !important;
  }
.charts-brushing-stats-item {
    margin-right: var(--ds-spacing-s) !important;
  }
/* Brushing loading text */
.charts-brushing-loading-text {
    margin-left: var(--ds-spacing-xs) !important;
  }
/* У групп в тулбаре убираем любые разделители и боковые отступы */
.charts-drawer .ds-toolbar .ds-toolbar-group,
  .charts-drawer .charts-toolbar .ds-toolbar-group {
    border: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
/* AI секция не должна иметь отдельной рамки/паддингов */
.charts-drawer .charts-ai {
    border: none !important;
    box-shadow: none !important;
    padding-left: 0; padding-right: 0;
  }
/* Специально для мягких панелей, где границы рисуются box-shadow */
.charts-drawer .ds-panel-soft {
    box-shadow: none !important;
    border-top: 1px solid var(--ds-border-primary);
    border-bottom: 1px solid var(--ds-border-primary);
    border-left: 0;
    border-right: 0;
  }
/* details.charts-panel как корневой элемент */
.charts-drawer details.charts-panel {
    box-shadow: none !important;
    border-top: 1px solid var(--ds-border-primary);
    border-bottom: 1px solid var(--ds-border-primary);
    border-left: 0;
    border-right: 0;
  }
/* DS: docs/styleguide/components.css - Components styleguide */
/* layer: docs */
/* Styleguide component examples */
.ds-styleguide-component {
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  padding: var(--ds-spacing-xl);
  margin-bottom: var(--ds-spacing-xl);
  background-color: var(--ds-surface-primary);
}
.ds-styleguide-component-header {
  margin-bottom: var(--ds-spacing-l);
  padding-bottom: var(--ds-spacing-m);
  border-bottom: 1px solid var(--ds-border-primary);
}
.ds-styleguide-component-title {
  font-size: var(--ds-typography-desktop-h3-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-spacing-xs) 0;
}
.ds-styleguide-component-description {
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-secondary);
  margin: 0;
  line-height: 1.5;
}
.ds-styleguide-component-variants {
  display: grid;
  gap: var(--ds-spacing-l);
}
.ds-styleguide-component-variant {
  border: 1px solid var(--ds-border-secondary);
  border-radius: var(--ds-border-radius-m);
  padding: var(--ds-spacing-l);
  background-color: var(--ds-surface-secondary);
}
.ds-styleguide-component-variant-title {
  font-size: var(--ds-typography-desktop-h4-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-spacing-m) 0;
}
.ds-styleguide-component-variant-description {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  margin: 0 0 var(--ds-spacing-m) 0;
  line-height: 1.4;
}
.ds-styleguide-component-preview {
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  padding: var(--ds-spacing-l);
  margin-bottom: var(--ds-spacing-m);
}
.ds-styleguide-component-code {
  background-color: var(--ds-surface-secondary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  padding: var(--ds-spacing-m);
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-primary);
  overflow-x: auto;
  white-space: pre-wrap;
  line-height: 1.5;
}
.ds-styleguide-component-props {
  margin-top: var(--ds-spacing-l);
}
.ds-styleguide-component-props-title {
  font-size: var(--ds-typography-desktop-h4-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-spacing-m) 0;
}
.ds-styleguide-component-prop {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-spacing-m);
  padding: var(--ds-spacing-m);
  border: 1px solid var(--ds-border-secondary);
  border-radius: var(--ds-border-radius-m);
  background-color: var(--ds-surface-secondary);
  margin-bottom: var(--ds-spacing-s);
}
.ds-styleguide-component-prop-name {
  font-weight: 600;
  color: var(--ds-interactive-primary);
  min-width: 120px;
  flex-shrink: 0;
}
.ds-styleguide-component-prop-type {
  color: var(--ds-status-success);
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: var(--ds-typography-desktop-small-font-size);
  min-width: 100px;
  flex-shrink: 0;
}
.ds-styleguide-component-prop-description {
  flex: 1;
  color: var(--ds-text-secondary);
  line-height: 1.4;
}
.ds-styleguide-component-prop-required {
  color: var(--ds-status-error);
  font-weight: 600;
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  align-self: flex-start;
  flex-shrink: 0;
}
/* Component status indicators */
.ds-styleguide-component-status {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-spacing-xs);
  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
  border-radius: var(--ds-border-radius-l);
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ds-styleguide-component-status-stable {
  background-color: var(--ds-status-success-bg);
  color: var(--ds-status-success);
}
.ds-styleguide-component-status-beta {
  background-color: var(--ds-status-warning-bg);
  color: var(--ds-status-warning);
}
.ds-styleguide-component-status-alpha {
  background-color: var(--ds-status-error-bg);
  color: var(--ds-status-error);
}
.ds-styleguide-component-status-deprecated {
  background-color: var(--ds-surface-disabled);
  color: var(--ds-text-disabled);
}
/* Interactive examples */
.ds-styleguide-interactive {
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  padding: var(--ds-spacing-l);
  background-color: var(--ds-surface-primary);
  margin: var(--ds-spacing-l) 0;
}
.ds-styleguide-interactive-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-spacing-m);
  margin-bottom: var(--ds-spacing-l);
  padding-bottom: var(--ds-spacing-l);
  border-bottom: 1px solid var(--ds-border-primary);
}
.ds-styleguide-interactive-control {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-xs);
}
.ds-styleguide-interactive-control-label {
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 500;
  color: var(--ds-text-primary);
  margin: 0;
}
.ds-styleguide-interactive-result {
  background-color: var(--ds-surface-secondary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  padding: var(--ds-spacing-l);
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ds-styleguide-component {
    padding: var(--ds-spacing-l);
  }

  .ds-styleguide-component-prop {
    flex-direction: column;
    gap: var(--ds-spacing-xs);
  }

  .ds-styleguide-component-prop-name,
  .ds-styleguide-component-prop-type {
    min-width: auto;
  }

  .ds-styleguide-interactive-controls {
    flex-direction: column;
    align-items: stretch;
  }
}
@media (max-width: 480px) {
  .ds-styleguide-component {
    padding: var(--ds-spacing-m);
  }

  .ds-styleguide-component-preview,
  .ds-styleguide-component-code {
    padding: var(--ds-spacing-s);
  }

  .ds-styleguide-component-variants {
    gap: var(--ds-spacing-m);
  }

  .ds-styleguide-component-variant {
    padding: var(--ds-spacing-m);
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-styleguide-component,
  .ds-styleguide-component-variant,
  .ds-styleguide-component-preview,
  .ds-styleguide-component-code,
  .ds-styleguide-component-prop,
  .ds-styleguide-interactive,
  .ds-styleguide-interactive-result {
    border-width: 2px;
  }
}
/* Print styles */
@media print {
  .ds-styleguide-component {
    border: 1px solid #000;
    background: #fff;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    page-break-inside: avoid;
  }

  .ds-styleguide-interactive {
    display: none;
  }

  .ds-styleguide-component-code {
    border: 1px solid #000;
    background: #f5f5f5;
    font-size: 10px;
  }
}
/* DS: docs/styleguide/themes.css - Themes styleguide */
/* layer: docs */
/* Theme showcase */
.ds-styleguide-theme {
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  padding: var(--ds-spacing-xl);
  margin-bottom: var(--ds-spacing-xl);
  background-color: var(--ds-surface-primary);
}
.ds-styleguide-theme-header {
  margin-bottom: var(--ds-spacing-l);
  padding-bottom: var(--ds-spacing-m);
  border-bottom: 1px solid var(--ds-border-primary);
}
.ds-styleguide-theme-title {
  font-size: var(--ds-typography-desktop-h3-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-spacing-xs) 0;
}
.ds-styleguide-theme-description {
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-secondary);
  margin: 0;
  line-height: 1.5;
}
/* Color palette showcase */
.ds-styleguide-colors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--ds-spacing-m);
  margin-bottom: var(--ds-spacing-xl);
}
.ds-styleguide-color-group {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-s);
}
.ds-styleguide-color-group-title {
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ds-styleguide-color-item {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  padding: var(--ds-spacing-s);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  background-color: var(--ds-surface-primary);
}
.ds-styleguide-color-swatch {
  width: 40px;
  height: 40px;
  border-radius: var(--ds-border-radius-2xs);
  border: 1px solid var(--ds-border-primary);
  flex-shrink: 0;
}
.ds-styleguide-color-info {
  flex: 1;
}
.ds-styleguide-color-name {
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 500;
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-spacing-2xs) 0;
}
.ds-styleguide-color-token {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  color: var(--ds-text-secondary);
  margin: 0 0 var(--ds-spacing-2xs) 0;
}
.ds-styleguide-color-value {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  color: var(--ds-text-tertiary);
  margin: 0;
}
/* Typography showcase */
.ds-styleguide-typography {
  margin-bottom: var(--ds-spacing-xl);
}
.ds-styleguide-typography-section {
  margin-bottom: var(--ds-spacing-xl);
}
.ds-styleguide-typography-section-title {
  font-size: var(--ds-typography-desktop-h4-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-spacing-m) 0;
}
.ds-styleguide-typography-scale {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-m);
}
.ds-styleguide-typography-item {
  padding: var(--ds-spacing-m);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  background-color: var(--ds-surface-primary);
}
.ds-styleguide-typography-example {
  margin-bottom: var(--ds-spacing-s);
}
.ds-styleguide-typography-name {
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-spacing-2xs) 0;
}
.ds-styleguide-typography-token {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  color: var(--ds-text-secondary);
  margin: 0;
}
/* Spacing showcase */
.ds-styleguide-spacing {
  margin-bottom: var(--ds-spacing-xl);
}
.ds-styleguide-spacing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--ds-spacing-m);
}
.ds-styleguide-spacing-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-spacing-s);
  padding: var(--ds-spacing-m);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  background-color: var(--ds-surface-primary);
}
.ds-styleguide-spacing-visual {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-2xs);
}
.ds-styleguide-spacing-bar {
  height: 8px;
  background-color: var(--ds-interactive-primary);
  border-radius: var(--ds-border-radius-2xs);
}
.ds-styleguide-spacing-name {
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 500;
  color: var(--ds-text-primary);
  margin: 0;
  text-align: center;
}
.ds-styleguide-spacing-token {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  color: var(--ds-text-secondary);
  margin: 0;
  text-align: center;
}
/* Component theme examples */
.ds-styleguide-theme-examples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--ds-spacing-xl);
}
.ds-styleguide-theme-example {
  padding: var(--ds-spacing-l);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  background-color: var(--ds-surface-primary);
}
.ds-styleguide-theme-example-title {
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-spacing-m) 0;
}
/* Theme switcher */
.ds-styleguide-theme-switcher {
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-s);
  margin-bottom: var(--ds-spacing-xl);
  padding: var(--ds-spacing-m);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  background-color: var(--ds-surface-secondary);
}
.ds-styleguide-theme-switcher-label {
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 500;
  color: var(--ds-text-primary);
  margin: 0;
}
.ds-styleguide-theme-buttons {
  display: flex;
  gap: var(--ds-spacing-xs);
}
.ds-styleguide-theme-button {
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-2xs);
  background-color: var(--ds-surface-primary);
  color: var(--ds-text-primary);
  font-size: var(--ds-typography-desktop-small-font-size);
  cursor: pointer;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-styleguide-theme-button:hover {
  background-color: var(--ds-surface-tertiary);
  border-color: var(--ds-border-secondary);
}
.ds-styleguide-theme-button.active {
  background-color: var(--ds-interactive-primary);
  border-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ds-styleguide-theme {
    padding: var(--ds-spacing-l);
  }

  .ds-styleguide-colors {
    grid-template-columns: 1fr;
  }

  .ds-styleguide-color-group {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .ds-styleguide-typography-scale {
    gap: var(--ds-spacing-s);
  }

  .ds-styleguide-spacing-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }

  .ds-styleguide-theme-examples {
    grid-template-columns: 1fr;
  }

  .ds-styleguide-theme-switcher {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-spacing-m);
  }

  .ds-styleguide-theme-buttons {
    width: 100%;
    justify-content: space-between;
  }
}
@media (max-width: 480px) {
  .ds-styleguide-theme {
    padding: var(--ds-spacing-m);
  }

  .ds-styleguide-color-item {
    flex-direction: column;
    text-align: center;
  }

  .ds-styleguide-typography-item {
    padding: var(--ds-spacing-s);
  }

  .ds-styleguide-spacing-item {
    padding: var(--ds-spacing-s);
  }

  .ds-styleguide-theme-switcher {
    padding: var(--ds-spacing-s);
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-styleguide-theme,
  .ds-styleguide-color-item,
  .ds-styleguide-typography-item,
  .ds-styleguide-spacing-item,
  .ds-styleguide-theme-example,
  .ds-styleguide-theme-switcher {
    border-width: 2px;
  }

  .ds-styleguide-color-swatch {
    border-width: 2px;
  }
}
/* Print styles */
@media print {
  .ds-styleguide-theme {
    border: 1px solid #000;
    background: #fff;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    page-break-inside: avoid;
  }

  .ds-styleguide-theme-switcher {
    display: none;
  }

  .ds-styleguide-color-item,
  .ds-styleguide-typography-item,
  .ds-styleguide-spacing-item,
  .ds-styleguide-theme-example {
    border: 1px solid #000;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }
}
/* DS: docs/styleguide/tokens.css - Tokens styleguide */
/* layer: docs */
/* Token showcase */
.ds-styleguide-tokens {
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  padding: var(--ds-spacing-xl);
  margin-bottom: var(--ds-spacing-xl);
  background-color: var(--ds-surface-primary);
}
.ds-styleguide-tokens-header {
  margin-bottom: var(--ds-spacing-l);
  padding-bottom: var(--ds-spacing-m);
  border-bottom: 1px solid var(--ds-border-primary);
}
.ds-styleguide-tokens-title {
  font-size: var(--ds-typography-desktop-h3-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-spacing-xs) 0;
}
.ds-styleguide-tokens-description {
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-secondary);
  margin: 0;
  line-height: 1.5;
}
/* Token categories */
.ds-styleguide-token-category {
  margin-bottom: var(--ds-spacing-xl);
}
.ds-styleguide-token-category-title {
  font-size: var(--ds-typography-desktop-h4-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-spacing-m) 0;
  padding-bottom: var(--ds-spacing-xs);
  border-bottom: 1px solid var(--ds-border-primary);
}
.ds-styleguide-token-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--ds-spacing-m);
}
.ds-styleguide-token-item {
  padding: var(--ds-spacing-m);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  background-color: var(--ds-surface-primary);
  position: relative;
  overflow: hidden;
}
.ds-styleguide-token-visual {
  height: 60px;
  margin-bottom: var(--ds-spacing-m);
  border-radius: var(--ds-border-radius-2xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ds-typography-desktop-h3-font-size);
  font-weight: 600;
}
.ds-styleguide-token-info {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-2xs);
}
.ds-styleguide-token-name {
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}
.ds-styleguide-token-value {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  color: var(--ds-text-secondary);
  margin: 0;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  word-break: break-all;
}
.ds-styleguide-token-description {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  color: var(--ds-text-tertiary);
  margin: var(--ds-spacing-2xs) 0 0 0;
  line-height: 1.3;
}
/* Color tokens */
.ds-styleguide-token-color .ds-styleguide-token-visual {
  border: 2px solid var(--ds-border-primary);
}
/* Spacing tokens */
.ds-styleguide-token-spacing .ds-styleguide-token-visual {
  background-color: var(--ds-surface-secondary);
  border: 1px solid var(--ds-border-primary);
  justify-content: flex-start;
  padding-left: var(--ds-spacing-s);
}
.ds-styleguide-token-spacing .ds-styleguide-token-visual::before {
  content: '';
  width: 8px;
  height: 8px;
  background-color: var(--ds-interactive-primary);
  border-radius: 50%;
}
/* Typography tokens */
.ds-styleguide-token-typography .ds-styleguide-token-visual {
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  font-family: var(--ds-typography-desktop-font-family);
  justify-content: flex-start;
  align-items: flex-start;
  padding: var(--ds-spacing-xs);
  text-align: left;
  line-height: 1.2;
}
.ds-styleguide-token-typography .ds-styleguide-token-visual::before {
  content: 'Aa';
  color: var(--ds-text-primary);
}
/* Border radius tokens */
.ds-styleguide-token-radius .ds-styleguide-token-visual {
  background-color: var(--ds-surface-secondary);
  border: 1px solid var(--ds-border-primary);
}
.ds-styleguide-token-radius .ds-styleguide-token-visual::before {
  content: '';
  width: 20px;
  height: 20px;
  background-color: var(--ds-interactive-primary);
  align-self: center;
}
/* Shadow tokens */
.ds-styleguide-token-shadow .ds-styleguide-token-visual {
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  position: relative;
}
.ds-styleguide-token-shadow .ds-styleguide-token-visual::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-color: var(--ds-surface-secondary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-2xs);
}
/* Token search */
.ds-styleguide-token-search {
  margin-bottom: var(--ds-spacing-xl);
  position: relative;
}
.ds-styleguide-token-search-input {
  width: 100%;
  padding: var(--ds-spacing-s) var(--ds-spacing-s) var(--ds-spacing-s) 2.5rem;
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  background-color: var(--ds-surface-secondary);
  color: var(--ds-text-primary);
  font-size: var(--ds-typography-desktop-body-font-size);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-styleguide-token-search-input:focus {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
  border-color: var(--ds-interactive-primary);
  background-color: var(--ds-surface-primary);
}
.ds-styleguide-token-search-input::-moz-placeholder {
  color: var(--ds-text-tertiary);
}
.ds-styleguide-token-search-input::placeholder {
  color: var(--ds-text-tertiary);
}
.ds-styleguide-token-search-icon {
  position: absolute;
  left: var(--ds-spacing-s);
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--ds-text-secondary);
  pointer-events: none;
}
/* Token filters */
.ds-styleguide-token-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-spacing-s);
  margin-bottom: var(--ds-spacing-xl);
}
.ds-styleguide-token-filter {
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-l);
  background-color: var(--ds-surface-primary);
  color: var(--ds-text-primary);
  font-size: var(--ds-typography-desktop-small-font-size);
  cursor: pointer;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-styleguide-token-filter:hover {
  background-color: var(--ds-surface-secondary);
  border-color: var(--ds-border-secondary);
}
.ds-styleguide-token-filter.active {
  background-color: var(--ds-interactive-primary);
  border-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
}
/* Token usage examples */
.ds-styleguide-token-usage {
  margin-top: var(--ds-spacing-m);
  padding: var(--ds-spacing-m);
  background-color: var(--ds-surface-secondary);
  border-radius: var(--ds-border-radius-m);
}
.ds-styleguide-token-usage-title {
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-spacing-s) 0;
}
.ds-styleguide-token-usage-code {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  color: var(--ds-text-primary);
  background-color: var(--ds-surface-primary);
  padding: var(--ds-spacing-xs);
  border-radius: var(--ds-border-radius-2xs);
  border: 1px solid var(--ds-border-primary);
  overflow-x: auto;
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ds-styleguide-tokens {
    padding: var(--ds-spacing-l);
  }

  .ds-styleguide-token-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  .ds-styleguide-token-item {
    padding: var(--ds-spacing-s);
  }

  .ds-styleguide-token-visual {
    height: 50px;
    margin-bottom: var(--ds-spacing-s);
  }

  .ds-styleguide-token-filters {
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .ds-styleguide-tokens {
    padding: var(--ds-spacing-m);
  }

  .ds-styleguide-token-grid {
    grid-template-columns: 1fr;
  }

  .ds-styleguide-token-item {
    padding: var(--ds-spacing-s);
  }

  .ds-styleguide-token-visual {
    height: 40px;
    margin-bottom: var(--ds-spacing-s);
  }

  .ds-styleguide-token-search {
    margin-bottom: var(--ds-spacing-l);
  }

  .ds-styleguide-token-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .ds-styleguide-token-filter {
    text-align: center;
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-styleguide-tokens,
  .ds-styleguide-token-item,
  .ds-styleguide-token-search-input,
  .ds-styleguide-token-filter,
  .ds-styleguide-token-usage-code {
    border-width: 2px;
  }
}
/* Print styles */
@media print {
  .ds-styleguide-tokens {
    border: 1px solid #000;
    background: #fff;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    page-break-inside: avoid;
  }

  .ds-styleguide-token-item {
    border: 1px solid #000;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }

  .ds-styleguide-token-search,
  .ds-styleguide-token-filters {
    display: none;
  }

  .ds-styleguide-token-usage-code {
    border: 1px solid #000;
    background: #f5f5f5;
  }
}
/* DS: docs/styleguide/utilities.css - Utilities styleguide */
/* layer: docs */
/* Utilities showcase */
.ds-styleguide-utilities {
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  padding: var(--ds-spacing-xl);
  margin-bottom: var(--ds-spacing-xl);
  background-color: var(--ds-surface-primary);
}
.ds-styleguide-utilities-header {
  margin-bottom: var(--ds-spacing-l);
  padding-bottom: var(--ds-spacing-m);
  border-bottom: 1px solid var(--ds-border-primary);
}
.ds-styleguide-utilities-title {
  font-size: var(--ds-typography-desktop-h3-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-spacing-xs) 0;
}
.ds-styleguide-utilities-description {
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-secondary);
  margin: 0;
  line-height: 1.5;
}
/* Utility categories */
.ds-styleguide-utility-category {
  margin-bottom: var(--ds-spacing-xl);
}
.ds-styleguide-utility-category-title {
  font-size: var(--ds-typography-desktop-h4-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-spacing-m) 0;
  padding-bottom: var(--ds-spacing-xs);
  border-bottom: 1px solid var(--ds-border-primary);
}
.ds-styleguide-utility-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--ds-spacing-m);
}
.ds-styleguide-utility-item {
  padding: var(--ds-spacing-m);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  background-color: var(--ds-surface-primary);
  position: relative;
}
.ds-styleguide-utility-preview {
  margin-bottom: var(--ds-spacing-m);
  padding: var(--ds-spacing-m);
  border: 1px solid var(--ds-border-secondary);
  border-radius: var(--ds-border-radius-m);
  background-color: var(--ds-surface-secondary);
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-primary);
}
.ds-styleguide-utility-info {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-2xs);
}
.ds-styleguide-utility-class {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 600;
  color: var(--ds-interactive-primary);
  margin: 0;
}
.ds-styleguide-utility-description {
  font-size: var(--ds-typography-desktop-small-font-size);
  color: var(--ds-text-secondary);
  margin: 0;
  line-height: 1.4;
}
.ds-styleguide-utility-code {
  margin-top: var(--ds-spacing-s);
  padding: var(--ds-spacing-xs);
  background-color: var(--ds-surface-secondary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-2xs);
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  color: var(--ds-text-primary);
  overflow-x: auto;
  white-space: pre-wrap;
  line-height: 1.4;
}
/* Utility search */
.ds-styleguide-utility-search {
  margin-bottom: var(--ds-spacing-xl);
  position: relative;
}
.ds-styleguide-utility-search-input {
  width: 100%;
  padding: var(--ds-spacing-s) var(--ds-spacing-s) var(--ds-spacing-s) 2.5rem;
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  background-color: var(--ds-surface-secondary);
  color: var(--ds-text-primary);
  font-size: var(--ds-typography-desktop-body-font-size);
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-styleguide-utility-search-input:focus {
  outline: 2px solid var(--ds-focus-outline-color);
  outline-offset: 2px;
  border-color: var(--ds-interactive-primary);
  background-color: var(--ds-surface-primary);
}
.ds-styleguide-utility-search-input::-moz-placeholder {
  color: var(--ds-text-tertiary);
}
.ds-styleguide-utility-search-input::placeholder {
  color: var(--ds-text-tertiary);
}
.ds-styleguide-utility-search-icon {
  position: absolute;
  left: var(--ds-spacing-s);
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--ds-text-secondary);
  pointer-events: none;
}
/* Utility filters */
.ds-styleguide-utility-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-spacing-s);
  margin-bottom: var(--ds-spacing-xl);
}
.ds-styleguide-utility-filter {
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-l);
  background-color: var(--ds-surface-primary);
  color: var(--ds-text-primary);
  font-size: var(--ds-typography-desktop-small-font-size);
  cursor: pointer;
  transition: all var(--ds-motion-duration-fast) var(--ds-motion-easing-standard);
}
.ds-styleguide-utility-filter:hover {
  background-color: var(--ds-surface-secondary);
  border-color: var(--ds-border-secondary);
}
.ds-styleguide-utility-filter.active {
  background-color: var(--ds-interactive-primary);
  border-color: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
}
/* Utility examples with interactive demos */
.ds-styleguide-utility-interactive {
  margin-top: var(--ds-spacing-m);
  padding: var(--ds-spacing-m);
  border: 1px solid var(--ds-border-secondary);
  border-radius: var(--ds-border-radius-m);
  background-color: var(--ds-surface-secondary);
}
.ds-styleguide-utility-interactive-title {
  font-size: var(--ds-typography-desktop-small-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-spacing-s) 0;
}
.ds-styleguide-utility-interactive-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-spacing-m);
  margin-bottom: var(--ds-spacing-m);
}
.ds-styleguide-utility-interactive-control {
  display: flex;
  flex-direction: column;
  gap: var(--ds-spacing-xs);
}
.ds-styleguide-utility-interactive-control-label {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  font-weight: 500;
  color: var(--ds-text-primary);
  margin: 0;
}
.ds-styleguide-utility-interactive-result {
  padding: var(--ds-spacing-m);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  background-color: var(--ds-surface-primary);
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ds-typography-desktop-body-font-size);
  color: var(--ds-text-primary);
}
/* Utility cheat sheet */
.ds-styleguide-utility-cheatsheet {
  margin-top: var(--ds-spacing-xl);
  padding: var(--ds-spacing-xl);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-m);
  background-color: var(--ds-surface-secondary);
}
.ds-styleguide-utility-cheatsheet-title {
  font-size: var(--ds-typography-desktop-h4-font-size);
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0 0 var(--ds-spacing-m) 0;
}
.ds-styleguide-utility-cheatsheet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--ds-spacing-m);
}
.ds-styleguide-utility-cheatsheet-item {
  padding: var(--ds-spacing-s);
  background-color: var(--ds-surface-primary);
  border: 1px solid var(--ds-border-primary);
  border-radius: var(--ds-border-radius-2xs);
}
.ds-styleguide-utility-cheatsheet-class {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  font-weight: 600;
  color: var(--ds-interactive-primary);
  margin: 0 0 var(--ds-spacing-2xs) 0;
}
.ds-styleguide-utility-cheatsheet-description {
  font-size: var(--ds-typography-desktop-extra-small-font-size);
  color: var(--ds-text-secondary);
  margin: 0;
  line-height: 1.3;
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .ds-styleguide-utilities {
    padding: var(--ds-spacing-l);
  }

  .ds-styleguide-utility-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }

  .ds-styleguide-utility-item {
    padding: var(--ds-spacing-s);
  }

  .ds-styleguide-utility-preview {
    padding: var(--ds-spacing-s);
    min-height: 60px;
  }

  .ds-styleguide-utility-cheatsheet-grid {
    grid-template-columns: 1fr;
  }

  .ds-styleguide-utility-filters {
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .ds-styleguide-utilities {
    padding: var(--ds-spacing-m);
  }

  .ds-styleguide-utility-grid {
    grid-template-columns: 1fr;
  }

  .ds-styleguide-utility-item {
    padding: var(--ds-spacing-s);
  }

  .ds-styleguide-utility-preview {
    padding: var(--ds-spacing-s);
    min-height: 50px;
    font-size: var(--ds-typography-desktop-small-font-size);
  }

  .ds-styleguide-utility-search {
    margin-bottom: var(--ds-spacing-l);
  }

  .ds-styleguide-utility-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .ds-styleguide-utility-filter {
    text-align: center;
  }

  .ds-styleguide-utility-interactive-controls {
    flex-direction: column;
    align-items: stretch;
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ds-styleguide-utilities,
  .ds-styleguide-utility-item,
  .ds-styleguide-utility-preview,
  .ds-styleguide-utility-code,
  .ds-styleguide-utility-search-input,
  .ds-styleguide-utility-filter,
  .ds-styleguide-utility-interactive,
  .ds-styleguide-utility-interactive-result,
  .ds-styleguide-utility-cheatsheet,
  .ds-styleguide-utility-cheatsheet-item {
    border-width: 2px;
  }
}
/* Print styles */
@media print {
  .ds-styleguide-utilities {
    border: 1px solid #000;
    background: #fff;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    page-break-inside: avoid;
  }

  .ds-styleguide-utility-item {
    border: 1px solid #000;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }

  .ds-styleguide-utility-preview {
    border: 1px solid #000;
    background: #f5f5f5;
  }

  .ds-styleguide-utility-code {
    border: 1px solid #000;
    background: #f5f5f5;
  }

  .ds-styleguide-utility-search,
  .ds-styleguide-utility-filters,
  .ds-styleguide-utility-interactive {
    display: none;
  }

  .ds-styleguide-utility-cheatsheet {
    border: 1px solid #000;
    background: #f5f5f5;
  }

  .ds-styleguide-utility-cheatsheet-item {
    border: 1px solid #000;
    background: #fff;
  }
}
/* DS: experimental/container-queries.css - Container Queries utilities */
/* layer: experimental */
/* Container query utilities */
@container (min-width: 320px) {
  .ds-cq-xs\:block { display: block; }
  .ds-cq-xs\:flex { display: flex; }
  .ds-cq-xs\:grid { display: grid; }
  .ds-cq-xs\:hidden { display: none; }
}
@container (min-width: 480px) {
  .ds-cq-sm\:block { display: block; }
  .ds-cq-sm\:flex { display: flex; }
  .ds-cq-sm\:grid { display: grid; }
  .ds-cq-sm\:hidden { display: none; }
  .ds-cq-sm\:flex-row { flex-direction: row; }
  .ds-cq-sm\:flex-col { flex-direction: column; }
}
@container (min-width: 768px) {
  .ds-cq-md\:block { display: block; }
  .ds-cq-md\:flex { display: flex; }
  .ds-cq-md\:grid { display: grid; }
  .ds-cq-md\:hidden { display: none; }
  .ds-cq-md\:flex-row { flex-direction: row; }
  .ds-cq-md\:flex-col { flex-direction: column; }
  .ds-cq-md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-cq-md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (min-width: 1024px) {
  .ds-cq-lg\:block { display: block; }
  .ds-cq-lg\:flex { display: flex; }
  .ds-cq-lg\:grid { display: grid; }
  .ds-cq-lg\:hidden { display: none; }
  .ds-cq-lg\:flex-row { flex-direction: row; }
  .ds-cq-lg\:flex-col { flex-direction: column; }
  .ds-cq-lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-cq-lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ds-cq-lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container (min-width: 1280px) {
  .ds-cq-xl\:block { display: block; }
  .ds-cq-xl\:flex { display: flex; }
  .ds-cq-xl\:grid { display: grid; }
  .ds-cq-xl\:hidden { display: none; }
  .ds-cq-xl\:flex-row { flex-direction: row; }
  .ds-cq-xl\:flex-col { flex-direction: column; }
  .ds-cq-xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-cq-xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ds-cq-xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ds-cq-xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* Container query typography */
@container (min-width: 480px) {
  .ds-cq-sm\:text-lg { font-size: var(--ds-typography-desktop-h4-font-size); }
  .ds-cq-sm\:text-xl { font-size: var(--ds-typography-desktop-h3-font-size); }
}
@container (min-width: 768px) {
  .ds-cq-md\:text-lg { font-size: var(--ds-typography-desktop-h4-font-size); }
  .ds-cq-md\:text-xl { font-size: var(--ds-typography-desktop-h3-font-size); }
  .ds-cq-md\:text-2xl { font-size: var(--ds-typography-desktop-h2-font-size); }
}
/* Container query spacing */
@container (min-width: 480px) {
  .ds-cq-sm\:p-4 { padding: var(--ds-spacing-m); }
  .ds-cq-sm\:gap-4 { gap: var(--ds-spacing-m); }
}
@container (min-width: 768px) {
  .ds-cq-md\:p-6 { padding: var(--ds-spacing-l); }
  .ds-cq-md\:gap-6 { gap: var(--ds-spacing-l); }
}
/* Container size queries */
@container (min-height: 400px) {
  .ds-cq-min-h-sm\:flex { display: flex; }
  .ds-cq-min-h-sm\:flex-col { flex-direction: column; }
}
@container (min-height: 600px) {
  .ds-cq-min-h-md\:flex { display: flex; }
  .ds-cq-min-h-md\:flex-col { flex-direction: column; }
  .ds-cq-min-h-md\:justify-center { justify-content: center; }
}
/* Container aspect ratio queries */
@container (aspect-ratio > 1) {
  .ds-cq-landscape\:flex-row { flex-direction: row; }
  .ds-cq-landscape\:text-left { text-align: left; }
}
@container (aspect-ratio < 1) {
  .ds-cq-portrait\:flex-col { flex-direction: column; }
  .ds-cq-portrait\:text-center { text-align: center; }
}
/* Container component queries */
.ds-container-card {
  container-type: inline-size;
  container-name: card;
}
@container card (min-width: 300px) {
  .ds-container-card .ds-card-content {
    display: flex;
    align-items: center;
    gap: var(--ds-spacing-m);
  }
}
@container card (min-width: 400px) {
  .ds-container-card .ds-card-content {
    flex-direction: row;
  }

  .ds-container-card .ds-card-image {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
  }
}
.ds-container-sidebar {
  container-type: inline-size;
  container-name: sidebar;
}
@container sidebar (min-width: 250px) {
  .ds-container-sidebar .ds-sidebar-nav {
    display: block;
  }

  .ds-container-sidebar .ds-sidebar-mobile-toggle {
    display: none;
  }
}
@container sidebar (min-width: 350px) {
  .ds-container-sidebar .ds-sidebar-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.ds-container-modal {
  container-type: inline-size;
  container-name: modal;
}
@container modal (min-width: 500px) {
  .ds-container-modal .ds-modal-actions {
    flex-direction: row;
    justify-content: flex-end;
    gap: var(--ds-spacing-s);
  }
}
@container modal (min-width: 700px) {
  .ds-container-modal .ds-modal-content {
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: var(--ds-spacing-xl);
  }

  .ds-container-modal .ds-modal-sidebar {
    order: 2;
  }
}
.ds-container-form {
  container-type: inline-size;
  container-name: form;
}
@container form (min-width: 600px) {
  .ds-container-form .ds-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ds-spacing-l);
  }
}
@container form (min-width: 800px) {
  .ds-container-form .ds-form-row {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.ds-container-table {
  container-type: inline-size;
  container-name: table;
}
@container table (min-width: 640px) {
  .ds-container-table .ds-table-responsive {
    overflow-x: visible;
  }

  .ds-container-table .ds-table-mobile-layout {
    display: none;
  }

  .ds-container-table .ds-table-desktop-layout {
    display: table;
  }
}
@container table (min-width: 1024px) {
  .ds-container-table .ds-table-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
/* Container query animations */
@container (min-width: 480px) {
  .ds-cq-sm\:animate-fade-in {
    animation: containerFadeIn 0.3s ease-out;
  }
}
@keyframes containerFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Container query progressive enhancement */
@supports not (container-type: inline-size) {
  .ds-container-fallback {
    display: block !important;
  }

  .ds-container-enhanced {
    display: none !important;
  }
}
@supports (container-type: inline-size) {
  .ds-container-fallback {
    display: none !important;
  }

  .ds-container-enhanced {
    display: block !important;
  }
}
/* Container query debugging */
.ds-container-debug {
  position: relative;
}
.ds-container-debug::before {
  content: attr(data-container-name) ' (' attr(data-container-width) ')';
  position: absolute;
  top: -20px;
  left: 0;
  background: var(--ds-interactive-primary);
  color: var(--ds-text-inverse);
  padding: 2px 6px;
  font-size: 10px;
  font-family: monospace;
  border-radius: var(--ds-border-radius-2xs);
  z-index: 1000;
  opacity: 0.8;
}
.ds-container-debug::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px dashed var(--ds-interactive-primary);
  pointer-events: none;
  z-index: 999;
}
/* Show debug info only in development */
@media (prefers-reduced-motion: no-preference) {
  .ds-debug .ds-container-debug::before,
  .ds-debug .ds-container-debug::after {
    display: block;
  }
}
/* Container query responsive typography */
@container (min-width: 320px) {
  .ds-cq-responsive-text {
    font-size: var(--ds-typography-desktop-body-font-size);
  }
}
@container (min-width: 480px) {
  .ds-cq-responsive-text {
    font-size: var(--ds-typography-desktop-h4-font-size);
  }
}
@container (min-width: 768px) {
  .ds-cq-responsive-text {
    font-size: var(--ds-typography-desktop-h3-font-size);
  }
}
@container (min-width: 1024px) {
  .ds-cq-responsive-text {
    font-size: var(--ds-typography-desktop-h2-font-size);
  }
}
/* DS: experimental/view-transitions.css - View Transitions API */
/* layer: experimental */
/* View transition root */
.ds-view-transition-root {
  view-transition-name: root;
}
/* Page transitions */
.ds-page-transition {
  view-transition-name: page;
}
.ds-page-transition::view-transition-old(page) {
  animation: page-out 0.3s ease-in-out;
}
.ds-page-transition::view-transition-new(page) {
  animation: page-in 0.3s ease-in-out;
}
@keyframes page-out {
  to {
    opacity: 0;
    transform: translateX(-20px);
  }
}
@keyframes page-in {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
}
/* Modal transitions */
.ds-modal-transition {
  view-transition-name: modal;
}
.ds-modal-transition::view-transition-old(modal) {
  animation: modal-out 0.25s ease-out;
}
.ds-modal-transition::view-transition-new(modal) {
  animation: modal-in 0.25s ease-out;
}
@keyframes modal-out {
  to {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
}
@keyframes modal-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
}
/* Card transitions */
.ds-card-transition {
  view-transition-name: card;
}
.ds-card-transition::view-transition-old(card) {
  animation: card-out 0.2s ease-out;
}
.ds-card-transition::view-transition-new(card) {
  animation: card-in 0.2s ease-out;
}
@keyframes card-out {
  to {
    opacity: 0;
    transform: scale(0.98);
  }
}
@keyframes card-in {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
}
/* List item transitions */
.ds-list-item-transition {
  view-transition-name: list-item;
}
.ds-list-item-transition::view-transition-old(list-item) {
  animation: list-item-out 0.15s ease-out;
}
.ds-list-item-transition::view-transition-new(list-item) {
  animation: list-item-in 0.15s ease-out;
}
@keyframes list-item-out {
  to {
    opacity: 0;
    transform: translateX(-10px);
  }
}
@keyframes list-item-in {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
}
/* Image transitions */
.ds-image-transition {
  view-transition-name: image;
}
.ds-image-transition::view-transition-old(image) {
  animation: image-out 0.3s ease-out;
}
.ds-image-transition::view-transition-new(image) {
  animation: image-in 0.3s ease-out;
}
@keyframes image-out {
  to {
    opacity: 0;
    transform: scale(1.05);
  }
}
@keyframes image-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
}
/* Navigation transitions */
.ds-nav-transition {
  view-transition-name: navigation;
}
.ds-nav-transition::view-transition-old(navigation) {
  animation: nav-out 0.2s ease-out;
}
.ds-nav-transition::view-transition-new(navigation) {
  animation: nav-in 0.2s ease-out;
}
@keyframes nav-out {
  to {
    opacity: 0;
    transform: translateY(-5px);
  }
}
@keyframes nav-in {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
}
/* Sidebar transitions */
.ds-sidebar-transition {
  view-transition-name: sidebar;
}
.ds-sidebar-transition::view-transition-old(sidebar) {
  animation: sidebar-out 0.25s ease-out;
}
.ds-sidebar-transition::view-transition-new(sidebar) {
  animation: sidebar-in 0.25s ease-out;
}
@keyframes sidebar-out {
  to {
    opacity: 0;
    transform: translateX(-20px);
  }
}
@keyframes sidebar-in {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
}
/* Content transitions */
.ds-content-transition {
  view-transition-name: content;
}
.ds-content-transition::view-transition-old(content) {
  animation: content-out 0.2s ease-out;
}
.ds-content-transition::view-transition-new(content) {
  animation: content-in 0.2s ease-out;
}
@keyframes content-out {
  to {
    opacity: 0;
    transform: translateY(10px);
  }
}
@keyframes content-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
/* Header transitions */
.ds-header-transition {
  view-transition-name: header;
}
.ds-header-transition::view-transition-old(header) {
  animation: header-out 0.15s ease-out;
}
.ds-header-transition::view-transition-new(header) {
  animation: header-in 0.15s ease-out;
}
@keyframes header-out {
  to {
    opacity: 0;
    transform: translateY(-5px);
  }
}
@keyframes header-in {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
}
/* Footer transitions */
.ds-footer-transition {
  view-transition-name: footer;
}
.ds-footer-transition::view-transition-old(footer) {
  animation: footer-out 0.15s ease-out;
}
.ds-footer-transition::view-transition-new(footer) {
  animation: footer-in 0.15s ease-out;
}
@keyframes footer-out {
  to {
    opacity: 0;
    transform: translateY(5px);
  }
}
@keyframes footer-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
}
/* Tab transitions */
.ds-tab-transition {
  view-transition-name: tab;
}
.ds-tab-transition::view-transition-old(tab) {
  animation: tab-out 0.2s ease-out;
}
.ds-tab-transition::view-transition-new(tab) {
  animation: tab-in 0.2s ease-out;
}
@keyframes tab-out {
  to {
    opacity: 0;
    transform: translateY(-5px);
  }
}
@keyframes tab-in {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
}
/* Form transitions */
.ds-form-transition {
  view-transition-name: form;
}
.ds-form-transition::view-transition-old(form) {
  animation: form-out 0.2s ease-out;
}
.ds-form-transition::view-transition-new(form) {
  animation: form-in 0.2s ease-out;
}
@keyframes form-out {
  to {
    opacity: 0;
    transform: scale(0.98);
  }
}
@keyframes form-in {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
}
/* Table transitions */
.ds-table-transition {
  view-transition-name: table;
}
.ds-table-transition::view-transition-old(table) {
  animation: table-out 0.15s ease-out;
}
.ds-table-transition::view-transition-new(table) {
  animation: table-in 0.15s ease-out;
}
@keyframes table-out {
  to {
    opacity: 0;
    transform: translateY(5px);
  }
}
@keyframes table-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
}
/* Chart transitions */
.ds-chart-transition {
  view-transition-name: chart;
}
.ds-chart-transition::view-transition-old(chart) {
  animation: chart-out 0.3s ease-out;
}
.ds-chart-transition::view-transition-new(chart) {
  animation: chart-in 0.3s ease-out;
}
@keyframes chart-out {
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}
@keyframes chart-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
}
/* Global view transition configuration */
::view-transition-old(root) {
  animation: none;
}
::view-transition-new(root) {
  animation: none;
}
/* View transition image pairs */
::view-transition-image-pair(root) {
  isolation: auto;
}
::view-transition-image-pair(page) {
  isolation: auto;
}
/* Morphing transitions for similar elements */
.ds-morph-transition {
  view-transition-name: morph;
}
.ds-morph-transition::view-transition-old(morph) {
  animation: morph-out 0.4s ease-in-out;
}
.ds-morph-transition::view-transition-new(morph) {
  animation: morph-in 0.4s ease-in-out;
}
@keyframes morph-out {
  to {
    opacity: 0;
    border-radius: 50%;
    transform: scale(0.8) rotate(5deg);
  }
}
@keyframes morph-in {
  from {
    opacity: 0;
    border-radius: 50%;
    transform: scale(0.8) rotate(-5deg);
  }
}
/* Slide transitions */
.ds-slide-left-transition {
  view-transition-name: slide-left;
}
.ds-slide-left-transition::view-transition-old(slide-left) {
  animation: slide-left-out 0.3s ease-in-out;
}
.ds-slide-left-transition::view-transition-new(slide-left) {
  animation: slide-left-in 0.3s ease-in-out;
}
@keyframes slide-left-out {
  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}
@keyframes slide-left-in {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
}
.ds-slide-right-transition {
  view-transition-name: slide-right;
}
.ds-slide-right-transition::view-transition-old(slide-right) {
  animation: slide-right-out 0.3s ease-in-out;
}
.ds-slide-right-transition::view-transition-new(slide-right) {
  animation: slide-right-in 0.3s ease-in-out;
}
@keyframes slide-right-out {
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}
@keyframes slide-right-in {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
}
/* Fade transitions */
.ds-fade-transition {
  view-transition-name: fade;
}
.ds-fade-transition::view-transition-old(fade) {
  animation: fade-out 0.3s ease-in-out;
}
.ds-fade-transition::view-transition-new(fade) {
  animation: fade-in 0.3s ease-in-out;
}
@keyframes fade-out {
  to {
    opacity: 0;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
}
/* Scale transitions */
.ds-scale-transition {
  view-transition-name: scale;
}
.ds-scale-transition::view-transition-old(scale) {
  animation: scale-out 0.3s ease-in-out;
}
.ds-scale-transition::view-transition-new(scale) {
  animation: scale-in 0.3s ease-in-out;
}
@keyframes scale-out {
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}
@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(1.1);
  }
}
/* Progressive enhancement */
@supports not (view-transition-name: root) {
  .ds-view-transition-fallback {
    display: block !important;
  }

  .ds-view-transition-enhanced {
    display: none !important;
  }
}
@supports (view-transition-name: root) {
  .ds-view-transition-fallback {
    display: none !important;
  }

  .ds-view-transition-enhanced {
    display: block !important;
  }
}
/* View transition debugging */
.ds-view-transition-debug ::view-transition-old(root) {
  outline: 2px solid red;
  outline-offset: -2px;
}
.ds-view-transition-debug ::view-transition-new(root) {
  outline: 2px solid green;
  outline-offset: -2px;
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }

  .ds-morph-transition,
  .ds-slide-left-transition,
  .ds-slide-right-transition,
  .ds-fade-transition,
  .ds-scale-transition {
    view-transition-name: none !important;
  }
}
/* Print styles */
@media print {
  .ds-view-transition-root,
  .ds-page-transition,
  .ds-modal-transition,
  .ds-card-transition,
  .ds-list-item-transition,
  .ds-image-transition,
  .ds-nav-transition,
  .ds-sidebar-transition,
  .ds-content-transition,
  .ds-header-transition,
  .ds-footer-transition,
  .ds-tab-transition,
  .ds-form-transition,
  .ds-table-transition,
  .ds-chart-transition,
  .ds-morph-transition,
  .ds-slide-left-transition,
  .ds-slide-right-transition,
  .ds-fade-transition,
  .ds-scale-transition {
    view-transition-name: none !important;
  }
}