/* ECI AI Elements Bundled CSS - includes Foundation + Elements + AI Elements */

/* ==========================================================================
   ECI nexus UI Shared Design System
   ========================================================================== */

/* Design Tokens - Order matters: base tokens first, then combinations */

/* ==========================================================================
   Color Design Tokens
   ========================================================================== */

:root {
  --eci-color-secondary-20: #fafafa;
  --eci-color-secondary-30: #f8f8f8;
  --eci-color-secondary-40: #f7f7f7;
  --eci-color-secondary-50: #f6f6f6;
  --eci-color-secondary-100: #f2f2f2;
  --eci-color-secondary-200: #e6e6e6;
  --eci-color-secondary-300: #d4d4d4;
  --eci-color-secondary-400: #adadad;
  --eci-color-secondary-500: #858585;
  --eci-color-secondary-600: #666666;
  --eci-color-secondary-700: #525252;
  --eci-color-secondary-800: #414042;
  --eci-color-secondary-900: #333333;
  --eci-color-secondary-950: #1a1a1a;

  /* Neutral Colors */
  --eci-color-neutral-50: #fafafa;
  --eci-color-neutral-100: #f5f5f5;
  --eci-color-neutral-200: #e5e5e5;
  --eci-color-neutral-300: #d4d4d4;
  --eci-color-neutral-400: #a3a3a3;
  --eci-color-neutral-500: #737373;
  --eci-color-neutral-600: #525252;
  --eci-color-neutral-700: #404040;
  --eci-color-neutral-800: #262626;
  --eci-color-neutral-900: #171717;
  --eci-color-neutral-950: #0a0a0a;

  /* Generic Color Palettes */
  /* Blue */
  --eci-color-blue-50: #f0f9ff;
  --eci-color-blue-100: #e0f2fe;
  --eci-color-blue-200: #bae6fd;
  --eci-color-blue-300: #7dd3fc;
  --eci-color-blue-400: #38bdf8;
  --eci-color-blue-500: #0ea5e9;
  --eci-color-blue-600: #0284c7;
  --eci-color-blue-700: #0369a1;
  --eci-color-blue-800: #075985;
  --eci-color-blue-900: #0c4a6e;
  --eci-color-blue-950: #082f49;

  /* Green */
  --eci-color-green-50: #ecfdf5;
  --eci-color-green-100: #d1fae5;
  --eci-color-green-200: #a7f3d0;
  --eci-color-green-300: #6ee7b7;
  --eci-color-green-400: #34d399;
  --eci-color-green-500: #10b981;
  --eci-color-green-600: #059669;
  --eci-color-green-700: #047857;
  --eci-color-green-800: #065f46;
  --eci-color-green-900: #064e3b;
  --eci-color-green-950: #022c22;

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

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

  /* Yellow Colors (adding missing yellow palette) */
  --eci-color-yellow-50: #fefce8;
  --eci-color-yellow-100: #fef9c3;
  --eci-color-yellow-200: #fef08a;
  --eci-color-yellow-300: #fde047;
  --eci-color-yellow-400: #facc15;
  --eci-color-yellow-500: #eab308;
  --eci-color-yellow-600: #ca8a04;
  --eci-color-yellow-700: #a16207;
  --eci-color-yellow-800: #854d0e;
  --eci-color-yellow-900: #713f12;
  --eci-color-yellow-950: #422006;

  /* Purple Colors (adding missing purple palette) */
  --eci-color-purple-50: #faf5ff;
  --eci-color-purple-100: #f3e8ff;
  --eci-color-purple-200: #e9d5ff;
  --eci-color-purple-300: #d8b4fe;
  --eci-color-purple-400: #c084fc;
  --eci-color-purple-500: #a855f7;
  --eci-color-purple-600: #9333ea;
  --eci-color-purple-700: #7e22ce;
  --eci-color-purple-800: #6b21a8;
  --eci-color-purple-900: #581c87;
  --eci-color-purple-950: #3b0764;

  /* Slate Blue - Professional, grounded blue with subtle desaturation */
  --eci-color-slate-blue-50: #f8fafc;
  --eci-color-slate-blue-100: #f1f5f9;
  --eci-color-slate-blue-200: #e2e8f0;
  --eci-color-slate-blue-300: #cbd5e1;
  --eci-color-slate-blue-400: #94a3b8;
  --eci-color-slate-blue-500: #64748b;
  --eci-color-slate-blue-600: #475569;
  --eci-color-slate-blue-700: #334155;
  --eci-color-slate-blue-800: #1e293b;
  --eci-color-slate-blue-900: #0f172a;
  --eci-color-slate-blue-950: #020617;

  /** Zinc - Neutral colors */
  --eci-color-zinc-50: oklch(96% 0.004 285.938);
  --eci-color-zinc-100: oklch(93% 0.006 285.938);
  --eci-color-zinc-200: oklch(88% 0.008 285.938);
  --eci-color-zinc-300: oklch(81% 0.012 285.938);
  --eci-color-zinc-400: oklch(70% 0.014 285.938);
  --eci-color-zinc-500: oklch(55.2% 0.016 285.938);
  --eci-color-zinc-600: oklch(43% 0.015 285.938);
  --eci-color-zinc-700: oklch(31% 0.014 285.938);
  --eci-color-zinc-800: oklch(20% 0.013 285.938);
  --eci-color-zinc-900: oklch(13% 0.012 285.938);
  --eci-color-zinc-950: oklch(8% 0.010 285.938);

  /* Primary Colors */
  --eci-color-primary-50: var(--eci-color-zinc-50);
  --eci-color-primary-100: var(--eci-color-zinc-100);
  --eci-color-primary-200: var(--eci-color-zinc-200);
  --eci-color-primary-300: var(--eci-color-zinc-300);
  --eci-color-primary-400: var(--eci-color-zinc-400);
  --eci-color-primary-500: var(--eci-color-zinc-500);
  --eci-color-primary-600: var(--eci-color-zinc-600);
  --eci-color-primary-700: var(--eci-color-zinc-700);
  --eci-color-primary-800: var(--eci-color-zinc-800);
  --eci-color-primary-900: var(--eci-color-zinc-900);
  --eci-color-primary-950: var(--eci-color-zinc-950);

  /* Status Colors */
  --eci-color-success-50: var(--eci-color-green-50);
  --eci-color-success-100: var(--eci-color-green-100);
  --eci-color-success-200: var(--eci-color-green-200);
  --eci-color-success-300: var(--eci-color-green-300);
  --eci-color-success-400: var(--eci-color-green-400);
  --eci-color-success-500: var(--eci-color-green-500);
  --eci-color-success-600: var(--eci-color-green-600);
  --eci-color-success-700: var(--eci-color-green-700);
  --eci-color-success-800: var(--eci-color-green-800);
  --eci-color-success-900: var(--eci-color-green-900);
  --eci-color-success-950: var(--eci-color-green-950);

  --eci-color-warning-50: var(--eci-color-orange-50);
  --eci-color-warning-100: var(--eci-color-orange-100);
  --eci-color-warning-200: var(--eci-color-orange-200);
  --eci-color-warning-300: var(--eci-color-orange-300);
  --eci-color-warning-400: var(--eci-color-orange-400);
  --eci-color-warning-500: var(--eci-color-orange-500);
  --eci-color-warning-600: var(--eci-color-orange-600);
  --eci-color-warning-700: var(--eci-color-orange-700);
  --eci-color-warning-800: var(--eci-color-orange-800);
  --eci-color-warning-900: var(--eci-color-orange-900);
  --eci-color-warning-950: var(--eci-color-orange-950);

  --eci-color-error-50: var(--eci-color-red-50);
  --eci-color-error-100: var(--eci-color-red-100);
  --eci-color-error-200: var(--eci-color-red-200);
  --eci-color-error-300: var(--eci-color-red-300);
  --eci-color-error-400: var(--eci-color-red-400);
  --eci-color-error-500: var(--eci-color-red-500);
  --eci-color-error-600: var(--eci-color-red-600);
  --eci-color-error-700: var(--eci-color-red-700);
  --eci-color-error-800: var(--eci-color-red-800);
  --eci-color-error-900: var(--eci-color-red-900);
  --eci-color-error-950: var(--eci-color-red-950);

  --eci-color-info-50: var(--eci-color-blue-50);
  --eci-color-info-100: var(--eci-color-blue-100);
  --eci-color-info-200: var(--eci-color-blue-200);
  --eci-color-info-300: var(--eci-color-blue-300);
  --eci-color-info-400: var(--eci-color-blue-400);
  --eci-color-info-500: var(--eci-color-blue-500);
  --eci-color-info-600: var(--eci-color-blue-600);
  --eci-color-info-700: var(--eci-color-blue-700);
  --eci-color-info-800: var(--eci-color-blue-800);
  --eci-color-info-900: var(--eci-color-blue-900);
  --eci-color-info-950: var(--eci-color-blue-950);

  --eci-color-tip-50: var(--eci-color-purple-50);
  --eci-color-tip-100: var(--eci-color-purple-100);
  --eci-color-tip-200: var(--eci-color-purple-200);
  --eci-color-tip-300: var(--eci-color-purple-300);
  --eci-color-tip-400: var(--eci-color-purple-400);
  --eci-color-tip-500: var(--eci-color-purple-500);
  --eci-color-tip-600: var(--eci-color-purple-600);
  --eci-color-tip-700: var(--eci-color-purple-700);
  --eci-color-tip-800: var(--eci-color-purple-800);
  --eci-color-tip-900: var(--eci-color-purple-900);
  --eci-color-tip-950: var(--eci-color-purple-950);

  /* Additional Status Colors for Components */
  --eci-color-busy-50: var(--eci-color-orange-50);
  --eci-color-busy-100: var(--eci-color-orange-100);
  --eci-color-busy-200: var(--eci-color-orange-200);
  --eci-color-busy-300: var(--eci-color-orange-300);
  --eci-color-busy-400: var(--eci-color-orange-400);
  --eci-color-busy-500: var(--eci-color-orange-500);
  --eci-color-busy-600: var(--eci-color-orange-600);
  --eci-color-busy-700: var(--eci-color-orange-700);
  --eci-color-busy-800: var(--eci-color-orange-800);
  --eci-color-busy-900: var(--eci-color-orange-900);
  --eci-color-busy-950: var(--eci-color-orange-950);

  --eci-color-critical-50: var(--eci-color-purple-50);
  --eci-color-critical-100: var(--eci-color-purple-100);
  --eci-color-critical-200: var(--eci-color-purple-200);
  --eci-color-critical-300: var(--eci-color-purple-300);
  --eci-color-critical-400: var(--eci-color-purple-400);
  --eci-color-critical-500: var(--eci-color-purple-500);
  --eci-color-critical-600: var(--eci-color-purple-600);
  --eci-color-critical-700: var(--eci-color-purple-700);
  --eci-color-critical-800: var(--eci-color-purple-800);
  --eci-color-critical-900: var(--eci-color-purple-900);
  --eci-color-critical-950: var(--eci-color-purple-950);

  /*
   * Channel triplets (space-separated R G B) for the `-500` mid-tone of each
   * reusable color. Enables Tailwind-style alpha composition:
   *   background-color: rgb(var(--eci-color-warning-500-rgb) / 10%);
   * Use these whenever you need a semi-transparent semantic tint (subtle
   * surfaces, hover overlays, focus rings, etc.). Keeps a single source of
   * truth per theme and avoids hard-coding channel values at call sites.
   */
  --eci-color-neutral-500-rgb: 115 115 115;
  --eci-color-success-500-rgb: 16 185 129;
  --eci-color-warning-500-rgb: 249 115 22;
  --eci-color-error-500-rgb: 239 68 68;
  --eci-color-info-500-rgb: 14 165 233;
  --eci-color-tip-500-rgb: 168 85 247;
  --eci-color-critical-500-rgb: 168 85 247;
  --eci-color-primary-500-rgb: 113 113 122;
  --eci-color-secondary-500-rgb: 133 133 133;
  --eci-color-tertiary-500-rgb: var(--eci-color-secondary-500-rgb);
  --eci-color-danger-500-rgb: var(--eci-color-error-500-rgb);
  --eci-color-online-500-rgb: var(--eci-color-success-500-rgb);
  --eci-color-offline-500-rgb: var(--eci-color-neutral-500-rgb);

  --eci-color-online-50: var(--eci-color-green-50);
  --eci-color-online-100: var(--eci-color-green-100);
  --eci-color-online-200: var(--eci-color-green-200);
  --eci-color-online-300: var(--eci-color-green-300);
  --eci-color-online-400: var(--eci-color-green-400);
  --eci-color-online-500: var(--eci-color-green-500);
  --eci-color-online-600: var(--eci-color-green-600);
  --eci-color-online-700: var(--eci-color-green-700);
  --eci-color-online-800: var(--eci-color-green-800);
  --eci-color-online-900: var(--eci-color-green-900);
  --eci-color-online-950: var(--eci-color-green-950);

  --eci-color-offline-50: var(--eci-color-neutral-50);
  --eci-color-offline-100: var(--eci-color-neutral-100);
  --eci-color-offline-200: var(--eci-color-neutral-200);
  --eci-color-offline-300: var(--eci-color-neutral-300);
  --eci-color-offline-400: var(--eci-color-neutral-400);
  --eci-color-offline-500: var(--eci-color-neutral-500);
  --eci-color-offline-600: var(--eci-color-neutral-600);
  --eci-color-offline-700: var(--eci-color-neutral-700);
  --eci-color-offline-800: var(--eci-color-neutral-800);
  --eci-color-offline-900: var(--eci-color-neutral-900);
  --eci-color-offline-950: var(--eci-color-neutral-950);

  --eci-color-away-50: var(--eci-color-orange-50);
  --eci-color-away-100: var(--eci-color-orange-100);
  --eci-color-away-200: var(--eci-color-orange-200);
  --eci-color-away-300: var(--eci-color-orange-300);
  --eci-color-away-400: var(--eci-color-orange-400);
  --eci-color-away-500: var(--eci-color-orange-500);
  --eci-color-away-600: var(--eci-color-orange-600);
  --eci-color-away-700: var(--eci-color-orange-700);
  --eci-color-away-800: var(--eci-color-orange-800);
  --eci-color-away-900: var(--eci-color-orange-900);
  --eci-color-away-950: var(--eci-color-orange-950);

  /* Tertiary Colors (using secondary as fallback) */
  --eci-color-tertiary-50: var(--eci-color-secondary-50);
  --eci-color-tertiary-100: var(--eci-color-secondary-100);
  --eci-color-tertiary-200: var(--eci-color-secondary-200);
  --eci-color-tertiary-300: var(--eci-color-secondary-300);
  --eci-color-tertiary-400: var(--eci-color-secondary-400);
  --eci-color-tertiary-500: var(--eci-color-secondary-500);
  --eci-color-tertiary-600: var(--eci-color-secondary-600);
  --eci-color-tertiary-700: var(--eci-color-secondary-700);
  --eci-color-tertiary-800: var(--eci-color-secondary-800);
  --eci-color-tertiary-900: var(--eci-color-secondary-900);
  --eci-color-tertiary-950: var(--eci-color-secondary-950);

  /* Background Colors. Used for the main background of the app. */
  --eci-color-page: #fff;
  --eci-color-canvas: #f6f6f6;
  --eci-color-background-translucent: rgba(255, 255, 255, 0.75);
  --eci-color-background-glass: rgba(255, 255, 255, 0.95);


  /* Container Background Colors. Used for elements like sidebars */
  --eci-color-container: #fafafa;
  --eci-color-container-item: transparent;
  --eci-color-container-item-hover: #e7e7e7;
  --eci-color-container-item-active: #e7e7e7;
  --eci-color-container-item-selected: #e7e7e7;
  --eci-color-container-item-checked: #e7e7e7;
  --eci-color-container-item-disabled: transparent;


  /* Surface Colors. Used for elements like cards, modals, etc. */
  --eci-color-surface: #fff;
  --eci-color-surface-secondary: var(--eci-color-secondary-50);
  --eci-color-surface-tertiary: var(--eci-color-secondary-100);
  --eci-color-surface-variant-dark: var(--eci-color-secondary-30);
  --eci-color-surface-variant-light: var(--eci-color-white); 
  --eci-color-surface-hover: var(--eci-color-secondary-50);
  --eci-color-surface-active: var(--eci-color-secondary-50);
  --eci-color-surface-checked: var(--eci-color-primary-600);
  --eci-color-surface-selected: var(--eci-color-secondary-10);
  --eci-color-surface-checked-lighter: var(--eci-color-primary-200);
  --eci-color-surface-disabled: #f8f8f8;
  --eci-color-surface-translucent: rgba(255, 255, 255, 0.95);
  --eci-color-surface-glass: rgba(255, 255, 255, 0.95);
  --eci-color-surface-glass-blur: 15px;
  

  /** Skeleton colors, very light gray */
  --eci-color-skeleton-1: #f4f4f4;
  --eci-color-skeleton-2: #e7e7e7;
  
  /* Text Colors - Using LAB color space for better perceptual uniformity */
  --eci-color-text: lab(15.204% 0 -0.00000596046);  /* Deep black for primary text */
  --eci-color-text-semi-light: lab(31 0 0);
  --eci-color-text-light: lab(58 0 -0.01);             /* Muted for secondary text */
  --eci-color-text-lighter: lab(68 0 -0.01); 
  
  /* Markdown text color */
  --eci-markdown-text-color: #494949;

  --eci-color-text-hover: lab(25% 0 0);
  --eci-color-text-active: lab(15.204% 0 -0.00000596046);
  --eci-color-text-primary: var(--eci-color-primary-500);

  /* Aliases */
  --eci-color-text-inverse: #ffffff;
  --eci-color-text-disabled: var(--eci-color-text-light);

  --eci-color-text-white: #ffffff;
  --eci-color-text-black: lab(15.204% 0 -0.00000596046);

  /* Border Colors */
  --eci-color-border: var(--eci-color-border-default);
  --eci-color-border-default: lab(91 0 -0.01);
  --eci-color-border-subtle: lab(94.8% 0.01 -0.01);
  --eci-color-border-strong: lab(85.63% 0 -0.01);

  --eci-color-glass-background: rgba(255, 255, 255, 0.85);
  --eci-color-glass-blur: 15px;

  /* Subtle Gradient Backgrounds - for avatars, cards, and other subtle fills */
  --eci-gradient-subtle-primary: linear-gradient(145deg, var(--eci-color-primary-50), var(--eci-color-primary-100));
  --eci-gradient-subtle-primary-border: var(--eci-color-primary-100);
  --eci-gradient-subtle-primary-text: var(--eci-color-primary-600);

  --eci-gradient-subtle-neutral: linear-gradient(145deg, var(--eci-color-neutral-50), var(--eci-color-neutral-100));
  --eci-gradient-subtle-neutral-border: var(--eci-color-neutral-200);
  --eci-gradient-subtle-neutral-text: var(--eci-color-neutral-600);

  --eci-gradient-subtle-success: linear-gradient(145deg, var(--eci-color-success-50), var(--eci-color-success-100));
  --eci-gradient-subtle-success-border: var(--eci-color-success-100);
  --eci-gradient-subtle-success-text: var(--eci-color-success-600);

  --eci-gradient-subtle-warning: linear-gradient(145deg, var(--eci-color-warning-50), var(--eci-color-warning-100));
  --eci-gradient-subtle-warning-border: var(--eci-color-warning-100);
  --eci-gradient-subtle-warning-text: var(--eci-color-warning-600);

  --eci-gradient-subtle-error: linear-gradient(145deg, var(--eci-color-error-50), var(--eci-color-error-100));
  --eci-gradient-subtle-error-border: var(--eci-color-error-100);
  --eci-gradient-subtle-error-text: var(--eci-color-error-600);

  --eci-gradient-subtle-info: linear-gradient(145deg, var(--eci-color-info-50), var(--eci-color-info-100));
  --eci-gradient-subtle-info-border: var(--eci-color-info-100);
  --eci-gradient-subtle-info-text: var(--eci-color-info-600);
}

/* ==========================================================================
   Gradient Design Tokens
   ========================================================================== */

:root {
  /* Primary Gradients */
  --eci-gradient-primary: linear-gradient(135deg, var(--eci-color-primary-50) 0%, transparent 100%);
  --eci-gradient-primary-vertical: linear-gradient(180deg, var(--eci-color-primary-50) 0%, transparent 100%);
  --eci-gradient-primary-horizontal: linear-gradient(90deg, var(--eci-color-primary-50) 0%, transparent 100%);
  --eci-gradient-primary-diagonal: linear-gradient(45deg, var(--eci-color-primary-50) 0%, transparent 100%);
  --eci-gradient-primary-diagonal-corner: linear-gradient(45deg, transparent 65%, var(--eci-color-primary-50) 100%);
  --eci-gradient-primary-radial: radial-gradient(circle at top left, transparent 70%, color-mix(in oklch, var(--eci-color-primary-300), transparent 85%) 0%);

  /* Secondary Gradients */
  --eci-gradient-secondary: linear-gradient(135deg, var(--eci-color-secondary-50) 0%, transparent 100%);
  --eci-gradient-secondary-vertical: linear-gradient(180deg, var(--eci-color-secondary-50) 0%, transparent 100%);
  --eci-gradient-secondary-horizontal: linear-gradient(90deg, var(--eci-color-secondary-50) 0%, transparent 100%);
  --eci-gradient-secondary-diagonal: linear-gradient(45deg, var(--eci-color-secondary-50) 0%, transparent 100%);
  --eci-gradient-secondary-diagonal-corner: linear-gradient(45deg, transparent 65%, var(--eci-color-secondary-50) 100%);
  --eci-gradient-secondary-radial: radial-gradient(circle at top left, var(--eci-color-secondary-50) 0%, transparent 70%);

  /* Tertiary Gradients */
  --eci-gradient-tertiary: linear-gradient(135deg, var(--eci-color-tertiary-50) 0%, transparent 100%);
  --eci-gradient-tertiary-vertical: linear-gradient(180deg, var(--eci-color-tertiary-50) 0%, transparent 100%);
  --eci-gradient-tertiary-horizontal: linear-gradient(90deg, var(--eci-color-tertiary-50) 0%, transparent 100%);
  --eci-gradient-tertiary-diagonal: linear-gradient(45deg, var(--eci-color-tertiary-50) 0%, transparent 100%);
  --eci-gradient-tertiary-diagonal-corner: linear-gradient(45deg, transparent 65%, var(--eci-color-tertiary-50) 100%);
  --eci-gradient-tertiary-radial: radial-gradient(circle at top left, var(--eci-color-tertiary-50) 0%, transparent 70%);

  /* Neutral Gradients */
  --eci-gradient-neutral: linear-gradient(135deg, var(--eci-color-neutral-50) 0%, transparent 100%);
  --eci-gradient-neutral-vertical: linear-gradient(180deg, var(--eci-color-neutral-50) 0%, transparent 100%);
  --eci-gradient-neutral-horizontal: linear-gradient(90deg, var(--eci-color-neutral-50) 0%, transparent 100%);
  --eci-gradient-neutral-diagonal: linear-gradient(45deg, var(--eci-color-neutral-50) 0%, transparent 100%);
  --eci-gradient-neutral-diagonal-corner: linear-gradient(45deg, transparent 65%, var(--eci-color-neutral-50) 100%);
  --eci-gradient-neutral-radial: radial-gradient(circle at top left, var(--eci-color-neutral-50) 0%, transparent 70%);

  /* Blue Gradients */
  --eci-gradient-blue: linear-gradient(135deg, var(--eci-color-blue-50) 0%, transparent 100%);
  --eci-gradient-blue-vertical: linear-gradient(180deg, var(--eci-color-blue-50) 0%, transparent 100%);
  --eci-gradient-blue-horizontal: linear-gradient(90deg, var(--eci-color-blue-50) 0%, transparent 100%);
  --eci-gradient-blue-diagonal: linear-gradient(45deg, var(--eci-color-blue-50) 0%, transparent 100%);
  --eci-gradient-blue-diagonal-corner: linear-gradient(45deg, transparent 65%, var(--eci-color-blue-50) 100%);
  --eci-gradient-blue-radial: radial-gradient(circle at top left, var(--eci-color-blue-50) 0%, transparent 70%);

  /* Green Gradients */
  --eci-gradient-green: linear-gradient(135deg, var(--eci-color-green-50) 0%, transparent 100%);
  --eci-gradient-green-vertical: linear-gradient(180deg, var(--eci-color-green-50) 0%, transparent 100%);
  --eci-gradient-green-horizontal: linear-gradient(90deg, var(--eci-color-green-50) 0%, transparent 100%);
  --eci-gradient-green-diagonal: linear-gradient(45deg, var(--eci-color-green-50) 0%, transparent 100%);
  --eci-gradient-green-diagonal-corner: linear-gradient(45deg, transparent 65%, var(--eci-color-green-50) 100%);
  --eci-gradient-green-radial: radial-gradient(circle at top left, var(--eci-color-green-50) 0%, transparent 70%);

  /* Red Gradients */
  --eci-gradient-red: linear-gradient(135deg, var(--eci-color-red-50) 0%, transparent 100%);
  --eci-gradient-red-vertical: linear-gradient(180deg, var(--eci-color-red-50) 0%, transparent 100%);
  --eci-gradient-red-horizontal: linear-gradient(90deg, var(--eci-color-red-50) 0%, transparent 100%);
  --eci-gradient-red-diagonal: linear-gradient(45deg, var(--eci-color-red-50) 0%, transparent 100%);
  --eci-gradient-red-diagonal-corner: linear-gradient(45deg, transparent 65%, var(--eci-color-red-50) 100%);
  --eci-gradient-red-radial: radial-gradient(circle at top left, var(--eci-color-red-50) 0%, transparent 70%);

  /* Orange Gradients */
  --eci-gradient-orange: linear-gradient(135deg, var(--eci-color-orange-50) 0%, transparent 100%);
  --eci-gradient-orange-vertical: linear-gradient(180deg, var(--eci-color-orange-50) 0%, transparent 100%);
  --eci-gradient-orange-horizontal: linear-gradient(90deg, var(--eci-color-orange-50) 0%, transparent 100%);
  --eci-gradient-orange-diagonal: linear-gradient(45deg, var(--eci-color-orange-50) 0%, transparent 100%);
  --eci-gradient-orange-diagonal-corner: linear-gradient(45deg, transparent 65%, var(--eci-color-orange-50) 100%);
  --eci-gradient-orange-radial: radial-gradient(circle at top left, var(--eci-color-orange-50) 0%, transparent 70%);

  /* Yellow Gradients */
  --eci-gradient-yellow: linear-gradient(135deg, var(--eci-color-yellow-50) 0%, transparent 100%);
  --eci-gradient-yellow-vertical: linear-gradient(180deg, var(--eci-color-yellow-50) 0%, transparent 100%);
  --eci-gradient-yellow-horizontal: linear-gradient(90deg, var(--eci-color-yellow-50) 0%, transparent 100%);
  --eci-gradient-yellow-diagonal: linear-gradient(45deg, var(--eci-color-yellow-50) 0%, transparent 100%);
  --eci-gradient-yellow-diagonal-corner: linear-gradient(45deg, transparent 65%, var(--eci-color-yellow-50) 100%);
  --eci-gradient-yellow-radial: radial-gradient(circle at top left, var(--eci-color-yellow-50) 0%, transparent 70%);

  /* Purple Gradients */
  --eci-gradient-purple: linear-gradient(135deg, var(--eci-color-purple-50) 0%, transparent 100%);
  --eci-gradient-purple-vertical: linear-gradient(180deg, var(--eci-color-purple-50) 0%, transparent 100%);
  --eci-gradient-purple-horizontal: linear-gradient(90deg, var(--eci-color-purple-50) 0%, transparent 100%);
  --eci-gradient-purple-diagonal: linear-gradient(45deg, var(--eci-color-purple-50) 0%, transparent 100%);
  --eci-gradient-purple-diagonal-corner: linear-gradient(45deg, transparent 65%, var(--eci-color-purple-50) 100%);
  --eci-gradient-purple-radial: radial-gradient(circle at top left, var(--eci-color-purple-50) 0%, transparent 70%);

  /* Status Gradients */
  --eci-gradient-success: linear-gradient(135deg, var(--eci-color-success-50) 0%, transparent 100%);
  --eci-gradient-success-vertical: linear-gradient(180deg, var(--eci-color-success-50) 0%, transparent 100%);
  --eci-gradient-success-horizontal: linear-gradient(90deg, var(--eci-color-success-50) 0%, transparent 100%);
  --eci-gradient-success-diagonal: linear-gradient(45deg, var(--eci-color-success-50) 0%, transparent 100%);
  --eci-gradient-success-diagonal-corner: linear-gradient(45deg, transparent 65%, var(--eci-color-success-50) 100%);
  --eci-gradient-success-radial: radial-gradient(circle at top left, var(--eci-color-success-50) 0%, transparent 70%);

  --eci-gradient-warning: linear-gradient(135deg, var(--eci-color-warning-50) 0%, transparent 100%);
  --eci-gradient-warning-vertical: linear-gradient(180deg, var(--eci-color-warning-50) 0%, transparent 100%);
  --eci-gradient-warning-horizontal: linear-gradient(90deg, var(--eci-color-warning-50) 0%, transparent 100%);
  --eci-gradient-warning-diagonal: linear-gradient(45deg, var(--eci-color-warning-50) 0%, transparent 100%);
  --eci-gradient-warning-diagonal-corner: linear-gradient(45deg, transparent 65%, var(--eci-color-warning-50) 100%);
  --eci-gradient-warning-radial: radial-gradient(circle at top left, var(--eci-color-warning-50) 0%, transparent 70%);

  --eci-gradient-error: linear-gradient(135deg, var(--eci-color-error-50) 0%, transparent 100%);
  --eci-gradient-error-vertical: linear-gradient(180deg, var(--eci-color-error-50) 0%, transparent 100%);
  --eci-gradient-error-horizontal: linear-gradient(90deg, var(--eci-color-error-50) 0%, transparent 100%);
  --eci-gradient-error-diagonal: linear-gradient(45deg, var(--eci-color-error-50) 0%, transparent 100%);
  --eci-gradient-error-diagonal-corner: linear-gradient(45deg, transparent 65%, var(--eci-color-error-50) 100%);
  --eci-gradient-error-radial: radial-gradient(circle at top left, var(--eci-color-error-50) 0%, transparent 70%);

  --eci-gradient-critical: linear-gradient(135deg, var(--eci-color-critical-50) 0%, transparent 100%);
  --eci-gradient-critical-vertical: linear-gradient(180deg, var(--eci-color-critical-50) 0%, transparent 100%);
  --eci-gradient-critical-horizontal: linear-gradient(90deg, var(--eci-color-critical-50) 0%, transparent 100%);
  --eci-gradient-critical-diagonal: linear-gradient(45deg, var(--eci-color-critical-50) 0%, transparent 100%);
  --eci-gradient-critical-diagonal-corner: linear-gradient(45deg, transparent 65%, var(--eci-color-critical-50) 100%);
  --eci-gradient-critical-radial: radial-gradient(circle at top left, var(--eci-color-critical-50) 0%, transparent 70%);

  /* Utility Gradients */
  --eci-gradient-surface: linear-gradient(135deg, var(--eci-color-surface-variant-dark) 0%, transparent 100%);
  --eci-gradient-surface-vertical: linear-gradient(180deg, var(--eci-color-surface-variant-dark) 0%, transparent 100%);
  --eci-gradient-surface-horizontal: linear-gradient(90deg, var(--eci-color-surface-variant-dark) 0%, transparent 100%);
  --eci-gradient-surface-radial: radial-gradient(circle at top left, var(--eci-color-surface-variant-dark) 0%, transparent 70%);
}

/* ==========================================================================
   Typography Design Tokens
   ========================================================================== */

:root {
  /* Font Family */
  --eci-font-family-sans: "InterVariable", sans-serif;
  --eci-font-family: var(--eci-font-family-sans, system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Ubuntu', 'Cantarell', 'Noto Sans', sans-serif);
  --eci-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;

  /* Font Weights */
  --eci-font-weight-thin: 100;
  --eci-font-weight-extralight: 200;
  --eci-font-weight-light: 300;
  --eci-font-weight-normal: 400;
  --eci-font-weight-medium: 500;
  --eci-font-weight-semibold: 600;
  --eci-font-weight-bold: 700;
  --eci-font-weight-extrabold: 800;
  --eci-font-weight-black: 900;

  /* Font Sizes — all sizes derive from --eci-font-size-base so that
     overriding the base value scales every size proportionally. */
  --eci-font-size-base: 16px;
  --eci-font-size-xxs: calc(0.625  * var(--eci-font-size-base)); /* 10px @ 16px base */
  --eci-font-size-xs:  calc(0.75   * var(--eci-font-size-base)); /* 12px @ 16px base */
  --eci-font-size-sm:  calc(0.875  * var(--eci-font-size-base)); /* 14px @ 16px base */
  --eci-font-size-md:  calc(1      * var(--eci-font-size-base)); /* 16px @ 16px base */
  --eci-font-size-lg:  calc(1.125  * var(--eci-font-size-base)); /* 18px @ 16px base */
  --eci-font-size-xl:  calc(1.25   * var(--eci-font-size-base)); /* 20px @ 16px base */
  --eci-font-size-2xl: calc(1.5    * var(--eci-font-size-base)); /* 24px @ 16px base */
  --eci-font-size-3xl: calc(1.875  * var(--eci-font-size-base)); /* 30px @ 16px base */
  --eci-font-size-4xl: calc(2.25   * var(--eci-font-size-base)); /* 36px @ 16px base */
  --eci-font-size-5xl: calc(3      * var(--eci-font-size-base)); /* 48px @ 16px base */
  --eci-font-size-6xl: calc(3.75   * var(--eci-font-size-base)); /* 60px @ 16px base */
  --eci-font-size-7xl: calc(4.5    * var(--eci-font-size-base)); /* 72px @ 16px base */
  --eci-font-size-8xl: calc(6      * var(--eci-font-size-base)); /* 96px @ 16px base */
  --eci-font-size-9xl: calc(8      * var(--eci-font-size-base)); /* 128px @ 16px base */

  /* Line Heights */
  --eci-line-height-none: 1;
  --eci-line-height-tight: 1.25;
  --eci-line-height-snug: 1.375;
  --eci-line-height-normal: 1.5;
  --eci-line-height: var(--eci-line-height-normal);
  --eci-line-height-relaxed: 1.625;
  --eci-line-height-loose: 2;

  /* Letter Spacing */
  --eci-letter-spacing-tighter: -0.05em;
  --eci-letter-spacing-tight: -0.025em;
  --eci-letter-spacing-normal: 0em;
  --eci-letter-spacing-wide: 0.025em;
  --eci-letter-spacing-wider: 0.05em;
  --eci-letter-spacing-widest: 0.1em;
}

/* ==========================================================================
   Spacing Design Tokens
   ========================================================================== */

:root {
  /* Base Spacing Unit */
  --eci-spacing-base: 1rem; /* 16px */

  /* Spacing Scale */
  --eci-spacing-0: 0;
  --eci-spacing-px: 1px;
  --eci-spacing-0-5: 0.125rem;  /* 2px */
  --eci-spacing-1: 0.25rem;     /* 4px */
  --eci-spacing-1-5: 0.375rem;  /* 6px */
  --eci-spacing-2: 0.5rem;      /* 8px */
  --eci-spacing-2-5: 0.625rem;  /* 10px */
  --eci-spacing-3: 0.75rem;     /* 12px */
  --eci-spacing-3-5: 0.875rem;  /* 14px */
  --eci-spacing-3-75: 0.9375rem; /* 15px */
  --eci-spacing-4: 1rem;        /* 16px */
  --eci-spacing-5: 1.25rem;     /* 20px */
  --eci-spacing-6: 1.5rem;      /* 24px */
  --eci-spacing-7: 1.75rem;     /* 28px */
  --eci-spacing-8: 2rem;       /* 32px */
  --eci-spacing-9: 2.25rem;     /* 36px */
  --eci-spacing-10: 2.5rem;     /* 40px */
  --eci-spacing-11: 2.75rem;    /* 44px */
  --eci-spacing-12: 3rem;       /* 48px */
  --eci-spacing-14: 3.5rem;     /* 56px */
  --eci-spacing-16: 4rem;       /* 64px */
  --eci-spacing-20: 5rem;       /* 80px */
  --eci-spacing-24: 6rem;       /* 96px */
  --eci-spacing-28: 7rem;       /* 112px */
  --eci-spacing-32: 8rem;       /* 128px */
  --eci-spacing-36: 9rem;       /* 144px */
  --eci-spacing-40: 10rem;      /* 160px */
  --eci-spacing-44: 11rem;      /* 176px */
  --eci-spacing-48: 12rem;      /* 192px */
  --eci-spacing-52: 13rem;      /* 208px */
  --eci-spacing-56: 14rem;      /* 224px */
  --eci-spacing-60: 15rem;      /* 240px */
  --eci-spacing-64: 16rem;      /* 256px */
  --eci-spacing-72: 18rem;      /* 288px */
  --eci-spacing-80: 20rem;      /* 320px */
  --eci-spacing-96: 24rem;      /* 384px */

  /* Component Spacing Semantic Tokens */
  --eci-spacing-component-xs: var(--eci-spacing-1);    /* 4px */
  --eci-spacing-component-sm: var(--eci-spacing-2);    /* 8px */
  --eci-spacing-component-md: var(--eci-spacing-4);    /* 16px */
  --eci-spacing-component-lg: var(--eci-spacing-6);    /* 24px */
  --eci-spacing-component-xl: var(--eci-spacing-8);    /* 32px */
  --eci-spacing-component-2xl: var(--eci-spacing-12);  /* 48px */

  /* Layout Spacing Semantic Tokens */
  --eci-spacing-layout-xs: var(--eci-spacing-4);   /* 16px */
  --eci-spacing-layout-sm: var(--eci-spacing-6);   /* 24px */
  --eci-spacing-layout-md: var(--eci-spacing-8);   /* 32px */
  --eci-spacing-layout-lg: var(--eci-spacing-12);  /* 48px */
  --eci-spacing-layout-xl: var(--eci-spacing-16);  /* 64px */
  --eci-spacing-layout-2xl: var(--eci-spacing-24); /* 96px */

  /* Container Spacing */
  --eci-spacing-container-padding: var(--eci-spacing-4);
  --eci-spacing-container-margin: var(--eci-spacing-6);
  
  /* Section Spacing */
  --eci-spacing-section-sm: var(--eci-spacing-12);  /* 48px */
  --eci-spacing-section-md: var(--eci-spacing-16);  /* 64px */
  --eci-spacing-section-lg: var(--eci-spacing-24);  /* 96px */
  --eci-spacing-section-xl: var(--eci-spacing-32);  /* 128px */

  /* Input Component Spacing */
  --eci-spacing-input-element: var(--eci-spacing-3);     /* 12px - gap between label and input */
  --eci-spacing-input-padding-x: var(--eci-spacing-3);   /* 12px - horizontal padding */
  --eci-spacing-input-padding-y: var(--eci-spacing-2);   /* 8px - vertical padding */
  --eci-spacing-input-inner: var(--eci-spacing-0);       /* 0px - small gap between elements */
  --eci-spacing-input-inner-big: var(--eci-spacing-4);   /* 16px - big gap between elements */
  --eci-spacing-input-icon-margin: var(--eci-spacing-2); /* 8px - icon margin */
  --eci-spacing-input-loading-right: var(--eci-spacing-2); /* 8px - loading indicator right position */

  /* Card Spacing */
  --eci-card-padding: var(--eci-spacing-5);
}

/* ==========================================================================
   Shadow Design Tokens
   ========================================================================== */

:root {
  /* Base Shadow Colors */
  --eci-shadow-color: 0, 0, 0;
  --eci-shadow-color-strong: 0, 0, 0;

  /* Shadow */
  --eci-shadow-border: rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
  --eci-shadow-xs: 0 1px 2px 0 rgba(var(--eci-shadow-color), 0.025);
  --eci-shadow-sm: 0 1px 1px 0 rgba(var(--eci-shadow-color), 0.05), 0 1px 5px -1px rgba(var(--eci-shadow-color), 0.04);
  --eci-shadow-md: 0 4px 6px -1px rgba(var(--eci-shadow-color), 0.06), 0 2px 4px -2px rgba(var(--eci-shadow-color), 0.04);
  --eci-shadow-lg: 0 10px 15px -3px rgba(var(--eci-shadow-color), 0.07), 0 4px 6px -4px rgba(var(--eci-shadow-color), 0.04);
  --eci-shadow-xl: 0 20px 25px -5px rgba(var(--eci-shadow-color), 0.08), 0 8px 10px -6px rgba(var(--eci-shadow-color), 0.04);
  --eci-shadow-2xl: 0 25px 50px -12px rgba(var(--eci-shadow-color), 0.12);

  /* Inner Shadows */
  --eci-shadow-inner: inset 0 2px 4px 0 rgba(var(--eci-shadow-color), 0.05);

  /* Focus Shadows */
  --eci-shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.5);
  --eci-shadow-focus-error: 0 0 0 3px rgba(239, 68, 68, 0.5);
  --eci-shadow-focus-success: 0 0 0 3px rgba(34, 197, 94, 0.5);
  --eci-shadow-focus-warning: 0 0 0 3px rgba(245, 158, 11, 0.5);

  /* Component Shadows */
  --eci-shadow-button: var(--eci-shadow-sm);
  --eci-shadow-button-hover: var(--eci-shadow-md);
  --eci-shadow-card: var(--eci-shadow-sm);
  --eci-shadow-card-hover: var(--eci-shadow-lg);
  --eci-shadow-modal: var(--eci-shadow-2xl);
  --eci-shadow-dropdown: var(--eci-shadow-lg);
  --eci-shadow-tooltip: var(--eci-shadow-md);

  /* Colored Shadows */
  --eci-shadow-primary: 0 4px 14px 0 rgba(59, 130, 246, 0.15);
  --eci-shadow-success: 0 4px 14px 0 rgba(34, 197, 94, 0.15);
  --eci-shadow-warning: 0 4px 14px 0 rgba(245, 158, 11, 0.15);
  --eci-shadow-error: 0 4px 14px 0 rgba(239, 68, 68, 0.15);

  /* Text Shadows */
  --eci-text-shadow-sm: 0 1px 2px rgba(var(--eci-shadow-color), 0.5);
  --eci-text-shadow-md: 0 2px 4px rgba(var(--eci-shadow-color), 0.5);
  --eci-text-shadow-lg: 0 4px 8px rgba(var(--eci-shadow-color), 0.5);
}

/* ==========================================================================
   Border Design Tokens
   ========================================================================== */

:root {
  /* Border Widths */
  --eci-border-width-0: 0;
  --eci-border-width-1: 1px;
  --eci-border-width-2: 2px;
  --eci-border-width-4: 4px;
  --eci-border-width-8: 8px;
  
  /* Default Border Width */
  --eci-border-width: var(--eci-border-width-1);

  /* Border Radius
   * Scale aligned to 8px increments for nested radius compatibility.
   * Formula: R_inner = R_outer - gap
   * With 8px gap: lg→sm, xl→lg, 2xl→xl, 3xl→2xl
   */
  --eci-border-radius-none: 0;
  --eci-border-radius-xs: .25rem;   /* 4px */
  --eci-border-radius-sm: .5rem;    /* 8px */
  --eci-border-radius-md: .75rem;   /* 12px */
  --eci-border-radius-lg: 1rem;     /* 16px */
  --eci-border-radius-xl: 1.5rem;   /* 24px */
  --eci-border-radius-2xl: 2rem;    /* 32px */
  --eci-border-radius-3xl: 2.5rem;  /* 40px */
  --eci-border-radius-full: 9999px;

  /* Default Border Radius */
  --eci-border-radius: var(--eci-border-radius-md);
  --eci-border-radius-default: var(--eci-border-radius-md);  /* Semantic default for consistent styling */

  /* Border Styles */
  --eci-border-style-solid: solid;
  --eci-border-style-dashed: dashed;
  --eci-border-style-dotted: dotted;
  --eci-border-style-double: double;
  --eci-border-style-none: none;

  /* Component Border Radius */
  --eci-border-radius-button: var(--eci-border-radius-sm);
  --eci-border-radius-input: var(--eci-border-radius-sm);
  --eci-border-radius-card: var(--eci-border-radius-lg);
  --eci-border-radius-modal: var(--eci-border-radius-xl);
  --eci-border-radius-badge: var(--eci-border-radius-full);
  --eci-border-radius-avatar: var(--eci-border-radius-full);
  --eci-border-radius-tooltip: var(--eci-border-radius-md);

  /* Combined Border Tokens */
  --eci-border-thin: var(--eci-border-width-1) var(--eci-border-style-solid) var(--eci-color-border-default);
  --eci-border-medium: var(--eci-border-width-2) var(--eci-border-style-solid) var(--eci-color-border-default);
  --eci-border-thick: var(--eci-border-width-4) var(--eci-border-style-solid) var(--eci-color-border-default);

  /* Focus Border */
  --eci-border-focus: var(--eci-border-width-2) var(--eci-border-style-solid) var(--eci-color-primary-500);

  /* State Borders */
  --eci-border-success: var(--eci-border-width-1) var(--eci-border-style-solid) var(--eci-color-success-500);
  --eci-border-warning: var(--eci-border-width-1) var(--eci-border-style-solid) var(--eci-color-warning-500);
  --eci-border-error: var(--eci-border-width-1) var(--eci-border-style-solid) var(--eci-color-error-500);

  /* Divider Borders */
  --eci-border-divider: var(--eci-border-width-1) var(--eci-border-style-solid) var(--eci-color-border-default);
  --eci-border-divider-strong: var(--eci-border-width-1) var(--eci-border-style-solid) var(--eci-color-border-strong);
}

:root {
  /* Component sizes */
  --eci-size-xxs: var(--eci-spacing-5);
  /* 20px */
  --eci-size-xs: var(--eci-spacing-6);
  /* 24px */
  --eci-size-sm: var(--eci-spacing-7);
  /* 28px */
  --eci-size-md: 2rem;
  /* 36px */
  --eci-size-lg: var(--eci-spacing-10);
  /* 40px */
  --eci-size-xl: var(--eci-spacing-12);
  /* 48px */
  --eci-size-2xl: var(--eci-spacing-14);
  /* 56px */

  /* Input specific heights */
  --eci-input-height: var(--eci-size-md);
  /* 36px - synced with button-height */
  --eci-input-height-sm: var(--eci-size-sm);
  /* 28px */
  --eci-input-height-lg: var(--eci-size-lg);
  /* 40px */

  /* Icon sizes */
  --eci-icon-size-xs: var(--eci-spacing-2-5);    /* 12px */
  --eci-icon-size-sm: var(--eci-spacing-3-5);  /* 14px */
  --eci-icon-size-md: var(--eci-spacing-5);    /* 16px */
  --eci-icon-size-lg: var(--eci-spacing-6);    /* 20px */
  --eci-icon-size-xl: var(--eci-spacing-7);    /* 24px */
  --eci-icon-size-2xl: var(--eci-spacing-8);   /* 32px */

  /* Default icon size */
  --eci-icon-size: var(--eci-icon-size-md);

  /* Panel widths - shared defaults for side panels and AI space panels */
  --eci-panel-width-sm: 24rem;   /* 384px - compact panels */
  --eci-panel-width-md: 30rem;   /* 480px - standard side panels */
  --eci-panel-width-lg: 32rem;   /* 512px - AI space, wider panels */
  --eci-panel-width-xl: 36rem;   /* 576px - extra wide panels */

  /* Panel heights - for bottom-positioned panels */
  --eci-panel-height-sm: 25rem;  /* 400px */
  --eci-panel-height-md: 35rem;  /* 560px */
  --eci-panel-height-lg: 50rem;  /* 800px */
}

:root {
  /* Transition Durations */
  --eci-transition-fast: 0.1s;
  --eci-transition-normal: 0.15s;
  --eci-transition-slow: 0.2s;
  --eci-transition-slower: 0.3s;
  --eci-transition-stagger-delay: 0.025s;

  /* Transition Timing Functions */
  --eci-transition-timing-linear: linear;
  --eci-transition-timing-ease: ease;
  --eci-transition-timing-ease-in: ease-in;
  --eci-transition-timing-ease-out: ease-out;
  --eci-transition-timing-ease-in-out: ease-in-out;
}

/* Utilities - Utility classes for layout, spacing, etc.
 *
 * IMPORTANT: Utility classes are scoped to prevent style bleeding into host
 * applications. They only apply inside one of these containers:
 *   - <eci-app-wrapper> (the standard ECI app shell component)
 *   - class="eci-elements-app" (opt-in class for apps without eci-app-wrapper)
 *
 * Example:
 *   <body class="eci-elements-app">
 *     <div class="flex gap-2">...</div>  <!-- utility classes work here -->
 *   </body>
 *
 * Or with the component:
 *   <eci-app-wrapper>
 *     <div class="flex gap-2">...</div>  <!-- utility classes work here -->
 *   </eci-app-wrapper>
 *
 * Outside these containers, utility classes have no effect.
 */

/* Width */

:is(eci-app-wrapper, .eci-elements-app) {
  .w-0 { width: var(--eci-spacing-0); }
  .w-px { width: var(--eci-spacing-px); }
  .w-0-5 { width: var(--eci-spacing-0-5); }
  .w-1 { width: var(--eci-spacing-1); }
  .w-1-5 { width: var(--eci-spacing-1-5); }
  .w-2 { width: var(--eci-spacing-2); }
  .w-2-5 { width: var(--eci-spacing-2-5); }
  .w-3 { width: var(--eci-spacing-3); }
  .w-3-5 { width: var(--eci-spacing-3-5); }
  .w-4 { width: var(--eci-spacing-4); }
  .w-5 { width: var(--eci-spacing-5); }
  .w-6 { width: var(--eci-spacing-6); }
  .w-7 { width: var(--eci-spacing-7); }
  .w-8 { width: var(--eci-spacing-8); }
  .w-9 { width: var(--eci-spacing-9); }
  .w-10 { width: var(--eci-spacing-10); }
  .w-11 { width: var(--eci-spacing-11); }
  .w-12 { width: var(--eci-spacing-12); }
  .w-14 { width: var(--eci-spacing-14); }
  .w-16 { width: var(--eci-spacing-16); }
  .w-20 { width: var(--eci-spacing-20); }
  .w-24 { width: var(--eci-spacing-24); }
  .w-28 { width: var(--eci-spacing-28); }
  .w-32 { width: var(--eci-spacing-32); }
  .w-36 { width: var(--eci-spacing-36); }

  .w-auto { width: auto; }
  .w-full { width: 100%; }
  .w-screen { width: 100vw; }
  .w-min { width: min-content; }
  .w-max { width: max-content; }
  .w-fit { width: fit-content; }

  /* Width Fractions */
  .w-1\/2 { width: 50%; }
  .w-1\/3 { width: 33.333333%; }
  .w-2\/3 { width: 66.666667%; }
  .w-1\/4 { width: 25%; }
  .w-2\/4 { width: 50%; }
  .w-3\/4 { width: 75%; }
  .w-1\/5 { width: 20%; }
  .w-2\/5 { width: 40%; }
  .w-3\/5 { width: 60%; }
  .w-4\/5 { width: 80%; }
  .w-1\/6 { width: 16.666667%; }
  .w-2\/6 { width: 33.333333%; }
  .w-3\/6 { width: 50%; }
  .w-4\/6 { width: 66.666667%; }
  .w-5\/6 { width: 83.333333%; }
  .w-1\/12 { width: 8.333333%; }
  .w-2\/12 { width: 16.666667%; }
  .w-3\/12 { width: 25%; }
  .w-4\/12 { width: 33.333333%; }
  .w-5\/12 { width: 41.666667%; }
  .w-6\/12 { width: 50%; }
  .w-7\/12 { width: 58.333333%; }
  .w-8\/12 { width: 66.666667%; }
  .w-9\/12 { width: 75%; }
  .w-10\/12 { width: 83.333333%; }
  .w-11\/12 { width: 91.666667%; }

  /* Min Width */
  .min-w-0 { min-width: var(--eci-spacing-0); }
  .min-w-px { min-width: var(--eci-spacing-px); }
  .min-w-0-5 { min-width: var(--eci-spacing-0-5); }
  .min-w-1 { min-width: var(--eci-spacing-1); }
  .min-w-1-5 { min-width: var(--eci-spacing-1-5); }
  .min-w-2 { min-width: var(--eci-spacing-2); }
  .min-w-2-5 { min-width: var(--eci-spacing-2-5); }
  .min-w-3 { min-width: var(--eci-spacing-3); }
  .min-w-3-5 { min-width: var(--eci-spacing-3-5); }
  .min-w-4 { min-width: var(--eci-spacing-4); }
  .min-w-5 { min-width: var(--eci-spacing-5); }
  .min-w-6 { min-width: var(--eci-spacing-6); }
  .min-w-7 { min-width: var(--eci-spacing-7); }
  .min-w-8 { min-width: var(--eci-spacing-8); }
  .min-w-9 { min-width: var(--eci-spacing-9); }
  .min-w-10 { min-width: var(--eci-spacing-10); }
  .min-w-11 { min-width: var(--eci-spacing-11); }
  .min-w-12 { min-width: var(--eci-spacing-12); }
  .min-w-14 { min-width: var(--eci-spacing-14); }
  .min-w-16 { min-width: var(--eci-spacing-16); }
  .min-w-20 { min-width: var(--eci-spacing-20); }
  .min-w-24 { min-width: var(--eci-spacing-24); }
  .min-w-28 { min-width: var(--eci-spacing-28); }
  .min-w-32 { min-width: var(--eci-spacing-32); }
  .min-w-36 { min-width: var(--eci-spacing-36); }

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

  /* Max Width */
  .max-w-0 { max-width: var(--eci-spacing-0); }
  .max-w-px { max-width: var(--eci-spacing-px); }
  .max-w-0-5 { max-width: var(--eci-spacing-0-5); }
  .max-w-1 { max-width: var(--eci-spacing-1); }
  .max-w-1-5 { max-width: var(--eci-spacing-1-5); }
  .max-w-2 { max-width: var(--eci-spacing-2); }
  .max-w-2-5 { max-width: var(--eci-spacing-2-5); }
  .max-w-3 { max-width: var(--eci-spacing-3); }
  .max-w-3-5 { max-width: var(--eci-spacing-3-5); }
  .max-w-4 { max-width: var(--eci-spacing-4); }
  .max-w-5 { max-width: var(--eci-spacing-5); }
  .max-w-6 { max-width: var(--eci-spacing-6); }
  .max-w-7 { max-width: var(--eci-spacing-7); }
  .max-w-8 { max-width: var(--eci-spacing-8); }
  .max-w-9 { max-width: var(--eci-spacing-9); }
  .max-w-10 { max-width: var(--eci-spacing-10); }
  .max-w-11 { max-width: var(--eci-spacing-11); }
  .max-w-12 { max-width: var(--eci-spacing-12); }
  .max-w-14 { max-width: var(--eci-spacing-14); }
  .max-w-16 { max-width: var(--eci-spacing-16); }
  .max-w-20 { max-width: var(--eci-spacing-20); }
  .max-w-24 { max-width: var(--eci-spacing-24); }
  .max-w-28 { max-width: var(--eci-spacing-28); }
  .max-w-32 { max-width: var(--eci-spacing-32); }
  .max-w-36 { max-width: var(--eci-spacing-36); }

  .max-w-none { max-width: none; }
  .max-w-full { max-width: 100%; }
  .max-w-min { max-width: min-content; }
  .max-w-max { max-width: max-content; }
  .max-w-fit { max-width: fit-content; }

  /* Common container max-widths */
  .max-w-xs { max-width: 20rem; }
  .max-w-sm { max-width: 24rem; }
  .max-w-md { max-width: 28rem; }
  .max-w-lg { max-width: 32rem; }
  .max-w-xl { max-width: 36rem; }
  .max-w-2xl { max-width: 42rem; }
  .max-w-3xl { max-width: 48rem; }
  .max-w-4xl { max-width: 56rem; }
  .max-w-5xl { max-width: 64rem; }
  .max-w-6xl { max-width: 72rem; }
  .max-w-7xl { max-width: 80rem; }
  .max-w-screen-sm { max-width: 640px; }
  .max-w-screen-md { max-width: 768px; }
  .max-w-screen-lg { max-width: 1024px; }
  .max-w-screen-xl { max-width: 1280px; }
  .max-w-screen-2xl { max-width: 1536px; }


  /* Height */
  .h-0 { height: var(--eci-spacing-0); }
  .h-px { height: var(--eci-spacing-px); }
  .h-0-5 { height: var(--eci-spacing-0-5); }
  .h-1 { height: var(--eci-spacing-1); }
  .h-1-5 { height: var(--eci-spacing-1-5); }
  .h-2 { height: var(--eci-spacing-2); }
  .h-2-5 { height: var(--eci-spacing-2-5); }
  .h-3 { height: var(--eci-spacing-3); }
  .h-3-5 { height: var(--eci-spacing-3-5); }
  .h-4 { height: var(--eci-spacing-4); }
  .h-5 { height: var(--eci-spacing-5); }
  .h-6 { height: var(--eci-spacing-6); }
  .h-7 { height: var(--eci-spacing-7); }
  .h-8 { height: var(--eci-spacing-8); }
  .h-9 { height: var(--eci-spacing-9); }
  .h-10 { height: var(--eci-spacing-10); }
  .h-11 { height: var(--eci-spacing-11); }
  .h-12 { height: var(--eci-spacing-12); }
  .h-14 { height: var(--eci-spacing-14); }
  .h-16 { height: var(--eci-spacing-16); }
  .h-20 { height: var(--eci-spacing-20); }
  .h-24 { height: var(--eci-spacing-24); }
  .h-28 { height: var(--eci-spacing-28); }
  .h-32 { height: var(--eci-spacing-32); }
  .h-36 { height: var(--eci-spacing-36); }

  .h-auto { height: auto; }
  .h-full { height: 100%; }
  .h-screen { height: 100vh; }
  .h-min { height: min-content; }
  .h-max { height: max-content; }
  .h-fit { height: fit-content; }

  /* Height Fractions */
  .h-1\/2 { height: 50%; }
  .h-1\/3 { height: 33.333333%; }
  .h-2\/3 { height: 66.666667%; }
  .h-1\/4 { height: 25%; }
  .h-3\/4 { height: 75%; }
  .h-1\/5 { height: 20%; }
  .h-2\/5 { height: 40%; }
  .h-3\/5 { height: 60%; }
  .h-4\/5 { height: 80%; }
  .h-1\/6 { height: 16.666667%; }
  .h-3\/6 { height: 50%; }
  .h-5\/6 { height: 83.333333%; }

  /* Min Height */
  .min-h-0 { min-height: var(--eci-spacing-0); }
  .min-h-px { min-height: var(--eci-spacing-px); }
  .min-h-0-5 { min-height: var(--eci-spacing-0-5); }
  .min-h-1 { min-height: var(--eci-spacing-1); }
  .min-h-1-5 { min-height: var(--eci-spacing-1-5); }
  .min-h-2 { min-height: var(--eci-spacing-2); }
  .min-h-2-5 { min-height: var(--eci-spacing-2-5); }
  .min-h-3 { min-height: var(--eci-spacing-3); }
  .min-h-3-5 { min-height: var(--eci-spacing-3-5); }
  .min-h-4 { min-height: var(--eci-spacing-4); }
  .min-h-5 { min-height: var(--eci-spacing-5); }
  .min-h-6 { min-height: var(--eci-spacing-6); }
  .min-h-7 { min-height: var(--eci-spacing-7); }
  .min-h-8 { min-height: var(--eci-spacing-8); }
  .min-h-9 { min-height: var(--eci-spacing-9); }
  .min-h-10 { min-height: var(--eci-spacing-10); }
  .min-h-11 { min-height: var(--eci-spacing-11); }
  .min-h-12 { min-height: var(--eci-spacing-12); }
  .min-h-14 { min-height: var(--eci-spacing-14); }
  .min-h-16 { min-height: var(--eci-spacing-16); }
  .min-h-20 { min-height: var(--eci-spacing-20); }
  .min-h-24 { min-height: var(--eci-spacing-24); }
  .min-h-28 { min-height: var(--eci-spacing-28); }
  .min-h-32 { min-height: var(--eci-spacing-32); }
  .min-h-36 { min-height: var(--eci-spacing-36); }

  .min-h-full { min-height: 100%; }
  .min-h-screen { min-height: 100vh; }
  .min-h-min { min-height: min-content; }
  .min-h-max { min-height: max-content; }
  .min-h-fit { min-height: fit-content; }

  /* Max Height */
  .max-h-0 { max-height: var(--eci-spacing-0); }
  .max-h-px { max-height: var(--eci-spacing-px); }
  .max-h-0-5 { max-height: var(--eci-spacing-0-5); }
  .max-h-1 { max-height: var(--eci-spacing-1); }
  .max-h-1-5 { max-height: var(--eci-spacing-1-5); }
  .max-h-2 { max-height: var(--eci-spacing-2); }
  .max-h-2-5 { max-height: var(--eci-spacing-2-5); }
  .max-h-3 { max-height: var(--eci-spacing-3); }
  .max-h-3-5 { max-height: var(--eci-spacing-3-5); }
  .max-h-4 { max-height: var(--eci-spacing-4); }
  .max-h-5 { max-height: var(--eci-spacing-5); }
  .max-h-6 { max-height: var(--eci-spacing-6); }
  .max-h-7 { max-height: var(--eci-spacing-7); }
  .max-h-8 { max-height: var(--eci-spacing-8); }
  .max-h-9 { max-height: var(--eci-spacing-9); }
  .max-h-10 { max-height: var(--eci-spacing-10); }
  .max-h-11 { max-height: var(--eci-spacing-11); }
  .max-h-12 { max-height: var(--eci-spacing-12); }
  .max-h-14 { max-height: var(--eci-spacing-14); }
  .max-h-16 { max-height: var(--eci-spacing-16); }
  .max-h-20 { max-height: var(--eci-spacing-20); }
  .max-h-24 { max-height: var(--eci-spacing-24); }
  .max-h-28 { max-height: var(--eci-spacing-28); }
  .max-h-32 { max-height: var(--eci-spacing-32); }
  .max-h-36 { max-height: var(--eci-spacing-36); }

  .max-h-none { max-height: none; }
  .max-h-full { max-height: 100%; }
  .max-h-screen { max-height: 100vh; }
  .max-h-min { max-height: min-content; }
  .max-h-max { max-height: max-content; }
  .max-h-fit { max-height: fit-content; }
}

/* ==========================================================================
   Layout Utilities
   ========================================================================== */

:is(eci-app-wrapper, .eci-elements-app) {
  /* Container */
  .container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--eci-spacing-container-padding);
    padding-right: var(--eci-spacing-container-padding);
  }

  .container-sm {
    max-width: 640px;
  }

  .container-md {
    max-width: 768px;
  }

  .container-lg {
    max-width: 1024px;
  }

  .container-xl {
    max-width: 1280px;
  }

  .container-2xl {
    max-width: 1536px;
  }

  /* Flexbox Utilities */
  .flex {
    display: flex;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .flex-none {
    flex: none;
  }

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

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

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

  /* Grid Utilities */
  .grid {
    display: grid;
  }

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

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

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

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

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

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

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

  .col-span-1 {
    grid-column: span 1 / span 1;
  }

  .col-span-2 {
    grid-column: span 2 / span 2;
  }

  .col-span-3 {
    grid-column: span 3 / span 3;
  }

  .col-span-4 {
    grid-column: span 4 / span 4;
  }

  .col-span-6 {
    grid-column: span 6 / span 6;
  }

  .col-span-full {
    grid-column: 1 / -1;
  }

  .gap-0 {
    gap: var(--eci-spacing-0);
  }

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

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

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

  .gap-4 {
    gap: var(--eci-spacing-4);
  }

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

  .gap-8 {
    gap: var(--eci-spacing-8);
  }

  .overflow-hidden, .overflow-none {
    overflow: hidden;
  }

  .overflow-visible {
    overflow: visible;
  }

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

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

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

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

/* ==========================================================================
   Grid Utilities
   ========================================================================== */

:is(eci-app-wrapper, .eci-elements-app) {
  /* Base Grid Display */
  .grid {
    display: grid;
  }

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

  .subgrid {
    display: subgrid;
  }

  /* Grid Template Columns */
  .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
  .grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

  /* Auto-fit and Auto-fill for Dynamic Widths */
  .grid-cols-auto-fit { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .grid-cols-auto-fill { grid-template-columns: repeat(auto-fill, minmax(0, 1fr)); }

  /* Dynamic Grid with Minimum Column Width */
  .grid-cols-fit-sm { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
  .grid-cols-fit-md { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
  .grid-cols-fit-lg { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
  .grid-cols-fit-xl { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }

  .grid-cols-fill-sm { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
  .grid-cols-fill-md { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
  .grid-cols-fill-lg { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
  .grid-cols-fill-xl { grid-template-columns: repeat(auto-fill, minmax(21.5rem, 1fr)); }

  /* Grid Template Rows */
  .grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
  .grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
  .grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }
  .grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); }
  .grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); }

  /* Column Span */
  .col-auto { grid-column: auto; }
  .col-span-1 { grid-column: span 1 / span 1; }
  .col-span-2 { grid-column: span 2 / span 2; }
  .col-span-3 { grid-column: span 3 / span 3; }
  .col-span-4 { grid-column: span 4 / span 4; }
  .col-span-5 { grid-column: span 5 / span 5; }
  .col-span-6 { grid-column: span 6 / span 6; }
  .col-span-7 { grid-column: span 7 / span 7; }
  .col-span-8 { grid-column: span 8 / span 8; }
  .col-span-9 { grid-column: span 9 / span 9; }
  .col-span-10 { grid-column: span 10 / span 10; }
  .col-span-11 { grid-column: span 11 / span 11; }
  .col-span-12 { grid-column: span 12 / span 12; }
  .col-span-full { grid-column: 1 / -1; }

  /* Column Start */
  .col-start-1 { grid-column-start: 1; }
  .col-start-2 { grid-column-start: 2; }
  .col-start-3 { grid-column-start: 3; }
  .col-start-4 { grid-column-start: 4; }
  .col-start-5 { grid-column-start: 5; }
  .col-start-6 { grid-column-start: 6; }
  .col-start-7 { grid-column-start: 7; }
  .col-start-8 { grid-column-start: 8; }
  .col-start-9 { grid-column-start: 9; }
  .col-start-10 { grid-column-start: 10; }
  .col-start-11 { grid-column-start: 11; }
  .col-start-12 { grid-column-start: 12; }
  .col-start-13 { grid-column-start: 13; }
  .col-start-auto { grid-column-start: auto; }

  /* Column End */
  .col-end-1 { grid-column-end: 1; }
  .col-end-2 { grid-column-end: 2; }
  .col-end-3 { grid-column-end: 3; }
  .col-end-4 { grid-column-end: 4; }
  .col-end-5 { grid-column-end: 5; }
  .col-end-6 { grid-column-end: 6; }
  .col-end-7 { grid-column-end: 7; }
  .col-end-8 { grid-column-end: 8; }
  .col-end-9 { grid-column-end: 9; }
  .col-end-10 { grid-column-end: 10; }
  .col-end-11 { grid-column-end: 11; }
  .col-end-12 { grid-column-end: 12; }
  .col-end-13 { grid-column-end: 13; }
  .col-end-auto { grid-column-end: auto; }

  /* Row Span */
  .row-auto { grid-row: auto; }
  .row-span-1 { grid-row: span 1 / span 1; }
  .row-span-2 { grid-row: span 2 / span 2; }
  .row-span-3 { grid-row: span 3 / span 3; }
  .row-span-4 { grid-row: span 4 / span 4; }
  .row-span-5 { grid-row: span 5 / span 5; }
  .row-span-6 { grid-row: span 6 / span 6; }
  .row-span-full { grid-row: 1 / -1; }

  /* Row Start */
  .row-start-1 { grid-row-start: 1; }
  .row-start-2 { grid-row-start: 2; }
  .row-start-3 { grid-row-start: 3; }
  .row-start-4 { grid-row-start: 4; }
  .row-start-5 { grid-row-start: 5; }
  .row-start-6 { grid-row-start: 6; }
  .row-start-7 { grid-row-start: 7; }
  .row-start-auto { grid-row-start: auto; }

  /* Row End */
  .row-end-1 { grid-row-end: 1; }
  .row-end-2 { grid-row-end: 2; }
  .row-end-3 { grid-row-end: 3; }
  .row-end-4 { grid-row-end: 4; }
  .row-end-5 { grid-row-end: 5; }
  .row-end-6 { grid-row-end: 6; }
  .row-end-7 { grid-row-end: 7; }
  .row-end-auto { grid-row-end: auto; }

  /* Grid Auto Flow */
  .grid-flow-row { grid-auto-flow: row; }
  .grid-flow-col { grid-auto-flow: column; }
  .grid-flow-dense { grid-auto-flow: dense; }
  .grid-flow-row-dense { grid-auto-flow: row dense; }
  .grid-flow-col-dense { grid-auto-flow: column dense; }

  /* Grid Auto Columns */
  .auto-cols-auto { grid-auto-columns: auto; }
  .auto-cols-min { grid-auto-columns: min-content; }
  .auto-cols-max { grid-auto-columns: max-content; }
  .auto-cols-fr { grid-auto-columns: minmax(0, 1fr); }

  /* Grid Auto Rows */
  .auto-rows-auto { grid-auto-rows: auto; }
  .auto-rows-min { grid-auto-rows: min-content; }
  .auto-rows-max { grid-auto-rows: max-content; }
  .auto-rows-fr { grid-auto-rows: minmax(0, 1fr); }

  /* Gap Utilities */
  .gap-0 { gap: var(--eci-spacing-0); }
  .gap-px { gap: var(--eci-spacing-px); }
  .gap-0-5 { gap: var(--eci-spacing-0-5); }
  .gap-1 { gap: var(--eci-spacing-1); }
  .gap-1-5 { gap: var(--eci-spacing-1-5); }
  .gap-2 { gap: var(--eci-spacing-2); }
  .gap-2-5 { gap: var(--eci-spacing-2-5); }
  .gap-3 { gap: var(--eci-spacing-3); }
  .gap-3-5 { gap: var(--eci-spacing-3-5); }
  .gap-4 { gap: var(--eci-spacing-4); }
  .gap-5 { gap: var(--eci-spacing-5); }
  .gap-6 { gap: var(--eci-spacing-6); }
  .gap-7 { gap: var(--eci-spacing-7); }
  .gap-8 { gap: var(--eci-spacing-8); }
  .gap-9 { gap: var(--eci-spacing-9); }
  .gap-10 { gap: var(--eci-spacing-10); }
  .gap-11 { gap: var(--eci-spacing-11); }
  .gap-12 { gap: var(--eci-spacing-12); }
  .gap-14 { gap: var(--eci-spacing-14); }
  .gap-16 { gap: var(--eci-spacing-16); }
  .gap-20 { gap: var(--eci-spacing-20); }
  .gap-24 { gap: var(--eci-spacing-24); }
  .gap-28 { gap: var(--eci-spacing-28); }
  .gap-32 { gap: var(--eci-spacing-32); }

  /* Column Gap */
  .gap-x-0 { column-gap: var(--eci-spacing-0); }
  .gap-x-px { column-gap: var(--eci-spacing-px); }
  .gap-x-0-5 { column-gap: var(--eci-spacing-0-5); }
  .gap-x-1 { column-gap: var(--eci-spacing-1); }
  .gap-x-1-5 { column-gap: var(--eci-spacing-1-5); }
  .gap-x-2 { column-gap: var(--eci-spacing-2); }
  .gap-x-2-5 { column-gap: var(--eci-spacing-2-5); }
  .gap-x-3 { column-gap: var(--eci-spacing-3); }
  .gap-x-3-5 { column-gap: var(--eci-spacing-3-5); }
  .gap-x-4 { column-gap: var(--eci-spacing-4); }
  .gap-x-5 { column-gap: var(--eci-spacing-5); }
  .gap-x-6 { column-gap: var(--eci-spacing-6); }
  .gap-x-7 { column-gap: var(--eci-spacing-7); }
  .gap-x-8 { column-gap: var(--eci-spacing-8); }
  .gap-x-9 { column-gap: var(--eci-spacing-9); }
  .gap-x-10 { column-gap: var(--eci-spacing-10); }
  .gap-x-11 { column-gap: var(--eci-spacing-11); }
  .gap-x-12 { column-gap: var(--eci-spacing-12); }
  .gap-x-14 { column-gap: var(--eci-spacing-14); }
  .gap-x-16 { column-gap: var(--eci-spacing-16); }
  .gap-x-20 { column-gap: var(--eci-spacing-20); }
  .gap-x-24 { column-gap: var(--eci-spacing-24); }

  /* Row Gap */
  .gap-y-0 { row-gap: var(--eci-spacing-0); }
  .gap-y-px { row-gap: var(--eci-spacing-px); }
  .gap-y-0-5 { row-gap: var(--eci-spacing-0-5); }
  .gap-y-1 { row-gap: var(--eci-spacing-1); }
  .gap-y-1-5 { row-gap: var(--eci-spacing-1-5); }
  .gap-y-2 { row-gap: var(--eci-spacing-2); }
  .gap-y-2-5 { row-gap: var(--eci-spacing-2-5); }
  .gap-y-3 { row-gap: var(--eci-spacing-3); }
  .gap-y-3-5 { row-gap: var(--eci-spacing-3-5); }
  .gap-y-4 { row-gap: var(--eci-spacing-4); }
  .gap-y-5 { row-gap: var(--eci-spacing-5); }
  .gap-y-6 { row-gap: var(--eci-spacing-6); }
  .gap-y-7 { row-gap: var(--eci-spacing-7); }
  .gap-y-8 { row-gap: var(--eci-spacing-8); }
  .gap-y-9 { row-gap: var(--eci-spacing-9); }
  .gap-y-10 { row-gap: var(--eci-spacing-10); }
  .gap-y-11 { row-gap: var(--eci-spacing-11); }
  .gap-y-12 { row-gap: var(--eci-spacing-12); }
  .gap-y-14 { row-gap: var(--eci-spacing-14); }
  .gap-y-16 { row-gap: var(--eci-spacing-16); }
  .gap-y-20 { row-gap: var(--eci-spacing-20); }
  .gap-y-24 { row-gap: var(--eci-spacing-24); }

  /* Grid Alignment */
  .justify-items-start { justify-items: start; }
  .justify-items-end { justify-items: end; }
  .justify-items-center { justify-items: center; }
  .justify-items-stretch { justify-items: stretch; }

  .justify-self-auto { justify-self: auto; }
  .justify-self-start { justify-self: start; }
  .justify-self-end { justify-self: end; }
  .justify-self-center { justify-self: center; }
  .justify-self-stretch { justify-self: stretch; }

  .align-items-start { align-items: start; }
  .align-items-end { align-items: end; }
  .align-items-center { align-items: center; }
  .align-items-stretch { align-items: stretch; }

  .align-self-auto { align-self: auto; }
  .align-self-start { align-self: start; }
  .align-self-end { align-self: end; }
  .align-self-center { align-self: center; }
  .align-self-stretch { align-self: stretch; }

  .place-items-start { place-items: start; }
  .place-items-end { place-items: end; }
  .place-items-center { place-items: center; }
  .place-items-stretch { place-items: stretch; }

  .place-self-auto { place-self: auto; }
  .place-self-start { place-self: start; }
  .place-self-end { place-self: end; }
  .place-self-center { place-self: center; }
  .place-self-stretch { place-self: stretch; }

  .place-content-center { place-content: center; }
  .place-content-start { place-content: start; }
  .place-content-end { place-content: end; }
  .place-content-between { place-content: space-between; }
  .place-content-around { place-content: space-around; }
  .place-content-evenly { place-content: space-evenly; }
  .place-content-stretch { place-content: stretch; }
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

/* Small devices (tablets, 640px and up) */

@media (min-width: 640px) {
  :is(eci-app-wrapper, .eci-elements-app) {
    .sm\:grid { display: grid; }
    .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sm\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .sm\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .sm\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .sm\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .sm\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
    .sm\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .sm\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
    .sm\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .sm\:grid-cols-auto-fit { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
    .sm\:grid-cols-auto-fill { grid-template-columns: repeat(auto-fill, minmax(0, 1fr)); }
    .sm\:grid-cols-fit-sm { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
    .sm\:grid-cols-fit-md { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
    .sm\:grid-cols-fit-lg { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
    .sm\:grid-cols-fit-xl { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }

    .sm\:col-span-1 { grid-column: span 1 / span 1; }
    .sm\:col-span-2 { grid-column: span 2 / span 2; }
    .sm\:col-span-3 { grid-column: span 3 / span 3; }
    .sm\:col-span-4 { grid-column: span 4 / span 4; }
    .sm\:col-span-5 { grid-column: span 5 / span 5; }
    .sm\:col-span-6 { grid-column: span 6 / span 6; }
    .sm\:col-span-7 { grid-column: span 7 / span 7; }
    .sm\:col-span-8 { grid-column: span 8 / span 8; }
    .sm\:col-span-9 { grid-column: span 9 / span 9; }
    .sm\:col-span-10 { grid-column: span 10 / span 10; }
    .sm\:col-span-11 { grid-column: span 11 / span 11; }
    .sm\:col-span-12 { grid-column: span 12 / span 12; }
    .sm\:col-span-full { grid-column: 1 / -1; }

    .sm\:gap-0 { gap: var(--eci-spacing-0); }
    .sm\:gap-1 { gap: var(--eci-spacing-1); }
    .sm\:gap-2 { gap: var(--eci-spacing-2); }
    .sm\:gap-3 { gap: var(--eci-spacing-3); }
    .sm\:gap-4 { gap: var(--eci-spacing-4); }
    .sm\:gap-5 { gap: var(--eci-spacing-5); }
    .sm\:gap-6 { gap: var(--eci-spacing-6); }
    .sm\:gap-8 { gap: var(--eci-spacing-8); }
    .sm\:gap-10 { gap: var(--eci-spacing-10); }
    .sm\:gap-12 { gap: var(--eci-spacing-12); }
    .sm\:gap-16 { gap: var(--eci-spacing-16); }
    .sm\:gap-20 { gap: var(--eci-spacing-20); }
    .sm\:gap-24 { gap: var(--eci-spacing-24); }
  }
}

/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) {
  :is(eci-app-wrapper, .eci-elements-app) {
    .md\:grid { display: grid; }
    .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .md\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .md\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .md\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
    .md\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .md\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
    .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .md\:grid-cols-auto-fit { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
    .md\:grid-cols-auto-fill { grid-template-columns: repeat(auto-fill, minmax(0, 1fr)); }
    .md\:grid-cols-fit-sm { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
    .md\:grid-cols-fit-md { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
    .md\:grid-cols-fit-lg { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
    .md\:grid-cols-fit-xl { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }

    .md\:col-span-1 { grid-column: span 1 / span 1; }
    .md\:col-span-2 { grid-column: span 2 / span 2; }
    .md\:col-span-3 { grid-column: span 3 / span 3; }
    .md\:col-span-4 { grid-column: span 4 / span 4; }
    .md\:col-span-5 { grid-column: span 5 / span 5; }
    .md\:col-span-6 { grid-column: span 6 / span 6; }
    .md\:col-span-7 { grid-column: span 7 / span 7; }
    .md\:col-span-8 { grid-column: span 8 / span 8; }
    .md\:col-span-9 { grid-column: span 9 / span 9; }
    .md\:col-span-10 { grid-column: span 10 / span 10; }
    .md\:col-span-11 { grid-column: span 11 / span 11; }
    .md\:col-span-12 { grid-column: span 12 / span 12; }
    .md\:col-span-full { grid-column: 1 / -1; }

    .md\:gap-0 { gap: var(--eci-spacing-0); }
    .md\:gap-1 { gap: var(--eci-spacing-1); }
    .md\:gap-2 { gap: var(--eci-spacing-2); }
    .md\:gap-3 { gap: var(--eci-spacing-3); }
    .md\:gap-4 { gap: var(--eci-spacing-4); }
    .md\:gap-5 { gap: var(--eci-spacing-5); }
    .md\:gap-6 { gap: var(--eci-spacing-6); }
    .md\:gap-8 { gap: var(--eci-spacing-8); }
    .md\:gap-10 { gap: var(--eci-spacing-10); }
    .md\:gap-12 { gap: var(--eci-spacing-12); }
    .md\:gap-16 { gap: var(--eci-spacing-16); }
    .md\:gap-20 { gap: var(--eci-spacing-20); }
    .md\:gap-24 { gap: var(--eci-spacing-24); }
  }
}

/* Large devices (desktops, 1024px and up) */

@media (min-width: 1024px) {
  :is(eci-app-wrapper, .eci-elements-app) {
    .lg\:grid { display: grid; }
    .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .lg\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .lg\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .lg\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
    .lg\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .lg\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
    .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .lg\:grid-cols-auto-fit { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
    .lg\:grid-cols-auto-fill { grid-template-columns: repeat(auto-fill, minmax(0, 1fr)); }
    .lg\:grid-cols-fit-sm { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
    .lg\:grid-cols-fit-md { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
    .lg\:grid-cols-fit-lg { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
    .lg\:grid-cols-fit-xl { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }

    .lg\:col-span-1 { grid-column: span 1 / span 1; }
    .lg\:col-span-2 { grid-column: span 2 / span 2; }
    .lg\:col-span-3 { grid-column: span 3 / span 3; }
    .lg\:col-span-4 { grid-column: span 4 / span 4; }
    .lg\:col-span-5 { grid-column: span 5 / span 5; }
    .lg\:col-span-6 { grid-column: span 6 / span 6; }
    .lg\:col-span-7 { grid-column: span 7 / span 7; }
    .lg\:col-span-8 { grid-column: span 8 / span 8; }
    .lg\:col-span-9 { grid-column: span 9 / span 9; }
    .lg\:col-span-10 { grid-column: span 10 / span 10; }
    .lg\:col-span-11 { grid-column: span 11 / span 11; }
    .lg\:col-span-12 { grid-column: span 12 / span 12; }
    .lg\:col-span-full { grid-column: 1 / -1; }

    .lg\:gap-0 { gap: var(--eci-spacing-0); }
    .lg\:gap-1 { gap: var(--eci-spacing-1); }
    .lg\:gap-2 { gap: var(--eci-spacing-2); }
    .lg\:gap-3 { gap: var(--eci-spacing-3); }
    .lg\:gap-4 { gap: var(--eci-spacing-4); }
    .lg\:gap-5 { gap: var(--eci-spacing-5); }
    .lg\:gap-6 { gap: var(--eci-spacing-6); }
    .lg\:gap-8 { gap: var(--eci-spacing-8); }
    .lg\:gap-10 { gap: var(--eci-spacing-10); }
    .lg\:gap-12 { gap: var(--eci-spacing-12); }
    .lg\:gap-16 { gap: var(--eci-spacing-16); }
    .lg\:gap-20 { gap: var(--eci-spacing-20); }
    .lg\:gap-24 { gap: var(--eci-spacing-24); }
  }
}

/* Extra large devices (large desktops, 1280px and up) */

@media (min-width: 1280px) {
  :is(eci-app-wrapper, .eci-elements-app) {
    .xl\:grid { display: grid; }
    .xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .xl\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .xl\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .xl\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
    .xl\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .xl\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
    .xl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .xl\:grid-cols-auto-fit { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
    .xl\:grid-cols-auto-fill { grid-template-columns: repeat(auto-fill, minmax(0, 1fr)); }
    .xl\:grid-cols-fit-sm { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
    .xl\:grid-cols-fit-md { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
    .xl\:grid-cols-fit-lg { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
    .xl\:grid-cols-fit-xl { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }

    .xl\:col-span-1 { grid-column: span 1 / span 1; }
    .xl\:col-span-2 { grid-column: span 2 / span 2; }
    .xl\:col-span-3 { grid-column: span 3 / span 3; }
    .xl\:col-span-4 { grid-column: span 4 / span 4; }
    .xl\:col-span-5 { grid-column: span 5 / span 5; }
    .xl\:col-span-6 { grid-column: span 6 / span 6; }
    .xl\:col-span-7 { grid-column: span 7 / span 7; }
    .xl\:col-span-8 { grid-column: span 8 / span 8; }
    .xl\:col-span-9 { grid-column: span 9 / span 9; }
    .xl\:col-span-10 { grid-column: span 10 / span 10; }
    .xl\:col-span-11 { grid-column: span 11 / span 11; }
    .xl\:col-span-12 { grid-column: span 12 / span 12; }
    .xl\:col-span-full { grid-column: 1 / -1; }

    .xl\:gap-0 { gap: var(--eci-spacing-0); }
    .xl\:gap-1 { gap: var(--eci-spacing-1); }
    .xl\:gap-2 { gap: var(--eci-spacing-2); }
    .xl\:gap-3 { gap: var(--eci-spacing-3); }
    .xl\:gap-4 { gap: var(--eci-spacing-4); }
    .xl\:gap-5 { gap: var(--eci-spacing-5); }
    .xl\:gap-6 { gap: var(--eci-spacing-6); }
    .xl\:gap-8 { gap: var(--eci-spacing-8); }
    .xl\:gap-10 { gap: var(--eci-spacing-10); }
    .xl\:gap-12 { gap: var(--eci-spacing-12); }
    .xl\:gap-16 { gap: var(--eci-spacing-16); }
    .xl\:gap-20 { gap: var(--eci-spacing-20); }
    .xl\:gap-24 { gap: var(--eci-spacing-24); }
  }
}

/* 2XL devices (larger desktops, 1536px and up) */

@media (min-width: 1536px) {
  :is(eci-app-wrapper, .eci-elements-app) {
    .\32xl\:grid { display: grid; }
    .\32xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .\32xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .\32xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .\32xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .\32xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .\32xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .\32xl\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .\32xl\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .\32xl\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
    .\32xl\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .\32xl\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
    .\32xl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .\32xl\:grid-cols-auto-fit { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
    .\32xl\:grid-cols-auto-fill { grid-template-columns: repeat(auto-fill, minmax(0, 1fr)); }
    .\32xl\:grid-cols-fit-sm { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
    .\32xl\:grid-cols-fit-md { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
    .\32xl\:grid-cols-fit-lg { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
    .\32xl\:grid-cols-fit-xl { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }

    .\32xl\:col-span-1 { grid-column: span 1 / span 1; }
    .\32xl\:col-span-2 { grid-column: span 2 / span 2; }
    .\32xl\:col-span-3 { grid-column: span 3 / span 3; }
    .\32xl\:col-span-4 { grid-column: span 4 / span 4; }
    .\32xl\:col-span-5 { grid-column: span 5 / span 5; }
    .\32xl\:col-span-6 { grid-column: span 6 / span 6; }
    .\32xl\:col-span-7 { grid-column: span 7 / span 7; }
    .\32xl\:col-span-8 { grid-column: span 8 / span 8; }
    .\32xl\:col-span-9 { grid-column: span 9 / span 9; }
    .\32xl\:col-span-10 { grid-column: span 10 / span 10; }
    .\32xl\:col-span-11 { grid-column: span 11 / span 11; }
    .\32xl\:col-span-12 { grid-column: span 12 / span 12; }
    .\32xl\:col-span-full { grid-column: 1 / -1; }

    .\32xl\:gap-0 { gap: var(--eci-spacing-0); }
    .\32xl\:gap-1 { gap: var(--eci-spacing-1); }
    .\32xl\:gap-2 { gap: var(--eci-spacing-2); }
    .\32xl\:gap-3 { gap: var(--eci-spacing-3); }
    .\32xl\:gap-4 { gap: var(--eci-spacing-4); }
    .\32xl\:gap-5 { gap: var(--eci-spacing-5); }
    .\32xl\:gap-6 { gap: var(--eci-spacing-6); }
    .\32xl\:gap-8 { gap: var(--eci-spacing-8); }
    .\32xl\:gap-10 { gap: var(--eci-spacing-10); }
    .\32xl\:gap-12 { gap: var(--eci-spacing-12); }
    .\32xl\:gap-16 { gap: var(--eci-spacing-16); }
    .\32xl\:gap-20 { gap: var(--eci-spacing-20); }
    .\32xl\:gap-24 { gap: var(--eci-spacing-24); }
  }
}

/* ==========================================================================
   Helper Utilities
   ========================================================================== */

:is(eci-app-wrapper, .eci-elements-app) {
  /* Visibility */
  .eci-hidden { display: none; }
  .eci-invisible { visibility: hidden; }
  .eci-visible { visibility: visible; }

  /* Screen Reader Only */
  .eci-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;
  }

  /* Focus */
  .eci-focus-visible:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: var(--eci-shadow-focus);
  }
}

:is(eci-app-wrapper, .eci-elements-app) {
  .eci-card {
    border-radius: var(--eci-border-radius-md);
    /* Only transition specific properties for hover effects, not all properties */
    transition: box-shadow 0.3s ease, transform 0.3s ease;

    &.padding {
      padding: var(--eci-card-padding, var(--eci-spacing-5)) var(--eci-card-padding, var(--eci-spacing-5)) var(--eci-card-padding, var(--eci-spacing-5)) var(--eci-card-padding, var(--eci-spacing-5));
    }

    &.shadow:hover {
      box-shadow: var(--eci-shadow-md);
    }

    &.border {
      border: var(--eci-border-thin);
      border-color: var(--eci-color-border-subtle);
    }

    /* Dashed modifier — composes with &.border to swap solid for dashed
       while preserving the subtle border color and thin width. */
    &.dashed {
      border-style: var(--eci-border-style-dashed);
    }

    &.shadow {
      box-shadow: var(--eci-shadow-border);
    }

    &.background {
      background-color: var(--eci-color-surface);
    }
  }
}

@keyframes eci-animation-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes eci-animation-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes eci-animation-fade-in-bottom {
    from {
        opacity: 0;
        transform: translateY(var(--eci-spacing-2));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes eci-animation-fade-out-bottom {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(var(--eci-spacing-2));
    }
}

@keyframes eci-animation-fade-in-top {
    from {
        opacity: 0;
        transform: translateY(-var(--eci-spacing-2));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes eci-animation-fade-out-top {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-var(--eci-spacing-2));
    }
}

@keyframes eci-animation-fade-in-left {
    from {
        opacity: 0;
        transform: translateX(-var(--eci-spacing-2));
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes eci-animation-fade-out-left {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-var(--eci-spacing-2));
    }
}

@keyframes eci-animation-fade-in-right {
    from {
        opacity: 0;
        transform: translateX(var(--eci-spacing-2));
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes eci-animation-fade-out-right {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(var(--eci-spacing-2));
    }
}

@keyframes eci-animation-pulse-border-warning {
    from {
        border-color: var(--eci-color-border-default);
    }
    50% {
        border-color: var(--eci-color-warning-500);
    }
    to {
        border-color: var(--eci-color-border-default);
    }
}

@keyframes eci-animation-pulse-border-critical {
    from {
        border-color: var(--eci-color-border-default);
    }
    50% {
        border-color: var(--eci-color-critical-500);
    }
    to {
        border-color: var(--eci-color-border-default);
    }
}

@keyframes eci-animation-pulse-border-error {
    from {
        border-color: var(--eci-color-border-default);
    }
    50% {
        border-color: var(--eci-color-error-500);
    }
    to {
        border-color: var(--eci-color-border-default);
    }
}

@keyframes eci-animation-pulse-border-success {
    from {
        border-color: var(--eci-color-border-default);
    }
    50% {
        border-color: var(--eci-color-success-500);
    }
    to {
        border-color: var(--eci-color-border-default);
    }
}

:is(eci-app-wrapper, .eci-elements-app) {
    .eci-animation-fade-in {
        opacity: 0;
        animation: eci-animation-fade-in 0.3s ease-out forwards;
    }

    .eci-animation-fade-out {
        animation: eci-animation-fade-out 0.3s ease-in-out forwards;
    }

    .eci-animation-fade-in-bottom {
        opacity: 0;
        animation: eci-animation-fade-in-bottom 0.3s ease-out forwards;
    }

    .eci-animation-fade-out-bottom {
        animation: eci-animation-fade-out-bottom 0.3s ease-in-out forwards;
    }

    .eci-animation-fade-in-top {
        opacity: 0;
        animation: eci-animation-fade-in-top 0.3s ease-out forwards;
    }

    .eci-animation-fade-in-top-bounce {
        animation: eci-animation-fade-in-top-bounce 0.3s ease-out forwards;
    }

    .eci-animation-fade-out-top {
        animation: eci-animation-fade-out-top 0.3s ease-in-out forwards;
    }

    .eci-animation-fade-in-left {
        opacity: 0;
        animation: eci-animation-fade-in-left 0.3s ease-out forwards;
    }

    .eci-animation-fade-in-left-bounce {
        animation: eci-animation-fade-in-left-bounce 0.3s ease-out forwards;
    }

    .eci-animation-fade-out-left {
        animation: eci-animation-fade-out-left 0.3s ease-in-out forwards;
    }

    .eci-animation-fade-in-right {
        opacity: 0;
        animation: eci-animation-fade-in-right 0.3s ease-out forwards;
    }

    .eci-animation-fade-out-right {
        animation: eci-animation-fade-out-right 0.3s ease-in-out forwards;
    }

    .eci-animation-fade-in-right-bounce {
        animation: eci-animation-fade-in-right-bounce 0.3s ease-out forwards;
    }

    .eci-animation-fade-in-bottom-bounce {
        animation: eci-animation-fade-in-bottom-bounce 0.3s ease-out forwards;
    }

    /* Animates the first 12 children of the parent element */
    .eci-animation-children-fade-in > * {
        opacity: 0;
        animation: eci-animation-fade-in 0.3s ease-out forwards;
    }

    .eci-animation-children-fade-in-bottom > * {
        opacity: 0;
        animation: eci-animation-fade-in-bottom 0.3s ease-out forwards;
    }

    /* Staggered animation delays for any class starting with 'eci-animation-children-' except when '.instant' is present
       Now supports up to 30 children, with a per-item delay of 0.04s (total = 1.16s for 30) */
    [class*="eci-animation-children-"]:not(.instant) > *:nth-child(2)  { animation-delay: 0.04s; }
    [class*="eci-animation-children-"]:not(.instant) > *:nth-child(3)  { animation-delay: 0.08s; }
    [class*="eci-animation-children-"]:not(.instant) > *:nth-child(4)  { animation-delay: 0.12s; }
    [class*="eci-animation-children-"]:not(.instant) > *:nth-child(5)  { animation-delay: 0.16s; }
    [class*="eci-animation-children-"]:not(.instant) > *:nth-child(6)  { animation-delay: 0.20s; }
    [class*="eci-animation-children-"]:not(.instant) > *:nth-child(7)  { animation-delay: 0.24s; }
    [class*="eci-animation-children-"]:not(.instant) > *:nth-child(8)  { animation-delay: 0.28s; }
    [class*="eci-animation-children-"]:not(.instant) > *:nth-child(9)  { animation-delay: 0.32s; }
    [class*="eci-animation-children-"]:not(.instant) > *:nth-child(10) { animation-delay: 0.36s; }
    [class*="eci-animation-children-"]:not(.instant) > *:nth-child(11) { animation-delay: 0.40s; }
    [class*="eci-animation-children-"]:not(.instant) > *:nth-child(12) { animation-delay: 0.44s; }
    [class*="eci-animation-children-"]:not(.instant) > *:nth-child(13) { animation-delay: 0.48s; }
    [class*="eci-animation-children-"]:not(.instant) > *:nth-child(14) { animation-delay: 0.52s; }
    [class*="eci-animation-children-"]:not(.instant) > *:nth-child(15) { animation-delay: 0.56s; }
    [class*="eci-animation-children-"]:not(.instant) > *:nth-child(16) { animation-delay: 0.60s; }
    [class*="eci-animation-children-"]:not(.instant) > *:nth-child(17) { animation-delay: 0.64s; }
    [class*="eci-animation-children-"]:not(.instant) > *:nth-child(18) { animation-delay: 0.68s; }
    [class*="eci-animation-children-"]:not(.instant) > *:nth-child(19) { animation-delay: 0.72s; }
    [class*="eci-animation-children-"]:not(.instant) > *:nth-child(20) { animation-delay: 0.76s; }
    [class*="eci-animation-children-"]:not(.instant) > *:nth-child(21) { animation-delay: 0.80s; }
    [class*="eci-animation-children-"]:not(.instant) > *:nth-child(22) { animation-delay: 0.84s; }
    [class*="eci-animation-children-"]:not(.instant) > *:nth-child(23) { animation-delay: 0.88s; }
    [class*="eci-animation-children-"]:not(.instant) > *:nth-child(24) { animation-delay: 0.92s; }
    [class*="eci-animation-children-"]:not(.instant) > *:nth-child(25) { animation-delay: 0.96s; }
    [class*="eci-animation-children-"]:not(.instant) > *:nth-child(26) { animation-delay: 1.00s; }
    [class*="eci-animation-children-"]:not(.instant) > *:nth-child(27) { animation-delay: 1.04s; }
    [class*="eci-animation-children-"]:not(.instant) > *:nth-child(28) { animation-delay: 1.08s; }
    [class*="eci-animation-children-"]:not(.instant) > *:nth-child(29) { animation-delay: 1.12s; }
    [class*="eci-animation-children-"]:not(.instant) > *:nth-child(30) { animation-delay: 1.16s; }

    .eci-animation-pulse-border-success {
        animation: eci-animation-pulse-border-success 1s infinite;

        &.animate-once {
            animation: eci-animation-pulse-border-success 1s 1;
        }
    }

    .eci-animation-pulse-border-warning {
        animation: eci-animation-pulse-border-warning 1s infinite;

        &.animate-once {
            animation: eci-animation-pulse-border-warning 1s 1;
        }
    }

    .eci-animation-pulse-border-critical {
        animation: eci-animation-pulse-border-critical 1s infinite;

        &.animate-once {
            animation: eci-animation-pulse-border-critical 1s 1;
        }
    }

    .eci-animation-pulse-border-error {
        animation: eci-animation-pulse-border-error 1s infinite;

        &.animate-once {
            animation: eci-animation-pulse-border-error 1s 1;
        }
    }
}

/* Respect user's motion preferences */

@media (prefers-reduced-motion: reduce) {
    :is(eci-app-wrapper, .eci-elements-app) {
        /* Match all classes starting with eci-animation- */
        [class*="eci-animation-"] {
            animation: none !important;
            opacity: 1 !important;
            transform: none !important;
        }

        /* Match all classes starting with eci-animation-children- */
        [class*="eci-animation-children-"] > * {
            animation: none !important;
            opacity: 1 !important;
            transform: none !important;
        }

        [class*="eci-animation-children-"]:not(.instant) > * {
            animation-delay: 0s !important;
        }
    }
}

:is(eci-app-wrapper, .eci-elements-app) {
  .eci-glass-element {
    background-color: var(--eci-color-glass-background);
    backdrop-filter: blur(var(--eci-color-glass-blur));
  }
}

:is(eci-app-wrapper, .eci-elements-app) {
  .background-gradient-primary {
    background: var(--eci-gradient-primary-diagonal);
  }

  .background-gradient-primary-corner {
    background: var(--eci-gradient-primary-diagonal-corner);
  }

  .background-gradient-secondary {
    background: var(--eci-gradient-secondary-diagonal);
  }

  .background-gradient-secondary-corner {
    background: var(--eci-gradient-secondary-diagonal-corner);
  }

  .background-gradient-tertiary {
    background: var(--eci-gradient-tertiary-diagonal);
  }

  .background-gradient-tertiary-corner {
    background: var(--eci-gradient-tertiary-diagonal-corner);
  }

  .background-gradient-green {
    background: var(--eci-gradient-green-diagonal);
  }

  .background-gradient-green-corner {
    background: var(--eci-gradient-green-diagonal-corner);
  }

  .background-gradient-red {
    background: var(--eci-gradient-red-diagonal);
  }

  .background-gradient-red-corner {
    background: var(--eci-gradient-red-diagonal-corner);
  }

  .background-gradient-orange {
    background: var(--eci-gradient-orange-diagonal);
  }

  .background-gradient-orange-corner {
    background: var(--eci-gradient-orange-diagonal-corner);
  }

  .background-gradient-blue {
    background: var(--eci-gradient-blue-diagonal);
  }

  .background-gradient-blue-corner {
    background: var(--eci-gradient-blue-diagonal-corner);
  }

  .background-gradient-neutral {
    background: var(--eci-gradient-neutral-diagonal);
  }

  .background-gradient-neutral-corner {
    background: var(--eci-gradient-neutral-diagonal-corner);
  }

  .background-gradient-purple {
    background: var(--eci-gradient-purple-diagonal);
  }

  .background-gradient-purple-corner {
    background: var(--eci-gradient-purple-diagonal-corner);
  }
}

:is(eci-app-wrapper, .eci-elements-app) {
  .eci-table {
    all: initial;
    font-family: var(--eci-font-family, var(--eci-font-family-base));
    display: table;
    border-spacing: 0;
    border-collapse: separate;

    table-layout: fixed;
    font-size: var(--eci-table-font-size, var(--eci-font-size-sm));

    thead {
        tr {
            th {
                color: var(--eci-color-text-light);
                font-size: var(--eci-table-heading-font-size, var(--eci-text-size-sm, .85rem));
                font-weight: var(--eci-table-heading-font-weight, 600);
                border-bottom-color: var(--eci-table-border-color, var(--eci-color-border-subtle));
                border-bottom-width: var(--eci-table-border-width, 1px);
                border-bottom-style: var(--eci-table-border-style, solid);
            }

            th:not(.input) {
                padding: var(--eci-table-heading-padding, 0.75rem 1.25rem);
            }
        }
    }

    /* Width utilities (opt-in full width)
       Using .w-full on the table should make it span the container width,
       even with the 'all: initial' reset above. */
    &.w-full {
        width: 100%;
    }

    tbody {
        tr {
            td {
                position: relative;
                font-size: var(--eci-table-cell-font-size, inherit);
                font-weight: var(--eci-table-cell-font-weight, 400);
                color: var(--eci-color-text);
            }

            td:not(.input) {
                padding-left: var(--eci-table-cell-padding-left, 1.25rem);
                padding-right: var(--eci-table-cell-padding-right, 1.25rem);
            }

            /**
             * Anchor cell styles
             * When a cell contains a single direct <a>, make the anchor take over the
             * clickable surface and horizontal padding so the entire cell is clickable.
             */
            td:has(> a:only-child) {
                padding-left: 0;
                padding-right: 0;
            }

            td > a:only-child {
                display: flex;
                align-items: center;
                width: 100%;
                height: 100%;
                box-sizing: border-box;

                font: inherit;
                color: inherit;
                text-decoration: none;

                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;

                padding-left: var(--eci-table-cell-padding-left, 1.25rem);
                padding-right: var(--eci-table-cell-padding-right, 1.25rem);

                background-color: transparent;

                &:focus {
                    outline: none;
                    box-shadow: var(--eci-table-cell-focus-shadow, inset 0 0 0 1px var(--eci-color-primary-400));
                }
            }

            /**
             * Input-only cell styles
             * When a cell contains a single direct input/textarea/select, move padding
             * to the control and make it fill the cell for a clean interactive surface.
             */
            td:has(> input:only-child),
            td:has(> textarea:only-child),
            td:has(> select:only-child) {
                padding-left: 0;
                padding-right: 0;
            }

            td > input:only-child,
            td > textarea:only-child,
            td > select:only-child {
                display: block;
                width: 100%;
                height: 100%;
                box-sizing: border-box;

                font-family: inherit;
                font-size: inherit;
                color: inherit;
                border: 0;

                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;

                padding-left: var(--eci-table-cell-padding-left, 1.25rem);
                padding-right: var(--eci-table-cell-padding-right, 1.25rem);

                background-color: transparent;

                &:focus {
                    outline: none;
                    box-shadow: var(--eci-table-cell-focus-shadow, inset 0 0 0 1px var(--eci-color-primary-400));
                }
            }

            td .cell-actions-button {
                position: absolute;
                top: .275rem;
                right: .275rem;
                display: flex;
                align-items: center;
                justify-content: center;
                width: var(--eci-table-cell-actions-button-width, 1.25rem);
                height: var(--eci-table-cell-actions-button-height, 1rem);
                background-color: var(--eci-table-cell-actions-button-background-color, var(--eci-color-grey-50));
                border: none;
                cursor: pointer;
                box-sizing: border-box;

                border-radius: var(--eci-table-cell-actions-button-border-radius, var(--eci-border-radius-xs));

                svg {
                    width: 1rem;
                    flex-shrink: 0;
                    color: var(--eci-table-cell-actions-button-icon-color, var(--eci-text-color));
                }

                &:hover {
                    background-color: var(--eci-table-cell-actions-button-hover-background-color, var(--eci-color-grey-100));
                }

                &:focus {
                    outline: none;
                    box-shadow: var(--eci-table-cell-actions-button-focus-shadow, 0 0 0 2px var(--eci-color-primary-400));
                }
            }
        }
    }

    /**
     * Column-wide Hover-Reveal via Header Marker
     * If a header cell in THEAD has `.hover-reveal` or `.hover-reveal-stagger`,
     * apply the behavior to the same column cells in TBODY.
     * Uses :has() with nth-child targeting up to 12 columns for practicality.
     */
    thead {
        tr {
            /* Non-staggered column markers */
            /* Body cells baseline hidden */
            &:has(th.hover-reveal:nth-child(1)) ~ tbody tr td:nth-child(1),
            &:has(th.hover-reveal:nth-child(2)) ~ tbody tr td:nth-child(2),
            &:has(th.hover-reveal:nth-child(3)) ~ tbody tr td:nth-child(3),
            &:has(th.hover-reveal:nth-child(4)) ~ tbody tr td:nth-child(4),
            &:has(th.hover-reveal:nth-child(5)) ~ tbody tr td:nth-child(5),
            &:has(th.hover-reveal:nth-child(6)) ~ tbody tr td:nth-child(6),
            &:has(th.hover-reveal:nth-child(7)) ~ tbody tr td:nth-child(7),
            &:has(th.hover-reveal:nth-child(8)) ~ tbody tr td:nth-child(8),
            &:has(th.hover-reveal:nth-child(9)) ~ tbody tr td:nth-child(9),
            &:has(th.hover-reveal:nth-child(10)) ~ tbody tr td:nth-child(10),
            &:has(th.hover-reveal:nth-child(11)) ~ tbody tr td:nth-child(11),
            &:has(th.hover-reveal:nth-child(12)) ~ tbody tr td:nth-child(12) {
                > * {
                    opacity: 0;
                    transform: translateY(var(--eci-table-hover-reveal-translate, 2px));
                    transition:
                        opacity var(--eci-table-hover-reveal-duration, 0.15s) ease-out,
                        transform var(--eci-table-hover-reveal-duration, 0.15s) ease-out;
                    pointer-events: none;
                }
            }
            /* Reveal on row hover */
            &:has(th.hover-reveal:nth-child(1)) ~ tbody tr:hover td:nth-child(1),
            &:has(th.hover-reveal:nth-child(2)) ~ tbody tr:hover td:nth-child(2),
            &:has(th.hover-reveal:nth-child(3)) ~ tbody tr:hover td:nth-child(3),
            &:has(th.hover-reveal:nth-child(4)) ~ tbody tr:hover td:nth-child(4),
            &:has(th.hover-reveal:nth-child(5)) ~ tbody tr:hover td:nth-child(5),
            &:has(th.hover-reveal:nth-child(6)) ~ tbody tr:hover td:nth-child(6),
            &:has(th.hover-reveal:nth-child(7)) ~ tbody tr:hover td:nth-child(7),
            &:has(th.hover-reveal:nth-child(8)) ~ tbody tr:hover td:nth-child(8),
            &:has(th.hover-reveal:nth-child(9)) ~ tbody tr:hover td:nth-child(9),
            &:has(th.hover-reveal:nth-child(10)) ~ tbody tr:hover td:nth-child(10),
            &:has(th.hover-reveal:nth-child(11)) ~ tbody tr:hover td:nth-child(11),
            &:has(th.hover-reveal:nth-child(12)) ~ tbody tr:hover td:nth-child(12) {
                > * {
                    opacity: 1;
                    transform: translateY(0);
                    pointer-events: auto;
                }
            }

            /* Staggered column markers */
            &:has(th.hover-reveal-stagger:nth-child(1)) ~ tbody tr td:nth-child(1),
            &:has(th.hover-reveal-stagger:nth-child(2)) ~ tbody tr td:nth-child(2),
            &:has(th.hover-reveal-stagger:nth-child(3)) ~ tbody tr td:nth-child(3),
            &:has(th.hover-reveal-stagger:nth-child(4)) ~ tbody tr td:nth-child(4),
            &:has(th.hover-reveal-stagger:nth-child(5)) ~ tbody tr td:nth-child(5),
            &:has(th.hover-reveal-stagger:nth-child(6)) ~ tbody tr td:nth-child(6),
            &:has(th.hover-reveal-stagger:nth-child(7)) ~ tbody tr td:nth-child(7),
            &:has(th.hover-reveal-stagger:nth-child(8)) ~ tbody tr td:nth-child(8),
            &:has(th.hover-reveal-stagger:nth-child(9)) ~ tbody tr td:nth-child(9),
            &:has(th.hover-reveal-stagger:nth-child(10)) ~ tbody tr td:nth-child(10),
            &:has(th.hover-reveal-stagger:nth-child(11)) ~ tbody tr td:nth-child(11),
            &:has(th.hover-reveal-stagger:nth-child(12)) ~ tbody tr td:nth-child(12) {
                > * {
                    opacity: 0;
                    transform: translateY(var(--eci-table-hover-reveal-translate, 2px));
                    transition:
                        opacity var(--eci-table-hover-reveal-duration, 0.15s) ease-out,
                        transform var(--eci-table-hover-reveal-duration, 0.15s) ease-out;
                    pointer-events: none;
                }
            }
            &:has(th.hover-reveal-stagger:nth-child(1)) ~ tbody tr:hover td:nth-child(1),
            &:has(th.hover-reveal-stagger:nth-child(2)) ~ tbody tr:hover td:nth-child(2),
            &:has(th.hover-reveal-stagger:nth-child(3)) ~ tbody tr:hover td:nth-child(3),
            &:has(th.hover-reveal-stagger:nth-child(4)) ~ tbody tr:hover td:nth-child(4),
            &:has(th.hover-reveal-stagger:nth-child(5)) ~ tbody tr:hover td:nth-child(5),
            &:has(th.hover-reveal-stagger:nth-child(6)) ~ tbody tr:hover td:nth-child(6),
            &:has(th.hover-reveal-stagger:nth-child(7)) ~ tbody tr:hover td:nth-child(7),
            &:has(th.hover-reveal-stagger:nth-child(8)) ~ tbody tr:hover td:nth-child(8),
            &:has(th.hover-reveal-stagger:nth-child(9)) ~ tbody tr:hover td:nth-child(9),
            &:has(th.hover-reveal-stagger:nth-child(10)) ~ tbody tr:hover td:nth-child(10),
            &:has(th.hover-reveal-stagger:nth-child(11)) ~ tbody tr:hover td:nth-child(11),
            &:has(th.hover-reveal-stagger:nth-child(12)) ~ tbody tr:hover td:nth-child(12) {
                > * {
                    opacity: 1;
                    transform: translateY(0);
                    pointer-events: auto;
                }
                > *:nth-child(2) { transition-delay: 0.1s; }
                > *:nth-child(3) { transition-delay: 0.2s; }
                > *:nth-child(4) { transition-delay: 0.3s; }
                > *:nth-child(5) { transition-delay: 0.4s; }
                > *:nth-child(6) { transition-delay: 0.5s; }
                > *:nth-child(7) { transition-delay: 0.6s; }
                > *:nth-child(8) { transition-delay: 0.7s; }
                > *:nth-child(9) { transition-delay: 0.8s; }
                > *:nth-child(10) { transition-delay: 0.9s; }
                > *:nth-child(11) { transition-delay: 1.0s; }
                > *:nth-child(12) { transition-delay: 1.1s; }
            }
        }
    }

    /**
     * Column-wide Hover-Reveal via Body Cell Marker
     * If any body cell in TBODY has `.hover-reveal` or `.hover-reveal-stagger`,
     * apply the behavior to that entire column within the same TBODY.
     */
    tbody {
        /* Baseline hidden for non-staggered */
        &:has(tr td.hover-reveal:nth-child(1)), &:has(tr th.hover-reveal:nth-child(1)) { tr td:nth-child(1) { > * { opacity: 0; transform: translateY(var(--eci-table-hover-reveal-translate, 2px)); transition: opacity var(--eci-table-hover-reveal-duration, 0.15s) ease-out, transform var(--eci-table-hover-reveal-duration, 0.15s) ease-out; pointer-events: none; } } }
        &:has(tr td.hover-reveal:nth-child(2)), &:has(tr th.hover-reveal:nth-child(2)) { tr td:nth-child(2) { > * { opacity: 0; transform: translateY(var(--eci-table-hover-reveal-translate, 2px)); transition: opacity var(--eci-table-hover-reveal-duration, 0.15s) ease-out, transform var(--eci-table-hover-reveal-duration, 0.15s) ease-out; pointer-events: none; } } }
        &:has(tr td.hover-reveal:nth-child(3)), &:has(tr th.hover-reveal:nth-child(3)) { tr td:nth-child(3) { > * { opacity: 0; transform: translateY(var(--eci-table-hover-reveal-translate, 2px)); transition: opacity var(--eci-table-hover-reveal-duration, 0.15s) ease-out, transform var(--eci-table-hover-reveal-duration, 0.15s) ease-out; pointer-events: none; } } }
        &:has(tr td.hover-reveal:nth-child(4)), &:has(tr th.hover-reveal:nth-child(4)) { tr td:nth-child(4) { > * { opacity: 0; transform: translateY(var(--eci-table-hover-reveal-translate, 2px)); transition: opacity var(--eci-table-hover-reveal-duration, 0.15s) ease-out, transform var(--eci-table-hover-reveal-duration, 0.15s) ease-out; pointer-events: none; } } }
        &:has(tr td.hover-reveal:nth-child(5)), &:has(tr th.hover-reveal:nth-child(5)) { tr td:nth-child(5) { > * { opacity: 0; transform: translateY(var(--eci-table-hover-reveal-translate, 2px)); transition: opacity var(--eci-table-hover-reveal-duration, 0.15s) ease-out, transform var(--eci-table-hover-reveal-duration, 0.15s) ease-out; pointer-events: none; } } }
        &:has(tr td.hover-reveal:nth-child(6)), &:has(tr th.hover-reveal:nth-child(6)) { tr td:nth-child(6) { > * { opacity: 0; transform: translateY(var(--eci-table-hover-reveal-translate, 2px)); transition: opacity var(--eci-table-hover-reveal-duration, 0.15s) ease-out, transform var(--eci-table-hover-reveal-duration, 0.15s) ease-out; pointer-events: none; } } }
        &:has(tr td.hover-reveal:nth-child(7)), &:has(tr th.hover-reveal:nth-child(7)) { tr td:nth-child(7) { > * { opacity: 0; transform: translateY(var(--eci-table-hover-reveal-translate, 2px)); transition: opacity var(--eci-table-hover-reveal-duration, 0.15s) ease-out, transform var(--eci-table-hover-reveal-duration, 0.15s) ease-out; pointer-events: none; } } }
        &:has(tr td.hover-reveal:nth-child(8)), &:has(tr th.hover-reveal:nth-child(8)) { tr td:nth-child(8) { > * { opacity: 0; transform: translateY(var(--eci-table-hover-reveal-translate, 2px)); transition: opacity var(--eci-table-hover-reveal-duration, 0.15s) ease-out, transform var(--eci-table-hover-reveal-duration, 0.15s) ease-out; pointer-events: none; } } }
        &:has(tr td.hover-reveal:nth-child(9)), &:has(tr th.hover-reveal:nth-child(9)) { tr td:nth-child(9) { > * { opacity: 0; transform: translateY(var(--eci-table-hover-reveal-translate, 2px)); transition: opacity var(--eci-table-hover-reveal-duration, 0.15s) ease-out, transform var(--eci-table-hover-reveal-duration, 0.15s) ease-out; pointer-events: none; } } }
        &:has(tr td.hover-reveal:nth-child(10)), &:has(tr th.hover-reveal:nth-child(10)) { tr td:nth-child(10) { > * { opacity: 0; transform: translateY(var(--eci-table-hover-reveal-translate, 2px)); transition: opacity var(--eci-table-hover-reveal-duration, 0.15s) ease-out, transform var(--eci-table-hover-reveal-duration, 0.15s) ease-out; pointer-events: none; } } }
        &:has(tr td.hover-reveal:nth-child(11)), &:has(tr th.hover-reveal:nth-child(11)) { tr td:nth-child(11) { > * { opacity: 0; transform: translateY(var(--eci-table-hover-reveal-translate, 2px)); transition: opacity var(--eci-table-hover-reveal-duration, 0.15s) ease-out, transform var(--eci-table-hover-reveal-duration, 0.15s) ease-out; pointer-events: none; } } }
        &:has(tr td.hover-reveal:nth-child(12)), &:has(tr th.hover-reveal:nth-child(12)) { tr td:nth-child(12) { > * { opacity: 0; transform: translateY(var(--eci-table-hover-reveal-translate, 2px)); transition: opacity var(--eci-table-hover-reveal-duration, 0.15s) ease-out, transform var(--eci-table-hover-reveal-duration, 0.15s) ease-out; pointer-events: none; } } }

        /* Reveal on row hover (non-staggered) */
        &:has(tr td.hover-reveal:nth-child(1)), &:has(tr th.hover-reveal:nth-child(1)) { tr:hover td:nth-child(1) { > * { opacity: 1; transform: translateY(0); pointer-events: auto; } } }
        &:has(tr td.hover-reveal:nth-child(2)), &:has(tr th.hover-reveal:nth-child(2)) { tr:hover td:nth-child(2) { > * { opacity: 1; transform: translateY(0); pointer-events: auto; } } }
        &:has(tr td.hover-reveal:nth-child(3)), &:has(tr th.hover-reveal:nth-child(3)) { tr:hover td:nth-child(3) { > * { opacity: 1; transform: translateY(0); pointer-events: auto; } } }
        &:has(tr td.hover-reveal:nth-child(4)), &:has(tr th.hover-reveal:nth-child(4)) { tr:hover td:nth-child(4) { > * { opacity: 1; transform: translateY(0); pointer-events: auto; } } }
        &:has(tr td.hover-reveal:nth-child(5)), &:has(tr th.hover-reveal:nth-child(5)) { tr:hover td:nth-child(5) { > * { opacity: 1; transform: translateY(0); pointer-events: auto; } } }
        &:has(tr td.hover-reveal:nth-child(6)), &:has(tr th.hover-reveal:nth-child(6)) { tr:hover td:nth-child(6) { > * { opacity: 1; transform: translateY(0); pointer-events: auto; } } }
        &:has(tr td.hover-reveal:nth-child(7)), &:has(tr th.hover-reveal:nth-child(7)) { tr:hover td:nth-child(7) { > * { opacity: 1; transform: translateY(0); pointer-events: auto; } } }
        &:has(tr td.hover-reveal:nth-child(8)), &:has(tr th.hover-reveal:nth-child(8)) { tr:hover td:nth-child(8) { > * { opacity: 1; transform: translateY(0); pointer-events: auto; } } }
        &:has(tr td.hover-reveal:nth-child(9)), &:has(tr th.hover-reveal:nth-child(9)) { tr:hover td:nth-child(9) { > * { opacity: 1; transform: translateY(0); pointer-events: auto; } } }
        &:has(tr td.hover-reveal:nth-child(10)), &:has(tr th.hover-reveal:nth-child(10)) { tr:hover td:nth-child(10) { > * { opacity: 1; transform: translateY(0); pointer-events: auto; } } }
        &:has(tr td.hover-reveal:nth-child(11)), &:has(tr th.hover-reveal:nth-child(11)) { tr:hover td:nth-child(11) { > * { opacity: 1; transform: translateY(0); pointer-events: auto; } } }
        &:has(tr td.hover-reveal:nth-child(12)), &:has(tr th.hover-reveal:nth-child(12)) { tr:hover td:nth-child(12) { > * { opacity: 1; transform: translateY(0); pointer-events: auto; } } }

        /* Baseline hidden for staggered */
        &:has(tr td.hover-reveal-stagger:nth-child(1)), &:has(tr th.hover-reveal-stagger:nth-child(1)) { tr td:nth-child(1) { > * { opacity: 0; transform: translateY(var(--eci-table-hover-reveal-translate, 2px)); transition: opacity var(--eci-table-hover-reveal-duration, 0.15s) ease-out, transform var(--eci-table-hover-reveal-duration, 0.15s) ease-out; pointer-events: none; } } }
        &:has(tr td.hover-reveal-stagger:nth-child(2)), &:has(tr th.hover-reveal-stagger:nth-child(2)) { tr td:nth-child(2) { > * { opacity: 0; transform: translateY(var(--eci-table-hover-reveal-translate, 2px)); transition: opacity var(--eci-table-hover-reveal-duration, 0.15s) ease-out, transform var(--eci-table-hover-reveal-duration, 0.15s) ease-out; pointer-events: none; } } }
        &:has(tr td.hover-reveal-stagger:nth-child(3)), &:has(tr th.hover-reveal-stagger:nth-child(3)) { tr td:nth-child(3) { > * { opacity: 0; transform: translateY(var(--eci-table-hover-reveal-translate, 2px)); transition: opacity var(--eci-table-hover-reveal-duration, 0.15s) ease-out, transform var(--eci-table-hover-reveal-duration, 0.15s) ease-out; pointer-events: none; } } }
        &:has(tr td.hover-reveal-stagger:nth-child(4)), &:has(tr th.hover-reveal-stagger:nth-child(4)) { tr td:nth-child(4) { > * { opacity: 0; transform: translateY(var(--eci-table-hover-reveal-translate, 2px)); transition: opacity var(--eci-table-hover-reveal-duration, 0.15s) ease-out, transform var(--eci-table-hover-reveal-duration, 0.15s) ease-out; pointer-events: none; } } }
        &:has(tr td.hover-reveal-stagger:nth-child(5)), &:has(tr th.hover-reveal-stagger:nth-child(5)) { tr td:nth-child(5) { > * { opacity: 0; transform: translateY(var(--eci-table-hover-reveal-translate, 2px)); transition: opacity var(--eci-table-hover-reveal-duration, 0.15s) ease-out, transform var(--eci-table-hover-reveal-duration, 0.15s) ease-out; pointer-events: none; } } }
        &:has(tr td.hover-reveal-stagger:nth-child(6)), &:has(tr th.hover-reveal-stagger:nth-child(6)) { tr td:nth-child(6) { > * { opacity: 0; transform: translateY(var(--eci-table-hover-reveal-translate, 2px)); transition: opacity var(--eci-table-hover-reveal-duration, 0.15s) ease-out, transform var(--eci-table-hover-reveal-duration, 0.15s) ease-out; pointer-events: none; } } }
        &:has(tr td.hover-reveal-stagger:nth-child(7)), &:has(tr th.hover-reveal-stagger:nth-child(7)) { tr td:nth-child(7) { > * { opacity: 0; transform: translateY(var(--eci-table-hover-reveal-translate, 2px)); transition: opacity var(--eci-table-hover-reveal-duration, 0.15s) ease-out, transform var(--eci-table-hover-reveal-duration, 0.15s) ease-out; pointer-events: none; } } }
        &:has(tr td.hover-reveal-stagger:nth-child(8)), &:has(tr th.hover-reveal-stagger:nth-child(8)) { tr td:nth-child(8) { > * { opacity: 0; transform: translateY(var(--eci-table-hover-reveal-translate, 2px)); transition: opacity var(--eci-table-hover-reveal-duration, 0.15s) ease-out, transform var(--eci-table-hover-reveal-duration, 0.15s) ease-out; pointer-events: none; } } }
        &:has(tr td.hover-reveal-stagger:nth-child(9)), &:has(tr th.hover-reveal-stagger:nth-child(9)) { tr td:nth-child(9) { > * { opacity: 0; transform: translateY(var(--eci-table-hover-reveal-translate, 2px)); transition: opacity var(--eci-table-hover-reveal-duration, 0.15s) ease-out, transform var(--eci-table-hover-reveal-duration, 0.15s) ease-out; pointer-events: none; } } }
        &:has(tr td.hover-reveal-stagger:nth-child(10)), &:has(tr th.hover-reveal-stagger:nth-child(10)) { tr td:nth-child(10) { > * { opacity: 0; transform: translateY(var(--eci-table-hover-reveal-translate, 2px)); transition: opacity var(--eci-table-hover-reveal-duration, 0.15s) ease-out, transform var(--eci-table-hover-reveal-duration, 0.15s) ease-out; pointer-events: none; } } }
        &:has(tr td.hover-reveal-stagger:nth-child(11)), &:has(tr th.hover-reveal-stagger:nth-child(11)) { tr td:nth-child(11) { > * { opacity: 0; transform: translateY(var(--eci-table-hover-reveal-translate, 2px)); transition: opacity var(--eci-table-hover-reveal-duration, 0.15s) ease-out, transform var(--eci-table-hover-reveal-duration, 0.15s) ease-out; pointer-events: none; } } }
        &:has(tr td.hover-reveal-stagger:nth-child(12)), &:has(tr th.hover-reveal-stagger:nth-child(12)) { tr td:nth-child(12) { > * { opacity: 0; transform: translateY(var(--eci-table-hover-reveal-translate, 2px)); transition: opacity var(--eci-table-hover-reveal-duration, 0.15s) ease-out, transform var(--eci-table-hover-reveal-duration, 0.15s) ease-out; pointer-events: none; } } }

        /* Reveal on row hover (staggered) */
        &:has(tr td.hover-reveal-stagger:nth-child(1)), &:has(tr th.hover-reveal-stagger:nth-child(1)) { tr:hover td:nth-child(1) { > * { opacity: 1; transform: translateY(0); pointer-events: auto; } > *:nth-child(2){transition-delay:.1s;} > *:nth-child(3){transition-delay:.2s;} > *:nth-child(4){transition-delay:.3s;} > *:nth-child(5){transition-delay:.4s;} > *:nth-child(6){transition-delay:.5s;} > *:nth-child(7){transition-delay:.6s;} > *:nth-child(8){transition-delay:.7s;} > *:nth-child(9){transition-delay:.8s;} > *:nth-child(10){transition-delay:.9s;} > *:nth-child(11){transition-delay:1.0s;} > *:nth-child(12){transition-delay:1.1s;} } }
        &:has(tr td.hover-reveal-stagger:nth-child(2)), &:has(tr th.hover-reveal-stagger:nth-child(2)) { tr:hover td:nth-child(2) { > * { opacity: 1; transform: translateY(0); pointer-events: auto; } > *:nth-child(2){transition-delay:.1s;} > *:nth-child(3){transition-delay:.2s;} > *:nth-child(4){transition-delay:.3s;} > *:nth-child(5){transition-delay:.4s;} > *:nth-child(6){transition-delay:.5s;} > *:nth-child(7){transition-delay:.6s;} > *:nth-child(8){transition-delay:.7s;} > *:nth-child(9){transition-delay:.8s;} > *:nth-child(10){transition-delay:.9s;} > *:nth-child(11){transition-delay:1.0s;} > *:nth-child(12){transition-delay:1.1s;} } }
        &:has(tr td.hover-reveal-stagger:nth-child(3)), &:has(tr th.hover-reveal-stagger:nth-child(3)) { tr:hover td:nth-child(3) { > * { opacity: 1; transform: translateY(0); pointer-events: auto; } > *:nth-child(2){transition-delay:.1s;} > *:nth-child(3){transition-delay:.2s;} > *:nth-child(4){transition-delay:.3s;} > *:nth-child(5){transition-delay:.4s;} > *:nth-child(6){transition-delay:.5s;} > *:nth-child(7){transition-delay:.6s;} > *:nth-child(8){transition-delay:.7s;} > *:nth-child(9){transition-delay:.8s;} > *:nth-child(10){transition-delay:.9s;} > *:nth-child(11){transition-delay:1.0s;} > *:nth-child(12){transition-delay:1.1s;} } }
        &:has(tr td.hover-reveal-stagger:nth-child(4)), &:has(tr th.hover-reveal-stagger:nth-child(4)) { tr:hover td:nth-child(4) { > * { opacity: 1; transform: translateY(0); pointer-events: auto; } > *:nth-child(2){transition-delay:.1s;} > *:nth-child(3){transition-delay:.2s;} > *:nth-child(4){transition-delay:.3s;} > *:nth-child(5){transition-delay:.4s;} > *:nth-child(6){transition-delay:.5s;} > *:nth-child(7){transition-delay:.6s;} > *:nth-child(8){transition-delay:.7s;} > *:nth-child(9){transition-delay:.8s;} > *:nth-child(10){transition-delay:.9s;} > *:nth-child(11){transition-delay:1.0s;} > *:nth-child(12){transition-delay:1.1s;} } }
        &:has(tr td.hover-reveal-stagger:nth-child(5)), &:has(tr th.hover-reveal-stagger:nth-child(5)) { tr:hover td:nth-child(5) { > * { opacity: 1; transform: translateY(0); pointer-events: auto; } > *:nth-child(2){transition-delay:.1s;} > *:nth-child(3){transition-delay:.2s;} > *:nth-child(4){transition-delay:.3s;} > *:nth-child(5){transition-delay:.4s;} > *:nth-child(6){transition-delay:.5s;} > *:nth-child(7){transition-delay:.6s;} > *:nth-child(8){transition-delay:.7s;} > *:nth-child(9){transition-delay:.8s;} > *:nth-child(10){transition-delay:.9s;} > *:nth-child(11){transition-delay:1.0s;} > *:nth-child(12){transition-delay:1.1s;} } }
        &:has(tr td.hover-reveal-stagger:nth-child(6)), &:has(tr th.hover-reveal-stagger:nth-child(6)) { tr:hover td:nth-child(6) { > * { opacity: 1; transform: translateY(0); pointer-events: auto; } > *:nth-child(2){transition-delay:.1s;} > *:nth-child(3){transition-delay:.2s;} > *:nth-child(4){transition-delay:.3s;} > *:nth-child(5){transition-delay:.4s;} > *:nth-child(6){transition-delay:.5s;} > *:nth-child(7){transition-delay:.6s;} > *:nth-child(8){transition-delay:.7s;} > *:nth-child(9){transition-delay:.8s;} > *:nth-child(10){transition-delay:.9s;} > *:nth-child(11){transition-delay:1.0s;} > *:nth-child(12){transition-delay:1.1s;} } }
        &:has(tr td.hover-reveal-stagger:nth-child(7)), &:has(tr th.hover-reveal-stagger:nth-child(7)) { tr:hover td:nth-child(7) { > * { opacity: 1; transform: translateY(0); pointer-events: auto; } > *:nth-child(2){transition-delay:.1s;} > *:nth-child(3){transition-delay:.2s;} > *:nth-child(4){transition-delay:.3s;} > *:nth-child(5){transition-delay:.4s;} > *:nth-child(6){transition-delay:.5s;} > *:nth-child(7){transition-delay:.6s;} > *:nth-child(8){transition-delay:.7s;} > *:nth-child(9){transition-delay:.8s;} > *:nth-child(10){transition-delay:.9s;} > *:nth-child(11){transition-delay:1.0s;} > *:nth-child(12){transition-delay:1.1s;} } }
        &:has(tr td.hover-reveal-stagger:nth-child(8)), &:has(tr th.hover-reveal-stagger:nth-child(8)) { tr:hover td:nth-child(8) { > * { opacity: 1; transform: translateY(0); pointer-events: auto; } > *:nth-child(2){transition-delay:.1s;} > *:nth-child(3){transition-delay:.2s;} > *:nth-child(4){transition-delay:.3s;} > *:nth-child(5){transition-delay:.4s;} > *:nth-child(6){transition-delay:.5s;} > *:nth-child(7){transition-delay:.6s;} > *:nth-child(8){transition-delay:.7s;} > *:nth-child(9){transition-delay:.8s;} > *:nth-child(10){transition-delay:.9s;} > *:nth-child(11){transition-delay:1.0s;} > *:nth-child(12){transition-delay:1.1s;} } }
        &:has(tr td.hover-reveal-stagger:nth-child(9)), &:has(tr th.hover-reveal-stagger:nth-child(9)) { tr:hover td:nth-child(9) { > * { opacity: 1; transform: translateY(0); pointer-events: auto; } > *:nth-child(2){transition-delay:.1s;} > *:nth-child(3){transition-delay:.2s;} > *:nth-child(4){transition-delay:.3s;} > *:nth-child(5){transition-delay:.4s;} > *:nth-child(6){transition-delay:.5s;} > *:nth-child(7){transition-delay:.6s;} > *:nth-child(8){transition-delay:.7s;} > *:nth-child(9){transition-delay:.8s;} > *:nth-child(10){transition-delay:.9s;} > *:nth-child(11){transition-delay:1.0s;} > *:nth-child(12){transition-delay:1.1s;} } }
        &:has(tr td.hover-reveal-stagger:nth-child(10)), &:has(tr th.hover-reveal-stagger:nth-child(10)) { tr:hover td:nth-child(10) { > * { opacity: 1; transform: translateY(0); pointer-events: auto; } > *:nth-child(2){transition-delay:.1s;} > *:nth-child(3){transition-delay:.2s;} > *:nth-child(4){transition-delay:.3s;} > *:nth-child(5){transition-delay:.4s;} > *:nth-child(6){transition-delay:.5s;} > *:nth-child(7){transition-delay:.6s;} > *:nth-child(8){transition-delay:.7s;} > *:nth-child(9){transition-delay:.8s;} > *:nth-child(10){transition-delay:.9s;} > *:nth-child(11){transition-delay:1.0s;} > *:nth-child(12){transition-delay:1.1s;} } }
        &:has(tr td.hover-reveal-stagger:nth-child(11)), &:has(tr th.hover-reveal-stagger:nth-child(11)) { tr:hover td:nth-child(11) { > * { opacity: 1; transform: translateY(0); pointer-events: auto; } > *:nth-child(2){transition-delay:.1s;} > *:nth-child(3){transition-delay:.2s;} > *:nth-child(4){transition-delay:.3s;} > *:nth-child(5){transition-delay:.4s;} > *:nth-child(6){transition-delay:.5s;} > *:nth-child(7){transition-delay:.6s;} > *:nth-child(8){transition-delay:.7s;} > *:nth-child(9){transition-delay:.8s;} > *:nth-child(10){transition-delay:.9s;} > *:nth-child(11){transition-delay:1.0s;} > *:nth-child(12){transition-delay:1.1s;} } }
        &:has(tr td.hover-reveal-stagger:nth-child(12)), &:has(tr th.hover-reveal-stagger:nth-child(12)) { tr:hover td:nth-child(12) { > * { opacity: 1; transform: translateY(0); pointer-events: auto; } > *:nth-child(2){transition-delay:.1s;} > *:nth-child(3){transition-delay:.2s;} > *:nth-child(4){transition-delay:.3s;} > *:nth-child(5){transition-delay:.4s;} > *:nth-child(6){transition-delay:.5s;} > *:nth-child(7){transition-delay:.6s;} > *:nth-child(8){transition-delay:.7s;} > *:nth-child(9){transition-delay:.8s;} > *:nth-child(10){transition-delay:.9s;} > *:nth-child(11){transition-delay:1.0s;} > *:nth-child(12){transition-delay:1.1s;} } }
    }

    tfoot {
        tr {
            td {
                padding: var(--eci-table-footer-padding, 0.5rem 1rem);
                font-size: var(--eci-table-footer-font-size, inherit);
                font-weight: inherit;
                border-top-color: var(--eci-table-border-color, var(--eci-color-border-subtle));
                border-top-width: var(--eci-table-border-width, 1px);
                border-top-style: var(--eci-table-border-style, solid);
            }
        }
    }

    /* Shared styles for all table sections
    (thead, tbody, tfoot) */
    thead, tbody, tfoot {
        tr {
            td, th {
                box-sizing: border-box;
                vertical-align: middle;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;

                &[class*="pinned"] {
                    position: sticky;
                    z-index: 99;
                    background-color: var(--eci-table-background-color, var(--eci-color-surface, white));

                    &.pinned-left {
                        left: 0;
                    }

                    &.pinned-right {
                        right: 0;
                    }

                    &.pinned-top {
                        top: 0;
                    }

                    &.pinned-bottom {
                        bottom: 0;
                    }

                    &.pinned-left-last {
                        border-right-width: var(--eci-table-border-width, 1px);
                        border-right-color: var(--eci-table-border-color, var(--eci-color-border-subtle));
                        border-right-style: var(--eci-table-border-style, solid);
                        box-shadow: var(--eci-table-pinned-left-shadow, 3px 0px 4px rgba(0, 0, 0, 0.07));
                    }

                    &.pinned-right-first {
                        border-left-width: var(--eci-table-border-width, 1px);
                        border-left-color: var(--eci-table-border-color, var(--eci-color-border-subtle));
                        border-left-style: var(--eci-table-border-style, solid);
                        box-shadow: var(--eci-table-pinned-right-shadow, -3px 0px 4px rgba(0, 0, 0, 0.07));
                    }
                }
            }

            td:not(.text-right):not(.text-center), th:not(.text-right):not(.text-center) {
                text-align: var(--eci-table-cell-text-align, left);
            }

            td.text-right, th.text-right {
                text-align: right;
            }

            td.text-center, th.text-center {
                text-align: center;
            }
        }
    }

    /**
     * Suggested rows are used to indicate a row that was suggested by the system
     */
    tbody {
        tr.suggested-row {
            td {
                color: var(--eci-text-color-suggestion, var(--eci-color-text-lighter));
            }
        }
    }

    /**
     * Modifiers
     */

    /**
     * Bordered
     * Applies border to the entire table
     */
    &.bordered, &.default:not(.no-bordered) {
        thead {
            tr {
                th {
                    &:first-child {
                        border-left-color: var(--eci-table-border-color, var(--eci-color-border-subtle));
                        border-left-width: var(--eci-table-border-width, 1px);
                        border-left-style: var(--eci-table-border-style, solid);
                    }

                    &:last-child {
                        border-right-color: var(--eci-table-border-color, var(--eci-color-border-subtle));
                        border-right-width: var(--eci-table-border-width, 1px);
                        border-right-style: var(--eci-table-border-style, solid);
                    }

                    border-top-color: var(--eci-table-border-color, var(--eci-color-border-subtle));
                    border-top-width: var(--eci-table-border-width, 1px);
                    border-top-style: var(--eci-table-border-style, solid);
                }
            }
        }

        tbody {
            tr {
                td {
                    &:first-child {
                        border-left-color: var(--eci-table-border-color, var(--eci-color-border-subtle));
                        border-left-width: var(--eci-table-border-width, 1px);
                        border-left-style: var(--eci-table-border-style, solid);
                    }

                    &:last-child {
                        border-right-color: var(--eci-table-border-color, var(--eci-color-border-subtle));
                        border-right-width: var(--eci-table-border-width, 1px);
                        border-right-style: var(--eci-table-border-style, solid);
                    }
                }

                &:last-child td {
                    border-bottom-color: var(--eci-table-border-color, var(--eci-color-border-subtle));
                    border-bottom-width: var(--eci-table-border-width, 1px);
                    border-bottom-style: var(--eci-table-border-style, solid);
                }
            }
        }

        tfoot {
            tr {
                td {
                    &:first-child {
                        border-left-color: var(--eci-table-border-color, var(--eci-color-border-subtle));
                        border-left-width: var(--eci-table-border-width, 1px);
                        border-left-style: var(--eci-table-border-style, solid);
                    }
                    &:last-child {
                        border-right-color: var(--eci-table-border-color, var(--eci-color-border-subtle));
                        border-right-width: var(--eci-table-border-width, 1px);
                        border-right-style: var(--eci-table-border-style, solid);
                    }
                }

                &:last-child td {
                    border-bottom-color: var(--eci-table-border-color, var(--eci-color-border-subtle));
                    border-bottom-width: var(--eci-table-border-width, 1px);
                    border-bottom-style: var(--eci-table-border-style, solid);
                }
            }
        }
    }

    &.shadow {
        box-shadow: var(--eci-table-shadow, 0 1px 3px rgba(0, 0, 0, 0.1));
    }

    /**
     * Rounded
     * Applies border-radius to the entire table
     */
    &.rounded, &.default:not(.no-rounded) {
        border-radius: var(--eci-table-border-radius, 0.5rem);

        thead {
            th:first-of-type {
                border-top-left-radius: var(--eci-table-border-radius, 0.5rem);
            }

            th:last-of-type {
                border-top-right-radius: var(--eci-table-border-radius, 0.5rem);
            }
        }

        tbody:has(~ :not(tfoot)), tbody:last-child {
            tr:last-of-type {
                td:first-of-type {
                    border-bottom-left-radius: var(--eci-table-border-radius, 0.5rem);
                }

                td:last-of-type {
                    border-bottom-right-radius: var(--eci-table-border-radius, 0.5rem);
                }
            }
        }

        tfoot {
            tr:last-of-type {
                td:first-of-type {
                    border-bottom-left-radius: var(--eci-table-border-radius, 0.5rem);
                }

                td:last-of-type {
                    border-bottom-right-radius: var(--eci-table-border-radius, 0.5rem);
                }
            }
        }
    }

    /**
     * Capitalize Header
     * Capitalizes the text in the table header
     */
    &.uppercase-header {
        thead {
            tr {
                th {
                    text-transform: uppercase;
                }
            }
        }
    }

    /**
     * Floating Header
     * Adds a 'floating effect' to the table header, making it appear as if it's floating above the table
     */
    &.floating-header {
        thead {
            tr {
                th:first-of-type {
                    border-bottom-left-radius: var(--eci-table-border-radius, 0.5rem);
                }

                th:last-of-type {
                    border-bottom-right-radius: var(--eci-table-border-radius, 0.5rem);
                }
            }
        }

        tbody {
            padding-top: var(--eci-table-floating-header-margin, 0rem);
        }
    }

     /**
     * Floating Footer
     * Adds a 'floating effect' to the table footer, making it appear as if it's floating above the table
     */
     &.floating-footer {
        tbody {
            margin-bottom: var(--eci-table-floating-footer-margin-bottom, 1rem);
        }
        tfoot {
            tr:last-of-type {
                td:first-of-type {
                    border-top-left-radius: var(--eci-table-border-radius, 0.5rem);
                }
                td:last-of-type {
                    border-top-right-radius: var(--eci-table-border-radius, 0.5rem);
                }
            }
        }
    }

    /**
     * Row Borders
     * Applies border to the bottom of each row
     */
    &.row-borders, &.default:not(.no-row-borders) {
        tbody {
            tr:not(:last-of-type) {
                td {
                    border-bottom-color: var(--eci-table-border-color, var(--eci-color-border-subtle));
                    border-bottom-width: var(--eci-table-border-width, 1px);
                    border-bottom-style: var(--eci-table-border-style, solid);
                }
            }
        }
    }

    /**
     * Column Borders
     * Applies border between each column
     */
    &.column-borders, &.default {
        thead {
            tr {
                th:not(:last-child):not(.no-column-border) {
                    border-right-color: var(--eci-table-border-color, var(--eci-color-border-subtle));
                    border-right-width: var(--eci-table-border-width, 1px);
                    border-right-style: var(--eci-table-border-style, solid);
                }
            }
        }
        tbody {
            tr {
                td:not(:last-child):not(.no-column-border) {
                    border-right-color: var(--eci-table-border-color, var(--eci-color-border-subtle));
                    border-right-width: var(--eci-table-border-width, 1px);
                    border-right-style: var(--eci-table-border-style, solid);
                }
            }
        }
        tfoot {
            tr {
                td:not(:last-child):not(.no-column-border) {
                    border-right-color: var(--eci-table-border-color, var(--eci-color-border-subtle));
                    border-right-width: var(--eci-table-border-width, 1px);
                    border-right-style: var(--eci-table-border-style, solid);
                }
            }
        }
    }

    /**
     * Header Background
     * Applies a background color to the table header
     */
    &.header-background, &.sticky-header, &.default {
        thead {
            background-color: var(--eci-table-header-background-color, var(--eci-color-surface-variant-dark));

            tr {
                th {
                    background-color: var(--eci-table-header-background-color, var(--eci-color-surface-variant-dark));
                }

                th:first-of-type {
                    border-top-left-radius: var(--eci-table-border-radius, 0.5rem);
                }

                th:last-of-type {
                    border-top-right-radius: var(--eci-table-border-radius, 0.5rem);
                }
            }
        }
    }

    &.header-background {
        thead {
            background-color: var(--eci-table-header-background-color, var(--eci-color-surface-variant-dark));

            tr {
                th {
                    background-color: var(--eci-table-header-background-color, var(--eci-color-surface-variant-dark));
                    color: var(--eci-table-header-text-color, var(--eci-color-text-light));
                }
            }
        }
    }

    &.secondary-header, &.default:not(.no-secondary-header) {
        thead {
            tr {
                th {
                    color: var(--eci-table-secondary-header-text-color, var(--eci-color-text-light));
                }
            }
        }
    }

     /**
     * Footer Background
     * Applies a background color to the table footer
     */
     &.footer-background {
        tfoot {
            tr {
                td {
                    background-color: var(--eci-table-footer-background-color, var(--eci-table-header-background-color, var(--eci-color-grey-50)));
                }
            }
        }
    }

    /**
     * Sticky Header
     * Makes the table header sticky
     *
     * @prop --eci-table-sticky-top-offset - Offset from top for sticky header (compensates for scroll masks)
     */
    &.sticky-header, &.default {
        thead {
            position: sticky;
            top: var(--eci-table-sticky-top-offset, 0);
            left: 0;
            z-index: 90;

            th {
                position: sticky;
                top: var(--eci-table-sticky-top-offset, 0);
                z-index: 90;
            }
        }
    }

    /**
     * Sticky Footer
     * Makes the table footer sticky
     */
    &.sticky-footer, &.default {
        tfoot {
            position: sticky;
            bottom: 0;
            z-index: 1;
            background-color: var(--eci-table-header-background-color, var(--eci-color-grey-50));
            z-index: 99;

            tr {
                td {
                    background-color: var(--eci-table-header-background-color, var(--eci-color-grey-50));
                    font-size: var(--eci-table-footer-font-size, var(--eci-font-size-base));
                }
            }
        }
    }

    /**
     * Compact Header
     * Reduces the padding of the table cells in the header
     */
    &.compact-header {
        thead {
            tr {
                th {
                    padding: var(--eci-table-heading-s-padding, var(--eci-spacing-2) var(--eci-spacing-4));
                    font-size: var(--eci-table-heading-s-font-size, var(--eci-font-size-sm, .85rem));
                    font-weight: var(--eci-table-heading-s-font-weight, 400);
                    text-transform: uppercase;
                }
            }
        }
    }

    /**
     * Compact Footer
     * Reduces the padding of the table cells in the footer
     */
     &.compact-footer {
        tfoot {
            tr {
                td {
                    padding: var(--eci-table-footer-s-padding, 0.25rem 1rem);
                    font-size: var(--eci-table-footer-s-font-size, var(--eci-font-size-sm, .85rem));
                    font-weight: var(--eci-table-footer-s-font-weight, 400);
                    text-transform: uppercase;
                }
            }
        }
    }

    /**
     * Striped
     * Applies a striped background to the table rows
     */
    &.striped {
        tbody {
            tr:nth-child(even) {
                background-color: var(--eci-table-striped-background-color, var(--eci-color-grey\/10));
            }
        }
    }

    /**
     * Hover
     * Applies a hover effect to the table rows
     */
    &.row-hover, &.default:not(.no-row-hover) {
        tbody {
            tr {
                &:hover {
                    background-color: var(--eci-table-row-hover-background-color, var(--eci-color-surface-hover));
                }
            }
        }
    }

    /**
     * Hover-Reveal Cells
     * Hide a cell's contents until its row is hovered. Apply the class to
     * any body cell (`td` or `th` in `tbody`).
     *
     * Variants:
     * - `.hover-reveal`           → fade/slide in all contents together
     * - `.hover-reveal-stagger`   → fade/slide children one-by-one (staggered)
     */
    tbody {
        tr {
            /* Base hover-reveal */
            td.hover-reveal, th.hover-reveal {
                > * {
                    opacity: 0;
                    transform: translateY(var(--eci-table-hover-reveal-translate, 2px));
                    transition:
                        opacity var(--eci-table-hover-reveal-duration, 0.15s) ease-out,
                        transform var(--eci-table-hover-reveal-duration, 0.15s) ease-out;
                    pointer-events: none;
                }
            }

            &:hover {
                td.hover-reveal, th.hover-reveal {
                    > * {
                        opacity: 1;
                        transform: translateY(0);
                        pointer-events: auto;
                    }
                }
            }

            /* Staggered variant */
            td.hover-reveal-stagger, th.hover-reveal-stagger {
                > * {
                    opacity: 0;
                    transform: translateY(var(--eci-table-hover-reveal-translate, 2px));
                    transition:
                        opacity var(--eci-table-hover-reveal-duration, 0.15s) ease-out,
                        transform var(--eci-table-hover-reveal-duration, 0.15s) ease-out;
                    pointer-events: none;
                }
            }

            &:hover {
                td.hover-reveal-stagger, th.hover-reveal-stagger {
                    > * {
                        opacity: 1;
                        transform: translateY(0);
                        pointer-events: auto;
                    }

                    /* Staggered delays (mirrors eci-animation-children style) */
                    > *:nth-child(2) { transition-delay: 0.1s; }
                    > *:nth-child(3) { transition-delay: 0.2s; }
                    > *:nth-child(4) { transition-delay: 0.3s; }
                    > *:nth-child(5) { transition-delay: 0.4s; }
                    > *:nth-child(6) { transition-delay: 0.5s; }
                    > *:nth-child(7) { transition-delay: 0.6s; }
                    > *:nth-child(8) { transition-delay: 0.7s; }
                    > *:nth-child(9) { transition-delay: 0.8s; }
                    > *:nth-child(10) { transition-delay: 0.9s; }
                    > *:nth-child(11) { transition-delay: 1.0s; }
                    > *:nth-child(12) { transition-delay: 1.1s; }
                }
            }
        }
    }

     /**
     * Row background
     * Applies a background to all table rows
     */
     &.row-background, &.default:not(.no-row-background) {
        tbody {
            background-color: var(--eci-table-row-background-color, var(--eci-color-grey\/10));
        }
    }

    /**
     * Entity-List Style
     * Mirrors the visual language of `<eci-entity-list>` with a tabular layout:
     * bordered rounded container on a surface background, row dividers (no column
     * borders or header background), and helpers for a composite icon + title/
     * description cell and an end-aligned actions cell.
     *
     * Markup:
     *   <table class="eci-table entity-style w-full">
     *     <tbody>
     *       <tr>
     *         <td class="cell-entity">
     *           <span class="cell-entity-icon"><Icon/></span>
     *           <span class="cell-entity-title">
     *             <span class="cell-entity-name">Name</span>
     *             <span class="cell-entity-description">eci_abc123…</span>
     *           </span>
     *         </td>
     *         <td>Some column</td>
     *         <td class="cell-end">pills + actions</td>
     *       </tr>
     *     </tbody>
     *   </table>
     */
    &.entity-style {
        /* The `<table>` itself stays transparent and borderless — the tbody's
           outer cells draw the framed, rounded container so the thead can
           float above it without its own chrome. Border-radius on tbody or
           the table element doesn't reliably clip cells in `border-collapse:
           separate` mode, so we paint the frame on the outermost td's. */
        border: 0;
        background-color: transparent;
        /* Entity rows mix tight (icon+name, pill, icon-button) and fluid
           (long labels, dates) content — content-driven widths look right,
           and one cell with `width: 100%` can soak up the remainder to
           push right-aligned cells to the edge. */
        table-layout: auto;

        /* Header: fully transparent — no background, no borders, no radii.
           Column labels float above the framed body. */
        thead {
            background-color: transparent;

            tr th {
                background-color: transparent;
                border: 0;
                border-radius: 0;
                color: var(--eci-color-text-light);
                font-weight: 500;
                text-transform: none;
                padding: var(--eci-table-entity-heading-padding, var(--eci-spacing-3) var(--eci-spacing-4));
            }
        }

        /* Body: forms the framed, rounded, surface-filled container. Row
           dividers live between adjacent rows; the outer cells carry the
           left/right/top/bottom borders and corner radii. Secondary columns
           (anything that isn't .cell-entity or .cell-end) render dimmed. */
        tbody {
            background-color: transparent;

            tr td {
                background-color: var(--eci-table-entity-background-color, var(--eci-color-surface, #fff));
                border-right: 0;
                border-left: 0;
                padding: var(--eci-table-entity-cell-padding, var(--eci-spacing-3) var(--eci-spacing-4));
                height: var(--eci-table-entity-row-height, auto);
                color: var(--eci-table-entity-secondary-color, var(--eci-color-text-light));
                font-weight: var(--eci-table-entity-secondary-font-weight, 400);
            }

            tr td.cell-entity,
            tr td.cell-end {
                color: inherit;
                font-weight: inherit;
            }

            /* Outer frame on tbody — painted on the boundary cells so the
               rounded/bordered container lives on the body, not the table. */
            tr td:first-child {
                border-left-color: var(--eci-table-entity-border-color, var(--eci-color-border-subtle));
                border-left-width: var(--eci-table-entity-border-width, 1px);
                border-left-style: var(--eci-table-entity-border-style, solid);
            }

            tr td:last-child {
                border-right-color: var(--eci-table-entity-border-color, var(--eci-color-border-subtle));
                border-right-width: var(--eci-table-entity-border-width, 1px);
                border-right-style: var(--eci-table-entity-border-style, solid);
            }

            tr:first-child td {
                border-top-color: var(--eci-table-entity-border-color, var(--eci-color-border-subtle));
                border-top-width: var(--eci-table-entity-border-width, 1px);
                border-top-style: var(--eci-table-entity-border-style, solid);
            }

            tr:not(:last-child) td {
                border-bottom-color: var(--eci-table-entity-border-color, var(--eci-color-border-subtle));
                border-bottom-width: 1px;
                border-bottom-style: solid;
            }

            tr:last-child td {
                border-bottom-color: var(--eci-table-entity-border-color, var(--eci-color-border-subtle));
                border-bottom-width: var(--eci-table-entity-border-width, 1px);
                border-bottom-style: var(--eci-table-entity-border-style, solid);
            }

            /* Round all four outer corners of the tbody container. */
            tr:first-child td:first-child {
                border-top-left-radius: var(--eci-table-entity-border-radius, var(--eci-border-radius-md, 0.75rem));
            }

            tr:first-child td:last-child {
                border-top-right-radius: var(--eci-table-entity-border-radius, var(--eci-border-radius-md, 0.75rem));
            }

            tr:last-child td:first-child {
                border-bottom-left-radius: var(--eci-table-entity-border-radius, var(--eci-border-radius-md, 0.75rem));
            }

            tr:last-child td:last-child {
                border-bottom-right-radius: var(--eci-table-entity-border-radius, var(--eci-border-radius-md, 0.75rem));
            }
        }

        /* Footer: match header treatment. */
        tfoot {
            background-color: transparent;

            tr td {
                background-color: transparent;
                border-right: 0;
                border-left: 0;
                border-bottom: 0;
                border-top-color: var(--eci-table-entity-border-color, var(--eci-color-border-subtle));
                border-top-width: 1px;
                border-top-style: solid;
                padding: var(--eci-table-entity-cell-padding, var(--eci-spacing-3) var(--eci-spacing-4));
            }
        }

        /* Composite "icon + title/description" cell — matches eci-entity-list-item
           at size="sm" variant="column". The td stays a regular table-cell so the
           row's cells share a common height; icon and title are laid out inline
           with vertical-align: middle. */
        td.cell-entity {
            white-space: nowrap;
        }

        td.cell-entity > .cell-entity-icon,
        td.cell-entity > eci-entity-icon {
            display: inline-flex;
            vertical-align: middle;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-right: var(--eci-table-entity-gap, var(--eci-spacing-4));
        }

        td.cell-entity > .cell-entity-icon {
            width: var(--eci-table-entity-icon-size, var(--eci-spacing-11));
            height: var(--eci-table-entity-icon-size, var(--eci-spacing-11));
            color: var(--eci-table-entity-icon-color, var(--eci-color-text));
            overflow: hidden;
        }

        td.cell-entity > .cell-entity-icon > * {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        td.cell-entity > .cell-entity-title {
            display: inline-flex;
            flex-direction: column;
            vertical-align: middle;
            gap: var(--eci-table-entity-title-gap, var(--eci-spacing-1));
            min-width: 0;
            max-width: 100%;
        }

        td.cell-entity .cell-entity-name {
            font-size: var(--eci-table-entity-name-font-size, var(--eci-font-size-sm));
            font-weight: var(--eci-table-entity-name-font-weight, 500);
            color: var(--eci-table-entity-name-color, var(--eci-color-text, #333));
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

        td.cell-entity .cell-entity-description {
            font-size: var(--eci-table-entity-description-font-size, var(--eci-font-size-sm));
            font-weight: var(--eci-table-entity-description-font-weight, 400);
            color: var(--eci-table-entity-description-color, var(--eci-color-text-lighter));
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

        /* End cell — right-aligned container for pills, badges, and actions. */
        td.cell-end {
            text-align: right;
        }

        td.cell-end > * {
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            gap: var(--eci-table-entity-end-gap, var(--eci-spacing-2));
            width: 100%;
        }

        /* Numeric metric cell — right-aligned with tabular figures so values
           stack cleanly in the column. Pair with a matching `th.cell-numeric`
           on the header to align the heading with its column values. */
        td.cell-numeric,
        th.cell-numeric {
            text-align: right;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }

        /* Sortable column header — gives the <th> an interactive cursor and
           shows a subtle underline indicator on hover to hint at clickability
           without adding heavy button chrome inside the transparent header. */
        th.col-sortable {
            cursor: pointer;
            user-select: none;

            &:hover {
                color: var(--eci-table-entity-sortable-hover-color, var(--eci-color-text));
            }

            /* Inline sort icon wrapper sits beside the label. */
            > .sort-icon {
                display: inline-flex;
                align-items: center;
                vertical-align: middle;
                margin-left: var(--eci-table-entity-sort-icon-gap, 0.25rem);
                color: var(--eci-table-entity-sort-icon-color, var(--eci-color-text-lighter));
                width: var(--eci-table-entity-sort-icon-size, 0.875rem);
                height: var(--eci-table-entity-sort-icon-size, 0.875rem);
                transition: color var(--eci-table-entity-sort-icon-duration, 0.1s) ease;
            }

            &.sorted > .sort-icon,
            &:hover > .sort-icon {
                color: var(--eci-table-entity-sort-icon-active-color, var(--eci-color-text));
            }
        }

        /* Hover: match eci-entity-list-item clickable/background hover.
           The background must be applied to <td> cells rather than <tr> because
           each td carries an explicit background-color that paints over the row. */
        tbody tr:hover td {
            background-color: var(--eci-table-entity-row-hover-background-color, var(--eci-color-surface-hover));
            transition: background-color var(--eci-table-entity-row-hover-duration, 0.1s) ease;
        }

        /* Clickable row cursor. */
        tbody tr.clickable {
            cursor: pointer;
        }
    }

    /**
     * Row Height Variants
     * Controls the height of rows by adjusting cell padding
     */

    /* Small row height */
    &.row-height-sm {
        tbody {
            tr {
                td {
                    height: var(--eci-table-row-height-s, 2.75rem);
                }
            }
        }
    }

    /* Medium row height (default) */
    &.row-height-md, &:not([class*="row-height-"]) {
        thead, tbody {
            tr {
                th, td {
                    height: var(--eci-table-row-height-m, var(--eci-size-md));
                }
            }
        }
    }

    /* Large row height */
    &.row-height-lg {
        tbody {
            tr {
                td {
                    height: var(--eci-table-row-height-l, var(--eci-size-lg));
                }
            }
        }
    }

    /* Extra Large row height */
    &.row-height-xl {
        tbody {
            tr {
                td {
                    height: var(--eci-table-row-height-xl, var(--eci-size-xl));
                }
            }
        }
    }

    /* Extra Extra Large row height */
    &.row-height-xxl {
        tbody {
            tr {
                td {
                    height: var(--eci-table-row-height-xxl, var(--eci-size-2xl));
                }
            }
        }
    }

    /* Vertical Alignment for cells */
    &.cell-align-top {
        thead, tbody {
            tr {
                td, th {
                    vertical-align: top;
                }
            }
        }
    }

    &.cell-align-bottom {
        thead, tbody {
            tr {
                td, th {
                    vertical-align: bottom;
                }
            }
        }
    }

    &.cell-align-middle {
        thead, tbody {
            tr {
                td, th {
                    vertical-align: middle;
                }
            }
        }
    }

    /**
     * No First Column Padding
     * Removes left padding from the first column
     */
    &.no-first-column-padding {
        thead, tbody, tfoot {
            tr {
                td:first-child, th:first-child {
                    padding-left: 0 !important;
                }
                td:first-child > a:only-child,
                td:first-child > input:only-child,
                td:first-child > textarea:only-child,
                td:first-child > select:only-child {
                    padding-left: 0 !important;
                }
            }
        }
    }

    /**
     * No Last Column Padding
     * Removes right padding from the last column
     */
    &.no-last-column-padding {
        thead, tbody, tfoot {
            tr {
                td:last-child, th:last-child {
                    padding-right: 0 !important;
                }
                td:last-child > a:only-child,
                td:last-child > input:only-child,
                td:last-child > textarea:only-child,
                td:last-child > select:only-child {
                    padding-right: 0 !important;
                }
            }
        }
    }

    /**
     * No Edge Padding
     * Removes padding from both first and last columns
     */
    &.no-edge-padding {
        thead, tbody, tfoot {
            tr {
                td:first-child, th:first-child {
                    padding-left: 0 !important;
                }
                td:first-child > a:only-child,
                td:first-child > input:only-child,
                td:first-child > textarea:only-child,
                td:first-child > select:only-child {
                    padding-left: 0 !important;
                }
                td:last-child, th:last-child {
                    padding-right: 0 !important;
                }
                td:last-child > a:only-child,
                td:last-child > input:only-child,
                td:last-child > textarea:only-child,
                td:last-child > select:only-child {
                    padding-right: 0 !important;
                }
            }
        }
    }
  }
}

/* ==========================================================================
   Shadow Utility Classes
   ========================================================================== */

:is(eci-app-wrapper, .eci-elements-app) {
  /* Basic Shadow Utilities */
  .shadow-none {
    box-shadow: none;
  }

  .shadow-border {
    box-shadow: var(--eci-shadow-border);
  }

  .shadow-xs {
    box-shadow: var(--eci-shadow-xs);
  }

  .shadow-sm {
    box-shadow: var(--eci-shadow-sm);
  }

  .shadow-md {
    box-shadow: var(--eci-shadow-md);
  }

  .shadow-lg {
    box-shadow: var(--eci-shadow-lg);
  }

  .shadow-xl {
    box-shadow: var(--eci-shadow-xl);
  }

  .shadow-2xl {
    box-shadow: var(--eci-shadow-2xl);
  }

  .shadow-inner {
    box-shadow: var(--eci-shadow-inner);
  }

  /* Focus Shadow Utilities */
  .shadow-focus {
    box-shadow: var(--eci-shadow-focus);
  }

  .shadow-focus-error {
    box-shadow: var(--eci-shadow-focus-error);
  }

  .shadow-focus-success {
    box-shadow: var(--eci-shadow-focus-success);
  }

  .shadow-focus-warning {
    box-shadow: var(--eci-shadow-focus-warning);
  }

  /* Component Shadows */
  .shadow-button {
    box-shadow: var(--eci-shadow-button);
  }

  .shadow-button-hover {
    box-shadow: var(--eci-shadow-button-hover);
  }

  .shadow-card {
    box-shadow: var(--eci-shadow-card);
  }

  .shadow-card-hover {
    box-shadow: var(--eci-shadow-card-hover);
  }

  .shadow-modal {
    box-shadow: var(--eci-shadow-modal);
  }

  .shadow-dropdown {
    box-shadow: var(--eci-shadow-dropdown);
  }

  .shadow-tooltip {
    box-shadow: var(--eci-shadow-tooltip);
  }

  /* Colored Shadows */
  .shadow-primary {
    box-shadow: var(--eci-shadow-primary);
  }

  .shadow-success {
    box-shadow: var(--eci-shadow-success);
  }

  .shadow-warning {
    box-shadow: var(--eci-shadow-warning);
  }

  .shadow-error {
    box-shadow: var(--eci-shadow-error);
  }

  /* Text Shadows */
  .text-shadow-sm {
    text-shadow: var(--eci-text-shadow-sm);
  }

  .text-shadow-md {
    text-shadow: var(--eci-text-shadow-md);
  }

  .text-shadow-lg {
    text-shadow: var(--eci-text-shadow-lg);
  }

  .text-shadow-none {
    text-shadow: none;
  }
}

/* ==========================================================================
   Typography Utility Classes
   ========================================================================== */

:is(eci-app-wrapper, .eci-elements-app) {
  /* Font Family */
  .font-family {
    font-family: var(--eci-font-family);
  }

  /* Font Weights */
  .font-thin {
    font-weight: var(--eci-font-weight-thin);
  }

  .font-extralight {
    font-weight: var(--eci-font-weight-extralight);
  }

  .font-light {
    font-weight: var(--eci-font-weight-light);
  }

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

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

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

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

  .font-extrabold {
    font-weight: var(--eci-font-weight-extrabold);
  }

  .font-black {
    font-weight: var(--eci-font-weight-black);
  }

  /* Font Sizes */
  .text-xs {
    font-size: var(--eci-font-size-xs);
  }

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

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

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

  .text-xl {
    font-size: var(--eci-font-size-xl);
  }

  .text-2xl {
    font-size: var(--eci-font-size-2xl);
  }

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

  .text-4xl {
    font-size: var(--eci-font-size-4xl);
  }

  .text-5xl {
    font-size: var(--eci-font-size-5xl);
  }

  .text-6xl {
    font-size: var(--eci-font-size-6xl);
  }

  /* Line Heights */
  .leading-none {
    line-height: var(--eci-line-height-none);
  }

  .leading-tight {
    line-height: var(--eci-line-height-tight);
  }

  .leading-snug {
    line-height: var(--eci-line-height-snug);
  }

  .leading-normal {
    line-height: var(--eci-line-height-normal);
  }

  .leading-relaxed {
    line-height: var(--eci-line-height-relaxed);
  }

  .leading-loose {
    line-height: var(--eci-line-height-loose);
  }

  /* Letter Spacing */
  .tracking-tighter {
    letter-spacing: var(--eci-letter-spacing-tighter);
  }

  .tracking-tight {
    letter-spacing: var(--eci-letter-spacing-tight);
  }

  .tracking-normal {
    letter-spacing: var(--eci-letter-spacing-normal);
  }

  .tracking-wide {
    letter-spacing: var(--eci-letter-spacing-wide);
  }

  .tracking-wider {
    letter-spacing: var(--eci-letter-spacing-wider);
  }

  .tracking-widest {
    letter-spacing: var(--eci-letter-spacing-widest);
  }

  /* Text Alignment */
  .text-left {
    text-align: left;
  }

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

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

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

  /* Text Transforms */
  .text-uppercase {
    text-transform: uppercase;
  }

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

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

  .text-normal-case {
    text-transform: none;
  }

  /* Text Decoration */
  .text-underline {
    text-decoration: underline;
  }

  .text-line-through {
    text-decoration: line-through;
  }

  .text-no-decoration {
    text-decoration: none;
  }

  /* Text Overflow */
  .text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .text-wrap {
    white-space: normal;
  }

  .text-nowrap {
    white-space: nowrap;
  }

  .text-break {
    word-break: break-word;
  }
}

/* ==========================================================================
   Border Utility Classes
   ========================================================================== */

:is(eci-app-wrapper, .eci-elements-app) {
  /* Border Widths */
  .border-0 {
    border-width: var(--eci-border-width-0);
  }

  .border-1 {
    border-width: var(--eci-border-width-1);
  }

  .border-2 {
    border-width: var(--eci-border-width-2);
  }

  .border-4 {
    border-width: var(--eci-border-width-4);
  }

  .border-8 {
    border-width: var(--eci-border-width-8);
  }

  .border {
    border-width: var(--eci-border-width);
  }

  /* Border Radius */
  .rounded-none {
    border-radius: var(--eci-border-radius-none);
  }

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

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

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

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

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

  .rounded-2xl {
    border-radius: var(--eci-border-radius-2xl);
  }

  .rounded-3xl {
    border-radius: var(--eci-border-radius-3xl);
  }

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

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

  /* Border Styles */
  .border-solid {
    border-style: var(--eci-border-style-solid);
  }

  .border-dashed {
    border-style: var(--eci-border-style-dashed);
  }

  .border-dotted {
    border-style: var(--eci-border-style-dotted);
  }

  .border-double {
    border-style: var(--eci-border-style-double);
  }

  .border-none {
    border-style: var(--eci-border-style-none);
  }

  /* Component Border Radius */
  .rounded-button {
    border-radius: var(--eci-border-radius-button);
  }

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

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

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

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

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

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

  /* Combined Border Utility Classes */
  .border-thin {
    border: var(--eci-border-thin);
  }

  .border-medium {
    border: var(--eci-border-medium);
  }

  .border-thick {
    border: var(--eci-border-thick);
  }

  .border-focus {
    border: var(--eci-border-focus);
  }

  /* State Border Utility Classes */
  .border-success {
    border: var(--eci-border-success);
  }

  .border-warning {
    border: var(--eci-border-warning);
  }

  .border-error {
    border: var(--eci-border-error);
  }

  /* Divider Border Utility Classes */
  .border-divider {
    border: var(--eci-border-divider);
  }

  .border-divider-strong {
    border: var(--eci-border-divider-strong);
  }

  /* Individual Side Border Utilities */
  .border-t-1 {
    border-top-width: var(--eci-border-width-1);
  }

  .border-r-1 {
    border-right-width: var(--eci-border-width-1);
  }

  .border-b-1 {
    border-bottom-width: var(--eci-border-width-1);
  }

  .border-l-1 {
    border-left-width: var(--eci-border-width-1);
  }

  .border-t-2 {
    border-top-width: var(--eci-border-width-2);
  }

  .border-r-2 {
    border-right-width: var(--eci-border-width-2);
  }

  .border-b-2 {
    border-bottom-width: var(--eci-border-width-2);
  }

  .border-l-2 {
    border-left-width: var(--eci-border-width-2);
  }

  /* Individual Corner Border Radius Utilities */
  .rounded-tl {
    border-top-left-radius: var(--eci-border-radius);
  }

  .rounded-tr {
    border-top-right-radius: var(--eci-border-radius);
  }

  .rounded-br {
    border-bottom-right-radius: var(--eci-border-radius);
  }

  .rounded-bl {
    border-bottom-left-radius: var(--eci-border-radius);
  }

  .rounded-t {
    border-top-left-radius: var(--eci-border-radius);
    border-top-right-radius: var(--eci-border-radius);
  }

  .rounded-r {
    border-top-right-radius: var(--eci-border-radius);
    border-bottom-right-radius: var(--eci-border-radius);
  }

  .rounded-b {
    border-bottom-right-radius: var(--eci-border-radius);
    border-bottom-left-radius: var(--eci-border-radius);
  }

  .rounded-l {
    border-top-left-radius: var(--eci-border-radius);
    border-bottom-left-radius: var(--eci-border-radius);
  }

  /* All-sides subtle border */
  .border-subtle {
    border: 1px solid var(--eci-color-border-subtle);
  }

  .border-b-subtle {
    border-bottom: 1px solid var(--eci-color-border-subtle);
  }

  .border-t-subtle {
    border-top: 1px solid var(--eci-color-border-subtle);
  }

  .border-l-subtle {
    border-left: 1px solid var(--eci-color-border-subtle);
  }

  .border-r-subtle {
    border-right: 1px solid var(--eci-color-border-subtle);
  }
}

/* ==========================================================================
   Transition Utility Classes
   ========================================================================== */

:is(eci-app-wrapper, .eci-elements-app) {
  /* Transition Durations */
  .duration-fast {
    transition-duration: var(--eci-transition-fast);
  }

  .duration-normal {
    transition-duration: var(--eci-transition-normal);
  }

  .duration-slow {
    transition-duration: var(--eci-transition-slow);
  }

  .duration-slower {
    transition-duration: var(--eci-transition-slower);
  }

  /* Transition Timing Functions */
  .ease-linear {
    transition-timing-function: var(--eci-transition-timing-linear);
  }

  .ease {
    transition-timing-function: var(--eci-transition-timing-ease);
  }

  .ease-in {
    transition-timing-function: var(--eci-transition-timing-ease-in);
  }

  .ease-out {
    transition-timing-function: var(--eci-transition-timing-ease-out);
  }

  .ease-in-out {
    transition-timing-function: var(--eci-transition-timing-ease-in-out);
  }

  /* Common Transition Properties */
  .transition-all {
    transition-property: all;
  }

  .transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  }

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

  .transition-shadow {
    transition-property: box-shadow;
  }

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

  /* Combined Transitions */
  .transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: var(--eci-transition-timing-ease);
    transition-duration: var(--eci-transition-normal);
  }

  .transition-fast {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: var(--eci-transition-timing-ease);
    transition-duration: var(--eci-transition-fast);
  }

  .transition-slow {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: var(--eci-transition-timing-ease);
    transition-duration: var(--eci-transition-slow);
  }

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

  /* Animation/Transition Delay */
  .delay-100 {
    transition-delay: 0.1s;
  }

  .delay-200 {
    transition-delay: 0.2s;
  }

  .delay-300 {
    transition-delay: 0.3s;
  }

  .delay-400 {
    transition-delay: 0.4s;
  }

  .delay-500 {
    transition-delay: 0.5s;
  }

  .delay-stagger {
    transition-delay: var(--eci-transition-stagger-delay);
  }

  .delay-2xstagger {
    transition-delay: calc(var(--eci-transition-stagger-delay) * 2);
  }

  .delay-3xstagger {
    transition-delay: calc(var(--eci-transition-stagger-delay) * 3);
  }
}

/* ==========================================================================
   Spacing Utility Classes
   ========================================================================== */

:is(eci-app-wrapper, .eci-elements-app) {
  /* Margin Utilities */
  .m-0 { margin: var(--eci-spacing-0); }
  .m-1 { margin: var(--eci-spacing-1); }
  .m-2 { margin: var(--eci-spacing-2); }
  .m-3 { margin: var(--eci-spacing-3); }
  .m-4 { margin: var(--eci-spacing-4); }
  .m-5 { margin: var(--eci-spacing-5); }
  .m-6 { margin: var(--eci-spacing-6); }
  .m-7 { margin: var(--eci-spacing-7); }
  .m-8 { margin: var(--eci-spacing-8); }
  .m-9 { margin: var(--eci-spacing-9); }
  .m-10 { margin: var(--eci-spacing-10); }
  .m-11 { margin: var(--eci-spacing-11); }
  .m-12 { margin: var(--eci-spacing-12); }
  .m-14 { margin: var(--eci-spacing-14); }
  .m-16 { margin: var(--eci-spacing-16); }
  .m-20 { margin: var(--eci-spacing-20); }
  .m-24 { margin: var(--eci-spacing-24); }
  .m-28 { margin: var(--eci-spacing-28); }
  .m-32 { margin: var(--eci-spacing-32); }
  .m-36 { margin: var(--eci-spacing-36); }
  .m-40 { margin: var(--eci-spacing-40); }
  .m-44 { margin: var(--eci-spacing-44); }
  .m-48 { margin: var(--eci-spacing-48); }
  .m-52 { margin: var(--eci-spacing-52); }
  .m-56 { margin: var(--eci-spacing-56); }
  .m-60 { margin: var(--eci-spacing-60); }
  .m-64 { margin: var(--eci-spacing-64); }
  .m-72 { margin: var(--eci-spacing-72); }
  .m-80 { margin: var(--eci-spacing-80); }
  .m-96 { margin: var(--eci-spacing-96); }

  /* Margin X (Left & Right) Utilities */
  .mx-0 { margin-left: var(--eci-spacing-0); margin-right: var(--eci-spacing-0); }
  .mx-px { margin-left: var(--eci-spacing-px); margin-right: var(--eci-spacing-px); }
  .mx-1 { margin-left: var(--eci-spacing-1); margin-right: var(--eci-spacing-1); }
  .mx-2 { margin-left: var(--eci-spacing-2); margin-right: var(--eci-spacing-2); }
  .mx-3 { margin-left: var(--eci-spacing-3); margin-right: var(--eci-spacing-3); }
  .mx-4 { margin-left: var(--eci-spacing-4); margin-right: var(--eci-spacing-4); }
  .mx-5 { margin-left: var(--eci-spacing-5); margin-right: var(--eci-spacing-5); }
  .mx-6 { margin-left: var(--eci-spacing-6); margin-right: var(--eci-spacing-6); }
  .mx-7 { margin-left: var(--eci-spacing-7); margin-right: var(--eci-spacing-7); }
  .mx-8 { margin-left: var(--eci-spacing-8); margin-right: var(--eci-spacing-8); }
  .mx-9 { margin-left: var(--eci-spacing-9); margin-right: var(--eci-spacing-9); }
  .mx-10 { margin-left: var(--eci-spacing-10); margin-right: var(--eci-spacing-10); }
  .mx-11 { margin-left: var(--eci-spacing-11); margin-right: var(--eci-spacing-11); }
  .mx-12 { margin-left: var(--eci-spacing-12); margin-right: var(--eci-spacing-12); }
  .mx-14 { margin-left: var(--eci-spacing-14); margin-right: var(--eci-spacing-14); }
  .mx-16 { margin-left: var(--eci-spacing-16); margin-right: var(--eci-spacing-16); }
  .mx-20 { margin-left: var(--eci-spacing-20); margin-right: var(--eci-spacing-20); }
  .mx-24 { margin-left: var(--eci-spacing-24); margin-right: var(--eci-spacing-24); }
  .mx-28 { margin-left: var(--eci-spacing-28); margin-right: var(--eci-spacing-28); }
  .mx-32 { margin-left: var(--eci-spacing-32); margin-right: var(--eci-spacing-32); }
  .mx-36 { margin-left: var(--eci-spacing-36); margin-right: var(--eci-spacing-36); }
  .mx-40 { margin-left: var(--eci-spacing-40); margin-right: var(--eci-spacing-40); }
  .mx-44 { margin-left: var(--eci-spacing-44); margin-right: var(--eci-spacing-44); }
  .mx-48 { margin-left: var(--eci-spacing-48); margin-right: var(--eci-spacing-48); }
  .mx-52 { margin-left: var(--eci-spacing-52); margin-right: var(--eci-spacing-52); }
  .mx-56 { margin-left: var(--eci-spacing-56); margin-right: var(--eci-spacing-56); }
  .mx-60 { margin-left: var(--eci-spacing-60); margin-right: var(--eci-spacing-60); }
  .mx-64 { margin-left: var(--eci-spacing-64); margin-right: var(--eci-spacing-64); }
  .mx-72 { margin-left: var(--eci-spacing-72); margin-right: var(--eci-spacing-72); }
  .mx-80 { margin-left: var(--eci-spacing-80); margin-right: var(--eci-spacing-80); }
  .mx-96 { margin-left: var(--eci-spacing-96); margin-right: var(--eci-spacing-96); }
  .mx-auto { margin-left: auto; margin-right: auto; }

  /* Margin Y (Top & Bottom) Utilities */
  .my-0 { margin-top: var(--eci-spacing-0); margin-bottom: var(--eci-spacing-0); }
  .my-px { margin-top: var(--eci-spacing-px); margin-bottom: var(--eci-spacing-px); }
  .my-1 { margin-top: var(--eci-spacing-1); margin-bottom: var(--eci-spacing-1); }
  .my-2 { margin-top: var(--eci-spacing-2); margin-bottom: var(--eci-spacing-2); }
  .my-3 { margin-top: var(--eci-spacing-3); margin-bottom: var(--eci-spacing-3); }
  .my-4 { margin-top: var(--eci-spacing-4); margin-bottom: var(--eci-spacing-4); }
  .my-5 { margin-top: var(--eci-spacing-5); margin-bottom: var(--eci-spacing-5); }
  .my-6 { margin-top: var(--eci-spacing-6); margin-bottom: var(--eci-spacing-6); }
  .my-7 { margin-top: var(--eci-spacing-7); margin-bottom: var(--eci-spacing-7); }
  .my-8 { margin-top: var(--eci-spacing-8); margin-bottom: var(--eci-spacing-8); }
  .my-9 { margin-top: var(--eci-spacing-9); margin-bottom: var(--eci-spacing-9); }
  .my-10 { margin-top: var(--eci-spacing-10); margin-bottom: var(--eci-spacing-10); }
  .my-11 { margin-top: var(--eci-spacing-11); margin-bottom: var(--eci-spacing-11); }
  .my-12 { margin-top: var(--eci-spacing-12); margin-bottom: var(--eci-spacing-12); }
  .my-14 { margin-top: var(--eci-spacing-14); margin-bottom: var(--eci-spacing-14); }
  .my-16 { margin-top: var(--eci-spacing-16); margin-bottom: var(--eci-spacing-16); }
  .my-20 { margin-top: var(--eci-spacing-20); margin-bottom: var(--eci-spacing-20); }
  .my-24 { margin-top: var(--eci-spacing-24); margin-bottom: var(--eci-spacing-24); }
  .my-28 { margin-top: var(--eci-spacing-28); margin-bottom: var(--eci-spacing-28); }
  .my-32 { margin-top: var(--eci-spacing-32); margin-bottom: var(--eci-spacing-32); }
  .my-36 { margin-top: var(--eci-spacing-36); margin-bottom: var(--eci-spacing-36); }
  .my-40 { margin-top: var(--eci-spacing-40); margin-bottom: var(--eci-spacing-40); }
  .my-44 { margin-top: var(--eci-spacing-44); margin-bottom: var(--eci-spacing-44); }
  .my-48 { margin-top: var(--eci-spacing-48); margin-bottom: var(--eci-spacing-48); }
  .my-52 { margin-top: var(--eci-spacing-52); margin-bottom: var(--eci-spacing-52); }
  .my-56 { margin-top: var(--eci-spacing-56); margin-bottom: var(--eci-spacing-56); }
  .my-60 { margin-top: var(--eci-spacing-60); margin-bottom: var(--eci-spacing-60); }
  .my-64 { margin-top: var(--eci-spacing-64); margin-bottom: var(--eci-spacing-64); }
  .my-72 { margin-top: var(--eci-spacing-72); margin-bottom: var(--eci-spacing-72); }
  .my-80 { margin-top: var(--eci-spacing-80); margin-bottom: var(--eci-spacing-80); }
  .my-96 { margin-top: var(--eci-spacing-96); margin-bottom: var(--eci-spacing-96); }
  .my-auto { margin-top: auto; margin-bottom: auto; }

  /* Individual Margin Utilities */
  .mt-0 { margin-top: var(--eci-spacing-0); }
  .mt-1 { margin-top: var(--eci-spacing-1); }
  .mt-2 { margin-top: var(--eci-spacing-2); }
  .mt-3 { margin-top: var(--eci-spacing-3); }
  .mt-4 { margin-top: var(--eci-spacing-4); }
  .mt-5 { margin-top: var(--eci-spacing-5); }
  .mt-6 { margin-top: var(--eci-spacing-6); }
  .mt-7 { margin-top: var(--eci-spacing-7); }
  .mt-8 { margin-top: var(--eci-spacing-8); }
  .mt-9 { margin-top: var(--eci-spacing-9); }
  .mt-10 { margin-top: var(--eci-spacing-10); }
  .mt-11 { margin-top: var(--eci-spacing-11); }
  .mt-12 { margin-top: var(--eci-spacing-12); }
  .mt-14 { margin-top: var(--eci-spacing-14); }
  .mt-16 { margin-top: var(--eci-spacing-16); }
  .mt-20 { margin-top: var(--eci-spacing-20); }
  .mt-24 { margin-top: var(--eci-spacing-24); }
  .mt-28 { margin-top: var(--eci-spacing-28); }
  .mt-32 { margin-top: var(--eci-spacing-32); }
  .mt-36 { margin-top: var(--eci-spacing-36); }
  .mt-40 { margin-top: var(--eci-spacing-40); }
  .mt-44 { margin-top: var(--eci-spacing-44); }
  .mt-48 { margin-top: var(--eci-spacing-48); }
  .mt-52 { margin-top: var(--eci-spacing-52); }
  .mt-56 { margin-top: var(--eci-spacing-56); }
  .mt-60 { margin-top: var(--eci-spacing-60); }
  .mt-64 { margin-top: var(--eci-spacing-64); }
  .mt-72 { margin-top: var(--eci-spacing-72); }
  .mt-80 { margin-top: var(--eci-spacing-80); }
  .mt-96 { margin-top: var(--eci-spacing-96); }
  .mt-auto { margin-top: auto; }

  .mr-0 { margin-right: var(--eci-spacing-0); }
  .mr-1 { margin-right: var(--eci-spacing-1); }
  .mr-2 { margin-right: var(--eci-spacing-2); }
  .mr-3 { margin-right: var(--eci-spacing-3); }
  .mr-4 { margin-right: var(--eci-spacing-4); }
  .mr-5 { margin-right: var(--eci-spacing-5); }
  .mr-6 { margin-right: var(--eci-spacing-6); }
  .mr-7 { margin-right: var(--eci-spacing-7); }
  .mr-8 { margin-right: var(--eci-spacing-8); }
  .mr-9 { margin-right: var(--eci-spacing-9); }
  .mr-10 { margin-right: var(--eci-spacing-10); }
  .mr-11 { margin-right: var(--eci-spacing-11); }
  .mr-12 { margin-right: var(--eci-spacing-12); }
  .mr-14 { margin-right: var(--eci-spacing-14); }
  .mr-16 { margin-right: var(--eci-spacing-16); }
  .mr-20 { margin-right: var(--eci-spacing-20); }
  .mr-24 { margin-right: var(--eci-spacing-24); }
  .mr-28 { margin-right: var(--eci-spacing-28); }
  .mr-32 { margin-right: var(--eci-spacing-32); }
  .mr-36 { margin-right: var(--eci-spacing-36); }
  .mr-40 { margin-right: var(--eci-spacing-40); }
  .mr-44 { margin-right: var(--eci-spacing-44); }
  .mr-48 { margin-right: var(--eci-spacing-48); }
  .mr-52 { margin-right: var(--eci-spacing-52); }
  .mr-56 { margin-right: var(--eci-spacing-56); }
  .mr-60 { margin-right: var(--eci-spacing-60); }
  .mr-64 { margin-right: var(--eci-spacing-64); }
  .mr-72 { margin-right: var(--eci-spacing-72); }
  .mr-80 { margin-right: var(--eci-spacing-80); }
  .mr-96 { margin-right: var(--eci-spacing-96); }
  .mr-auto { margin-right: auto; }

  .mb-0 { margin-bottom: var(--eci-spacing-0); }
  .mb-1 { margin-bottom: var(--eci-spacing-1); }
  .mb-2 { margin-bottom: var(--eci-spacing-2); }
  .mb-3 { margin-bottom: var(--eci-spacing-3); }
  .mb-4 { margin-bottom: var(--eci-spacing-4); }
  .mb-5 { margin-bottom: var(--eci-spacing-5); }
  .mb-6 { margin-bottom: var(--eci-spacing-6); }
  .mb-7 { margin-bottom: var(--eci-spacing-7); }
  .mb-8 { margin-bottom: var(--eci-spacing-8); }
  .mb-9 { margin-bottom: var(--eci-spacing-9); }
  .mb-10 { margin-bottom: var(--eci-spacing-10); }
  .mb-11 { margin-bottom: var(--eci-spacing-11); }
  .mb-12 { margin-bottom: var(--eci-spacing-12); }
  .mb-14 { margin-bottom: var(--eci-spacing-14); }
  .mb-16 { margin-bottom: var(--eci-spacing-16); }
  .mb-20 { margin-bottom: var(--eci-spacing-20); }
  .mb-24 { margin-bottom: var(--eci-spacing-24); }
  .mb-28 { margin-bottom: var(--eci-spacing-28); }
  .mb-32 { margin-bottom: var(--eci-spacing-32); }
  .mb-36 { margin-bottom: var(--eci-spacing-36); }
  .mb-40 { margin-bottom: var(--eci-spacing-40); }
  .mb-44 { margin-bottom: var(--eci-spacing-44); }
  .mb-48 { margin-bottom: var(--eci-spacing-48); }
  .mb-52 { margin-bottom: var(--eci-spacing-52); }
  .mb-56 { margin-bottom: var(--eci-spacing-56); }
  .mb-60 { margin-bottom: var(--eci-spacing-60); }
  .mb-64 { margin-bottom: var(--eci-spacing-64); }
  .mb-72 { margin-bottom: var(--eci-spacing-72); }
  .mb-80 { margin-bottom: var(--eci-spacing-80); }
  .mb-96 { margin-bottom: var(--eci-spacing-96); }
  .mb-auto { margin-bottom: auto; }

  .ml-0 { margin-left: var(--eci-spacing-0); }
  .ml-1 { margin-left: var(--eci-spacing-1); }
  .ml-2 { margin-left: var(--eci-spacing-2); }
  .ml-3 { margin-left: var(--eci-spacing-3); }
  .ml-4 { margin-left: var(--eci-spacing-4); }
  .ml-5 { margin-left: var(--eci-spacing-5); }
  .ml-6 { margin-left: var(--eci-spacing-6); }
  .ml-7 { margin-left: var(--eci-spacing-7); }
  .ml-8 { margin-left: var(--eci-spacing-8); }
  .ml-9 { margin-left: var(--eci-spacing-9); }
  .ml-10 { margin-left: var(--eci-spacing-10); }
  .ml-11 { margin-left: var(--eci-spacing-11); }
  .ml-12 { margin-left: var(--eci-spacing-12); }
  .ml-14 { margin-left: var(--eci-spacing-14); }
  .ml-16 { margin-left: var(--eci-spacing-16); }
  .ml-20 { margin-left: var(--eci-spacing-20); }
  .ml-24 { margin-left: var(--eci-spacing-24); }
  .ml-28 { margin-left: var(--eci-spacing-28); }
  .ml-32 { margin-left: var(--eci-spacing-32); }
  .ml-36 { margin-left: var(--eci-spacing-36); }
  .ml-40 { margin-left: var(--eci-spacing-40); }
  .ml-44 { margin-left: var(--eci-spacing-44); }
  .ml-48 { margin-left: var(--eci-spacing-48); }
  .ml-52 { margin-left: var(--eci-spacing-52); }
  .ml-56 { margin-left: var(--eci-spacing-56); }
  .ml-60 { margin-left: var(--eci-spacing-60); }
  .ml-64 { margin-left: var(--eci-spacing-64); }
  .ml-72 { margin-left: var(--eci-spacing-72); }
  .ml-80 { margin-left: var(--eci-spacing-80); }
  .ml-96 { margin-left: var(--eci-spacing-96); }
  .ml-auto { margin-left: auto; }

  /* Padding Utilities */
  .p-0 { padding: var(--eci-spacing-0); }
  .p-px { padding: var(--eci-spacing-px); }
  .p-1 { padding: var(--eci-spacing-1); }
  .p-2 { padding: var(--eci-spacing-2); }
  .p-3 { padding: var(--eci-spacing-3); }
  .p-4 { padding: var(--eci-spacing-4); }
  .p-5 { padding: var(--eci-spacing-5); }
  .p-6 { padding: var(--eci-spacing-6); }
  .p-7 { padding: var(--eci-spacing-7); }
  .p-8 { padding: var(--eci-spacing-8); }
  .p-9 { padding: var(--eci-spacing-9); }
  .p-10 { padding: var(--eci-spacing-10); }
  .p-11 { padding: var(--eci-spacing-11); }
  .p-12 { padding: var(--eci-spacing-12); }
  .p-14 { padding: var(--eci-spacing-14); }
  .p-16 { padding: var(--eci-spacing-16); }
  .p-20 { padding: var(--eci-spacing-20); }
  .p-24 { padding: var(--eci-spacing-24); }
  .p-28 { padding: var(--eci-spacing-28); }
  .p-32 { padding: var(--eci-spacing-32); }
  .p-36 { padding: var(--eci-spacing-36); }
  .p-40 { padding: var(--eci-spacing-40); }
  .p-44 { padding: var(--eci-spacing-44); }
  .p-48 { padding: var(--eci-spacing-48); }
  .p-52 { padding: var(--eci-spacing-52); }
  .p-56 { padding: var(--eci-spacing-56); }
  .p-60 { padding: var(--eci-spacing-60); }
  .p-64 { padding: var(--eci-spacing-64); }
  .p-72 { padding: var(--eci-spacing-72); }
  .p-80 { padding: var(--eci-spacing-80); }
  .p-96 { padding: var(--eci-spacing-96); }

  /* Padding X (Left & Right) Utilities */
  .px-0 { padding-left: var(--eci-spacing-0); padding-right: var(--eci-spacing-0); }
  .px-px { padding-left: var(--eci-spacing-px); padding-right: var(--eci-spacing-px); }
  .px-1 { padding-left: var(--eci-spacing-1); padding-right: var(--eci-spacing-1); }
  .px-2 { padding-left: var(--eci-spacing-2); padding-right: var(--eci-spacing-2); }
  .px-3 { padding-left: var(--eci-spacing-3); padding-right: var(--eci-spacing-3); }
  .px-4 { padding-left: var(--eci-spacing-4); padding-right: var(--eci-spacing-4); }
  .px-5 { padding-left: var(--eci-spacing-5); padding-right: var(--eci-spacing-5); }
  .px-6 { padding-left: var(--eci-spacing-6); padding-right: var(--eci-spacing-6); }
  .px-7 { padding-left: var(--eci-spacing-7); padding-right: var(--eci-spacing-7); }
  .px-8 { padding-left: var(--eci-spacing-8); padding-right: var(--eci-spacing-8); }
  .px-9 { padding-left: var(--eci-spacing-9); padding-right: var(--eci-spacing-9); }
  .px-10 { padding-left: var(--eci-spacing-10); padding-right: var(--eci-spacing-10); }
  .px-11 { padding-left: var(--eci-spacing-11); padding-right: var(--eci-spacing-11); }
  .px-12 { padding-left: var(--eci-spacing-12); padding-right: var(--eci-spacing-12); }
  .px-14 { padding-left: var(--eci-spacing-14); padding-right: var(--eci-spacing-14); }
  .px-16 { padding-left: var(--eci-spacing-16); padding-right: var(--eci-spacing-16); }
  .px-20 { padding-left: var(--eci-spacing-20); padding-right: var(--eci-spacing-20); }
  .px-24 { padding-left: var(--eci-spacing-24); padding-right: var(--eci-spacing-24); }
  .px-28 { padding-left: var(--eci-spacing-28); padding-right: var(--eci-spacing-28); }
  .px-32 { padding-left: var(--eci-spacing-32); padding-right: var(--eci-spacing-32); }
  .px-36 { padding-left: var(--eci-spacing-36); padding-right: var(--eci-spacing-36); }
  .px-40 { padding-left: var(--eci-spacing-40); padding-right: var(--eci-spacing-40); }
  .px-44 { padding-left: var(--eci-spacing-44); padding-right: var(--eci-spacing-44); }
  .px-48 { padding-left: var(--eci-spacing-48); padding-right: var(--eci-spacing-48); }
  .px-52 { padding-left: var(--eci-spacing-52); padding-right: var(--eci-spacing-52); }
  .px-56 { padding-left: var(--eci-spacing-56); padding-right: var(--eci-spacing-56); }
  .px-60 { padding-left: var(--eci-spacing-60); padding-right: var(--eci-spacing-60); }
  .px-64 { padding-left: var(--eci-spacing-64); padding-right: var(--eci-spacing-64); }
  .px-72 { padding-left: var(--eci-spacing-72); padding-right: var(--eci-spacing-72); }
  .px-80 { padding-left: var(--eci-spacing-80); padding-right: var(--eci-spacing-80); }
  .px-96 { padding-left: var(--eci-spacing-96); padding-right: var(--eci-spacing-96); }

  /* Padding Y (Top & Bottom) Utilities */
  .py-0 { padding-top: var(--eci-spacing-0); padding-bottom: var(--eci-spacing-0); }
  .py-px { padding-top: var(--eci-spacing-px); padding-bottom: var(--eci-spacing-px); }
  .py-1 { padding-top: var(--eci-spacing-1); padding-bottom: var(--eci-spacing-1); }
  .py-2 { padding-top: var(--eci-spacing-2); padding-bottom: var(--eci-spacing-2); }
  .py-3 { padding-top: var(--eci-spacing-3); padding-bottom: var(--eci-spacing-3); }
  .py-4 { padding-top: var(--eci-spacing-4); padding-bottom: var(--eci-spacing-4); }
  .py-5 { padding-top: var(--eci-spacing-5); padding-bottom: var(--eci-spacing-5); }
  .py-6 { padding-top: var(--eci-spacing-6); padding-bottom: var(--eci-spacing-6); }
  .py-7 { padding-top: var(--eci-spacing-7); padding-bottom: var(--eci-spacing-7); }
  .py-8 { padding-top: var(--eci-spacing-8); padding-bottom: var(--eci-spacing-8); }
  .py-9 { padding-top: var(--eci-spacing-9); padding-bottom: var(--eci-spacing-9); }
  .py-10 { padding-top: var(--eci-spacing-10); padding-bottom: var(--eci-spacing-10); }
  .py-11 { padding-top: var(--eci-spacing-11); padding-bottom: var(--eci-spacing-11); }
  .py-12 { padding-top: var(--eci-spacing-12); padding-bottom: var(--eci-spacing-12); }
  .py-14 { padding-top: var(--eci-spacing-14); padding-bottom: var(--eci-spacing-14); }
  .py-16 { padding-top: var(--eci-spacing-16); padding-bottom: var(--eci-spacing-16); }
  .py-20 { padding-top: var(--eci-spacing-20); padding-bottom: var(--eci-spacing-20); }
  .py-24 { padding-top: var(--eci-spacing-24); padding-bottom: var(--eci-spacing-24); }
  .py-28 { padding-top: var(--eci-spacing-28); padding-bottom: var(--eci-spacing-28); }
  .py-32 { padding-top: var(--eci-spacing-32); padding-bottom: var(--eci-spacing-32); }
  .py-36 { padding-top: var(--eci-spacing-36); padding-bottom: var(--eci-spacing-36); }
  .py-40 { padding-top: var(--eci-spacing-40); padding-bottom: var(--eci-spacing-40); }
  .py-44 { padding-top: var(--eci-spacing-44); padding-bottom: var(--eci-spacing-44); }
  .py-48 { padding-top: var(--eci-spacing-48); padding-bottom: var(--eci-spacing-48); }
  .py-52 { padding-top: var(--eci-spacing-52); padding-bottom: var(--eci-spacing-52); }
  .py-56 { padding-top: var(--eci-spacing-56); padding-bottom: var(--eci-spacing-56); }
  .py-60 { padding-top: var(--eci-spacing-60); padding-bottom: var(--eci-spacing-60); }
  .py-64 { padding-top: var(--eci-spacing-64); padding-bottom: var(--eci-spacing-64); }
  .py-72 { padding-top: var(--eci-spacing-72); padding-bottom: var(--eci-spacing-72); }
  .py-80 { padding-top: var(--eci-spacing-80); padding-bottom: var(--eci-spacing-80); }
  .py-96 { padding-top: var(--eci-spacing-96); padding-bottom: var(--eci-spacing-96); }

  /* Individual Padding Utilities */
  .pt-0 { padding-top: var(--eci-spacing-0); }
  .pt-1 { padding-top: var(--eci-spacing-1); }
  .pt-2 { padding-top: var(--eci-spacing-2); }
  .pt-3 { padding-top: var(--eci-spacing-3); }
  .pt-4 { padding-top: var(--eci-spacing-4); }
  .pt-5 { padding-top: var(--eci-spacing-5); }
  .pt-6 { padding-top: var(--eci-spacing-6); }
  .pt-7 { padding-top: var(--eci-spacing-7); }
  .pt-8 { padding-top: var(--eci-spacing-8); }
  .pt-9 { padding-top: var(--eci-spacing-9); }
  .pt-10 { padding-top: var(--eci-spacing-10); }
  .pt-11 { padding-top: var(--eci-spacing-11); }
  .pt-12 { padding-top: var(--eci-spacing-12); }
  .pt-14 { padding-top: var(--eci-spacing-14); }
  .pt-16 { padding-top: var(--eci-spacing-16); }
  .pt-20 { padding-top: var(--eci-spacing-20); }
  .pt-24 { padding-top: var(--eci-spacing-24); }
  .pt-28 { padding-top: var(--eci-spacing-28); }
  .pt-32 { padding-top: var(--eci-spacing-32); }
  .pt-36 { padding-top: var(--eci-spacing-36); }
  .pt-40 { padding-top: var(--eci-spacing-40); }
  .pt-44 { padding-top: var(--eci-spacing-44); }
  .pt-48 { padding-top: var(--eci-spacing-48); }
  .pt-52 { padding-top: var(--eci-spacing-52); }
  .pt-56 { padding-top: var(--eci-spacing-56); }
  .pt-60 { padding-top: var(--eci-spacing-60); }
  .pt-64 { padding-top: var(--eci-spacing-64); }
  .pt-72 { padding-top: var(--eci-spacing-72); }
  .pt-80 { padding-top: var(--eci-spacing-80); }
  .pt-96 { padding-top: var(--eci-spacing-96); }

  .pr-0 { padding-right: var(--eci-spacing-0); }
  .pr-1 { padding-right: var(--eci-spacing-1); }
  .pr-2 { padding-right: var(--eci-spacing-2); }
  .pr-3 { padding-right: var(--eci-spacing-3); }
  .pr-4 { padding-right: var(--eci-spacing-4); }
  .pr-5 { padding-right: var(--eci-spacing-5); }
  .pr-6 { padding-right: var(--eci-spacing-6); }
  .pr-7 { padding-right: var(--eci-spacing-7); }
  .pr-8 { padding-right: var(--eci-spacing-8); }
  .pr-9 { padding-right: var(--eci-spacing-9); }
  .pr-10 { padding-right: var(--eci-spacing-10); }
  .pr-11 { padding-right: var(--eci-spacing-11); }
  .pr-12 { padding-right: var(--eci-spacing-12); }
  .pr-14 { padding-right: var(--eci-spacing-14); }
  .pr-16 { padding-right: var(--eci-spacing-16); }
  .pr-20 { padding-right: var(--eci-spacing-20); }
  .pr-24 { padding-right: var(--eci-spacing-24); }
  .pr-28 { padding-right: var(--eci-spacing-28); }
  .pr-32 { padding-right: var(--eci-spacing-32); }
  .pr-36 { padding-right: var(--eci-spacing-36); }
  .pr-40 { padding-right: var(--eci-spacing-40); }
  .pr-44 { padding-right: var(--eci-spacing-44); }
  .pr-48 { padding-right: var(--eci-spacing-48); }
  .pr-52 { padding-right: var(--eci-spacing-52); }
  .pr-56 { padding-right: var(--eci-spacing-56); }
  .pr-60 { padding-right: var(--eci-spacing-60); }
  .pr-64 { padding-right: var(--eci-spacing-64); }
  .pr-72 { padding-right: var(--eci-spacing-72); }
  .pr-80 { padding-right: var(--eci-spacing-80); }
  .pr-96 { padding-right: var(--eci-spacing-96); }

  .pb-0 { padding-bottom: var(--eci-spacing-0); }
  .pb-1 { padding-bottom: var(--eci-spacing-1); }
  .pb-2 { padding-bottom: var(--eci-spacing-2); }
  .pb-3 { padding-bottom: var(--eci-spacing-3); }
  .pb-4 { padding-bottom: var(--eci-spacing-4); }
  .pb-5 { padding-bottom: var(--eci-spacing-5); }
  .pb-6 { padding-bottom: var(--eci-spacing-6); }
  .pb-7 { padding-bottom: var(--eci-spacing-7); }
  .pb-8 { padding-bottom: var(--eci-spacing-8); }
  .pb-9 { padding-bottom: var(--eci-spacing-9); }
  .pb-10 { padding-bottom: var(--eci-spacing-10); }
  .pb-11 { padding-bottom: var(--eci-spacing-11); }
  .pb-12 { padding-bottom: var(--eci-spacing-12); }
  .pb-14 { padding-bottom: var(--eci-spacing-14); }
  .pb-16 { padding-bottom: var(--eci-spacing-16); }
  .pb-20 { padding-bottom: var(--eci-spacing-20); }
  .pb-24 { padding-bottom: var(--eci-spacing-24); }
  .pb-28 { padding-bottom: var(--eci-spacing-28); }
  .pb-32 { padding-bottom: var(--eci-spacing-32); }
  .pb-36 { padding-bottom: var(--eci-spacing-36); }
  .pb-40 { padding-bottom: var(--eci-spacing-40); }
  .pb-44 { padding-bottom: var(--eci-spacing-44); }
  .pb-48 { padding-bottom: var(--eci-spacing-48); }
  .pb-52 { padding-bottom: var(--eci-spacing-52); }
  .pb-56 { padding-bottom: var(--eci-spacing-56); }
  .pb-60 { padding-bottom: var(--eci-spacing-60); }
  .pb-64 { padding-bottom: var(--eci-spacing-64); }
  .pb-72 { padding-bottom: var(--eci-spacing-72); }
  .pb-80 { padding-bottom: var(--eci-spacing-80); }
  .pb-96 { padding-bottom: var(--eci-spacing-96); }

  .pl-0 { padding-left: var(--eci-spacing-0); }
  .pl-1 { padding-left: var(--eci-spacing-1); }
  .pl-2 { padding-left: var(--eci-spacing-2); }
  .pl-3 { padding-left: var(--eci-spacing-3); }
  .pl-4 { padding-left: var(--eci-spacing-4); }
  .pl-5 { padding-left: var(--eci-spacing-5); }
  .pl-6 { padding-left: var(--eci-spacing-6); }
  .pl-7 { padding-left: var(--eci-spacing-7); }
  .pl-8 { padding-left: var(--eci-spacing-8); }
  .pl-9 { padding-left: var(--eci-spacing-9); }
  .pl-10 { padding-left: var(--eci-spacing-10); }
  .pl-11 { padding-left: var(--eci-spacing-11); }
  .pl-12 { padding-left: var(--eci-spacing-12); }
  .pl-14 { padding-left: var(--eci-spacing-14); }
  .pl-16 { padding-left: var(--eci-spacing-16); }
  .pl-20 { padding-left: var(--eci-spacing-20); }
  .pl-24 { padding-left: var(--eci-spacing-24); }
  .pl-28 { padding-left: var(--eci-spacing-28); }
  .pl-32 { padding-left: var(--eci-spacing-32); }
  .pl-36 { padding-left: var(--eci-spacing-36); }
  .pl-40 { padding-left: var(--eci-spacing-40); }
  .pl-44 { padding-left: var(--eci-spacing-44); }
  .pl-48 { padding-left: var(--eci-spacing-48); }
  .pl-52 { padding-left: var(--eci-spacing-52); }
  .pl-56 { padding-left: var(--eci-spacing-56); }
  .pl-60 { padding-left: var(--eci-spacing-60); }
  .pl-64 { padding-left: var(--eci-spacing-64); }
  .pl-72 { padding-left: var(--eci-spacing-72); }
  .pl-80 { padding-left: var(--eci-spacing-80); }
  .pl-96 { padding-left: var(--eci-spacing-96); }

  /* Component Spacing Utilities */
  .space-component-xs { margin: var(--eci-spacing-component-xs); }
  .space-component-sm { margin: var(--eci-spacing-component-sm); }
  .space-component-md { margin: var(--eci-spacing-component-md); }
  .space-component-lg { margin: var(--eci-spacing-component-lg); }
  .space-component-xl { margin: var(--eci-spacing-component-xl); }
  .space-component-2xl { margin: var(--eci-spacing-component-2xl); }

  /* Layout Spacing Utilities */
  .space-layout-xs { margin: var(--eci-spacing-layout-xs); }
  .space-layout-sm { margin: var(--eci-spacing-layout-sm); }
  .space-layout-md { margin: var(--eci-spacing-layout-md); }
  .space-layout-lg { margin: var(--eci-spacing-layout-lg); }
  .space-layout-xl { margin: var(--eci-spacing-layout-xl); }
  .space-layout-2xl { margin: var(--eci-spacing-layout-2xl); }

  /* Gap Utilities */
  .gap-0 { gap: var(--eci-spacing-0); }
  .gap-px { gap: var(--eci-spacing-px); }
  .gap-0-5 { gap: var(--eci-spacing-0-5); }
  .gap-1 { gap: var(--eci-spacing-1); }
  .gap-1-5 { gap: var(--eci-spacing-1-5); }
  .gap-2 { gap: var(--eci-spacing-2); }
  .gap-2-5 { gap: var(--eci-spacing-2-5); }
  .gap-3 { gap: var(--eci-spacing-3); }
  .gap-3-5 { gap: var(--eci-spacing-3-5); }
  .gap-4 { gap: var(--eci-spacing-4); }
  .gap-5 { gap: var(--eci-spacing-5); }
  .gap-6 { gap: var(--eci-spacing-6); }
  .gap-8 { gap: var(--eci-spacing-8); }
  .gap-10 { gap: var(--eci-spacing-10); }
  .gap-12 { gap: var(--eci-spacing-12); }
  .gap-16 { gap: var(--eci-spacing-16); }
}

/* ==========================================================================
   Color Utility Classes
   ========================================================================== */

:is(eci-app-wrapper, .eci-elements-app) {
  /* Text Colors - Primary */
  .text-primary-50 { color: var(--eci-color-primary-50); }
  .text-primary-100 { color: var(--eci-color-primary-100); }
  .text-primary-200 { color: var(--eci-color-primary-200); }
  .text-primary-300 { color: var(--eci-color-primary-300); }
  .text-primary-400 { color: var(--eci-color-primary-400); }
  .text-primary-500 { color: var(--eci-color-primary-500); }
  .text-primary-600 { color: var(--eci-color-primary-600); }
  .text-primary-700 { color: var(--eci-color-primary-700); }
  .text-primary-800 { color: var(--eci-color-primary-800); }
  .text-primary-900 { color: var(--eci-color-primary-900); }
  .text-primary-950 { color: var(--eci-color-primary-950); }

  /* Text Colors - Secondary */
  .text-secondary-50 { color: var(--eci-color-secondary-50); }
  .text-secondary-100 { color: var(--eci-color-secondary-100); }
  .text-secondary-200 { color: var(--eci-color-secondary-200); }
  .text-secondary-300 { color: var(--eci-color-secondary-300); }
  .text-secondary-400 { color: var(--eci-color-secondary-400); }
  .text-secondary-500 { color: var(--eci-color-secondary-500); }
  .text-secondary-600 { color: var(--eci-color-secondary-600); }
  .text-secondary-700 { color: var(--eci-color-secondary-700); }
  .text-secondary-800 { color: var(--eci-color-secondary-800); }
  .text-secondary-900 { color: var(--eci-color-secondary-900); }
  .text-secondary-950 { color: var(--eci-color-secondary-950); }

  /* Text Colors - Neutral */
  .text-neutral-50 { color: var(--eci-color-neutral-50); }
  .text-neutral-100 { color: var(--eci-color-neutral-100); }
  .text-neutral-200 { color: var(--eci-color-neutral-200); }
  .text-neutral-300 { color: var(--eci-color-neutral-300); }
  .text-neutral-400 { color: var(--eci-color-neutral-400); }
  .text-neutral-500 { color: var(--eci-color-neutral-500); }
  .text-neutral-600 { color: var(--eci-color-neutral-600); }
  .text-neutral-700 { color: var(--eci-color-neutral-700); }
  .text-neutral-800 { color: var(--eci-color-neutral-800); }
  .text-neutral-900 { color: var(--eci-color-neutral-900); }
  .text-neutral-950 { color: var(--eci-color-neutral-950); }

  /* Text Colors - Status */
  .text-success-500 { color: var(--eci-color-success-500); }
  .text-warning-500 { color: var(--eci-color-warning-500); }
  .text-error-500 { color: var(--eci-color-error-500); }
  .text-info-500 { color: var(--eci-color-info-500); }

  /* Background Colors - Primary */
  .bg-primary-50 { background-color: var(--eci-color-primary-50); }
  .bg-primary-100 { background-color: var(--eci-color-primary-100); }
  .bg-primary-200 { background-color: var(--eci-color-primary-200); }
  .bg-primary-300 { background-color: var(--eci-color-primary-300); }
  .bg-primary-400 { background-color: var(--eci-color-primary-400); }
  .bg-primary-500 { background-color: var(--eci-color-primary-500); }
  .bg-primary-600 { background-color: var(--eci-color-primary-600); }
  .bg-primary-700 { background-color: var(--eci-color-primary-700); }
  .bg-primary-800 { background-color: var(--eci-color-primary-800); }
  .bg-primary-900 { background-color: var(--eci-color-primary-900); }
  .bg-primary-950 { background-color: var(--eci-color-primary-950); }

  /* Background Colors - Secondary */
  .bg-secondary-50 { background-color: var(--eci-color-secondary-50); }
  .bg-secondary-100 { background-color: var(--eci-color-secondary-100); }
  .bg-secondary-200 { background-color: var(--eci-color-secondary-200); }
  .bg-secondary-300 { background-color: var(--eci-color-secondary-300); }
  .bg-secondary-400 { background-color: var(--eci-color-secondary-400); }
  .bg-secondary-500 { background-color: var(--eci-color-secondary-500); }
  .bg-secondary-600 { background-color: var(--eci-color-secondary-600); }
  .bg-secondary-700 { background-color: var(--eci-color-secondary-700); }
  .bg-secondary-800 { background-color: var(--eci-color-secondary-800); }
  .bg-secondary-900 { background-color: var(--eci-color-secondary-900); }
  .bg-secondary-950 { background-color: var(--eci-color-secondary-950); }

  /* Background Colors - Neutral */
  .bg-neutral-50 { background-color: var(--eci-color-neutral-50); }
  .bg-neutral-100 { background-color: var(--eci-color-neutral-100); }
  .bg-neutral-200 { background-color: var(--eci-color-neutral-200); }
  .bg-neutral-300 { background-color: var(--eci-color-neutral-300); }
  .bg-neutral-400 { background-color: var(--eci-color-neutral-400); }
  .bg-neutral-500 { background-color: var(--eci-color-neutral-500); }
  .bg-neutral-600 { background-color: var(--eci-color-neutral-600); }
  .bg-neutral-700 { background-color: var(--eci-color-neutral-700); }
  .bg-neutral-800 { background-color: var(--eci-color-neutral-800); }
  .bg-neutral-900 { background-color: var(--eci-color-neutral-900); }
  .bg-neutral-950 { background-color: var(--eci-color-neutral-950); }

  /* Background Colors - Base Palettes (commonly used shades) */
  .bg-red-400 { background-color: var(--eci-color-red-400); }
  .bg-red-500 { background-color: var(--eci-color-red-500); }
  .bg-red-600 { background-color: var(--eci-color-red-600); }

  .bg-orange-400 { background-color: var(--eci-color-orange-400); }
  .bg-orange-500 { background-color: var(--eci-color-orange-500); }
  .bg-orange-600 { background-color: var(--eci-color-orange-600); }

  .bg-yellow-400 { background-color: var(--eci-color-yellow-400); }
  .bg-yellow-500 { background-color: var(--eci-color-yellow-500); }
  .bg-yellow-600 { background-color: var(--eci-color-yellow-600); }

  .bg-green-400 { background-color: var(--eci-color-green-400); }
  .bg-green-500 { background-color: var(--eci-color-green-500); }
  .bg-green-600 { background-color: var(--eci-color-green-600); }

  .bg-blue-400 { background-color: var(--eci-color-blue-400); }
  .bg-blue-500 { background-color: var(--eci-color-blue-500); }
  .bg-blue-600 { background-color: var(--eci-color-blue-600); }

  .bg-purple-400 { background-color: var(--eci-color-purple-400); }
  .bg-purple-500 { background-color: var(--eci-color-purple-500); }
  .bg-purple-600 { background-color: var(--eci-color-purple-600); }

  /* Background Colors - Status */
  .bg-success-50 { background-color: var(--eci-color-success-50); }
  .bg-success-100 { background-color: var(--eci-color-success-100); }
  .bg-success-500 { background-color: var(--eci-color-success-500); }
  .bg-success-700 { background-color: var(--eci-color-success-700); }

  .bg-warning-50 { background-color: var(--eci-color-warning-50); }
  .bg-warning-100 { background-color: var(--eci-color-warning-100); }
  .bg-warning-500 { background-color: var(--eci-color-warning-500); }
  .bg-warning-700 { background-color: var(--eci-color-warning-700); }

  .bg-error-50 { background-color: var(--eci-color-error-50); }
  .bg-error-100 { background-color: var(--eci-color-error-100); }
  .bg-error-500 { background-color: var(--eci-color-error-500); }
  .bg-error-700 { background-color: var(--eci-color-error-700); }

  .bg-info-50 { background-color: var(--eci-color-info-50); }
  .bg-info-100 { background-color: var(--eci-color-info-100); }
  .bg-info-500 { background-color: var(--eci-color-info-500); }
  .bg-info-700 { background-color: var(--eci-color-info-700); }

  /* Border Colors */
  .border-primary-500 { border-color: var(--eci-color-primary-500); }
  .border-secondary-500 { border-color: var(--eci-color-secondary-500); }
  .border-neutral-200 { border-color: var(--eci-color-neutral-200); }
  .border-neutral-300 { border-color: var(--eci-color-neutral-300); }
  .border-neutral-400 { border-color: var(--eci-color-neutral-400); }
  .border-success-500 { border-color: var(--eci-color-success-500); }
  .border-warning-500 { border-color: var(--eci-color-warning-500); }
  .border-error-500 { border-color: var(--eci-color-error-500); }
  .border-info-500 { border-color: var(--eci-color-info-500); }

  /* Surface Colors */
  .bg-background { background-color: var(--eci-color-page); }
  .bg-surface { background-color: var(--eci-color-surface); }
  .bg-surface-secondary { background-color: var(--eci-color-surface-secondary); }
  .bg-surface-tertiary { background-color: var(--eci-color-surface-tertiary); }
  .bg-surface-variant { background-color: var(--eci-color-surface-variant-dark); }

  /* Status Component Colors */
  .bg-online { background-color: var(--eci-color-online-500); }
  .bg-offline { background-color: var(--eci-color-offline-500); }
  .bg-away { background-color: var(--eci-color-away-500); }
  .bg-busy { background-color: var(--eci-color-busy-500); }
  .bg-critical { background-color: var(--eci-color-critical-500); }

  .text-online { color: var(--eci-color-online-500); }
  .text-offline { color: var(--eci-color-offline-500); }
  .text-away { color: var(--eci-color-away-500); }
  .text-busy { color: var(--eci-color-busy-500); }
  .text-critical { color: var(--eci-color-critical-500); }

  /* Functional Text Colors */
  .text-default { color: var(--eci-color-text); }
  .text-muted { color: var(--eci-color-text-muted); }
  .text-active { color: var(--eci-color-text-active); }
  .text-disabled { color: var(--eci-color-text-disabled); }
  .text-inverse { color: var(--eci-color-text-inverse); }
  .text-success { color: var(--eci-color-success-500); }
  .text-warning { color: var(--eci-color-warning-500); }
  .text-error { color: var(--eci-color-error-500); }
  .text-info { color: var(--eci-color-info-500); }

  .text-light { color: var(--eci-color-text-light); }
  .text-lighter { color: var(--eci-color-text-lighter); }
}

:is(eci-app-wrapper, .eci-elements-app) {
  .cursor-pointer {
    cursor: pointer;
  }

  .cursor-default {
    cursor: default;
  }

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

  .cursor-help {
    cursor: help;
  }

  .cursor-progress {
    cursor: progress;
  }

  .cursor-wait {
    cursor: wait;
  }

  .cursor-text {
    cursor: text;
  }

  .cursor-move {
    cursor: move;
  }

  .cursor-crosshair {
    cursor: crosshair;
  }

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

/* ==========================================================================
   Prose Utility Styles
   Tailwind Typography-inspired prose styling for markdown/long-form content
   ========================================================================== */

/* ==========================================================================
   Base Prose Container
   ========================================================================== */

:is(eci-app-wrapper, .eci-elements-app) {
  .eci-prose {
    /* Prose-specific CSS custom properties */
    --eci-prose-body: var(--eci-color-text);
    --eci-prose-headings: var(--eci-color-text);
    --eci-prose-lead: var(--eci-color-text-lighter);
    --eci-prose-links: var(--eci-color-primary-600);
    --eci-prose-bold: var(--eci-color-text);
    --eci-prose-counters: var(--eci-color-neutral-500);
    --eci-prose-bullets: var(--eci-color-neutral-300);
    --eci-prose-hr: var(--eci-color-neutral-200);
    --eci-prose-quotes: var(--eci-color-text);
    --eci-prose-quote-borders: var(--eci-color-neutral-200);
    --eci-prose-captions: var(--eci-color-text-lighter);
    --eci-prose-kbd: var(--eci-color-text);
    --eci-prose-kbd-shadows: color-mix(in oklch, var(--eci-color-text) 10%, transparent);
    --eci-prose-code: var(--eci-color-text);
    --eci-prose-pre-code: var(--eci-color-neutral-200);
    --eci-prose-pre-bg: var(--eci-color-neutral-800);
    --eci-prose-th-borders: var(--eci-color-neutral-300);
    --eci-prose-td-borders: var(--eci-color-neutral-200);

    color: var(--eci-prose-body);
    max-width: 65ch;
    font-family: var(--eci-font-family);

    /* Base size: 14px (--eci-font-size-sm) */
    font-size: var(--eci-font-size-sm);
    line-height: 1.7142857;

    /* Paragraphs */
    & p {
      margin-top: 1.1428571em;
      margin-bottom: 1.1428571em;
    }

    /* Lead text */
    & [class~="lead"] {
      color: var(--eci-prose-lead);
      font-size: 1.2857143em;
      line-height: 1.5555556;
      margin-top: 0.8888889em;
      margin-bottom: 0.8888889em;
    }

    /* Links */
    & a {
      color: var(--eci-prose-links);
      text-decoration: underline;
      font-weight: var(--eci-font-weight-medium);
      transition: color 0.15s ease;

      &:hover {
        color: var(--eci-color-primary-700);
      }
    }

    /* Strong/Bold */
    & strong {
      color: var(--eci-prose-bold);
      font-weight: var(--eci-font-weight-semibold);
    }

    & a strong,
    & blockquote strong,
    & thead th strong {
      color: inherit;
    }

    /* Ordered Lists */
    & ol {
      list-style-type: decimal;
      margin-top: 1.1428571em;
      margin-bottom: 1.1428571em;
      padding-inline-start: 1.5714286em;
    }

    & ol[type="A"] {
      list-style-type: upper-alpha;
    }

    & ol[type="a"] {
      list-style-type: lower-alpha;
    }

    & ol[type="I"] {
      list-style-type: upper-roman;
    }

    & ol[type="i"] {
      list-style-type: lower-roman;
    }

    & ol[type="1"] {
      list-style-type: decimal;
    }

    /* Unordered Lists */
    & ul {
      list-style-type: disc;
      margin-top: 1.1428571em;
      margin-bottom: 1.1428571em;
      padding-inline-start: 1.5714286em;
    }

    /* List Markers */
    & ol > li::marker {
      font-weight: var(--eci-font-weight-normal);
      color: var(--eci-prose-counters);
    }

    & ul > li::marker {
      color: var(--eci-prose-bullets);
    }

    /* List Items */
    & li {
      margin-top: 0.2857143em;
      margin-bottom: 0.2857143em;
    }

    & ol > li,
    & ul > li {
      padding-inline-start: 0.4285714em;
    }

    /* Nested list paragraphs */
    & > ul > li p {
      margin-top: 0.5714286em;
      margin-bottom: 0.5714286em;
    }

    & > ul > li > p:first-child,
    & > ol > li > p:first-child {
      margin-top: 1.1428571em;
    }

    & > ul > li > p:last-child,
    & > ol > li > p:last-child {
      margin-bottom: 1.1428571em;
    }

    /* Nested lists */
    & ul ul,
    & ul ol,
    & ol ul,
    & ol ol {
      margin-top: 0.5714286em;
      margin-bottom: 0.5714286em;
    }

    /* Definition Lists */
    & dl {
      margin-top: 1.1428571em;
      margin-bottom: 1.1428571em;
    }

    & dt {
      color: var(--eci-prose-headings);
      font-weight: var(--eci-font-weight-semibold);
      margin-top: 1.1428571em;
    }

    & dd {
      margin-top: 0.2857143em;
      padding-inline-start: 1.5714286em;
    }

    /* Horizontal Rule */
    & hr {
      border-color: var(--eci-prose-hr);
      border-top-width: 1px;
      margin-top: 2.8571429em;
      margin-bottom: 2.8571429em;
    }

    /* Blockquotes */
    & blockquote {
      font-weight: var(--eci-font-weight-medium);
      font-style: italic;
      color: var(--eci-prose-quotes);
      border-inline-start-width: 0.25rem;
      border-inline-start-color: var(--eci-prose-quote-borders);
      quotes: "\201C" "\201D" "\2018" "\2019";
      margin-top: 1.3333333em;
      margin-bottom: 1.3333333em;
      padding-inline-start: 1.1111111em;
    }

    & blockquote p:first-of-type::before {
      content: open-quote;
    }

    & blockquote p:last-of-type::after {
      content: close-quote;
    }

    /* Headings */
    & h1 {
      color: var(--eci-prose-headings);
      font-weight: var(--eci-font-weight-extrabold);
      font-size: 2.1428571em;
      margin-top: 0;
      margin-bottom: 0.8em;
      line-height: 1.2;
    }

    & h1 strong {
      font-weight: var(--eci-font-weight-black);
      color: inherit;
    }

    & h2 {
      color: var(--eci-prose-headings);
      font-weight: var(--eci-font-weight-bold);
      font-size: 1.4285714em;
      margin-top: 1.6em;
      margin-bottom: 0.8em;
      line-height: 1.4;
    }

    & h2 strong {
      font-weight: var(--eci-font-weight-extrabold);
      color: inherit;
    }

    & h3 {
      color: var(--eci-prose-headings);
      font-weight: var(--eci-font-weight-semibold);
      font-size: 1.2857143em;
      margin-top: 1.5555556em;
      margin-bottom: 0.4444444em;
      line-height: 1.5555556;
    }

    & h3 strong {
      font-weight: var(--eci-font-weight-bold);
      color: inherit;
    }

    & h4 {
      color: var(--eci-prose-headings);
      font-weight: var(--eci-font-weight-semibold);
      margin-top: 1.4285714em;
      margin-bottom: 0.5714286em;
      line-height: 1.4285714;
    }

    & h4 strong {
      font-weight: var(--eci-font-weight-bold);
      color: inherit;
    }

    /* Images and Media */
    & img {
      margin-top: 1.7142857em;
      margin-bottom: 1.7142857em;
    }

    & picture {
      display: block;
      margin-top: 1.7142857em;
      margin-bottom: 1.7142857em;
    }

    & picture > img {
      margin-top: 0;
      margin-bottom: 0;
    }

    & video {
      margin-top: 1.7142857em;
      margin-bottom: 1.7142857em;
    }

    /* Keyboard */
    & kbd {
      font-weight: var(--eci-font-weight-medium);
      font-family: var(--eci-font-family-mono);
      color: var(--eci-prose-kbd);
      font-size: 0.8571429em;
      border-radius: 0.3125rem;
      padding-top: 0.1428571em;
      padding-inline-end: 0.3571429em;
      padding-bottom: 0.1428571em;
      padding-inline-start: 0.3571429em;
      box-shadow: 0 0 0 1px var(--eci-prose-kbd-shadows), 0 3px 0 var(--eci-prose-kbd-shadows);
    }

    /* Inline Code */
    & code {
      color: var(--eci-prose-code);
      font-weight: var(--eci-font-weight-semibold);
      font-size: 0.8571429em;
      font-family: var(--eci-font-family-mono);
    }

    & code::before {
      content: "\`";
    }

    & code::after {
      content: "\`";
    }

    & a code,
    & h1 code,
    & h2 code,
    & h3 code,
    & h4 code,
    & blockquote code,
    & thead th code {
      color: inherit;
    }

    & h2 code {
      font-size: 0.9em;
    }

    & h3 code {
      font-size: 0.8888889em;
    }

    /* Pre-formatted Code Blocks */
    & pre {
      color: var(--eci-prose-pre-code);
      background-color: var(--eci-prose-pre-bg);
      overflow-x: auto;
      font-weight: var(--eci-font-weight-normal);
      font-size: 0.8571429em;
      line-height: 1.6666667;
      margin-top: 1.6666667em;
      margin-bottom: 1.6666667em;
      border-radius: 0.25rem;
      padding-top: 0.6666667em;
      padding-inline-end: 1em;
      padding-bottom: 0.6666667em;
      padding-inline-start: 1em;
    }

    & pre code {
      background-color: transparent;
      border-width: 0;
      border-radius: 0;
      padding: 0;
      font-weight: inherit;
      color: inherit;
      font-size: inherit;
      font-family: inherit;
      line-height: inherit;
    }

    & pre code::before {
      content: none;
    }

    & pre code::after {
      content: none;
    }

    /* Tables */
    & table {
      width: 100%;
      table-layout: auto;
      margin-top: 2em;
      margin-bottom: 2em;
      font-size: 0.8571429em;
      line-height: 1.5;
    }

    & thead {
      border-bottom-width: 1px;
      border-bottom-color: var(--eci-prose-th-borders);
    }

    & thead th {
      color: var(--eci-prose-headings);
      font-weight: var(--eci-font-weight-semibold);
      vertical-align: bottom;
      padding-inline-end: 1em;
      padding-bottom: 0.6666667em;
      padding-inline-start: 1em;
    }

    & thead th:first-child {
      padding-inline-start: 0;
    }

    & thead th:last-child {
      padding-inline-end: 0;
    }

    & tbody tr {
      border-bottom-width: 1px;
      border-bottom-color: var(--eci-prose-td-borders);
    }

    & tbody tr:last-child {
      border-bottom-width: 0;
    }

    & tbody td {
      vertical-align: baseline;
    }

    & tbody td,
    & tfoot td {
      padding-top: 0.6666667em;
      padding-inline-end: 1em;
      padding-bottom: 0.6666667em;
      padding-inline-start: 1em;
    }

    & tbody td:first-child,
    & tfoot td:first-child {
      padding-inline-start: 0;
    }

    & tbody td:last-child,
    & tfoot td:last-child {
      padding-inline-end: 0;
    }

    & tfoot {
      border-top-width: 1px;
      border-top-color: var(--eci-prose-th-borders);
    }

    & tfoot td {
      vertical-align: top;
    }

    & th,
    & td {
      text-align: start;
    }

    /* Figures */
    & figure {
      margin-top: 1.7142857em;
      margin-bottom: 1.7142857em;
    }

    & figure > * {
      margin-top: 0;
      margin-bottom: 0;
    }

    & figcaption {
      color: var(--eci-prose-captions);
      font-size: 0.8571429em;
      line-height: 1.3333333;
      margin-top: 0.6666667em;
    }

    /* Reset margins for elements following headers and hr */
    & hr + *,
    & h2 + *,
    & h3 + *,
    & h4 + * {
      margin-top: 0;
    }

    /* First and last child margin reset */
    & > :first-child {
      margin-top: 0;
    }

    & > :last-child {
      margin-bottom: 0;
    }
  }

  /* ==========================================================================
     Size Modifiers
     ========================================================================== */

  /* Base (16px) - for when you need standard prose sizing */
  .eci-prose-base {
    font-size: 1rem;
    line-height: 1.75;

    & p {
      margin-top: 1.25em;
      margin-bottom: 1.25em;
    }

    & [class~="lead"] {
      font-size: 1.25em;
      line-height: 1.6;
      margin-top: 1.2em;
      margin-bottom: 1.2em;
    }

    & blockquote {
      margin-top: 1.6em;
      margin-bottom: 1.6em;
      padding-inline-start: 1em;
    }

    & h1 {
      font-size: 2.25em;
      margin-top: 0;
      margin-bottom: 0.8888889em;
      line-height: 1.1111111;
    }

    & h2 {
      font-size: 1.5em;
      margin-top: 2em;
      margin-bottom: 1em;
      line-height: 1.3333333;
    }

    & h3 {
      font-size: 1.25em;
      margin-top: 1.6em;
      margin-bottom: 0.6em;
      line-height: 1.6;
    }

    & h4 {
      margin-top: 1.5em;
      margin-bottom: 0.5em;
      line-height: 1.5;
    }

    & img,
    & picture,
    & video {
      margin-top: 2em;
      margin-bottom: 2em;
    }

    & picture > img {
      margin-top: 0;
      margin-bottom: 0;
    }

    & kbd {
      font-size: 0.875em;
      border-radius: 0.3125rem;
      padding-top: 0.1875em;
      padding-inline-end: 0.375em;
      padding-bottom: 0.1875em;
      padding-inline-start: 0.375em;
    }

    & code {
      font-size: 0.875em;
    }

    & h2 code {
      font-size: 0.875em;
    }

    & h3 code {
      font-size: 0.9em;
    }

    & pre {
      font-size: 0.875em;
      line-height: 1.7142857;
      margin-top: 1.7142857em;
      margin-bottom: 1.7142857em;
      border-radius: 0.375rem;
      padding-top: 0.8571429em;
      padding-inline-end: 1.1428571em;
      padding-bottom: 0.8571429em;
      padding-inline-start: 1.1428571em;
    }

    & ol,
    & ul {
      margin-top: 1.25em;
      margin-bottom: 1.25em;
      padding-inline-start: 1.625em;
    }

    & li {
      margin-top: 0.5em;
      margin-bottom: 0.5em;
    }

    & ol > li,
    & ul > li {
      padding-inline-start: 0.375em;
    }

    & > ul > li p {
      margin-top: 0.75em;
      margin-bottom: 0.75em;
    }

    & > ul > li > p:first-child,
    & > ol > li > p:first-child {
      margin-top: 1.25em;
    }

    & > ul > li > p:last-child,
    & > ol > li > p:last-child {
      margin-bottom: 1.25em;
    }

    & ul ul,
    & ul ol,
    & ol ul,
    & ol ol {
      margin-top: 0.75em;
      margin-bottom: 0.75em;
    }

    & dl {
      margin-top: 1.25em;
      margin-bottom: 1.25em;
    }

    & dt {
      margin-top: 1.25em;
    }

    & dd {
      margin-top: 0.5em;
      padding-inline-start: 1.625em;
    }

    & hr {
      margin-top: 3em;
      margin-bottom: 3em;
    }

    & table {
      font-size: 0.875em;
      line-height: 1.7142857;
    }

    & thead th {
      padding-inline-end: 0.5714286em;
      padding-bottom: 0.5714286em;
      padding-inline-start: 0.5714286em;
    }

    & thead th:first-child {
      padding-inline-start: 0;
    }

    & thead th:last-child {
      padding-inline-end: 0;
    }

    & tbody td,
    & tfoot td {
      padding-top: 0.5714286em;
      padding-inline-end: 0.5714286em;
      padding-bottom: 0.5714286em;
      padding-inline-start: 0.5714286em;
    }

    & tbody td:first-child,
    & tfoot td:first-child {
      padding-inline-start: 0;
    }

    & tbody td:last-child,
    & tfoot td:last-child {
      padding-inline-end: 0;
    }

    & figure {
      margin-top: 2em;
      margin-bottom: 2em;
    }

    & figure > * {
      margin-top: 0;
      margin-bottom: 0;
    }

    & figcaption {
      font-size: 0.875em;
      line-height: 1.4285714;
      margin-top: 0.8571429em;
    }

    & > :first-child {
      margin-top: 0;
    }

    & > :last-child {
      margin-bottom: 0;
    }
  }

  /* Large (18px base) */
  .eci-prose-lg {
    font-size: 1.125rem;
    line-height: 1.7777778;

    & p {
      margin-top: 1.3333333em;
      margin-bottom: 1.3333333em;
    }

    & [class~="lead"] {
      font-size: 1.2222222em;
      line-height: 1.4545455;
      margin-top: 1.0909091em;
      margin-bottom: 1.0909091em;
    }

    & blockquote {
      margin-top: 1.6666667em;
      margin-bottom: 1.6666667em;
      padding-inline-start: 1em;
    }

    & h1 {
      font-size: 2.6666667em;
      margin-top: 0;
      margin-bottom: 0.8333333em;
      line-height: 1;
    }

    & h2 {
      font-size: 1.6666667em;
      margin-top: 1.8666667em;
      margin-bottom: 1.0666667em;
      line-height: 1.3333333;
    }

    & h3 {
      font-size: 1.3333333em;
      margin-top: 1.6666667em;
      margin-bottom: 0.6666667em;
      line-height: 1.5;
    }

    & h4 {
      margin-top: 1.7777778em;
      margin-bottom: 0.4444444em;
      line-height: 1.5555556;
    }

    & img,
    & picture,
    & video {
      margin-top: 1.7777778em;
      margin-bottom: 1.7777778em;
    }

    & picture > img {
      margin-top: 0;
      margin-bottom: 0;
    }

    & kbd {
      font-size: 0.8888889em;
      border-radius: 0.3125rem;
      padding-top: 0.2222222em;
      padding-inline-end: 0.4444444em;
      padding-bottom: 0.2222222em;
      padding-inline-start: 0.4444444em;
    }

    & code {
      font-size: 0.8888889em;
    }

    & h2 code {
      font-size: 0.8666667em;
    }

    & h3 code {
      font-size: 0.875em;
    }

    & pre {
      font-size: 0.8888889em;
      line-height: 1.75;
      margin-top: 2em;
      margin-bottom: 2em;
      border-radius: 0.375rem;
      padding-top: 1em;
      padding-inline-end: 1.5em;
      padding-bottom: 1em;
      padding-inline-start: 1.5em;
    }

    & ol,
    & ul {
      margin-top: 1.3333333em;
      margin-bottom: 1.3333333em;
      padding-inline-start: 1.5555556em;
    }

    & li {
      margin-top: 0.6666667em;
      margin-bottom: 0.6666667em;
    }

    & ol > li,
    & ul > li {
      padding-inline-start: 0.4444444em;
    }

    & > ul > li p {
      margin-top: 0.8888889em;
      margin-bottom: 0.8888889em;
    }

    & > ul > li > p:first-child,
    & > ol > li > p:first-child {
      margin-top: 1.3333333em;
    }

    & > ul > li > p:last-child,
    & > ol > li > p:last-child {
      margin-bottom: 1.3333333em;
    }

    & ul ul,
    & ul ol,
    & ol ul,
    & ol ol {
      margin-top: 0.8888889em;
      margin-bottom: 0.8888889em;
    }

    & dl {
      margin-top: 1.3333333em;
      margin-bottom: 1.3333333em;
    }

    & dt {
      margin-top: 1.3333333em;
    }

    & dd {
      margin-top: 0.6666667em;
      padding-inline-start: 1.5555556em;
    }

    & hr {
      margin-top: 3.1111111em;
      margin-bottom: 3.1111111em;
    }

    & table {
      font-size: 0.8888889em;
      line-height: 1.5;
    }

    & thead th {
      padding-inline-end: 0.75em;
      padding-bottom: 0.75em;
      padding-inline-start: 0.75em;
    }

    & thead th:first-child {
      padding-inline-start: 0;
    }

    & thead th:last-child {
      padding-inline-end: 0;
    }

    & tbody td,
    & tfoot td {
      padding-top: 0.75em;
      padding-inline-end: 0.75em;
      padding-bottom: 0.75em;
      padding-inline-start: 0.75em;
    }

    & tbody td:first-child,
    & tfoot td:first-child {
      padding-inline-start: 0;
    }

    & tbody td:last-child,
    & tfoot td:last-child {
      padding-inline-end: 0;
    }

    & figure {
      margin-top: 1.7777778em;
      margin-bottom: 1.7777778em;
    }

    & figure > * {
      margin-top: 0;
      margin-bottom: 0;
    }

    & figcaption {
      font-size: 0.8888889em;
      line-height: 1.5;
      margin-top: 1em;
    }

    & > :first-child {
      margin-top: 0;
    }

    & > :last-child {
      margin-bottom: 0;
    }
  }

  /* Extra Large (20px base) */
  .eci-prose-xl {
    font-size: 1.25rem;
    line-height: 1.8;

    & p {
      margin-top: 1.2em;
      margin-bottom: 1.2em;
    }

    & [class~="lead"] {
      font-size: 1.2em;
      line-height: 1.5;
      margin-top: 1em;
      margin-bottom: 1em;
    }

    & blockquote {
      margin-top: 1.6em;
      margin-bottom: 1.6em;
      padding-inline-start: 1.0666667em;
    }

    & h1 {
      font-size: 2.8em;
      margin-top: 0;
      margin-bottom: 0.8571429em;
      line-height: 1;
    }

    & h2 {
      font-size: 1.8em;
      margin-top: 1.5555556em;
      margin-bottom: 0.8888889em;
      line-height: 1.1111111;
    }

    & h3 {
      font-size: 1.5em;
      margin-top: 1.6em;
      margin-bottom: 0.6666667em;
      line-height: 1.3333333;
    }

    & h4 {
      margin-top: 1.8em;
      margin-bottom: 0.6em;
      line-height: 1.6;
    }

    & img,
    & picture,
    & video {
      margin-top: 2em;
      margin-bottom: 2em;
    }

    & picture > img {
      margin-top: 0;
      margin-bottom: 0;
    }

    & kbd {
      font-size: 0.9em;
      border-radius: 0.3125rem;
      padding-top: 0.25em;
      padding-inline-end: 0.4em;
      padding-bottom: 0.25em;
      padding-inline-start: 0.4em;
    }

    & code {
      font-size: 0.9em;
    }

    & h2 code {
      font-size: 0.8611111em;
    }

    & h3 code {
      font-size: 0.9em;
    }

    & pre {
      font-size: 0.9em;
      line-height: 1.7777778;
      margin-top: 2em;
      margin-bottom: 2em;
      border-radius: 0.5rem;
      padding-top: 1.1111111em;
      padding-inline-end: 1.3333333em;
      padding-bottom: 1.1111111em;
      padding-inline-start: 1.3333333em;
    }

    & ol,
    & ul {
      margin-top: 1.2em;
      margin-bottom: 1.2em;
      padding-inline-start: 1.6em;
    }

    & li {
      margin-top: 0.6em;
      margin-bottom: 0.6em;
    }

    & ol > li,
    & ul > li {
      padding-inline-start: 0.4em;
    }

    & > ul > li p {
      margin-top: 0.8em;
      margin-bottom: 0.8em;
    }

    & > ul > li > p:first-child,
    & > ol > li > p:first-child {
      margin-top: 1.2em;
    }

    & > ul > li > p:last-child,
    & > ol > li > p:last-child {
      margin-bottom: 1.2em;
    }

    & ul ul,
    & ul ol,
    & ol ul,
    & ol ol {
      margin-top: 0.8em;
      margin-bottom: 0.8em;
    }

    & dl {
      margin-top: 1.2em;
      margin-bottom: 1.2em;
    }

    & dt {
      margin-top: 1.2em;
    }

    & dd {
      margin-top: 0.6em;
      padding-inline-start: 1.6em;
    }

    & hr {
      margin-top: 2.8em;
      margin-bottom: 2.8em;
    }

    & table {
      font-size: 0.9em;
      line-height: 1.5555556;
    }

    & thead th {
      padding-inline-end: 0.6666667em;
      padding-bottom: 0.8888889em;
      padding-inline-start: 0.6666667em;
    }

    & thead th:first-child {
      padding-inline-start: 0;
    }

    & thead th:last-child {
      padding-inline-end: 0;
    }

    & tbody td,
    & tfoot td {
      padding-top: 0.8888889em;
      padding-inline-end: 0.6666667em;
      padding-bottom: 0.8888889em;
      padding-inline-start: 0.6666667em;
    }

    & tbody td:first-child,
    & tfoot td:first-child {
      padding-inline-start: 0;
    }

    & tbody td:last-child,
    & tfoot td:last-child {
      padding-inline-end: 0;
    }

    & figure {
      margin-top: 2em;
      margin-bottom: 2em;
    }

    & figure > * {
      margin-top: 0;
      margin-bottom: 0;
    }

    & figcaption {
      font-size: 0.9em;
      line-height: 1.5555556;
      margin-top: 1em;
    }

    & > :first-child {
      margin-top: 0;
    }

    & > :last-child {
      margin-bottom: 0;
    }
  }

  /* 2XL (24px base) */
  .eci-prose-2xl {
    font-size: 1.5rem;
    line-height: 1.6666667;

    & p {
      margin-top: 1.3333333em;
      margin-bottom: 1.3333333em;
    }

    & [class~="lead"] {
      font-size: 1.25em;
      line-height: 1.4666667;
      margin-top: 1.0666667em;
      margin-bottom: 1.0666667em;
    }

    & blockquote {
      margin-top: 1.7777778em;
      margin-bottom: 1.7777778em;
      padding-inline-start: 1.1111111em;
    }

    & h1 {
      font-size: 2.6666667em;
      margin-top: 0;
      margin-bottom: 0.875em;
      line-height: 1;
    }

    & h2 {
      font-size: 2em;
      margin-top: 1.5em;
      margin-bottom: 0.8333333em;
      line-height: 1.0833333;
    }

    & h3 {
      font-size: 1.5em;
      margin-top: 1.5555556em;
      margin-bottom: 0.6666667em;
      line-height: 1.2222222;
    }

    & h4 {
      margin-top: 1.6666667em;
      margin-bottom: 0.6666667em;
      line-height: 1.5;
    }

    & img,
    & picture,
    & video {
      margin-top: 2em;
      margin-bottom: 2em;
    }

    & picture > img {
      margin-top: 0;
      margin-bottom: 0;
    }

    & kbd {
      font-size: 0.8333333em;
      border-radius: 0.375rem;
      padding-top: 0.25em;
      padding-inline-end: 0.3333333em;
      padding-bottom: 0.25em;
      padding-inline-start: 0.3333333em;
    }

    & code {
      font-size: 0.8333333em;
    }

    & h2 code {
      font-size: 0.875em;
    }

    & h3 code {
      font-size: 0.8888889em;
    }

    & pre {
      font-size: 0.8333333em;
      line-height: 1.8;
      margin-top: 2em;
      margin-bottom: 2em;
      border-radius: 0.5rem;
      padding-top: 1.2em;
      padding-inline-end: 1.6em;
      padding-bottom: 1.2em;
      padding-inline-start: 1.6em;
    }

    & ol,
    & ul {
      margin-top: 1.3333333em;
      margin-bottom: 1.3333333em;
      padding-inline-start: 1.5833333em;
    }

    & li {
      margin-top: 0.5em;
      margin-bottom: 0.5em;
    }

    & ol > li,
    & ul > li {
      padding-inline-start: 0.4166667em;
    }

    & > ul > li p {
      margin-top: 0.8333333em;
      margin-bottom: 0.8333333em;
    }

    & > ul > li > p:first-child,
    & > ol > li > p:first-child {
      margin-top: 1.3333333em;
    }

    & > ul > li > p:last-child,
    & > ol > li > p:last-child {
      margin-bottom: 1.3333333em;
    }

    & ul ul,
    & ul ol,
    & ol ul,
    & ol ol {
      margin-top: 0.6666667em;
      margin-bottom: 0.6666667em;
    }

    & dl {
      margin-top: 1.3333333em;
      margin-bottom: 1.3333333em;
    }

    & dt {
      margin-top: 1.3333333em;
    }

    & dd {
      margin-top: 0.5em;
      padding-inline-start: 1.5833333em;
    }

    & hr {
      margin-top: 3em;
      margin-bottom: 3em;
    }

    & table {
      font-size: 0.8333333em;
      line-height: 1.4;
    }

    & thead th {
      padding-inline-end: 0.6em;
      padding-bottom: 0.8em;
      padding-inline-start: 0.6em;
    }

    & thead th:first-child {
      padding-inline-start: 0;
    }

    & thead th:last-child {
      padding-inline-end: 0;
    }

    & tbody td,
    & tfoot td {
      padding-top: 0.8em;
      padding-inline-end: 0.6em;
      padding-bottom: 0.8em;
      padding-inline-start: 0.6em;
    }

    & tbody td:first-child,
    & tfoot td:first-child {
      padding-inline-start: 0;
    }

    & tbody td:last-child,
    & tfoot td:last-child {
      padding-inline-end: 0;
    }

    & figure {
      margin-top: 2em;
      margin-bottom: 2em;
    }

    & figure > * {
      margin-top: 0;
      margin-bottom: 0;
    }

    & figcaption {
      font-size: 0.8333333em;
      line-height: 1.6;
      margin-top: 1em;
    }

    & > :first-child {
      margin-top: 0;
    }

    & > :last-child {
      margin-bottom: 0;
    }
  }

  /* ==========================================================================
     Max Width Modifiers
     ========================================================================== */

  .eci-prose-full {
    max-width: none;
  }

  .eci-prose-narrow {
    max-width: 45ch;
  }

  .eci-prose-wide {
    max-width: 80ch;
  }
}

/* ==========================================================================
   Dark Mode / Invert
   Automatically adapts to dark theme via data-theme attribute
   ========================================================================== */

[data-theme="dark"] :is(eci-app-wrapper, .eci-elements-app) .eci-prose,
[data-theme="dark"] :is(eci-app-wrapper, .eci-elements-app) .eci-prose-sm,
[data-theme="dark"] :is(eci-app-wrapper, .eci-elements-app) .eci-prose-lg,
[data-theme="dark"] :is(eci-app-wrapper, .eci-elements-app) .eci-prose-xl,
[data-theme="dark"] :is(eci-app-wrapper, .eci-elements-app) .eci-prose-2xl,
:is(eci-app-wrapper, .eci-elements-app) [data-theme="dark"] .eci-prose,
:is(eci-app-wrapper, .eci-elements-app) [data-theme="dark"] .eci-prose-sm,
:is(eci-app-wrapper, .eci-elements-app) [data-theme="dark"] .eci-prose-lg,
:is(eci-app-wrapper, .eci-elements-app) [data-theme="dark"] .eci-prose-xl,
:is(eci-app-wrapper, .eci-elements-app) [data-theme="dark"] .eci-prose-2xl,
:is(eci-app-wrapper, .eci-elements-app) .eci-prose-invert {
  --eci-prose-body: var(--eci-color-text, #f3f3f3);
  --eci-prose-headings: var(--eci-color-text-white, #ffffff);
  --eci-prose-lead: var(--eci-color-neutral-400, #a3a3a3);
  --eci-prose-links: var(--eci-color-text-white, #ffffff);
  --eci-prose-bold: var(--eci-color-text-white, #ffffff);
  --eci-prose-counters: var(--eci-color-neutral-400, #a3a3a3);
  --eci-prose-bullets: var(--eci-color-neutral-600, #525252);
  --eci-prose-hr: var(--eci-color-neutral-700, #404040);
  --eci-prose-quotes: var(--eci-color-neutral-100, #f5f5f5);
  --eci-prose-quote-borders: var(--eci-color-neutral-700, #404040);
  --eci-prose-captions: var(--eci-color-neutral-400, #a3a3a3);
  --eci-prose-kbd: var(--eci-color-text-white, #ffffff);
  --eci-prose-kbd-shadows: color-mix(in oklch, var(--eci-color-text-white, #ffffff) 10%, transparent);
  --eci-prose-code: var(--eci-color-text-white, #ffffff);
  --eci-prose-pre-code: var(--eci-color-neutral-300, #d4d4d4);
  --eci-prose-pre-bg: rgb(0 0 0 / 50%);
  --eci-prose-th-borders: var(--eci-color-neutral-600, #525252);
  --eci-prose-td-borders: var(--eci-color-neutral-700, #404040);
}

:is(eci-app-wrapper, .eci-elements-app) {
  .absolute {
    position: absolute;
  }

  .relative {
    position: relative;
  }

  .sticky {
    position: sticky;
  }

  .t-0    { top: 0; }
  .t-1    { top: 0.25rem; }
  .t-2    { top: 0.5rem; }
  .t-3    { top: 0.75rem; }
  .t-4    { top: 1rem; }
  .t-5    { top: 1.25rem; }
  .t-6    { top: 1.5rem; }
  .t-7    { top: 1.75rem; }
  .t-8    { top: 2rem; }
  .t-9    { top: 2.25rem; }
  .t-10   { top: 2.5rem; }
  .t-11   { top: 2.75rem; }
  .t-12   { top: 3rem; }
  .t-13   { top: 3.25rem; }
  .t-14   { top: 3.5rem; }
  .t-15   { top: 3.75rem; }
  .t-16   { top: 4rem; }
  .t-17   { top: 4.25rem; }
  .t-18   { top: 4.5rem; }
  .t-19   { top: 4.75rem; }
  .t-20   { top: 5rem; }
  .t-21   { top: 5.25rem; }
  .t-22   { top: 5.5rem; }
  .t-23   { top: 5.75rem; }
  .t-24   { top: 6rem; }
  .t-25   { top: 6.25rem; }
  .t-26   { top: 6.5rem; }
  .t-27   { top: 6.75rem; }
  .t-28   { top: 7rem; }
  .t-29   { top: 7.25rem; }
  .t-30   { top: 7.5rem; }
  .t-31   { top: 7.75rem; }
  .t-32   { top: 8rem; }
  .t-33   { top: 8.25rem; }
  .t-34   { top: 8.5rem; }
  .t-35   { top: 8.75rem; }
  .t-36   { top: 9rem; }

  .r-0    { right: 0; }
  .r-1    { right: 0.25rem; }
  .r-2    { right: 0.5rem; }
  .r-3    { right: 0.75rem; }
  .r-4    { right: 1rem; }
  .r-5    { right: 1.25rem; }
  .r-6    { right: 1.5rem; }
  .r-7    { right: 1.75rem; }
  .r-8    { right: 2rem; }
  .r-9    { right: 2.25rem; }
  .r-10   { right: 2.5rem; }
  .r-11   { right: 2.75rem; }
  .r-12   { right: 3rem; }
  .r-13   { right: 3.25rem; }
  .r-14   { right: 3.5rem; }
  .r-15   { right: 3.75rem; }
  .r-16   { right: 4rem; }
  .r-17   { right: 4.25rem; }
  .r-18   { right: 4.5rem; }
  .r-19   { right: 4.75rem; }
  .r-20   { right: 5rem; }
  .r-21   { right: 5.25rem; }
  .r-22   { right: 5.5rem; }
  .r-23   { right: 5.75rem; }
  .r-24   { right: 6rem; }
  .r-25   { right: 6.25rem; }
  .r-26   { right: 6.5rem; }
  .r-27   { right: 6.75rem; }
  .r-28   { right: 7rem; }
  .r-29   { right: 7.25rem; }
  .r-30   { right: 7.5rem; }
  .r-31   { right: 7.75rem; }
  .r-32   { right: 8rem; }
  .r-33   { right: 8.25rem; }
  .r-34   { right: 8.5rem; }
  .r-35   { right: 8.75rem; }
  .r-36   { right: 9rem; }

  .b-0    { bottom: 0; }
  .b-1    { bottom: 0.25rem; }
  .b-2    { bottom: 0.5rem; }
  .b-3    { bottom: 0.75rem; }
  .b-4    { bottom: 1rem; }
  .b-5    { bottom: 1.25rem; }
  .b-6    { bottom: 1.5rem; }
  .b-7    { bottom: 1.75rem; }
  .b-8    { bottom: 2rem; }
  .b-9    { bottom: 2.25rem; }
  .b-10   { bottom: 2.5rem; }
  .b-11   { bottom: 2.75rem; }
  .b-12   { bottom: 3rem; }
  .b-13   { bottom: 3.25rem; }
  .b-14   { bottom: 3.5rem; }
  .b-15   { bottom: 3.75rem; }
  .b-16   { bottom: 4rem; }
  .b-17   { bottom: 4.25rem; }
  .b-18   { bottom: 4.5rem; }
  .b-19   { bottom: 4.75rem; }
  .b-20   { bottom: 5rem; }
  .b-21   { bottom: 5.25rem; }
  .b-22   { bottom: 5.5rem; }
  .b-23   { bottom: 5.75rem; }
  .b-24   { bottom: 6rem; }
  .b-25   { bottom: 6.25rem; }
  .b-26   { bottom: 6.5rem; }
  .b-27   { bottom: 6.75rem; }
  .b-28   { bottom: 7rem; }
  .b-29   { bottom: 7.25rem; }
  .b-30   { bottom: 7.5rem; }
  .b-31   { bottom: 7.75rem; }
  .b-32   { bottom: 8rem; }
  .b-33   { bottom: 8.25rem; }
  .b-34   { bottom: 8.5rem; }
  .b-35   { bottom: 8.75rem; }
  .b-36   { bottom: 9rem; }

  .l-0    { left: 0; }
  .l-1    { left: 0.25rem; }
  .l-2    { left: 0.5rem; }
  .l-3    { left: 0.75rem; }
  .l-4    { left: 1rem; }
  .l-5    { left: 1.25rem; }
  .l-6    { left: 1.5rem; }
  .l-7    { left: 1.75rem; }
  .l-8    { left: 2rem; }
  .l-9    { left: 2.25rem; }
  .l-10   { left: 2.5rem; }
  .l-11   { left: 2.75rem; }
  .l-12   { left: 3rem; }
  .l-13   { left: 3.25rem; }
  .l-14   { left: 3.5rem; }
  .l-15   { left: 3.75rem; }
  .l-16   { left: 4rem; }
  .l-17   { left: 4.25rem; }
  .l-18   { left: 4.5rem; }
  .l-19   { left: 4.75rem; }
  .l-20   { left: 5rem; }
  .l-21   { left: 5.25rem; }
  .l-22   { left: 5.5rem; }
  .l-23   { left: 5.75rem; }
  .l-24   { left: 6rem; }
  .l-25   { left: 6.25rem; }
  .l-26   { left: 6.5rem; }
  .l-27   { left: 6.75rem; }
  .l-28   { left: 7rem; }
  .l-29   { left: 7.25rem; }
  .l-30   { left: 7.5rem; }
  .l-31   { left: 7.75rem; }
  .l-32   { left: 8rem; }
  .l-33   { left: 8.25rem; }
  .l-34   { left: 8.5rem; }
  .l-35   { left: 8.75rem; }
  .l-36   { left: 9rem; }
}

/* ==========================================================================
   Markdown Utility Styles
   ========================================================================== */

/*
 * Custom property cascade (first match wins; omit a layer to use the next):
 *   1) Element/context — e.g. --eci-markdown-blockquote-margin-top
 *   2) Markdown-wide — shared knobs below (set on .eci-markdown or :root)
 *   3) Foundation — --eci-spacing-*, --eci-font-*, --eci-color-*, etc.
 *
 * Markdown-wide spacing (optional; each falls back to the previous default):
 *   --eci-markdown-stack-gap / -loose / -tight / -compact / -dense / -micro
 *   --eci-markdown-list-item-gap, --eci-markdown-list-indent (list padding-inline-start)
 *   --eci-markdown-heading-margin-top-major | -minor
 *   --eci-markdown-heading-margin-bottom-loose | -tight
 *   --eci-markdown-heading-subheading-gap-* (h1+h2, h2+h3, …)
 * Prose color: --eci-markdown-prose-color (muted body text)
 * Headings: --eci-markdown-heading-text-color
 * Code surfaces: --eci-markdown-code-font-family, --eci-markdown-code-surface-bg, --eci-markdown-code-block-bg, --eci-markdown-code-text-color
 * Links: --eci-markdown-interactive-primary (+ -hover, -visited)
 * Quotes: --eci-markdown-accent-border-muted
 * After long blocks: --eci-markdown-heading-after-block-margin, -minor
 */

/* Base markdown container */

.eci-markdown {
  all: initial;
  font-size: var(--eci-markdown-font-size, var(--eci-font-size-sm));
  line-height: var(--eci-markdown-line-height, var(--eci-line-height-relaxed));
  font-family: var(--eci-markdown-font-family, var(--eci-font-family));
  color: var(--eci-markdown-text-color, var(--eci-markdown-prose-color, var(--eci-color-text-light)));
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Typography Hierarchy */

.eci-markdown h1,
.eci-markdown h2,
.eci-markdown h3,
.eci-markdown h4,
.eci-markdown h5,
.eci-markdown h6 {
  scroll-margin-top: var(--eci-markdown-heading-scroll-margin, var(--eci-markdown-scroll-margin-top, 6rem));
}

.eci-markdown h1 {
  font-size: var(--eci-markdown-h1-font-size, var(--eci-font-size-2xl)); /* 30px */
  font-weight: var(--eci-font-weight-bold);
  line-height: var(--eci-line-height-tight);
  margin-top: 0;
  margin-bottom: var(--eci-markdown-h1-margin-bottom, var(--eci-markdown-stack-gap-loose, var(--eci-spacing-6))); /* 24px */
  color: var(--eci-markdown-heading-text-color, var(--eci-color-text));
}

.eci-markdown h2 {
  font-size: var(--eci-markdown-h2-font-size, var(--eci-font-size-xl)); /* 26px - between 2xl and 3xl */
  font-weight: var(--eci-font-weight-semibold);
  line-height: var(--eci-line-height-snug);
  letter-spacing: var(--eci-letter-spacing-tight);
  margin-top: var(--eci-markdown-h2-margin-top, var(--eci-markdown-heading-margin-top-major, var(--eci-spacing-8))); /* 32px */
  margin-bottom: var(--eci-markdown-h2-margin-bottom, var(--eci-markdown-heading-margin-bottom-loose, var(--eci-spacing-4))); /* 16px */
  color: var(--eci-markdown-heading-text-color, var(--eci-color-text));
}

.eci-markdown h3 {
  font-size: var(--eci-markdown-h3-font-size, var(--eci-font-size-lg)); /* 18px */
  font-weight: var(--eci-font-weight-semibold);
  line-height: var(--eci-line-height-snug);
  margin-top: var(--eci-markdown-h3-margin-top, var(--eci-markdown-heading-margin-top-major, var(--eci-spacing-6))); /* 24px */
  margin-bottom: var(--eci-markdown-h3-margin-bottom, var(--eci-markdown-heading-margin-bottom-loose, var(--eci-spacing-3))); /* 12px */
  color: var(--eci-markdown-heading-text-color, var(--eci-color-text));
}

.eci-markdown h4 {
  font-size: var(--eci-font-size-sm);
  font-weight: var(--eci-font-weight-semibold);
  line-height: var(--eci-line-height-normal);
  margin-top: var(--eci-markdown-h4-margin-top, var(--eci-markdown-heading-margin-top-major, var(--eci-spacing-5))); /* 20px */
  margin-bottom: var(--eci-markdown-h4-margin-bottom, var(--eci-markdown-heading-margin-bottom-tight, var(--eci-spacing-2))); /* 8px */
  color: var(--eci-markdown-heading-text-color, var(--eci-color-text));
}

.eci-markdown h5,
.eci-markdown h6 {
  font-size: var(--eci-font-size-sm);
  font-weight: var(--eci-font-weight-semibold);
  line-height: var(--eci-line-height-normal);
  margin-top: var(--eci-markdown-h5-margin-top, var(--eci-markdown-heading-margin-top-minor, var(--eci-spacing-4))); /* 16px */
  margin-bottom: var(--eci-markdown-h5-margin-bottom, var(--eci-markdown-heading-margin-bottom-tight, var(--eci-spacing-2))); /* 8px */
  color: var(--eci-markdown-heading-text-color, var(--eci-color-text));
}

/* Remove top margin when heading is the first element */

.eci-markdown > h1:first-child,
.eci-markdown > h2:first-child,
.eci-markdown > h3:first-child,
.eci-markdown > h4:first-child,
.eci-markdown > h5:first-child,
.eci-markdown > h6:first-child {
  margin-top: 0;
}

/* Reduce spacing when subheading directly follows a parent heading */

.eci-markdown h1 + h2 {
  margin-top: var(--eci-markdown-heading-subheading-gap-h1-h2, var(--eci-markdown-stack-gap-loose, var(--eci-spacing-6)));
}

.eci-markdown h2 + h3 {
  margin-top: var(--eci-markdown-heading-subheading-gap-h2-h3, var(--eci-markdown-heading-subheading-gap, var(--eci-spacing-5)));
}

.eci-markdown h3 + h4 {
  margin-top: var(--eci-markdown-heading-subheading-gap-h3-h4, var(--eci-markdown-heading-subheading-gap, var(--eci-spacing-4)));
}

.eci-markdown h4 + h5,
.eci-markdown h4 + h6,
.eci-markdown h5 + h6 {
  margin-top: var(--eci-markdown-heading-subheading-gap-h4-h6, var(--eci-markdown-stack-gap-tight, var(--eci-spacing-3)));
}

/* First element after heading - close relationship but still breathing room */

.eci-markdown h1 + p,
.eci-markdown h2 + p,
.eci-markdown h3 + p,
.eci-markdown h4 + p,
.eci-markdown h5 + p,
.eci-markdown h6 + p {
  margin-top: var(--eci-markdown-heading-to-body-gap, var(--eci-markdown-stack-gap, var(--eci-spacing-4))); /* 16px - close relationship to heading */
}

.eci-markdown h1 + ul,
.eci-markdown h1 + ol,
.eci-markdown h2 + ul,
.eci-markdown h2 + ol,
.eci-markdown h3 + ul,
.eci-markdown h3 + ol,
.eci-markdown h4 + ul,
.eci-markdown h4 + ol,
.eci-markdown h5 + ul,
.eci-markdown h5 + ol,
.eci-markdown h6 + ul,
.eci-markdown h6 + ol {
  margin-top: var(--eci-markdown-heading-to-body-gap, var(--eci-markdown-stack-gap, var(--eci-spacing-4))); /* 16px - close relationship to heading */
}

/* List following paragraph - tight connection */

.eci-markdown p + ul,
.eci-markdown p + ol {
  margin-top: var(--eci-markdown-paragraph-to-list-gap, var(--eci-markdown-stack-gap-tight, var(--eci-spacing-3))); /* 12px - list belongs to preceding paragraph */
}

/* Paragraphs */

.eci-markdown p {
  margin-top: var(--eci-markdown-p-margin-top, var(--eci-markdown-stack-gap-loose, var(--eci-spacing-6))); /* 24px */
  margin-bottom: var(--eci-markdown-p-margin-bottom, var(--eci-markdown-stack-gap-loose, var(--eci-spacing-6))); /* 24px */
  line-height: var(--eci-markdown-p-line-height, 1.75);
  color: var(--eci-markdown-text-color, var(--eci-markdown-prose-color, var(--eci-color-text-light)));
}

/* Lead text */

.eci-markdown .lead {
  font-size: var(--eci-font-size-xl); /* 20px */
  line-height: var(--eci-line-height-snug);
  margin-top: var(--eci-markdown-lead-margin-top, var(--eci-markdown-stack-gap-loose, var(--eci-spacing-6))); /* 24px */
  margin-bottom: var(--eci-markdown-lead-margin-bottom, var(--eci-markdown-stack-gap-loose, var(--eci-spacing-6))); /* 24px */
  color: var(--eci-markdown-lead-text-color, var(--eci-markdown-prose-color, var(--eci-color-text-light)));
}

/* Lists */

.eci-markdown ul {
  list-style-type: disc;
  margin-top: var(--eci-markdown-list-margin-top, var(--eci-markdown-stack-gap, var(--eci-spacing-4))); /* 16px - tighter connection to preceding paragraph */
  margin-bottom: var(--eci-markdown-list-margin-bottom, var(--eci-markdown-stack-gap-loose, var(--eci-spacing-6))); /* 24px */
  padding-inline-start: var(--eci-markdown-list-padding-inline-start, var(--eci-markdown-list-indent, var(--eci-spacing-5))); /* 20px */
  color: var(--eci-markdown-text-color, var(--eci-markdown-prose-color, var(--eci-color-text-light)));
}

.eci-markdown ol {
  list-style-type: decimal;
  margin-top: var(--eci-markdown-list-margin-top, var(--eci-markdown-stack-gap, var(--eci-spacing-4))); /* 16px - tighter connection to preceding paragraph */
  margin-bottom: var(--eci-markdown-list-margin-bottom, var(--eci-markdown-stack-gap-loose, var(--eci-spacing-6))); /* 24px */
  padding-inline-start: var(--eci-markdown-list-padding-inline-start, var(--eci-markdown-list-indent, var(--eci-spacing-5))); /* 20px */
  color: var(--eci-markdown-text-color, var(--eci-markdown-prose-color, var(--eci-color-text-light)));
}

.eci-markdown ul > li::marker,
.eci-markdown ol > li::marker {
  color: var(--eci-markdown-text-color, var(--eci-markdown-prose-color, var(--eci-color-text-light)));
}

.eci-markdown li {
  margin-top: var(--eci-markdown-li-margin-block, var(--eci-markdown-list-item-gap, var(--eci-spacing-1-5))); /* 6px - tighter list items */
  margin-bottom: var(--eci-markdown-li-margin-block, var(--eci-markdown-list-item-gap, var(--eci-spacing-1-5))); /* 6px */
  line-height: 1.75;
}

/* Top-level list items - slightly more room than nested */

.eci-markdown > ul > li,
.eci-markdown > ol > li {
  margin-top: var(--eci-markdown-list-item-top-level-margin-block, var(--eci-markdown-stack-gap-compact, var(--eci-spacing-2))); /* 8px */
  margin-bottom: var(--eci-markdown-list-item-top-level-margin-block, var(--eci-markdown-stack-gap-compact, var(--eci-spacing-2))); /* 8px */
}

.eci-markdown ol > li,
.eci-markdown ul > li {
  padding-inline-start: var(--eci-markdown-list-item-padding-inline-start, var(--eci-markdown-list-item-indent, var(--eci-spacing-1-5))); /* 6px */
}

/* Nested lists - minimal margins since indentation provides visual separation */

.eci-markdown ul ul,
.eci-markdown ul ol,
.eci-markdown ol ul,
.eci-markdown ol ol {
  margin-top: var(--eci-markdown-nested-list-margin-block, var(--eci-markdown-stack-gap-dense, var(--eci-spacing-1))); /* 4px */
  margin-bottom: var(--eci-markdown-nested-list-margin-block, var(--eci-markdown-stack-gap-dense, var(--eci-spacing-1))); /* 4px */
}

/* Remove extra margin when nested list immediately follows parent list item text */

.eci-markdown li > ul,
.eci-markdown li > ol {
  margin-top: var(--eci-markdown-nested-list-after-li-margin-top, var(--eci-markdown-stack-gap-dense, var(--eci-spacing-1))); /* 4px */
  margin-bottom: 0;
}

/* List items containing nested lists need tighter spacing */

.eci-markdown li:has(> ul),
.eci-markdown li:has(> ol) {
  margin-bottom: var(--eci-markdown-li-with-nested-list-margin-bottom, var(--eci-markdown-stack-gap-dense, var(--eci-spacing-1))); /* 4px */
}

/* Nested list items can be even tighter */

.eci-markdown ul ul > li,
.eci-markdown ul ol > li,
.eci-markdown ol ul > li,
.eci-markdown ol ol > li {
  margin-top: var(--eci-markdown-nested-list-item-margin-block, var(--eci-markdown-stack-gap-micro, var(--eci-spacing-0-5))); /* 2px */
  margin-bottom: var(--eci-markdown-nested-list-item-margin-block, var(--eci-markdown-stack-gap-micro, var(--eci-spacing-0-5))); /* 2px */
}

/* List paragraphs */

.eci-markdown li > p {
  margin-top: var(--eci-markdown-li-paragraph-margin-block, var(--eci-markdown-stack-gap-dense, var(--eci-spacing-1))); /* 4px */
  margin-bottom: var(--eci-markdown-li-paragraph-margin-block, var(--eci-markdown-stack-gap-dense, var(--eci-spacing-1))); /* 4px */
}

.eci-markdown li > p:first-child {
  margin-top: 0;
}

.eci-markdown li > p:last-child {
  margin-bottom: 0;
}

/* Definition Lists */

.eci-markdown dl {
  margin-top: var(--eci-markdown-dl-margin-block, var(--eci-markdown-stack-gap, var(--eci-spacing-4))); /* 16px */
  margin-bottom: var(--eci-markdown-dl-margin-block, var(--eci-markdown-stack-gap, var(--eci-spacing-4))); /* 16px */
}

.eci-markdown dt {
  font-weight: var(--eci-font-weight-semibold);
  margin-top: var(--eci-markdown-dt-margin-top, var(--eci-markdown-stack-gap-tight, var(--eci-spacing-3))); /* 12px */
  color: var(--eci-markdown-heading-text-color, var(--eci-color-text));
}

.eci-markdown dt:first-child {
  margin-top: 0;
}

.eci-markdown dd {
  margin-top: var(--eci-markdown-dd-margin-top, var(--eci-markdown-stack-gap-dense, var(--eci-spacing-1))); /* 4px */
  padding-inline-start: var(--eci-markdown-dd-padding-inline-start, var(--eci-markdown-list-indent, var(--eci-spacing-5))); /* 20px */
  color: var(--eci-markdown-prose-color, var(--eci-color-text-light));
}

/* Code */

.eci-markdown code {
  font-size: var(--eci-markdown-inline-code-font-size, var(--eci-font-size-sm)); /* 14px */
  font-family: var(--eci-markdown-inline-code-font-family, var(--eci-markdown-code-font-family, var(--eci-font-family-mono)));
  background-color: var(--eci-markdown-inline-code-bg, var(--eci-markdown-code-surface-bg, var(--eci-color-neutral-100)));
  color: var(--eci-markdown-inline-code-color, var(--eci-markdown-code-text-color, var(--eci-color-text)));
  padding: var(--eci-markdown-inline-code-padding-block, var(--eci-markdown-stack-gap-micro, var(--eci-spacing-0-5)))
    var(--eci-markdown-inline-code-padding-inline, var(--eci-markdown-stack-gap-dense, var(--eci-spacing-1))); /* 2px 4px */
  border-radius: var(--eci-markdown-inline-code-border-radius, var(--eci-border-radius-sm));
  font-weight: var(--eci-markdown-inline-code-font-weight, var(--eci-font-weight-medium));
}

.eci-markdown h2 code {
  font-size: calc(var(--eci-font-size-2xl) * 0.875); /* ~21px */
}

.eci-markdown h3 code {
  font-size: calc(var(--eci-font-size-xl) * 0.9); /* ~18px */
}

/* Pre-formatted code blocks */

.eci-markdown pre {
  font-size: var(--eci-markdown-pre-font-size, var(--eci-font-size-sm)); /* 14px */
  line-height: var(--eci-markdown-pre-line-height, var(--eci-line-height-relaxed));
  margin-top: var(--eci-markdown-pre-margin-top, var(--eci-markdown-stack-gap, var(--eci-spacing-4))); /* 16px */
  margin-bottom: var(--eci-markdown-pre-margin-bottom, var(--eci-markdown-stack-gap, var(--eci-spacing-4))); /* 16px */
  padding: var(--eci-markdown-pre-padding-block, var(--eci-markdown-stack-gap-tight, var(--eci-spacing-3)))
    var(--eci-markdown-pre-padding-inline, var(--eci-markdown-stack-gap, var(--eci-spacing-4))); /* 12px 16px */
  background-color: var(--eci-markdown-pre-bg, var(--eci-markdown-code-block-bg, var(--eci-color-neutral-50)));
  border: var(--eci-markdown-pre-border, var(--eci-border-thin));
  border-radius: var(--eci-markdown-pre-border-radius, var(--eci-border-radius-md));
  overflow-x: auto;
  font-family: var(--eci-markdown-pre-font-family, var(--eci-markdown-code-font-family, var(--eci-font-family-mono)));
}

.eci-markdown pre code {
  background-color: transparent;
  padding: 0;
  font-size: inherit;
  color: inherit;
  border-radius: 0;
}

/* Keyboard keys */

.eci-markdown kbd {
  font-size: var(--eci-markdown-kbd-font-size, var(--eci-font-size-sm)); /* 14px */
  font-family: var(--eci-markdown-kbd-font-family, var(--eci-markdown-code-font-family, var(--eci-font-family-mono)));
  background-color: var(--eci-markdown-kbd-bg, var(--eci-markdown-code-surface-bg, var(--eci-color-neutral-100)));
  color: var(--eci-markdown-kbd-color, var(--eci-markdown-code-text-color, var(--eci-color-text)));
  padding: var(--eci-markdown-kbd-padding-block, var(--eci-markdown-stack-gap-micro, var(--eci-spacing-0-5)))
    var(--eci-markdown-kbd-padding-inline, var(--eci-markdown-stack-gap-tight, var(--eci-spacing-1-5))); /* 2px 6px */
  border-radius: var(--eci-markdown-kbd-border-radius, var(--eci-border-radius-sm));
  border: var(--eci-markdown-kbd-border, var(--eci-border-thin));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  font-weight: var(--eci-font-weight-medium);
}

/* Blockquotes */

.eci-markdown blockquote {
  margin-top: var(--eci-markdown-blockquote-margin-top, var(--eci-markdown-stack-gap, var(--eci-spacing-4))); /* 16px */
  margin-bottom: var(--eci-markdown-blockquote-margin-bottom, var(--eci-markdown-stack-gap, var(--eci-spacing-4))); /* 16px */
  margin-inline-start: var(--eci-markdown-blockquote-margin-inline-start, 0);
  padding-inline-start: var(--eci-markdown-blockquote-padding-inline-start, var(--eci-markdown-stack-gap, var(--eci-spacing-4))); /* 16px */
  border-inline-start: var(--eci-markdown-blockquote-border-width, var(--eci-border-width-4)) solid
    var(--eci-markdown-blockquote-border-color, var(--eci-markdown-accent-border-muted, var(--eci-color-primary-200)));
  color: var(--eci-markdown-blockquote-text-color, var(--eci-markdown-prose-color, var(--eci-color-text-light)));
  font-style: var(--eci-markdown-blockquote-font-style, italic);
}

.eci-markdown blockquote p {
  margin-top: 0;
  margin-bottom: 0;
}

.eci-markdown blockquote p + p {
  margin-top: var(--eci-markdown-blockquote-paragraph-gap, var(--eci-markdown-stack-gap-compact, var(--eci-spacing-2))); /* 8px between paragraphs in blockquotes */
}

/* Links */

.eci-markdown a {
  color: var(--eci-markdown-link-color, var(--eci-markdown-interactive-primary, var(--eci-color-primary-600)));
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.eci-markdown a:hover {
  color: var(--eci-markdown-link-hover-color, var(--eci-markdown-interactive-primary-hover, var(--eci-color-primary-700)));
}

.eci-markdown a:visited {
  color: var(--eci-markdown-link-visited-color, var(--eci-markdown-interactive-primary-visited, var(--eci-color-primary-800)));
}

/* Images and Media */

.eci-markdown img,
.eci-markdown picture,
.eci-markdown video {
  margin-top: var(--eci-markdown-media-margin-top, var(--eci-markdown-stack-gap, var(--eci-spacing-4))); /* 16px */
  margin-bottom: var(--eci-markdown-media-margin-bottom, var(--eci-markdown-stack-gap, var(--eci-spacing-4))); /* 16px */
  max-width: 100%;
  height: auto;
}

.eci-markdown picture > img {
  margin-top: 0;
  margin-bottom: 0;
}

/* Figures */

.eci-markdown figure {
  margin-top: var(--eci-markdown-figure-margin-top, var(--eci-markdown-stack-gap, var(--eci-spacing-4))); /* 16px */
  margin-bottom: var(--eci-markdown-figure-margin-bottom, var(--eci-markdown-stack-gap, var(--eci-spacing-4))); /* 16px */
}

.eci-markdown figure > * {
  margin-top: 0;
  margin-bottom: 0;
}

.eci-markdown figcaption {
  font-size: var(--eci-markdown-figcaption-font-size, var(--eci-font-size-sm)); /* 14px */
  line-height: var(--eci-markdown-figcaption-line-height, var(--eci-line-height-normal));
  color: var(--eci-markdown-figcaption-text-color, var(--eci-markdown-prose-color, var(--eci-color-text-light)));
  margin-top: var(--eci-markdown-figcaption-margin-top, var(--eci-markdown-stack-gap-tight, var(--eci-spacing-3))); /* 12px */
  text-align: var(--eci-markdown-figcaption-text-align, center);
  font-style: var(--eci-markdown-figcaption-font-style, italic);
}

/* Tables */

.eci-markdown table {
  width: 100%;
  margin-top: var(--eci-markdown-table-margin-top, var(--eci-markdown-stack-gap, var(--eci-spacing-4))); /* 16px */
  margin-bottom: var(--eci-markdown-table-margin-bottom, var(--eci-markdown-stack-gap, var(--eci-spacing-4))); /* 16px */
  border-collapse: collapse;
  font-size: var(--eci-markdown-table-font-size, var(--eci-font-size-sm)); /* 14px */
  line-height: var(--eci-markdown-table-line-height, var(--eci-line-height-relaxed));
}

.eci-markdown thead th {
  padding: var(--eci-markdown-table-header-padding-block, var(--eci-markdown-table-cell-padding-block, var(--eci-markdown-stack-gap-compact, var(--eci-spacing-2))))
    var(--eci-markdown-table-header-padding-inline, var(--eci-markdown-table-cell-padding-inline, var(--eci-markdown-stack-gap-compact, var(--eci-spacing-2)))); /* 8px */
  border-bottom: var(--eci-markdown-table-header-border-bottom, var(--eci-border-medium));
  font-weight: var(--eci-markdown-table-header-font-weight, var(--eci-font-weight-semibold));
  text-align: left;
  color: var(--eci-markdown-table-header-text-color, var(--eci-markdown-heading-text-color, var(--eci-color-text)));
}

.eci-markdown thead th:first-child {
  padding-inline-start: 0;
}

.eci-markdown thead th:last-child {
  padding-inline-end: 0;
}

.eci-markdown tbody td,
.eci-markdown tfoot td {
  padding: var(--eci-markdown-table-cell-padding-block, var(--eci-markdown-stack-gap-compact, var(--eci-spacing-2)))
    var(--eci-markdown-table-cell-padding-inline, var(--eci-markdown-stack-gap-compact, var(--eci-spacing-2))); /* 8px */
  border-bottom: var(--eci-markdown-table-cell-border-bottom, var(--eci-border-thin));
  vertical-align: top;
}

.eci-markdown tbody td:first-child,
.eci-markdown tfoot td:first-child {
  padding-inline-start: 0;
}

.eci-markdown tbody td:last-child,
.eci-markdown tfoot td:last-child {
  padding-inline-end: 0;
}

.eci-markdown tbody tr:last-child td {
  border-bottom: none;
}

/* Horizontal Rules */

.eci-markdown hr {
  margin-top: var(--eci-markdown-hr-margin-top, var(--eci-markdown-stack-gap-loose, var(--eci-spacing-6))); /* 24px */
  margin-bottom: var(--eci-markdown-hr-margin-bottom, var(--eci-markdown-stack-gap-loose, var(--eci-spacing-6))); /* 24px */
  border: none;
  border-top: var(--eci-markdown-hr-border-top, var(--eci-border-thin));
  color: var(--eci-markdown-hr-color, var(--eci-color-border-default));
}

/* Reset margins for elements following headers and hr */

.eci-markdown hr + *,
.eci-markdown h1 + *,
.eci-markdown h2 + *,
.eci-markdown h3 + *,
.eci-markdown h4 + *,
.eci-markdown h5 + *,
.eci-markdown h6 + * {
  margin-top: 0;
}

/* Headers following content blocks - reduce combined spacing */

.eci-markdown p + h2,
.eci-markdown ul + h2,
.eci-markdown ol + h2 {
  margin-top: var(--eci-markdown-h2-after-block-margin-top, var(--eci-markdown-heading-after-block-margin, var(--eci-spacing-8))); /* 32px */
}

.eci-markdown p + h3,
.eci-markdown ul + h3,
.eci-markdown ol + h3 {
  margin-top: var(--eci-markdown-h3-after-block-margin-top, var(--eci-markdown-heading-after-block-margin, var(--eci-spacing-6))); /* 24px */
}

.eci-markdown p + h4,
.eci-markdown ul + h4,
.eci-markdown ol + h4 {
  margin-top: var(--eci-markdown-h4-after-block-margin-top, var(--eci-markdown-stack-gap, var(--eci-spacing-5))); /* 20px */
}

.eci-markdown p + h5,
.eci-markdown p + h6,
.eci-markdown ul + h5,
.eci-markdown ul + h6,
.eci-markdown ol + h5,
.eci-markdown ol + h6 {
  margin-top: var(
    --eci-markdown-h5-h6-after-block-margin-top,
    var(--eci-markdown-heading-after-block-margin-minor, var(--eci-markdown-stack-gap-tight, var(--eci-spacing-3)))
  ); /* 12px */
}

/* First and last child margin reset */

.eci-markdown > :first-child {
  margin-top: 0;
}

.eci-markdown > :last-child {
  margin-bottom: 0;
}

/* Emphasis and Strong */

.eci-markdown em {
  font-style: italic;
}

.eci-markdown strong {
  font-weight: var(--eci-markdown-strong-font-weight, var(--eci-font-weight-semibold));
  color: var(--eci-markdown-strong-text-color, var(--eci-markdown-heading-text-color, var(--eci-color-text)));
}

/* Small text */

.eci-markdown small {
  font-size: var(--eci-markdown-small-font-size, var(--eci-font-size-sm));
  color: var(--eci-markdown-small-text-color, var(--eci-markdown-prose-color, var(--eci-color-text-light)));
}

/* Mark/Highlight */

.eci-markdown mark {
  background-color: var(--eci-markdown-mark-bg, var(--eci-markdown-highlight-bg, var(--eci-color-warning-100)));
  color: var(--eci-markdown-mark-text-color, var(--eci-markdown-highlight-text-color, var(--eci-color-text)));
  padding: var(--eci-markdown-mark-padding-block, var(--eci-markdown-stack-gap-micro, var(--eci-spacing-0-5)))
    var(--eci-markdown-mark-padding-inline, var(--eci-markdown-stack-gap-dense, var(--eci-spacing-1)));
  border-radius: var(--eci-markdown-mark-border-radius, var(--eci-border-radius-sm));
}

/* Abbreviations */

.eci-markdown abbr {
  text-decoration: underline dotted;
  cursor: help;
}

/* Subscript and Superscript */

.eci-markdown sub,
.eci-markdown sup {
  font-size: var(--eci-markdown-sub-sup-font-size, var(--eci-font-size-xs));
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

.eci-markdown sub {
  bottom: -0.25em;
}

.eci-markdown sup {
  top: -0.5em;
}

/* ── Image classes ──────────────────────────────────────────────────────── */

.eci-markdown .eci-image {
  display: block;
}

.eci-markdown .eci-image--hero {
  background-color: var(--eci-color-surface-secondary);
  padding: var(--eci-spacing-4);
  border-radius: var(--eci-radius-md, var(--eci-radius-lg, 0.5rem));
  margin: 0;
}

.eci-markdown .eci-image--hero img {
  width: 100%;
  display: block;
  border-radius: calc(var(--eci-radius-md, var(--eci-radius-lg, 0.5rem)) / 2);
}

/* Dark / light variant toggling via CSS custom properties.
   Custom properties pierce the shadow DOM, so this works inside eci-markdown. */

.eci-markdown .eci-image__dark  { display: var(--eci-image-dark-variant-display,  none);  }

.eci-markdown .eci-image__light { display: var(--eci-image-light-variant-display, block); }

/* ── Image size variants ────────────────────────────────────────────────────
   Set via markdown title token: ![alt](url "sm"), ![alt](url "md center"), etc.
   Tokens map to eci-image--{tok} classes via markdown-utils.ts renderer. */

.eci-markdown .eci-image--sm  { max-width: 200px; }

.eci-markdown .eci-image--md  { max-width: 400px; }

.eci-markdown .eci-image--lg  { max-width: 640px; }

.eci-markdown .eci-image--center { margin-inline: auto; }

.eci-markdown .eci-image--sm img,
.eci-markdown .eci-image--md img,
.eci-markdown .eci-image--lg img { width: 100%; height: auto; }

/* Themes - Dark theme is optional. Import dark.css separately if needed. */

/* ==========================================================================
 *  Opt-in Global Reset: .eci-elements
 *  ==========================================================================
 *
 *  Add class="eci-elements" to your <html> or <body> tag to enable a complete
 *  CSS reset scoped to your application's light DOM. This includes:
 *    - Box-sizing border-box on all elements
 *    - Typography baseline (font-family, size, line-height, smoothing)
 *    - Media element defaults (block display, max-width)
 *    - Form element font inheritance
 *    - Text overflow handling on headings/paragraphs
 *
 *  Shadow DOM components manage their own styles and are unaffected.
 *
 *  Example:
 *    <body class="eci-elements">
 *
 *  Teams embedding individual ECI components without this class will only
 *  receive CSS custom properties (design tokens) — no element styling.
 * ========================================================================== */

/* Box sizing reset */

.eci-elements *,
.eci-elements *::before,
.eci-elements *::after {
  box-sizing: border-box;
}

/* Typography baseline */

.eci-elements {
  font-family: var(--eci-font-family-sans);
  font-size: var(--eci-font-size-base);
  line-height: var(--eci-line-height-normal);
  color: var(--eci-color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Media elements */

.eci-elements img,
.eci-elements picture,
.eci-elements video,
.eci-elements canvas,
.eci-elements svg {
  display: block;
  max-width: 100%;
}

/* Form elements inherit font */

.eci-elements input,
.eci-elements button,
.eci-elements textarea,
.eci-elements select {
  font: inherit;
}

/* Text overflow handling */

.eci-elements p,
.eci-elements h1,
.eci-elements h2,
.eci-elements h3,
.eci-elements h4,
.eci-elements h5,
.eci-elements h6 {
  overflow-wrap: break-word;
}

@keyframes slideInTopFade{0%{opacity:0;transform:translateY(-10px)}100%{opacity:1;transform:translateY(0)}}@keyframes slideInBottomFade{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}@keyframes slideInLeftFade{0%{opacity:0;transform:translateX(-10px)}100%{opacity:1;transform:translateX(0)}}@keyframes slideInRightFade{0%{opacity:0;transform:translateX(10px)}100%{opacity:1;transform:translateX(0)}}@keyframes slideOutTopFade{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-10px)}}@keyframes slideOutBottomFade{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(10px)}}@keyframes slideOutLeftFade{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-10px)}}@keyframes slideOutRightFade{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(10px)}}[hidden]{display:none !important}.eci-component{font-family:var(--eci-font-family, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto);box-sizing:border-box;line-height:var(--eci-line-height)}.eci-popup[data-id='eci-sidebar-app-header-context'] .eci-sah-context-stack{display:flex;flex-direction:column;min-width:0;max-width:100%}.eci-popup[data-id='eci-sidebar-app-header-context'] .eci-sah-context-scroll{max-height:var(--eci-sidebar-app-header-context-list-max-height, min(45vh, 16rem));overflow-y:auto;min-height:0;scrollbar-width:thin;scrollbar-color:var(--eci-color-neutral-300) transparent}.eci-popup[data-id='eci-sidebar-app-header-context'] .eci-sah-context-actions{flex-shrink:0;display:flex;flex-direction:column}.eci-popup[data-id='eci-sidebar-app-header-context'] .eci-sah-context-check{color:var(--eci-color-primary, currentColor)}.eci-popup[data-id='eci-sidebar-app-header-context'] .eci-sah-context-favorites-divider{margin:0.25rem 0}.eci-popup[data-id='eci-sidebar-app-header-context'] .eci-sah-context-item-entity{--eci-entity-icon-width:1.25rem;--eci-entity-icon-height:1.25rem;flex-shrink:0}.eci-popup[data-id='eci-sidebar-app-header-context'] .eci-sah-context-item-logo{--eci-company-logo-size:1.25rem;width:1.25rem;height:1.25rem;flex-shrink:0}.eci-popup[data-id='eci-sidebar-app-header-context'] .eci-sah-context-item-img{width:1.25rem;height:1.25rem;object-fit:contain;border-radius:var(--eci-border-radius-xs, 0.125rem);flex-shrink:0}.eci-popup{--eci-page-title-h1-font-size:1.25em;--eci-dropdown-item-color:transparent;--eci-dropdown-first-item-border-radius:var(--eci-popup-border-radius, var(--eci-border-radius-md));--eci-dropdown-last-item-border-radius:var(--eci-popup-border-radius, var(--eci-border-radius-md));--eci-dropdown-item-border-radius:var(--eci-popup-border-radius, var(--eci-border-radius-sm));position:fixed;transition:opacity var(--eci-popup-transition-duration, var(--eci-transition-normal, .25s)) ease-in-out;opacity:1;min-width:var(--eci-popup-min-width, 0);width:var(--eci-popup-width, max-content);max-width:var(--eci-popup-max-width, 100%);background-color:var(--eci-popup-color, var(--eci-color-surface, #fff));overflow-wrap:break-word;z-index:var(--eci-popup-z-index, 10001);min-height:.5rem;padding:var(--eci-popup-padding, 0);animation:slideInTopFade var(--eci-popup-transition-duration, var(--eci-transition-normal, .15s)) ease-out forwards;scrollbar-width:thin;scrollbar-color:var(--eci-color-neutral-300) transparent;&::-webkit-scrollbar{width:var(--eci-scrollbar-width, 6px)}&::-webkit-scrollbar-track{background:transparent;border-radius:var(--eci-border-radius-full)}&::-webkit-scrollbar-thumb{background-color:var(--eci-color-neutral-300);border-radius:var(--eci-border-radius-full)}&::-webkit-scrollbar-thumb:hover{background-color:var(--eci-color-neutral-400)}.content{--eci-color-surface:var(--eci-popup-surface-color, var(--eci-color-surface-lighter));overflow-y:auto}.footer{margin-top:auto}.arrow{position:absolute;background:var(--eci-popup-color, var(--eci-color-surface, #fff));width:8px;height:8px;transform:rotate(45deg);z-index:10}&.dismissed{opacity:0 !important;pointer-events:none !important;transition:none !important;animation:none !important}&.dismissing{pointer-events:none;animation:slideOutTopFade var(--eci-popup-transition-duration, var(--eci-transition-normal, .15s)) ease-out forwards}&.dismissing.placement-top{animation-name:slideOutBottomFade}&.dismissing.placement-bottom{animation-name:slideOutTopFade}&.dismissing.placement-left{animation-name:slideOutRightFade}&.dismissing.placement-right{animation-name:slideOutLeftFade}&.placement-top{animation-name:slideInBottomFade}&.placement-bottom{animation-name:slideInTopFade}&.placement-left{animation-name:slideInRightFade}&.placement-right{animation-name:slideInLeftFade}&.padding{padding:var(--eci-popup-padding-top, var(--eci-spacing-1)) var(--eci-popup-padding-right, var(--eci-spacing-1)) var(--eci-popup-padding-bottom, var(--eci-spacing-1)) var(--eci-popup-padding-left, var(--eci-spacing-1))}&:not(.variant-transparent){border:var(--eci-popup-border, var(--eci-border-thin));border-radius:var(--eci-popup-border-radius, var(--eci-border-radius-md));box-shadow:var(--eci-popup-box-shadow, var(--eci-shadow-md, 0px 4px 4px 0px rgba(0, 0, 0, 0.10)))}&.variant-default{background-color:var(--eci-popup-color, var(--eci-color-surface, #fff))}&.variant-translucent{background-color:var(--eci-popup-translucent-background-color, var(--eci-color-surface-translucent, rgba(255, 255, 255, .75)));backdrop-filter:blur(20px)}&.variant-transparent{background-color:var(--eci-popup-transparent-background-color, var(--eci-element-transparent-background-color, transparent))}hr{border:0;border-top:1px solid var(--eci-popup-hr-color, var(--eci-popup-border-color, var(--eci-border-color)));margin:var(--eci-popup-hr-margin, 0) 0}}.eci-tooltip{position:fixed;z-index:var(--eci-tooltip-z-index, 10002);max-width:var(--eci-tooltip-max-width, 280px);padding:var(--eci-tooltip-padding, var(--eci-spacing-2) var(--eci-spacing-3));font-family:var(--eci-font-family, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto);font-size:var(--eci-tooltip-font-size, var(--eci-font-size-sm));line-height:var(--eci-line-height);color:var(--eci-tooltip-color, var(--eci-color-text-inverse, #fff));background-color:var(--eci-tooltip-background-color, var(--eci-color-neutral-800, #1f2937));border-radius:var(--eci-tooltip-border-radius, var(--eci-border-radius-md));box-shadow:var(--eci-tooltip-box-shadow, var(--eci-shadow-md));pointer-events:none;opacity:0;visibility:hidden;transition:opacity var(--eci-tooltip-transition-duration, 150ms) ease-out,
        visibility var(--eci-tooltip-transition-duration, 150ms) ease-out;word-wrap:break-word;&.visible{opacity:1;visibility:visible;pointer-events:auto}.eci-tooltip-content{position:relative;z-index:1}.eci-tooltip-arrow{position:absolute;width:8px;height:8px;background-color:var(--eci-tooltip-background-color, var(--eci-color-neutral-800, #1f2937));transform:rotate(45deg);z-index:0}&.placement-top{.eci-tooltip-arrow{bottom:-4px}}&.placement-bottom{.eci-tooltip-arrow{top:-4px}}&.placement-left{.eci-tooltip-arrow{right:-4px}}&.placement-right{.eci-tooltip-arrow{left:-4px}}}

.eci-glow-ripple{position:relative;overflow:visible;z-index:1}.eci-glow-ripple::before{content:'';position:absolute;inset:-8px;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(
        ellipse,
        var(--eci-glow-ripple-color, var(--eci-color-primary)) 0%,
        rgba(var(--eci-glow-ripple-color-rgb, 102, 126, 234), 0.4) 30%,
        transparent 70%
    );filter:blur(12px);transform:scale(1);transition:opacity 0.3s ease-out;z-index:-1}.eci-glow-ripple:hover::before{animation:eci-glow-ripple-pulse 1500ms ease-out}.eci-glow-ripple.active::before{animation:eci-glow-ripple-pulse 1500ms ease-out}@keyframes eci-glow-ripple-pulse{0%{transform:scale(1);opacity:0.5}25%{opacity:0.8}100%{transform:scale(2.5);opacity:0}}.eci-glow-ripple.general{--eci-glow-ripple-color:var(--eci-color-blue-300)}.eci-glow-ripple.support{--eci-glow-ripple-color:var(--eci-color-green-300)}.eci-glow-ripple.analytics{--eci-glow-ripple-color:var(--eci-color-orange-300)}.eci-glow-ripple.coding{--eci-glow-ripple-color:var(--eci-color-blue-700)}.eci-glow-ripple.creative{--eci-glow-ripple-color:var(--eci-color-purple-400)}.eci-glow-ripple.design{--eci-glow-ripple-color:var(--eci-color-purple-400)}.eci-glow-ripple.marketing{--eci-glow-ripple-color:var(--eci-color-orange-400)}.eci-glow-ripple.product{--eci-glow-ripple-color:var(--eci-color-blue-400)}.eci-glow-ripple.sales{--eci-glow-ripple-color:var(--eci-color-green-400)}.eci-glow-ripple.service{--eci-glow-ripple-color:var(--eci-color-blue-400)}.eci-glow-ripple.ux{--eci-glow-ripple-color:var(--eci-color-purple-400)}.ai-appearance-auto,:host(.ai-appearance-auto){--ai-orb-color-1:var(--eci-ai-appearance-auto-color-1, var(--eci-ai-orb-color-1-override, var(--eci-color-primary-300)));--ai-orb-color-2:var(--eci-ai-appearance-auto-color-2, var(--eci-ai-orb-color-2-override, var(--eci-color-primary-400)));--ai-orb-color-3:var(--eci-ai-appearance-auto-color-3, var(--eci-ai-orb-color-3-override, var(--eci-color-primary-500)));--ai-orb-color-4:var(--eci-ai-appearance-auto-color-4, var(--eci-ai-orb-color-4-override, var(--eci-color-primary-600)));--eci-appearance-glow-color:var(--eci-ai-appearance-auto-glow-color, var(--eci-ai-orb-glow-color-override, var(--eci-color-primary-400)));--eci-glow-ripple-color:var(--eci-ai-appearance-auto-glow-color, var(--eci-ai-orb-glow-color-override, var(--eci-color-primary-400)));--eci-ai-orb-background-color:var(--eci-ai-appearance-auto-background-color, var(--eci-ai-orb-background-color-override, var(--eci-color-secondary-200)));--eci-ai-orb-icon-color:var(--eci-ai-appearance-auto-icon-color, var(--eci-ai-orb-icon-color-override, var(--eci-color-white)))}.ai-appearance-general,:host(.ai-appearance-general){--ai-orb-color-1:var(--eci-ai-appearance-general-color-1, var(--eci-ai-orb-color-1-override, var(--eci-color-blue-400)));--ai-orb-color-2:var(--eci-ai-appearance-general-color-2, var(--eci-ai-orb-color-2-override, var(--eci-color-blue-300)));--ai-orb-color-3:var(--eci-ai-appearance-general-color-3, var(--eci-ai-orb-color-3-override, var(--eci-color-purple-400)));--ai-orb-color-4:var(--eci-ai-appearance-general-color-4, var(--eci-ai-orb-color-4-override, var(--eci-color-blue-500)));--eci-appearance-glow-color:var(--eci-ai-appearance-general-glow-color, var(--eci-ai-orb-glow-color-override, var(--eci-color-blue-400)));--eci-glow-ripple-color:var(--eci-ai-appearance-general-glow-color, var(--eci-ai-orb-glow-color-override, var(--eci-color-blue-400)));--eci-ai-orb-background-color:var(--eci-ai-appearance-general-background-color, var(--eci-ai-orb-background-color-override, var(--eci-color-secondary-200)));--eci-ai-orb-icon-color:var(--eci-ai-appearance-general-icon-color, var(--eci-ai-orb-icon-color-override, var(--eci-color-white)))}.ai-appearance-support,:host(.ai-appearance-support){--ai-orb-color-1:var(--eci-ai-appearance-support-color-1, var(--eci-ai-orb-color-1-override, var(--eci-color-green-300)));--ai-orb-color-2:var(--eci-ai-appearance-support-color-2, var(--eci-ai-orb-color-2-override, var(--eci-color-green-400)));--ai-orb-color-3:var(--eci-ai-appearance-support-color-3, var(--eci-ai-orb-color-3-override, var(--eci-color-blue-300)));--ai-orb-color-4:var(--eci-ai-appearance-support-color-4, var(--eci-ai-orb-color-4-override, var(--eci-color-purple-300)));--eci-appearance-glow-color:var(--eci-ai-appearance-support-glow-color, var(--eci-ai-orb-glow-color-override, var(--eci-color-green-400)));--eci-glow-ripple-color:var(--eci-ai-appearance-support-glow-color, var(--eci-ai-orb-glow-color-override, var(--eci-color-green-400)));--eci-ai-orb-background-color:var(--eci-ai-appearance-support-background-color, var(--eci-ai-orb-background-color-override, var(--eci-color-secondary-200)));--eci-ai-orb-icon-color:var(--eci-ai-appearance-support-icon-color, var(--eci-ai-orb-icon-color-override, var(--eci-color-white)))}.ai-appearance-analytics,:host(.ai-appearance-analytics){--ai-orb-color-1:var(--eci-ai-appearance-analytics-color-1, var(--eci-ai-orb-color-1-override, var(--eci-color-orange-400)));--ai-orb-color-2:var(--eci-ai-appearance-analytics-color-2, var(--eci-ai-orb-color-2-override, var(--eci-color-orange-500)));--ai-orb-color-3:var(--eci-ai-appearance-analytics-color-3, var(--eci-ai-orb-color-3-override, var(--eci-color-red-400)));--ai-orb-color-4:var(--eci-ai-appearance-analytics-color-4, var(--eci-ai-orb-color-4-override, var(--eci-color-orange-600)));--eci-appearance-glow-color:var(--eci-ai-appearance-analytics-glow-color, var(--eci-ai-orb-glow-color-override, var(--eci-color-orange-400)));--eci-glow-ripple-color:var(--eci-ai-appearance-analytics-glow-color, var(--eci-ai-orb-glow-color-override, var(--eci-color-orange-400)));--eci-ai-orb-background-color:var(--eci-ai-appearance-analytics-background-color, var(--eci-ai-orb-background-color-override, var(--eci-color-secondary-200)));--eci-ai-orb-icon-color:var(--eci-ai-appearance-analytics-icon-color, var(--eci-ai-orb-icon-color-override, var(--eci-color-white)))}.ai-appearance-coding,:host(.ai-appearance-coding){--ai-orb-color-1:var(--eci-ai-appearance-coding-color-1, var(--eci-ai-orb-color-1-override, var(--eci-color-neutral-600)));--ai-orb-color-2:var(--eci-ai-appearance-coding-color-2, var(--eci-ai-orb-color-2-override, var(--eci-color-blue-700)));--ai-orb-color-3:var(--eci-ai-appearance-coding-color-3, var(--eci-ai-orb-color-3-override, var(--eci-color-neutral-700)));--ai-orb-color-4:var(--eci-ai-appearance-coding-color-4, var(--eci-ai-orb-color-4-override, var(--eci-color-blue-800)));--eci-appearance-glow-color:var(--eci-ai-appearance-coding-glow-color, var(--eci-ai-orb-glow-color-override, var(--eci-color-blue-700)));--eci-glow-ripple-color:var(--eci-ai-appearance-coding-glow-color, var(--eci-ai-orb-glow-color-override, var(--eci-color-blue-700)));--eci-ai-orb-background-color:var(--eci-ai-appearance-coding-background-color, var(--eci-ai-orb-background-color-override, var(--eci-color-secondary-200)));--eci-ai-orb-icon-color:var(--eci-ai-appearance-coding-icon-color, var(--eci-ai-orb-icon-color-override, var(--eci-color-white)))}.ai-appearance-creative,:host(.ai-appearance-creative){--ai-orb-color-1:var(--eci-ai-appearance-creative-color-1, var(--eci-ai-orb-color-1-override, var(--eci-color-purple-400)));--ai-orb-color-2:var(--eci-ai-appearance-creative-color-2, var(--eci-ai-orb-color-2-override, var(--eci-color-orange-400)));--ai-orb-color-3:var(--eci-ai-appearance-creative-color-3, var(--eci-ai-orb-color-3-override, var(--eci-color-yellow-400)));--ai-orb-color-4:var(--eci-ai-appearance-creative-color-4, var(--eci-ai-orb-color-4-override, var(--eci-color-purple-500)));--eci-appearance-glow-color:var(--eci-ai-appearance-creative-glow-color, var(--eci-ai-orb-glow-color-override, var(--eci-color-purple-400)));--eci-glow-ripple-color:var(--eci-ai-appearance-creative-glow-color, var(--eci-ai-orb-glow-color-override, var(--eci-color-purple-400)));--eci-ai-orb-background-color:var(--eci-ai-appearance-creative-background-color, var(--eci-ai-orb-background-color-override, var(--eci-color-secondary-200)));--eci-ai-orb-icon-color:var(--eci-ai-appearance-creative-icon-color, var(--eci-ai-orb-icon-color-override, var(--eci-color-white)))}.ai-appearance-design,:host(.ai-appearance-design){--ai-orb-color-1:var(--eci-ai-appearance-design-color-1, var(--eci-ai-orb-color-1-override, var(--eci-color-purple-300)));--ai-orb-color-2:var(--eci-ai-appearance-design-color-2, var(--eci-ai-orb-color-2-override, var(--eci-color-purple-400)));--ai-orb-color-3:var(--eci-ai-appearance-design-color-3, var(--eci-ai-orb-color-3-override, var(--eci-color-purple-500)));--ai-orb-color-4:var(--eci-ai-appearance-design-color-4, var(--eci-ai-orb-color-4-override, var(--eci-color-purple-600)));--eci-appearance-glow-color:var(--eci-ai-appearance-design-glow-color, var(--eci-ai-orb-glow-color-override, var(--eci-color-purple-400)));--eci-glow-ripple-color:var(--eci-ai-appearance-design-glow-color, var(--eci-ai-orb-glow-color-override, var(--eci-color-purple-400)));--eci-ai-orb-background-color:var(--eci-ai-appearance-design-background-color, var(--eci-ai-orb-background-color-override, var(--eci-color-secondary-200)));--eci-ai-orb-icon-color:var(--eci-ai-appearance-design-icon-color, var(--eci-ai-orb-icon-color-override, var(--eci-color-white)))}.ai-appearance-marketing,:host(.ai-appearance-marketing){--ai-orb-color-1:var(--eci-ai-appearance-marketing-color-1, var(--eci-ai-orb-color-1-override, var(--eci-color-orange-300)));--ai-orb-color-2:var(--eci-ai-appearance-marketing-color-2, var(--eci-ai-orb-color-2-override, var(--eci-color-red-400)));--ai-orb-color-3:var(--eci-ai-appearance-marketing-color-3, var(--eci-ai-orb-color-3-override, var(--eci-color-orange-400)));--ai-orb-color-4:var(--eci-ai-appearance-marketing-color-4, var(--eci-ai-orb-color-4-override, var(--eci-color-red-500)));--eci-appearance-glow-color:var(--eci-ai-appearance-marketing-glow-color, var(--eci-ai-orb-glow-color-override, var(--eci-color-orange-400)));--eci-glow-ripple-color:var(--eci-ai-appearance-marketing-glow-color, var(--eci-ai-orb-glow-color-override, var(--eci-color-orange-400)));--eci-ai-orb-background-color:var(--eci-ai-appearance-marketing-background-color, var(--eci-ai-orb-background-color-override, var(--eci-color-secondary-200)));--eci-ai-orb-icon-color:var(--eci-ai-appearance-marketing-icon-color, var(--eci-ai-orb-icon-color-override, var(--eci-color-white)))}.ai-appearance-product,:host(.ai-appearance-product){--ai-orb-color-1:var(--eci-ai-appearance-product-color-1, var(--eci-ai-orb-color-1-override, var(--eci-color-blue-300)));--ai-orb-color-2:var(--eci-ai-appearance-product-color-2, var(--eci-ai-orb-color-2-override, var(--eci-color-green-400)));--ai-orb-color-3:var(--eci-ai-appearance-product-color-3, var(--eci-ai-orb-color-3-override, var(--eci-color-blue-400)));--ai-orb-color-4:var(--eci-ai-appearance-product-color-4, var(--eci-ai-orb-color-4-override, var(--eci-color-green-500)));--eci-appearance-glow-color:var(--eci-ai-appearance-product-glow-color, var(--eci-ai-orb-glow-color-override, var(--eci-color-blue-400)));--eci-glow-ripple-color:var(--eci-ai-appearance-product-glow-color, var(--eci-ai-orb-glow-color-override, var(--eci-color-blue-400)));--eci-ai-orb-background-color:var(--eci-ai-appearance-product-background-color, var(--eci-ai-orb-background-color-override, var(--eci-color-secondary-200)));--eci-ai-orb-icon-color:var(--eci-ai-appearance-product-icon-color, var(--eci-ai-orb-icon-color-override, var(--eci-color-white)))}.ai-appearance-sales,:host(.ai-appearance-sales){--ai-orb-color-1:var(--eci-ai-appearance-sales-color-1, var(--eci-ai-orb-color-1-override, var(--eci-color-green-300)));--ai-orb-color-2:var(--eci-ai-appearance-sales-color-2, var(--eci-ai-orb-color-2-override, var(--eci-color-yellow-400)));--ai-orb-color-3:var(--eci-ai-appearance-sales-color-3, var(--eci-ai-orb-color-3-override, var(--eci-color-green-400)));--ai-orb-color-4:var(--eci-ai-appearance-sales-color-4, var(--eci-ai-orb-color-4-override, var(--eci-color-green-500)));--eci-appearance-glow-color:var(--eci-ai-appearance-sales-glow-color, var(--eci-ai-orb-glow-color-override, var(--eci-color-green-400)));--eci-glow-ripple-color:var(--eci-ai-appearance-sales-glow-color, var(--eci-ai-orb-glow-color-override, var(--eci-color-green-400)));--eci-ai-orb-background-color:var(--eci-ai-appearance-sales-background-color, var(--eci-ai-orb-background-color-override, var(--eci-color-secondary-200)));--eci-ai-orb-icon-color:var(--eci-ai-appearance-sales-icon-color, var(--eci-ai-orb-icon-color-override, var(--eci-color-white)))}.ai-appearance-service,:host(.ai-appearance-service){--ai-orb-color-1:var(--eci-ai-appearance-service-color-1, var(--eci-ai-orb-color-1-override, var(--eci-color-blue-300)));--ai-orb-color-2:var(--eci-ai-appearance-service-color-2, var(--eci-ai-orb-color-2-override, var(--eci-color-neutral-400)));--ai-orb-color-3:var(--eci-ai-appearance-service-color-3, var(--eci-ai-orb-color-3-override, var(--eci-color-blue-400)));--ai-orb-color-4:var(--eci-ai-appearance-service-color-4, var(--eci-ai-orb-color-4-override, var(--eci-color-neutral-500)));--eci-appearance-glow-color:var(--eci-ai-appearance-service-glow-color, var(--eci-ai-orb-glow-color-override, var(--eci-color-blue-400)));--eci-glow-ripple-color:var(--eci-ai-appearance-service-glow-color, var(--eci-ai-orb-glow-color-override, var(--eci-color-blue-400)));--eci-ai-orb-background-color:var(--eci-ai-appearance-service-background-color, var(--eci-ai-orb-background-color-override, var(--eci-color-secondary-200)));--eci-ai-orb-icon-color:var(--eci-ai-appearance-service-icon-color, var(--eci-ai-orb-icon-color-override, var(--eci-color-white)))}.ai-appearance-ux,:host(.ai-appearance-ux){--ai-orb-color-1:var(--eci-ai-appearance-ux-color-1, var(--eci-ai-orb-color-1-override, var(--eci-color-purple-300)));--ai-orb-color-2:var(--eci-ai-appearance-ux-color-2, var(--eci-ai-orb-color-2-override, var(--eci-color-blue-300)));--ai-orb-color-3:var(--eci-ai-appearance-ux-color-3, var(--eci-ai-orb-color-3-override, var(--eci-color-purple-400)));--ai-orb-color-4:var(--eci-ai-appearance-ux-color-4, var(--eci-ai-orb-color-4-override, var(--eci-color-blue-400)));--eci-appearance-glow-color:var(--eci-ai-appearance-ux-glow-color, var(--eci-ai-orb-glow-color-override, var(--eci-color-purple-400)));--eci-glow-ripple-color:var(--eci-ai-appearance-ux-glow-color, var(--eci-ai-orb-glow-color-override, var(--eci-color-purple-400)));--eci-ai-orb-background-color:var(--eci-ai-appearance-ux-background-color, var(--eci-ai-orb-background-color-override, var(--eci-color-secondary-200)));--eci-ai-orb-icon-color:var(--eci-ai-appearance-ux-icon-color, var(--eci-ai-orb-icon-color-override, var(--eci-color-white)))}.ai-appearance-error,:host(.ai-appearance-error){--ai-orb-color-1:var(--eci-ai-appearance-error-color-1, var(--eci-ai-orb-color-1-override, var(--eci-color-red-400)));--ai-orb-color-2:var(--eci-ai-appearance-error-color-2, var(--eci-ai-orb-color-2-override, var(--eci-color-red-500)));--ai-orb-color-3:var(--eci-ai-appearance-error-color-3, var(--eci-ai-orb-color-3-override, var(--eci-color-red-600)));--ai-orb-color-4:var(--eci-ai-appearance-error-color-4, var(--eci-ai-orb-color-4-override, var(--eci-color-red-700)));--eci-appearance-glow-color:var(--eci-ai-appearance-error-glow-color, var(--eci-ai-orb-glow-color-override, var(--eci-color-red-500)));--eci-glow-ripple-color:var(--eci-ai-appearance-error-glow-color, var(--eci-ai-orb-glow-color-override, var(--eci-color-red-500)));--eci-ai-orb-background-color:var(--eci-ai-appearance-error-background-color, var(--eci-ai-orb-background-color-override, var(--eci-color-secondary-200)));--eci-ai-orb-icon-color:var(--eci-ai-appearance-error-icon-color, var(--eci-ai-orb-icon-color-override, var(--eci-color-white)))}.ai-appearance-warning,:host(.ai-appearance-warning){--ai-orb-color-1:var(--eci-ai-appearance-warning-color-1, var(--eci-ai-orb-color-1-override, var(--eci-color-orange-400)));--ai-orb-color-2:var(--eci-ai-appearance-warning-color-2, var(--eci-ai-orb-color-2-override, var(--eci-color-yellow-400)));--ai-orb-color-3:var(--eci-ai-appearance-warning-color-3, var(--eci-ai-orb-color-3-override, var(--eci-color-orange-500)));--ai-orb-color-4:var(--eci-ai-appearance-warning-color-4, var(--eci-ai-orb-color-4-override, var(--eci-color-yellow-500)));--eci-appearance-glow-color:var(--eci-ai-appearance-warning-glow-color, var(--eci-ai-orb-glow-color-override, var(--eci-color-orange-400)));--eci-glow-ripple-color:var(--eci-ai-appearance-warning-glow-color, var(--eci-ai-orb-glow-color-override, var(--eci-color-orange-400)));--eci-ai-orb-background-color:var(--eci-ai-appearance-warning-background-color, var(--eci-ai-orb-background-color-override, var(--eci-color-secondary-200)));--eci-ai-orb-icon-color:var(--eci-ai-appearance-warning-icon-color, var(--eci-ai-orb-icon-color-override, var(--eci-color-white)))}.ai-appearance-offline,:host(.ai-appearance-offline){--ai-orb-color-1:var(--eci-ai-appearance-offline-color-1, var(--eci-ai-orb-color-1-override, var(--eci-color-neutral-300)));--ai-orb-color-2:var(--eci-ai-appearance-offline-color-2, var(--eci-ai-orb-color-2-override, var(--eci-color-neutral-400)));--ai-orb-color-3:var(--eci-ai-appearance-offline-color-3, var(--eci-ai-orb-color-3-override, var(--eci-color-neutral-500)));--ai-orb-color-4:var(--eci-ai-appearance-offline-color-4, var(--eci-ai-orb-color-4-override, var(--eci-color-neutral-600)));--eci-appearance-glow-color:var(--eci-ai-appearance-offline-glow-color, var(--eci-ai-orb-glow-color-override, var(--eci-color-neutral-400)));--eci-glow-ripple-color:var(--eci-ai-appearance-offline-glow-color, var(--eci-ai-orb-glow-color-override, var(--eci-color-neutral-400)));--eci-ai-orb-background-color:var(--eci-ai-appearance-offline-background-color, var(--eci-ai-orb-background-color-override, var(--eci-color-secondary-200)));--eci-ai-orb-icon-color:var(--eci-ai-appearance-offline-icon-color, var(--eci-ai-orb-icon-color-override, var(--eci-color-white)))}:root{--eci-ai-fab-footer-compensation:0}:root:has(eci-ai-fab.position-right:not([hidden])){--eci-ai-fab-footer-compensation:5rem}:root:has(eci-ai-space.fab.fab-collapsed){--eci-ai-fab-footer-compensation:5rem}:root:has(eci-ai-layout:not(.expanded) eci-ai-fab.position-right){--eci-ai-fab-footer-compensation:5rem}