/**
 * SGLE Theme - Tailwind CSS Input
 * This file is compiled to assets/css/main.css
 * 
 * @version 2.0.0
 * @date 2026-01-16
 */

/* Import Design System Tokens */

/**
 * SGLE Theme - Design System Tokens
 * 
 * CSS Custom Properties (Variables) for the complete design system
 * Following Shadcn/UI inspired modern design patterns
 * 
 * @version 2.0.0
 * @date 2026-01-15
 */

:root {
  /* ========================================
     COLOR TOKENS
     ======================================== */
  /* Primary Colors */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;
  --color-primary: var(--color-primary-500);
  /* Neutral Colors (Slate-based) */
  --color-neutral-50: #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-300: #cbd5e1;
  --color-neutral-400: #94a3b8;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;
  /* Semantic Colors - Success */
  --color-success: #10b981;
  --color-success-light: #d1fae5;
  --color-success-dark: #059669;
  /* Semantic Colors - Warning */
  --color-warning: #f59e0b;
  --color-warning-light: #fef3c7;
  --color-warning-dark: #d97706;
  /* Semantic Colors - Error */
  --color-error: #ef4444;
  --color-error-light: #fee2e2;
  --color-error-dark: #dc2626;
  /* Semantic Colors - Info */
  --color-info: #3b82f6;
  --color-info-light: #dbeafe;
  --color-info-dark: #2563eb;
  /* Background Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --bg-hover: #f8fafc;
  --bg-active: #f1f5f9;
  /* Text Colors */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #64748b;
  --text-muted: #94a3b8;
  --text-on-primary: #ffffff;
  /* Border Colors */
  --border-light: #e2e8f0;
  --border-medium: #cbd5e1;
  --border-dark: #94a3b8;
  --border-focus: #3b82f6;
  /* ========================================
     TYPOGRAPHY TOKENS
     ======================================== */
  /* Font Families */
  --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-display: 'Inter', sans-serif;
  --font-family-mono: 'Fira Code', 'Courier New', monospace;
  /* Font Sizes (Type Scale) */
  --text-xs: 0.75rem;
  /* 12px */
  --text-sm: 0.875rem;
  /* 14px */
  --text-base: 1rem;
  /* 16px */
  --text-lg: 1.125rem;
  /* 18px */
  --text-xl: 1.25rem;
  /* 20px */
  --text-2xl: 1.5rem;
  /* 24px */
  --text-3xl: 1.875rem;
  /* 30px */
  --text-4xl: 2.25rem;
  /* 36px */
  --text-5xl: 3rem;
  /* 48px */
  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
  /* ========================================
     SPACING TOKENS
     ======================================== */
  /* Spacing Scale (4px-based) */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;
  /* 2px */
  --space-1: 0.25rem;
  /* 4px */
  --space-1-5: 0.375rem;
  /* 6px */
  --space-2: 0.5rem;
  /* 8px */
  --space-2-5: 0.625rem;
  /* 10px */
  --space-3: 0.75rem;
  /* 12px */
  --space-3-5: 0.875rem;
  /* 14px */
  --space-4: 1rem;
  /* 16px */
  --space-5: 1.25rem;
  /* 20px */
  --space-6: 1.5rem;
  /* 24px */
  --space-7: 1.75rem;
  /* 28px */
  --space-8: 2rem;
  /* 32px */
  --space-9: 2.25rem;
  /* 36px */
  --space-10: 2.5rem;
  /* 40px */
  --space-11: 2.75rem;
  /* 44px */
  --space-12: 3rem;
  /* 48px */
  --space-14: 3.5rem;
  /* 56px */
  --space-16: 4rem;
  /* 64px */
  --space-20: 5rem;
  /* 80px */
  --space-24: 6rem;
  /* 96px */
  --space-28: 7rem;
  /* 112px */
  --space-32: 8rem;
  /* 128px */
  /* ========================================
     ELEVATION TOKENS (Shadows)
     ======================================== */
  /* Box Shadows (Shadcn-inspired) */
  --shadow-none: 0 0 #0000;
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  /* ========================================
     BORDER RADIUS TOKENS
     ======================================== */
  --radius-none: 0;
  --radius-xs: 0.25rem;
  /* 4px */
  --radius-sm: 0.375rem;
  /* 6px */
  --radius: 0.5rem;
  /* 8px */
  --radius-md: 0.75rem;
  /* 12px */
  --radius-lg: 1rem;
  /* 16px */
  --radius-xl: 1.5rem;
  /* 24px */
  --radius-2xl: 2rem;
  /* 32px */
  --radius-full: 9999px;
  /* Circle */
  /* ========================================
     BORDER WIDTH TOKENS
     ======================================== */
  --border-width-0: 0;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-4: 4px;
  --border-width-8: 8px;
  /* ========================================
     TRANSITION TOKENS
     ======================================== */
  /* Duration */
  --duration-75: 75ms;
  --duration-100: 100ms;
  --duration-150: 150ms;
  --duration-200: 200ms;
  --duration-250: 250ms;
  --duration-300: 300ms;
  --duration-400: 400ms;
  --duration-500: 500ms;
  --duration-700: 700ms;
  --duration-1000: 1000ms;
  /* Timing Functions */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  /* Common Transitions */
  --transition-colors: color var(--duration-150) var(--ease-smooth),
                       background-color var(--duration-150) var(--ease-smooth),
                       border-color var(--duration-150) var(--ease-smooth);
  --transition-opacity: opacity var(--duration-150) var(--ease-smooth);
  --transition-transform: transform var(--duration-150) var(--ease-smooth);
  --transition-shadow: box-shadow var(--duration-150) var(--ease-smooth);
  --transition-all: all var(--duration-150) var(--ease-smooth);
  /* ========================================
     Z-INDEX TOKENS
     ======================================== */
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  /* ========================================
     LAYOUT TOKENS
     ======================================== */
  /* Max Widths */
  --max-width-xs: 20rem;
  /* 320px */
  --max-width-sm: 24rem;
  /* 384px */
  --max-width-md: 28rem;
  /* 448px */
  --max-width-lg: 32rem;
  /* 512px */
  --max-width-xl: 36rem;
  /* 576px */
  --max-width-2xl: 42rem;
  /* 672px */
  --max-width-3xl: 48rem;
  /* 768px */
  --max-width-4xl: 56rem;
  /* 896px */
  --max-width-5xl: 64rem;
  /* 1024px */
  --max-width-6xl: 72rem;
  /* 1152px */
  --max-width-7xl: 80rem;
  /* 1280px */
  --max-width-full: 100%;
  /* Container Padding */
  --container-padding: var(--space-4);
  /* Sidebar Width */
  --sidebar-width: 16rem;
  /* 256px */
  --sidebar-collapsed-width: 4rem;
  /* 64px */
  /* Topbar Height */
  --topbar-height: 4rem;
  /* 64px */
  /* ========================================
     COMPONENT-SPECIFIC TOKENS
     ======================================== */
  /* Button */
  --button-height-sm: 2rem;
  /* 32px */
  --button-height-md: 2.5rem;
  /* 40px */
  --button-height-lg: 3rem;
  /* 48px */
  --button-padding-x-sm: var(--space-3);
  --button-padding-x-md: var(--space-4);
  --button-padding-x-lg: var(--space-6);
  /* Input */
  --input-height-sm: 2rem;
  /* 32px */
  --input-height-md: 2.5rem;
  /* 40px */
  --input-height-lg: 3rem;
  /* 48px */
  --input-padding-x: var(--space-3);
  --input-padding-y: var(--space-2);
  /* Card */
  --card-padding: var(--space-6);
  --card-radius: var(--radius-lg);
  --card-shadow: var(--shadow-sm);
  /* Modal */
  --modal-max-width: var(--max-width-2xl);
  --modal-padding: var(--space-6);
  --modal-radius: var(--radius-lg);
  --modal-shadow: var(--shadow-2xl);
  /* Badge */
  --badge-padding-x: var(--space-2-5);
  --badge-padding-y: var(--space-0-5);
  --badge-radius: var(--radius-full);
  /* ========================================
     ANIMATION TOKENS
     ======================================== */
  /* Keyframe names referenced from Tailwind config */
  --animation-fade-in: fade-in var(--duration-200) var(--ease-out);
  --animation-fade-out: fade-out var(--duration-200) var(--ease-out);
  --animation-slide-in-right: slide-in-right var(--duration-300) var(--ease-out);
  --animation-slide-in-left: slide-in-left var(--duration-300) var(--ease-out);
  --animation-slide-in-up: slide-in-up var(--duration-300) var(--ease-out);
  --animation-slide-in-down: slide-in-down var(--duration-300) var(--ease-out);
  --animation-scale-in: scale-in var(--duration-200) var(--ease-out);
  --animation-shimmer: shimmer 2s linear infinite;
  /* Modal-specific animations */
  --modal-backdrop-blur: 8px;
  --modal-transition-duration: var(--duration-250);
  --modal-transition-timing: var(--ease-out);
  /* ========================================
     MOBILE-SPECIFIC TOKENS
     ======================================== */
  /* Mobile Typography Scale */
  --text-xs-mobile: 0.6875rem;
  /* 11px - labels */
  --text-sm-mobile: 0.8125rem;
  /* 13px - captions */
  --text-base-mobile: 0.9375rem;
  /* 15px - body */
  --text-lg-mobile: 1rem;
  /* 16px - body large */
  --text-xl-mobile: 1.125rem;
  /* 18px - headings */
  --text-2xl-mobile: 1.375rem;
  /* 22px - page titles */
  --text-3xl-mobile: 1.625rem;
  /* 26px - hero */
  /* Mobile Spacing Scale */
  --space-mobile-1: 0.25rem;
  /* 4px */
  --space-mobile-2: 0.375rem;
  /* 6px */
  --space-mobile-3: 0.625rem;
  /* 10px */
  --space-mobile-4: 0.875rem;
  /* 14px */
  --space-mobile-5: 1rem;
  /* 16px */
  --space-mobile-6: 1.25rem;
  /* 20px */
  --space-mobile-8: 1.5rem;
  /* 24px */
  /* Mobile Component Sizes */
  --button-height-sm-mobile: 2.25rem;
  /* 36px */
  --button-height-md-mobile: 2.75rem;
  /* 44px */
  --button-height-lg-mobile: 3rem;
  /* 48px */
  --input-height-mobile: 2.75rem;
  /* 44px */
  --card-padding-mobile: 1rem;
  /* 16px */
  --card-radius-mobile: 0.75rem;
  /* 12px */
  --modal-padding-mobile: 1.25rem;
  /* 20px */
  --modal-radius-mobile: 1.25rem;
  /* 20px - top only */
  /* Mobile Topbar Height */
  --topbar-height-mobile: 3.5rem;
  /* 56px */
  /* Touch Target Minimum Sizes */
  --touch-target-min: 2.75rem;
  /* 44px - iOS minimum */
  --touch-target-recommended: 3rem;
  /* 48px - Material Design */
  /* Safe Area Insets (iOS) */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
}

/* ========================================
   MODAL ANIMATIONS
   ======================================== */

/* Modal backdrop fade animation */

@keyframes modal-backdrop-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modal-backdrop-fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* Modal content slide + fade animation */

@keyframes modal-slide-fade-in {
  from {
    opacity: 0;
    transform: translateY(-1rem) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes modal-slide-fade-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(-1rem) scale(0.97);
  }
}

/* Modal classes */

.modal-backdrop {
  animation: modal-backdrop-fade-in var(--modal-transition-duration) var(--modal-transition-timing);
}

.modal-backdrop.closing {
  animation: modal-backdrop-fade-out var(--modal-transition-duration) var(--modal-transition-timing);
}

.modal-content {
  animation: modal-slide-fade-in var(--modal-transition-duration) var(--modal-transition-timing);
}

.modal-content.closing {
  animation: modal-slide-fade-out var(--modal-transition-duration) var(--modal-transition-timing);
}

/* Modal states */

.modal-open {
  overflow: hidden;
}

/* Focus trap styles */

.modal-focus-trap:focus {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

/* ========================================
   DARK MODE TOKENS (Future Implementation)
   ======================================== */

/* 
  Dark mode is configured but not currently applied by default.
  The system defaults to light theme as per project specifications.
  
  To enable dark mode in the future, uncomment and adjust these values:
*/

/*
.dark {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;
  --bg-hover: #1e293b;
  --bg-active: #334155;
  
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-tertiary: #94a3b8;
  --text-muted: #64748b;
  
  --border-light: #334155;
  --border-medium: #475569;
  --border-dark: #64748b;
}
*/

/* ========================================
   UTILITY CLASSES USING TOKENS
   ======================================== */

/* ========================================
   MODAL & FORM ENHANCEMENTS
   ======================================== */

/* Input validation states */

input.border-red-500,
select.border-red-500,
textarea.border-red-500 {
  border-color: #ef4444 !important;
  animation: shake 0.4s ease-in-out;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-4px);
  }

  20%, 40%, 60%, 80% {
    transform: translateX(4px);
  }
}

/* Success state for inputs */

input.border-emerald-500,
select.border-emerald-500 {
  border-color: #10b981 !important;
}

/* Input focus ring enhancement */

input:focus,
select:focus,
textarea:focus {
  outline: none;
  box-shadow: 0 0 0 4px var(--color-primary-500) / 0.2;
}

/* Error focus ring */

input.border-red-500:focus,
select.border-red-500:focus,
textarea.border-red-500:focus {
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2) !important;
}

/* Loading state for buttons */

button:disabled {
  pointer-events: none;
}

/* Smooth modal backdrop */

.modal-backdrop {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Modal content animations */

@keyframes modal-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modal-slide-up {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes modal-scale-in {
  from {
    transform: scale(0.95);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Apply modal animations */

.modal-backdrop:not(.hidden) {
  animation: modal-fade-in 0.3s ease-out;
}

.animate-slide-in-up {
  animation: modal-slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-scale-in {
  animation: modal-scale-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Touch feedback for mobile */

@media (max-width: 768px) {
  .touch-target:active {
    transform: scale(0.98);
    transition: transform 0.1s ease-out;
  }
}

/* Material icon spin animation */

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

  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Pulse animation for badges */

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

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

/* Enhanced hover states for form fields */

input:hover:not(:focus):not(:disabled),
select:hover:not(:focus):not(:disabled),
textarea:hover:not(:focus):not(:disabled) {
  border-color: var(--color-neutral-400);
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05);
}

/* Disabled state styling */

input:disabled,
select:disabled,
textarea:disabled,
button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--color-neutral-50);
}

/* Error message fade in */

[id$="-error"]:not(.hidden) {
  animation: fade-in-down 0.3s ease-out;
}

@keyframes fade-in-down {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Import Animations & Transitions */

/**
 * SGLE Theme - Animations and Page Transitions
 * 
 * Complete animation system for page transitions, modal animations,
 * and microinteractions following modern design patterns
 * 
 * @version 2.0.0
 * @date 2026-01-15
 */

/* ========================================
   GLOBAL ANIMATION SETUP
   ======================================== */

/* Smooth scroll behavior for entire site */

html {
  scroll-behavior: smooth;
}

/* Reduce motion for users who prefer it (Accessibility) */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========================================
   PAGE TRANSITION KEYFRAMES
   ======================================== */

/* Fade In - Base page load animation */

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Fade Out */

@keyframes fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* Slide In from Right */

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(2rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide In from Left */

@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-2rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide In from Top */

@keyframes slide-in-down {
  from {
    opacity: 0;
    transform: translateY(-2rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide In from Bottom */

@keyframes slide-in-up {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scale In - For modals and popovers */

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Scale Out */

@keyframes scale-out {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* Slide and Fade combined - Premium effect */

@keyframes slide-fade-in {
  from {
    opacity: 0;
    transform: translateY(1rem) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ========================================
   PAGE TRANSITION CLASSES
   ======================================== */

/* Main page content wrapper */

.page-content {
  animation: fade-in var(--duration-400) var(--ease-out);
}

/* Faster fade for subsequent content loads */

.page-content-fast {
  animation: fade-in var(--duration-250) var(--ease-out);
}

/* Page transition with slide effect */

.page-transition-slide {
  animation: slide-fade-in var(--duration-400) var(--ease-out);
}

/* Stagger animations removed - can cause visual clutter on mobile */

/* ========================================
   MODAL & OVERLAY TRANSITIONS
   ======================================== */

/* Modal backdrop */

.modal-backdrop-enter {
  animation: fade-in var(--duration-250) var(--ease-out);
}

.modal-backdrop-exit {
  animation: fade-out var(--duration-200) var(--ease-out);
}

/* Modal content with combined slide + scale + fade */

.modal-content-enter {
  animation: modal-enter var(--duration-300) var(--ease-out);
}

.modal-content-exit {
  animation: modal-exit var(--duration-200) var(--ease-out);
}

@keyframes modal-enter {
  from {
    opacity: 0;
    transform: translateY(-1.5rem) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes modal-exit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(-1rem) scale(0.98);
  }
}

/* Side panel / Drawer transitions */

.drawer-enter-right {
  animation: drawer-slide-in-right var(--duration-300) var(--ease-out);
}

.drawer-exit-right {
  animation: drawer-slide-out-right var(--duration-250) var(--ease-out);
}

@keyframes drawer-slide-in-right {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes drawer-slide-out-right {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100%);
  }
}

/* ========================================
   LOADING STATES & SHIMMER EFFECTS
   ======================================== */

/* Skeleton shimmer animation */

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }

  100% {
    background-position: 1000px 0;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-neutral-100) 0%,
    var(--color-neutral-200) 20%,
    var(--color-neutral-100) 40%,
    var(--color-neutral-100) 100%
  );
  background-size: 1000px 100%;
  animation: shimmer 2s linear infinite;
  border-radius: var(--radius);
}

/* Pulse animation for loading indicators */

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

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

/* Spinner animation */

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

  to {
    transform: rotate(360deg);
  }
}

.spinner {
  animation: spin 1s linear infinite;
}

/* ========================================
   HOVER & INTERACTION ANIMATIONS
   ======================================== */

/* Hover effects simplified - subtle only */

.hover-elevate {
  transition: transform var(--duration-200) var(--ease-out),
              box-shadow var(--duration-200) var(--ease-out);
}

.hover-elevate:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Scale on hover - removed for cleaner mobile experience */

/* Bounce effect removed - too distracting for mobile */

/* Shake animation removed - too aggressive for mobile */

/* ========================================
   NOTIFICATION / TOAST ANIMATIONS
   ======================================== */

/* Toast slide in from top */

@keyframes toast-slide-in {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Toast slide out to top */

@keyframes toast-slide-out {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

.toast-enter {
  animation: toast-slide-in var(--duration-300) var(--ease-out);
}

.toast-exit {
  animation: toast-slide-out var(--duration-250) var(--ease-out);
}

/* Toast from bottom (mobile friendly) */

@keyframes toast-slide-in-bottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.toast-enter-bottom {
  animation: toast-slide-in-bottom var(--duration-300) var(--ease-out);
}

/* ========================================
   UTILITY ANIMATION CLASSES
   ======================================== */

/* Fade in with delay options */

.fade-in {
  animation: fade-in var(--duration-400) var(--ease-out);
}

.fade-in-fast {
  animation: fade-in var(--duration-200) var(--ease-out);
}

.fade-in-slow {
  animation: fade-in var(--duration-700) var(--ease-out);
}

/* Slide animations */

.slide-in-right {
  animation: slide-in-right var(--duration-300) var(--ease-out);
}

.slide-in-left {
  animation: slide-in-left var(--duration-300) var(--ease-out);
}

.slide-in-up {
  animation: slide-in-up var(--duration-300) var(--ease-out);
}

.slide-in-down {
  animation: slide-in-down var(--duration-300) var(--ease-out);
}

/* Scale animations */

.scale-in {
  animation: scale-in var(--duration-200) var(--ease-out);
}

/* Animation delay utilities */

.delay-100 {
  animation-delay: 100ms;
}

.delay-200 {
  animation-delay: 200ms;
}

.delay-300 {
  animation-delay: 300ms;
}

.delay-400 {
  animation-delay: 400ms;
}

.delay-500 {
  animation-delay: 500ms;
}

/* ========================================
   FOCUS & ACTIVE STATE ANIMATIONS
   ======================================== */

/* Focus ring animation */

.focus-ring {
  transition: box-shadow var(--duration-200) var(--ease-out),
              outline var(--duration-200) var(--ease-out);
}

.focus-ring:focus,
.focus-ring:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

/* Active state with scale */

.active-scale:active {
  transform: scale(0.97);
  transition: transform var(--duration-100) var(--ease-out);
}

/* ========================================
   STANDARDIZED HOVER/FOCUS STATES
   Task 4.2 - Comprehensive Interactive States
   ======================================== */

/* Button Base States */

.btn-hover-primary {
  transition: background-color var(--duration-150) var(--ease-smooth),
              color var(--duration-150) var(--ease-smooth),
              transform var(--duration-150) var(--ease-smooth),
              box-shadow var(--duration-150) var(--ease-smooth);
}

.btn-hover-primary:hover {
  background-color: var(--color-primary-700);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-hover-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.btn-hover-primary:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
}

/* Button Secondary States */

.btn-hover-secondary {
  transition: background-color var(--duration-150) var(--ease-smooth),
              border-color var(--duration-150) var(--ease-smooth),
              color var(--duration-150) var(--ease-smooth),
              transform var(--duration-150) var(--ease-smooth),
              box-shadow var(--duration-150) var(--ease-smooth);
}

.btn-hover-secondary:hover {
  background-color: var(--color-neutral-50);
  border-color: var(--color-primary-300);
  color: var(--color-primary-700);
}

.btn-hover-secondary:active {
  background-color: var(--color-neutral-100);
  transform: scale(0.98);
}

.btn-hover-secondary:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

/* Button Ghost States */

.btn-hover-ghost {
  transition: background-color var(--duration-150) var(--ease-smooth),
              color var(--duration-150) var(--ease-smooth);
}

.btn-hover-ghost:hover {
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-900);
}

.btn-hover-ghost:active {
  background-color: var(--color-neutral-200);
}

.btn-hover-ghost:focus-visible {
  outline: 2px solid var(--color-neutral-400);
  outline-offset: 2px;
}

/* Button Danger States */

.btn-hover-danger {
  transition: background-color var(--duration-150) var(--ease-smooth),
              transform var(--duration-150) var(--ease-smooth),
              box-shadow var(--duration-150) var(--ease-smooth);
}

.btn-hover-danger:hover {
  background-color: var(--color-error-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-hover-danger:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.btn-hover-danger:focus-visible {
  outline: 2px solid var(--color-error);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
}

/* Icon Button States */

.icon-btn-hover {
  transition: background-color var(--duration-150) var(--ease-smooth),
              color var(--duration-150) var(--ease-smooth),
              transform var(--duration-150) var(--ease-smooth);
}

.icon-btn-hover:hover {
  background-color: var(--color-neutral-100);
  color: var(--color-primary-600);
  transform: scale(1.05);
}

.icon-btn-hover:active {
  transform: scale(0.95);
  background-color: var(--color-neutral-200);
}

.icon-btn-hover:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

/* Input/Select Focus States */

.input-focus {
  transition: border-color var(--duration-200) var(--ease-smooth),
              box-shadow var(--duration-200) var(--ease-smooth),
              background-color var(--duration-200) var(--ease-smooth);
}

.input-focus:hover {
  border-color: var(--color-neutral-400);
}

.input-focus:focus,
.input-focus:focus-visible {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  background-color: var(--bg-primary);
}

.input-focus:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--color-neutral-50);
}

.input-focus:disabled:hover {
  border-color: var(--border-light);
}

/* Card Hover States */

.card-hover {
  transition: transform var(--duration-200) var(--ease-smooth),
              box-shadow var(--duration-200) var(--ease-smooth),
              border-color var(--duration-200) var(--ease-smooth);
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary-200);
}

.card-hover:active {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Card Interactive (Clickable) */

.card-interactive {
  cursor: pointer;
  transition: transform var(--duration-150) var(--ease-smooth),
              box-shadow var(--duration-150) var(--ease-smooth),
              background-color var(--duration-150) var(--ease-smooth);
}

.card-interactive:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-xl);
  background-color: var(--bg-primary);
}

.card-interactive:active {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.card-interactive:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 3px;
}

/* Table Row Hover States */

.table-row-hover {
  transition: background-color var(--duration-150) var(--ease-smooth);
}

.table-row-hover:hover {
  background-color: var(--color-neutral-50);
}

.table-row-hover:active {
  background-color: var(--color-neutral-100);
}

/* Link Hover States */

.link-hover {
  transition: color var(--duration-150) var(--ease-smooth),
              text-decoration-color var(--duration-150) var(--ease-smooth);
  text-decoration: underline;
  text-decoration-color: transparent;
}

.link-hover:hover {
  color: var(--color-primary-700);
  text-decoration-color: var(--color-primary-700);
}

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

/* Badge/Pill Hover States */

.badge-hover {
  transition: background-color var(--duration-150) var(--ease-smooth),
              color var(--duration-150) var(--ease-smooth),
              transform var(--duration-150) var(--ease-smooth);
}

.badge-hover:hover {
  filter: brightness(0.95);
  transform: scale(1.05);
}

.badge-hover:active {
  transform: scale(1);
}

/* Tab Hover States */

.tab-hover {
  transition: background-color var(--duration-150) var(--ease-smooth),
              color var(--duration-150) var(--ease-smooth),
              border-color var(--duration-150) var(--ease-smooth);
}

.tab-hover:hover {
  background-color: var(--color-neutral-50);
  color: var(--color-neutral-900);
}

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

.tab-hover.active {
  background-color: var(--bg-primary);
  color: var(--color-primary-700);
  border-bottom-color: var(--color-primary-600);
}

/* Dropdown Item Hover States */

.dropdown-item-hover {
  transition: background-color var(--duration-150) var(--ease-smooth),
              color var(--duration-150) var(--ease-smooth),
              padding-left var(--duration-150) var(--ease-smooth);
}

.dropdown-item-hover:hover {
  background-color: var(--color-primary-50);
  color: var(--color-primary-700);
  padding-left: 1rem;
}

.dropdown-item-hover:active {
  background-color: var(--color-primary-100);
}

.dropdown-item-hover:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: -2px;
}

/* Checkbox/Radio Custom Styles */

.checkbox-hover,
.radio-hover {
  transition: border-color var(--duration-150) var(--ease-smooth),
              background-color var(--duration-150) var(--ease-smooth),
              box-shadow var(--duration-150) var(--ease-smooth);
}

.checkbox-hover:hover,
.radio-hover:hover {
  border-color: var(--color-primary-500);
}

.checkbox-hover:focus,
.radio-hover:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.checkbox-hover:checked,
.radio-hover:checked {
  background-color: var(--color-primary-600);
  border-color: var(--color-primary-600);
}

.checkbox-hover:checked:hover,
.radio-hover:checked:hover {
  background-color: var(--color-primary-700);
  border-color: var(--color-primary-700);
}

/* Switch/Toggle Hover States */

.switch-hover {
  transition: background-color var(--duration-200) var(--ease-smooth);
}

.switch-hover:hover {
  background-color: var(--color-neutral-400);
}

.switch-hover:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.switch-hover.active {
  background-color: var(--color-primary-600);
}

.switch-hover.active:hover {
  background-color: var(--color-primary-700);
}

/* Pagination Button States */

.pagination-btn {
  transition: background-color var(--duration-150) var(--ease-smooth),
              border-color var(--duration-150) var(--ease-smooth),
              color var(--duration-150) var(--ease-smooth),
              transform var(--duration-150) var(--ease-smooth);
}

.pagination-btn:hover:not(:disabled) {
  background-color: var(--color-primary-50);
  border-color: var(--color-primary-300);
  color: var(--color-primary-700);
}

.pagination-btn:active:not(:disabled) {
  transform: scale(0.95);
}

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

.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination-btn.active {
  background-color: var(--color-primary-600);
  border-color: var(--color-primary-600);
  color: white;
}

/* Navigation Menu Item States */

.nav-item-hover {
  transition: background-color var(--duration-150) var(--ease-smooth),
              color var(--duration-150) var(--ease-smooth),
              padding-left var(--duration-150) var(--ease-smooth),
              transform var(--duration-150) var(--ease-smooth);
}

.nav-item-hover:hover {
  background-color: var(--color-neutral-50);
  color: var(--color-neutral-900);
  transform: translateX(2px);
}

.nav-item-hover:active {
  background-color: var(--color-neutral-100);
}

.nav-item-hover:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: -2px;
}

.nav-item-hover.active {
  background-color: var(--color-primary-50);
  color: var(--color-primary-700);
  font-weight: 600;
}

/* Search Input Focus State */

.search-input-focus {
  transition: width var(--duration-300) var(--ease-smooth),
              border-color var(--duration-200) var(--ease-smooth),
              box-shadow var(--duration-200) var(--ease-smooth);
}

.search-input-focus:focus {
  width: 100%;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Modal Close Button States */

.modal-close-hover {
  transition: background-color var(--duration-150) var(--ease-smooth),
              color var(--duration-150) var(--ease-smooth),
              transform var(--duration-150) var(--ease-smooth);
}

.modal-close-hover:hover {
  background-color: var(--color-error-light);
  color: var(--color-error);
  transform: rotate(90deg);
}

.modal-close-hover:active {
  transform: rotate(90deg) scale(0.95);
}

.modal-close-hover:focus-visible {
  outline: 2px solid var(--color-error);
  outline-offset: 2px;
}

/* Avatar/Profile Hover States */

.avatar-hover {
  transition: transform var(--duration-150) var(--ease-smooth),
              box-shadow var(--duration-150) var(--ease-smooth),
              border-color var(--duration-150) var(--ease-smooth);
}

.avatar-hover:hover {
  transform: scale(1.05);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
  border-color: var(--color-primary-500);
}

.avatar-hover:active {
  transform: scale(1.02);
}

/* Action Icon States (Edit, Delete, View) */

.action-icon-edit {
  transition: color var(--duration-150) var(--ease-smooth),
              background-color var(--duration-150) var(--ease-smooth),
              transform var(--duration-150) var(--ease-smooth);
}

.action-icon-edit:hover {
  color: var(--color-primary-700);
  background-color: var(--color-primary-50);
  transform: scale(1.1);
}

.action-icon-delete {
  transition: color var(--duration-150) var(--ease-smooth),
              background-color var(--duration-150) var(--ease-smooth),
              transform var(--duration-150) var(--ease-smooth);
}

.action-icon-delete:hover {
  color: var(--color-error);
  background-color: var(--color-error-light);
  transform: scale(1.1);
}

.action-icon-view {
  transition: color var(--duration-150) var(--ease-smooth),
              background-color var(--duration-150) var(--ease-smooth),
              transform var(--duration-150) var(--ease-smooth);
}

.action-icon-view:hover {
  color: var(--color-info);
  background-color: var(--color-info-light);
  transform: scale(1.1);
}

/* Disabled State Override */

.disabled,
[disabled],
.disabled:hover,
[disabled]:hover {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  pointer-events: none;
}

/* Focus-visible polyfill for better accessibility */

:focus:not(:focus-visible) {
  outline: none;
}

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

/* Ripple Effect removed - too heavy for mobile, causes hiding elements */

/* ========================================
   PROGRESS & LOADING BARS
   ======================================== */

/* Progress bar fill animation */

@keyframes progress-fill {
  from {
    transform: scaleX(0);
    transform-origin: left;
  }

  to {
    transform: scaleX(1);
    transform-origin: left;
  }
}

.progress-fill {
  animation: progress-fill var(--duration-500) var(--ease-out);
}

/* Indeterminate progress animation */

@keyframes progress-indeterminate {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(400%);
  }
}

.progress-indeterminate {
  animation: progress-indeterminate 1.5s ease-in-out infinite;
}

/* ========================================
   PAGE-SPECIFIC ANIMATIONS
   ======================================== */

/* Dashboard stats cards entrance - simplified */

.dashboard-card {
  opacity: 1;
  animation: none;
}

/* Table row entrance animation */

.table-row-enter {
  animation: slide-in-left var(--duration-250) var(--ease-out);
}

/* Card flip removed - not needed */

/* ========================================
   MICRO-INTERACTIONS
   ======================================== */

/* Ripple effect container removed */

/* Icon bounce removed - too distracting */

/* ========================================
   ACCESSIBILITY HELPERS
   ======================================== */

/* Skip to content animation */

.skip-to-content {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--color-primary-600);
  color: white;
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  border-radius: var(--radius);
  transition: top var(--duration-200) var(--ease-out);
  z-index: var(--z-tooltip);
}

.skip-to-content:focus {
  top: var(--space-4);
}

/* ========================================
   VIEWPORT-BASED ANIMATIONS (Intersection Observer)
   ======================================== */

/* Elements animate when scrolled into view */

.animate-on-scroll {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity var(--duration-500) var(--ease-out),
              transform var(--duration-500) var(--ease-out);
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reveal from left on scroll */

.reveal-left {
  opacity: 0;
  transform: translateX(-2rem);
  transition: opacity var(--duration-500) var(--ease-out),
              transform var(--duration-500) var(--ease-out);
}

.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Reveal from right on scroll */

.reveal-right {
  opacity: 0;
  transform: translateX(2rem);
  transition: opacity var(--duration-500) var(--ease-out),
              transform var(--duration-500) var(--ease-out);
}

.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ========================================
   TRANSITION UTILITIES
   ======================================== */

/* Smooth all transitions */

.transition-all {
  transition: all var(--duration-200) var(--ease-smooth);
}

/* Specific property transitions */

.transition-colors {
  transition: var(--transition-colors);
}

.transition-opacity {
  transition: var(--transition-opacity);
}

.transition-transform {
  transition: var(--transition-transform);
}

.transition-shadow {
  transition: var(--transition-shadow);
}

/* Slower transitions for complex animations */

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

/* Faster transitions for quick feedback */

.transition-fast {
  transition-duration: var(--duration-100);
}

/* Import Mobile Utilities */

/**
 * Mobile-Specific Utilities and Overrides
 * 
 * Breakpoint: < 768px (Mobile devices)
 * 
 * @package SGLE_Theme
 * @version 1.0.0
 * @date 2026-01-16
 */

/* ========================================
   MOBILE DISPLAY UTILITIES
   ======================================== */

.mobile-only {
  display: block;
}

.desktop-only {
  display: none;
}

@media (min-width: 768px) {
  .mobile-only {
    display: none;
  }

  .desktop-only {
    display: block;
  }
}

/* Inline variants */

.mobile-only-inline {
  display: inline;
}

.mobile-only-flex {
  display: flex;
}

@media (min-width: 768px) {
  .mobile-only-inline,
  .mobile-only-flex {
    display: none !important;
  }
}

/* ========================================
   TOUCH TARGET UTILITIES
   ======================================== */

/**
 * Ensures minimum touch target size
 * iOS: 44x44px minimum
 * Material Design: 48x48px recommended
 */

.touch-target {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.touch-target-lg {
  min-width: 48px;
  min-height: 48px;
}

/* Touch feedback */

.touch-feedback:active {
  opacity: 0.7;
  transition: opacity 0.1s ease;
}

/* ========================================
   MOBILE SPACING UTILITIES
   ======================================== */

/* Only apply on mobile devices */

@media (max-width: 767px) {
  /* Padding utilities */

  .mobile-p-2 {
    padding: 0.5rem !important;
  }

  .mobile-p-3 {
    padding: 0.75rem !important;
  }

  .mobile-p-4 {
    padding: 1rem !important;
  }

  .mobile-p-5 {
    padding: 1.25rem !important;
  }

  .mobile-p-6 {
    padding: 1.5rem !important;
  }

  /* Padding X (horizontal) */

  .mobile-px-2 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .mobile-px-3 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .mobile-px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .mobile-px-5 {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .mobile-px-6 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* Padding Y (vertical) */

  .mobile-py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .mobile-py-3 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  .mobile-py-4 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .mobile-py-5 {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }

  .mobile-py-6 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  /* Margin utilities */

  .mobile-m-2 {
    margin: 0.5rem !important;
  }

  .mobile-m-3 {
    margin: 0.75rem !important;
  }

  .mobile-m-4 {
    margin: 1rem !important;
  }

  .mobile-m-5 {
    margin: 1.25rem !important;
  }

  /* Margin bottom */

  .mobile-mb-2 {
    margin-bottom: 0.5rem !important;
  }

  .mobile-mb-3 {
    margin-bottom: 0.75rem !important;
  }

  .mobile-mb-4 {
    margin-bottom: 1rem !important;
  }

  .mobile-mb-5 {
    margin-bottom: 1.25rem !important;
  }

  .mobile-mb-6 {
    margin-bottom: 1.5rem !important;
  }

  /* Gap utilities */

  .mobile-gap-2 {
    gap: 0.5rem !important;
  }

  .mobile-gap-3 {
    gap: 0.75rem !important;
  }

  .mobile-gap-4 {
    gap: 1rem !important;
  }
}

/* ========================================
   MOBILE TYPOGRAPHY UTILITIES
   ======================================== */

@media (max-width: 767px) {
  /* Font sizes */

  .mobile-text-xs {
    font-size: 0.6875rem !important;
    line-height: 1rem !important;
  }

  /* 11px */

  .mobile-text-sm {
    font-size: 0.8125rem !important;
    line-height: 1.125rem !important;
  }

  /* 13px */

  .mobile-text-base {
    font-size: 0.9375rem !important;
    line-height: 1.375rem !important;
  }

  /* 15px */

  .mobile-text-lg {
    font-size: 1rem !important;
    line-height: 1.5rem !important;
  }

  /* 16px */

  .mobile-text-xl {
    font-size: 1.125rem !important;
    line-height: 1.625rem !important;
  }

  /* 18px */

  .mobile-text-2xl {
    font-size: 1.375rem !important;
    line-height: 1.875rem !important;
  }

  /* 22px */

  .mobile-text-3xl {
    font-size: 1.625rem !important;
    line-height: 2.125rem !important;
  }

  /* 26px */

  /* Text truncation */

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

  /* Multi-line truncation */

  .mobile-line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .mobile-line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ========================================
   SAFE AREA INSETS (iOS)
   ======================================== */

/**
 * Support for iOS notch and home indicator
 * Uses CSS environment variables
 */

.safe-top {
  padding-top: env(safe-area-inset-top);
}

.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

.safe-left {
  padding-left: env(safe-area-inset-left);
}

.safe-right {
  padding-right: env(safe-area-inset-right);
}

.safe-all {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Margin variants */

.safe-margin-bottom {
  margin-bottom: env(safe-area-inset-bottom);
}

/* ========================================
   MOBILE LAYOUT UTILITIES
   ======================================== */

@media (max-width: 767px) {
  /* Full width on mobile */

  .mobile-full-width {
    width: 100% !important;
  }

  /* Full height on mobile */

  .mobile-full-height {
    height: 100vh !important;
  }

  /* Flex direction column on mobile */

  .mobile-flex-col {
    flex-direction: column !important;
  }

  /* Hide on mobile */

  .mobile-hidden {
    display: none !important;
  }

  /* Stack elements vertically */

  .mobile-stack > * {
    width: 100% !important;
  }

  /* Grid to single column */

  .mobile-grid-1 {
    grid-template-columns: 1fr !important;
  }
}

/* ========================================
   MOBILE SCROLL UTILITIES
   ======================================== */

/* Smooth scrolling */

.mobile-scroll-smooth {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Hide scrollbar but keep functionality */

.mobile-scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.mobile-scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Horizontal scroll container */

.mobile-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.mobile-scroll-x::-webkit-scrollbar {
  display: none;
}

/* ========================================
   MOBILE INTERACTION UTILITIES
   ======================================== */

/* Prevent text selection on buttons/interactive elements */

.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Remove tap highlight (iOS) */

.no-tap-highlight {
  -webkit-tap-highlight-color: transparent;
}

/* Active state for mobile buttons */

.mobile-active:active {
  transform: scale(0.97);
  transition: transform 0.1s ease-out;
}

/* Prevent zoom on input focus (iOS) */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select {
  font-size: 16px !important;
}

/* ========================================
   MOBILE COMPONENT OVERRIDES
   ======================================== */

@media (max-width: 767px) {
  /* Buttons - ensure minimum touch target */

  .btn,
  button {
    min-height: 44px;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Inputs - ensure minimum touch target */

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  textarea,
  select {
    min-height: 44px;
    font-size: 16px;
  }

  /* Cards - reduce padding */

  .card {
    padding: 1rem;
  }

  /* Modals - full screen on mobile */

  .modal-content {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    border-radius: 0;
  }

  /* Tables - hide on mobile (use card view instead) */

  .data-table {
    display: block;
  }
}

/* ========================================
   MOBILE FORM ENHANCEMENTS (Phase 5)
   ======================================== */

@media (max-width: 767px) {
  /* Input Component Mobile Optimizations */

  /* Ensure proper padding for touch on all inputs */

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  textarea,
  select {
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
  }

  /* Textarea specific height */

  textarea {
    min-height: 88px;
    /* 44px * 2 for multi-line */
  }

  /* Error states more visible on mobile */

  input:invalid:not(:-moz-placeholder), select:invalid:not(:-moz-placeholder), textarea:invalid:not(:-moz-placeholder) {
    border-color: rgb(239 68 68);
    border-width: 2px;
    padding-right: 2.5rem;
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2720%27 height=%2720%27 viewBox=%270 0 20 20%27%3E%3Cpath fill=%27%23ef4444%27 d=%27M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm1 15H9v-2h2v2zm0-4H9V5h2v6z%27/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 20px 20px;
  }

  input.error,
  select.error,
  textarea.error,
  input:invalid:not(:placeholder-shown),
  select:invalid:not(:placeholder-shown),
  textarea:invalid:not(:placeholder-shown) {
    border-color: rgb(239 68 68);
    border-width: 2px;
    padding-right: 2.5rem;
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2720%27 height=%2720%27 viewBox=%270 0 20 20%27%3E%3Cpath fill=%27%23ef4444%27 d=%27M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm1 15H9v-2h2v2zm0-4H9V5h2v6z%27/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 20px 20px;
  }

  /* Success states on mobile */

  input:valid:not(:-moz-placeholder):not([type="search"]), select:valid:not(:-moz-placeholder), textarea:valid:not(:-moz-placeholder) {
    border-color: rgb(34 197 94);
    border-width: 2px;
  }

  input.success,
  select.success,
  textarea.success,
  input:valid:not(:placeholder-shown):not([type="search"]),
  select:valid:not(:placeholder-shown),
  textarea:valid:not(:placeholder-shown) {
    border-color: rgb(34 197 94);
    border-width: 2px;
  }

  /* Focus states enhanced for mobile */

  input:focus,
  select:focus,
  textarea:focus {
    outline: none;
    border-width: 2px;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  }

  /* Error message styling */

  .text-red-500[role="alert"],
  [id$="-error"]:not(.hidden) {
    font-size: 0.8125rem;
    line-height: 1.25rem;
    margin-top: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .text-red-500[role="alert"]::before,
  [id$="-error"]:not(.hidden)::before {
    content: '⚠';
    font-size: 1rem;
  }
}

/* ========================================
   MOBILE SELECT & DROPDOWN ENHANCEMENTS (Phase 5)
   ======================================== */

@media (max-width: 767px) {
  /* Native select on mobile for better UX */

  select {
    appearance: auto;
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    background-image: none !important;
    padding-right: 1rem !important;
    cursor: pointer;
  }

  /* Select with custom arrow - override only on mobile */

  select[class*="appearance-none"] {
    -moz-appearance: auto !important;
         appearance: auto !important;
    -webkit-appearance: menulist !important;
    background-image: none !important;
  }

  /* Multiple select optimization */

  select[multiple] {
    min-height: 132px;
    /* 44px * 3 */
    padding: 0.5rem;
  }

  select[multiple] option {
    padding: 0.75rem;
    min-height: 44px;
    border-radius: 0.5rem;
    margin-bottom: 0.25rem;
  }

  /* Date and time pickers - native on mobile */

  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"] {
    -moz-appearance: auto;
         appearance: auto;
    -webkit-appearance: auto;
    cursor: pointer;
  }

  /* Custom dropdown containers (if any) - hide on mobile */

  .custom-select-dropdown,
  .select2-container,
  .choices,
  [class*="custom-dropdown"] {
    display: none !important;
  }

  /* Show native selects on mobile */

  select.custom-select,
  select[class*="custom"] {
    display: block !important;
    opacity: 1 !important;
    position: static !important;
  }
}

/* ========================================
   MOBILE BUTTON ENHANCEMENTS (Phase 5)
   ======================================== */

@media (max-width: 767px) {
  /* All buttons - ensure touch targets and mobile states */

  button,
  .btn,
  [type="button"],
  [type="submit"],
  [type="reset"],
  a.button,
  .button {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }

  /* Button active state for mobile feedback */

  button:active,
  .btn:active,
  [type="button"]:active,
  [type="submit"]:active,
  [type="reset"]:active,
  a.button:active,
  .button:active {
    transform: scale(0.97);
    opacity: 0.9;
  }

  /* Disabled button states */

  button:disabled,
  .btn:disabled,
  [type="button"]:disabled,
  [type="submit"]:disabled,
  [type="reset"]:disabled,
  button[disabled],
  .btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
  }

  /* Loading button state */

  button.loading,
  .btn.loading,
  button[data-loading="true"],
  .btn[data-loading="true"] {
    position: relative;
    color: transparent;
    pointer-events: none;
  }

  button.loading::after,
  .btn.loading::after,
  button[data-loading="true"]::after,
  .btn[data-loading="true"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: button-spin 0.6s linear infinite;
  }

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

  /* Icon + text button alignment */

  button .material-symbols-outlined,
  .btn .material-symbols-outlined,
  button span[class*="icon"],
  .btn span[class*="icon"] {
    font-size: 1.125rem;
    line-height: 1;
  }

  /* Full width buttons on mobile */

  button.mobile-full,
  .btn.mobile-full,
  .modal-footer button:not(.btn-secondary),
  .modal-footer .btn:not(.btn-secondary) {
    width: 100%;
  }

  /* Button groups - stack vertically on mobile */

  .button-group,
  .btn-group,
  [class*="button-group"] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
  }

  .button-group > button,
  .button-group > .btn,
  .btn-group > button,
  .btn-group > .btn {
    width: 100%;
    margin: 0;
  }

  /* Icon-only buttons - ensure square touch target */

  button:not(:has(span:not(.material-symbols-outlined))),
  .btn:not(:has(span:not(.material-symbols-outlined))),
  button.icon-only,
  .btn.icon-only,
  [class*="icon-btn"] {
    min-width: 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 0.75rem;
  }

  /* Close buttons */

  button[id*="close"],
  button[class*="close"],
  .close-button,
  [aria-label*="Fechar"],
  [aria-label*="Close"] {
    min-width: 44px;
    width: 44px;
    height: 44px;
    padding: 0;
  }
}

/* ========================================
   MOBILE ANIMATIONS
   ======================================== */

/* Slide in from bottom (common for mobile modals) */

@keyframes mobile-slide-in-bottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes mobile-slide-out-bottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

.mobile-slide-in {
  animation: mobile-slide-in-bottom 0.3s ease-out;
}

.mobile-slide-out {
  animation: mobile-slide-out-bottom 0.3s ease-out;
}

/* Press effect */

@media (max-width: 767px) {
  .mobile-press:active {
    transform: scale(0.98);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.1s ease-out;
  }
}

/* ========================================
   MOBILE VIRTUAL KEYBOARD SUPPORT
   ======================================== */

/* Adjust viewport when virtual keyboard is visible */

@supports (height: 100dvh) {
  .mobile-viewport-height {
    height: 100dvh;
  }
}

/* Fix for iOS Safari viewport height issue */

.mobile-min-viewport-height {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

/* ========================================
   MOBILE TABLES → CARDS (Phase 6)
   ======================================== */

/**
 * Enhanced mobile table to card transformation
 * Tables become compact, touch-friendly cards on mobile
 * Supports data-label attributes for field labels
 */

@media (max-width: 767px) {
  /* Hide table structure, convert to cards */

  .data-table,
  table.w-full {
    display: block;
    border: none;
    background: transparent;
  }

  .data-table thead,
  table.w-full thead {
    display: none;
  }

  .data-table tbody,
  table.w-full tbody {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  /* Transform each row into a card */

  .data-table tr,
  table.w-full tbody tr {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    background: white;
    border: 1px solid rgb(226 232 240);
    border-radius: 0.75rem;
    padding: 1rem;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  }

  /* Active/press effect for cards */

  .data-table tr:active,
  table.w-full tbody tr:active {
    transform: scale(0.98);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  }

  /* Hide loading rows properly */

  .data-table tr#table-loading,
  .data-table tr#cards-loading,
  .data-table tr#os-loading,
  table.w-full tbody tr#table-loading,
  table.w-full tbody tr#cards-loading,
  table.w-full tbody tr#os-loading {
    display: block;
    border-radius: 0.75rem;
    padding: 1.5rem;
  }

  /* Transform each cell into a row with label */

  .data-table td,
  table.w-full tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    border: none;
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  /* Add label from data-label attribute */

  .data-table td[data-label]::before,
  table.w-full tbody td[data-label]::before {
    content: attr(data-label);
    font-weight: 600;
    color: rgb(100 116 139);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    flex-shrink: 0;
    margin-right: 1rem;
  }

  /* Value styling */

  .data-table td[data-label] > *,
  table.w-full tbody td[data-label] > * {
    text-align: right;
    flex-shrink: 0;
  }

  /* Actions cell - full width with top border */

  .data-table td:has(.actions),
  .data-table td:has(button),
  .data-table td:has(.flex.gap-2),
  table.w-full tbody td:has(.actions),
  table.w-full tbody td:has(button),
  table.w-full tbody td:has(.flex.gap-2) {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgb(241 245 249);
  }

  /* Hide "before" label for action cells */

  .data-table td:has(.actions)::before,
  .data-table td:has(button)::before,
  table.w-full tbody td:has(.actions)::before,
  table.w-full tbody td:has(button)::before {
    display: none;
  }

  /* Action buttons in cards */

  .data-table td button,
  .data-table td .btn,
  table.w-full tbody td button,
  table.w-full tbody td .btn {
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
  }

  /* Status badges in cards */

  .data-table td .badge,
  .data-table td [class*="badge"],
  .data-table td [class*="status"],
  table.w-full tbody td .badge,
  table.w-full tbody td [class*="badge"],
  table.w-full tbody td [class*="status"] {
    font-size: 0.75rem;
    padding: 0.25rem 0.625rem;
    border-radius: 0.5rem;
    font-weight: 700;
    white-space: nowrap;
  }

  /* Ensure proper wrapping for long content */

  .data-table td[data-label],
  table.w-full tbody td[data-label] {
    word-break: break-word;
    min-height: auto;
  }

  /* First cell - highlight as title/main info */

  .data-table tr td:first-child,
  table.w-full tbody tr td:first-child {
    font-weight: 600;
    font-size: 1rem;
    color: rgb(15 23 42);
    padding-bottom: 0.25rem;
  }

  .data-table tr td:first-child::before,
  table.w-full tbody tr td:first-child::before {
    font-size: 0.75rem;
    font-weight: 700;
  }

  /* Empty state in cards */

  .data-table tr:has(.text-center),
  table.w-full tbody tr:has(.text-center) {
    display: block;
    padding: 2rem;
    text-align: center;
  }

  .data-table tr:has(.text-center) td,
  table.w-full tbody tr:has(.text-center) td {
    display: block;
  }

  .data-table tr:has(.text-center) td::before,
  table.w-full tbody tr:has(.text-center) td::before {
    display: none;
  }

  /* Skeleton loading in card format */

  .data-table tr.animate-pulse td,
  table.w-full tbody tr.animate-pulse td {
    display: block;
  }

  .data-table tr.animate-pulse td::before,
  table.w-full tbody tr.animate-pulse td::before {
    display: none;
  }

  /* Table container - remove overflow */

  .overflow-x-auto:has(table) {
    overflow-x: visible;
  }

  /* Table wrapper card styling on mobile */

  .bg-white.rounded-2xl:has(table) {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
  }

  /* Keep pagination/footer visible */

  .data-table + div,
  table.w-full + div,
  .bg-white.rounded-2xl:has(table) > div:last-child {
    display: flex;
    background: white;
    border: 1px solid rgb(226 232 240);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-top: 0.75rem;
  }
}

/* ========================================
   MOBILE BOTTOM NAVIGATION (Phase 7)
   ======================================== */

/**
 * Bottom navigation bar for mobile
 * Fixed at bottom with safe area support
 * Active state styling and smooth transitions
 */

@media (max-width: 1023px) {
  #bottom-nav {
    /* Ensure it's above other content */
    box-shadow: 0 -1px 3px 0 rgb(0 0 0 / 0.1), 0 -1px 2px -1px rgb(0 0 0 / 0.1);
  }

  /* Bottom nav items */

  .bottom-nav-item {
    /* Touch target guaranteed */
    min-width: 64px;
    min-height: 48px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* Active state press effect */

  .bottom-nav-item:active {
    transform: scale(0.95);
  }

  /* Icon animation on active */

  .bottom-nav-item[aria-current="page"] .material-symbols-outlined {
    animation: bottomNavPulse 0.3s ease-out;
  }

  /* Add bottom padding to main content to prevent overlap */

  #main-content {
    padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
  }
}

/* Bottom nav pulse animation */

@keyframes bottomNavPulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
  }

  100% {
    transform: scale(1.1);
  }
}

/* Ensure bottom nav is hidden on desktop */

@media (min-width: 1024px) {
  #bottom-nav {
    display: none;
  }
}

/* ========================================
   MOBILE ANIMATIONS & MICROINTERACTIONS (Phase 8)
   ======================================== */

/**
 * Mobile-specific animations optimized for touch devices
 * Focus: Tap feedback, press effects, and smooth microinteractions
 */

@media (max-width: 767px) {
  /* ====================================
     TAP & PRESS ANIMATIONS (Simplified)
     ==================================== */

  /* Subtle tap feedback - for buttons and interactive elements */

  .tap-scale:active {
    transform: scale(0.97);
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Card press effect - minimal visual feedback */

  .card-press:active {
    opacity: 0.95;
    transition: opacity 0.1s ease;
  }

  /* ====================================
     RIPPLE EFFECT (Removed - causes element hiding)
     ==================================== */

  /* ====================================
     ATTENTION ANIMATIONS (Removed - too distracting)
     ==================================== */

  /* ====================================
     LOADING STATES & SPINNERS
     ==================================== */

  /* Mobile-optimized spinner */

  .spinner-mobile {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(59, 130, 246, 0.2);
    border-top-color: rgb(59, 130, 246);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }

  .spinner-mobile-lg {
    width: 32px;
    height: 32px;
    border-width: 3px;
  }

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

  /* Pulse animation for loading states */

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

  @keyframes pulse {
    0%, 100% {
      opacity: 1;
    }

    50% {
      opacity: 0.5;
    }
  }

  /* Skeleton shimmer - optimized for mobile */

  .skeleton-mobile {
    background: linear-gradient(
      90deg,
      #f1f5f9 0%,
      #e2e8f0 20%,
      #f1f5f9 40%,
      #f1f5f9 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
  }

  @keyframes shimmer {
    0% {
      background-position: -200% 0;
    }

    100% {
      background-position: 200% 0;
    }
  }

  /* Progress bar animation */

  .progress-mobile {
    position: relative;
    overflow: hidden;
    background: #e2e8f0;
    border-radius: 9999px;
    height: 4px;
  }

  .progress-mobile::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 40%;
    background: rgb(59, 130, 246);
    border-radius: 9999px;
    animation: progress 1.5s ease-in-out infinite;
  }

  @keyframes progress {
    0% {
      left: -40%;
    }

    100% {
      left: 100%;
    }
  }

  /* ====================================
     SLIDE & FADE ANIMATIONS
     ==================================== */

  /* Slide in from bottom (for mobile modals) - simplified */

  .slide-in-bottom {
    animation: slideInBottom 0.25s ease-out;
  }

  @keyframes slideInBottom {
    from {
      transform: translateY(20px);
      opacity: 0;
    }

    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  /* Slide out removed - not needed for clean mobile */

  /* Fade in up - for list items - simplified */

  .fade-in-up {
    animation: fadeInUp 0.3s ease-out;
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ====================================
     SCALE ANIMATIONS (Removed - not needed)
     ==================================== */

  /* ====================================
     STAGGER ANIMATIONS (Removed - causes visual clutter)
     ==================================== */

  /* ====================================
     ATTENTION ANIMATIONS (Removed - too aggressive)
     ==================================== */

  /* ====================================
     HOVER STATES (Touch-friendly)
     ==================================== */

  /* Smooth color transition */

  .hover-transition {
    transition: opacity 0.2s ease, background-color 0.2s ease;
  }

  /* Subtle touch feedback - removed elevation */

  .hover-elevate:active {
    opacity: 0.9;
    transition: opacity 0.1s ease;
  }

  /* ====================================
     UTILITY CLASSES
     ==================================== */

  /* Disable animations for reduced motion preference */

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  /* Hardware acceleration for smooth animations */

  .gpu-accelerate {
    transform: translateZ(0);
    will-change: transform;
  }

  /* Smooth opacity transition */

  .opacity-transition {
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

/* ========================================
   MOBILE MODAL ENHANCEMENTS
   ======================================== */

@media (max-width: 767px) {
  /* Category Modal - Mobile Full Height with Proper Scrolling */

  #modal-category-manage .modal-content {
    max-height: 95vh;
    height: 95vh;
    display: flex;
    flex-direction: column;
  }

  /* Split layout - stack on mobile */

  #modal-category-manage .modal-content > div:nth-child(2) {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  /* Left side (category list) - mobile 50% height */

  #modal-category-manage .modal-content > div:nth-child(2) > div:first-child {
    flex: 0 0 45%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid rgb(229 231 235);
  }

  /* Right side (form) - mobile 50% height */

  #modal-category-manage .modal-content > div:nth-child(2) > div:last-child {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  /* Ensure scrollable areas work properly */

  #category-list-container {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-height: 0;
  }

  /* Form container scrollable */

  #modal-category-manage .modal-content > div:nth-child(2) > div:last-child > div:nth-child(2) {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-height: 0;
  }

  /* Sticky form actions on mobile */

  #form-category > div:last-child {
    position: sticky;
    bottom: -1rem;
    margin-bottom: -1rem;
    z-index: 10;
    box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.05);
  }

  /* Category list items - better spacing */

  #category-list-items > div {
    min-height: 60px;
  }

  /* Delete confirmation modal - better mobile layout */

  #modal-confirm-delete-category .modal-content {
    max-height: auto;
    border-radius: 1rem 1rem 0 0;
  }
}

/* ========================================
   MOBILE DEBUGGING (Development Only)
   ======================================== */

/* Uncomment to see touch target areas during development */

/*
.touch-target::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border: 1px dashed red;
  pointer-events: none;
  opacity: 0.3;
}
*/

/* Tailwind Directives */

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

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

/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
 */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: Fira Code, Courier New, monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

input:where([type='text']),input:where(:not([type])),input:where([type='email']),input:where([type='url']),input:where([type='password']),input:where([type='number']),input:where([type='date']),input:where([type='datetime-local']),input:where([type='month']),input:where([type='search']),input:where([type='tel']),input:where([type='time']),input:where([type='week']),select:where([multiple]),textarea,select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}

input:where([type='text']):focus, input:where(:not([type])):focus, input:where([type='email']):focus, input:where([type='url']):focus, input:where([type='password']):focus, input:where([type='number']):focus, input:where([type='date']):focus, input:where([type='datetime-local']):focus, input:where([type='month']):focus, input:where([type='search']):focus, input:where([type='tel']):focus, input:where([type='time']):focus, input:where([type='week']):focus, select:where([multiple]):focus, textarea:focus, select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #2563eb;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: #6b7280;
  opacity: 1;
}

input::placeholder,textarea::placeholder {
  color: #6b7280;
  opacity: 1;
}

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-date-and-time-value {
  min-height: 1.5em;
  text-align: inherit;
}

::-webkit-datetime-edit {
  display: inline-flex;
}

::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
  padding-top: 0;
  padding-bottom: 0;
}

select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}

select:where([multiple]),select:where([size]:not([size="1"])) {
  background-image: initial;
  background-position: initial;
  background-repeat: unset;
  background-size: initial;
  padding-right: 0.75rem;
  -webkit-print-color-adjust: unset;
          print-color-adjust: unset;
}

input:where([type='checkbox']),input:where([type='radio']) {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  color: #2563eb;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  --tw-shadow: 0 0 #0000;
}

input:where([type='checkbox']) {
  border-radius: 0px;
}

input:where([type='radio']) {
  border-radius: 100%;
}

input:where([type='checkbox']):focus,input:where([type='radio']):focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

input:where([type='checkbox']):checked,input:where([type='radio']):checked {
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

input:where([type='checkbox']):checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

@media (forced-colors: active)  {
  input:where([type='checkbox']):checked {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

input:where([type='radio']):checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

@media (forced-colors: active)  {
  input:where([type='radio']):checked {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

input:where([type='checkbox']):checked:hover,input:where([type='checkbox']):checked:focus,input:where([type='radio']):checked:hover,input:where([type='radio']):checked:focus {
  border-color: transparent;
  background-color: currentColor;
}

input:where([type='checkbox']):indeterminate {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

@media (forced-colors: active)  {
  input:where([type='checkbox']):indeterminate {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

input:where([type='checkbox']):indeterminate:hover,input:where([type='checkbox']):indeterminate:focus {
  border-color: transparent;
  background-color: currentColor;
}

input:where([type='file']) {
  background: unset;
  border-color: inherit;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-size: unset;
  line-height: inherit;
}

input:where([type='file']):focus {
  outline: 1px solid ButtonText;
  outline: 1px auto -webkit-focus-ring-color;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Focus Visible for Accessibility */

*:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
  --tw-ring-offset-width: 2px;
}

.\!container {
  width: 100% !important;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .\!container {
    max-width: 640px !important;
  }

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

@media (min-width: 768px) {
  .\!container {
    max-width: 768px !important;
  }

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

@media (min-width: 1024px) {
  .\!container {
    max-width: 1024px !important;
  }

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

@media (min-width: 1280px) {
  .\!container {
    max-width: 1280px !important;
  }

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

@media (min-width: 1536px) {
  .\!container {
    max-width: 1536px !important;
  }

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

/* ===============================================
     BUTTONS
     =============================================== */

/* Primary Button */

/* Secondary Button */

/* Ghost Button */

/* Danger Button */

/* Outline Button */

/* Icon Button */

/* ===============================================
     CARDS
     =============================================== */

/* Base Card */

.\!card {
  border-radius: 1rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition: var(--transition-shadow);
}

@media (max-width: 767px) {
  .\!card.rounded-2xl:has(table) {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
  }

  .\!card.rounded-2xl:has(table) > div:last-child {
    display: flex;
    background: white;
    border: 1px solid rgb(226 232 240);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-top: 0.75rem;
  }
}

.card {
  border-radius: 1rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition: var(--transition-shadow);
}

@media (max-width: 767px) {
  .card.rounded-2xl:has(table) {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
  }

  .card.rounded-2xl:has(table) > div:last-child {
    display: flex;
    background: white;
    border: 1px solid rgb(226 232 240);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-top: 0.75rem;
  }
}

/* Interactive Card */

/* Card Header */

/* Card Title */

/* Card Description */

/* ===============================================
     INPUTS & FORMS
     =============================================== */

/* Base Input */

.input {
  display: block;
  width: 100%;
  border-radius: 1rem;
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition: var(--transition-colors);
}

@media (max-width: 767px) {
  
  table.input {
    display: block;
    border: none;
    background: transparent;
  }

  
  table.input thead {
    display: none;
  }

  
  table.input tbody {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  
  table.input tbody tr {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    background: white;
    border: 1px solid rgb(226 232 240);
    border-radius: 0.75rem;
    padding: 1rem;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  }

  
  table.input tbody tr:active {
    transform: scale(0.98);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  }

  
  table.input tbody tr#table-loading,
  table.input tbody tr#cards-loading,
  table.input tbody tr#os-loading {
    display: block;
    border-radius: 0.75rem;
    padding: 1.5rem;
  }

  
  table.input tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    border: none;
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  
  table.input tbody td[data-label]::before {
    content: attr(data-label);
    font-weight: 600;
    color: rgb(100 116 139);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    flex-shrink: 0;
    margin-right: 1rem;
  }

  
  table.input tbody td[data-label] > * {
    text-align: right;
    flex-shrink: 0;
  }

  
  table.input tbody td:has(.actions),
  table.input tbody td:has(button),
  table.input tbody td:has(.flex.gap-2) {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgb(241 245 249);
  }

  
  table.input tbody td:has(.actions)::before,
  table.input tbody td:has(button)::before {
    display: none;
  }

  
  table.input tbody td button,
  table.input tbody td .btn {
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
  }

  
  table.input tbody td .badge,
  table.input tbody td [class*="badge"],
  table.input tbody td [class*="status"] {
    font-size: 0.75rem;
    padding: 0.25rem 0.625rem;
    border-radius: 0.5rem;
    font-weight: 700;
    white-space: nowrap;
  }

  
  table.input tbody td[data-label] {
    word-break: break-word;
    min-height: auto;
  }

  
  table.input tbody tr td:first-child {
    font-weight: 600;
    font-size: 1rem;
    color: rgb(15 23 42);
    padding-bottom: 0.25rem;
  }

  
  table.input tbody tr td:first-child::before {
    font-size: 0.75rem;
    font-weight: 700;
  }

  
  table.input tbody tr:has(.text-center) {
    display: block;
    padding: 2rem;
    text-align: center;
  }

  
  table.input tbody tr:has(.text-center) td {
    display: block;
  }

  
  table.input tbody tr:has(.text-center) td::before {
    display: none;
  }

  
  table.input tbody tr.animate-pulse td {
    display: block;
  }

  
  table.input tbody tr.animate-pulse td::before {
    display: none;
  }

  
  table.input + div {
    display: flex;
    background: white;
    border: 1px solid rgb(226 232 240);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-top: 0.75rem;
  }
}

.input::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

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

.input:focus {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}

/* Input with Error */

/* Input with Success */

/* Label */

.label {
  margin-bottom: 0.375rem;
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

/* Label Required */

/* Helper Text */

/* Error Text */

/* ===============================================
     BADGES & STATUS
     =============================================== */

/* Base Badge */

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition: var(--transition-transform);
}

/* Badge with Dot */

/* ===============================================
     MODALS & DIALOGS
     =============================================== */

/* Modal Backdrop */

.modal-backdrop {
  position: fixed;
  inset: 0px;
  z-index: 1040;
  background-color: rgb(15 23 42 / 0.5);
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition: var(--transition-opacity);
}

/* Modal Container */

.\!modal {
  position: fixed;
  inset: 0px;
  z-index: 1050;
  overflow-y: auto;
}

.modal {
  position: fixed;
  inset: 0px;
  z-index: 1050;
  overflow-y: auto;
}

/* Modal Content */

.modal-content {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
  width: 100%;
  max-width: 32rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius: 1.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition: all var(--duration-200) var(--ease-smooth);
}

@media (max-width: 767px) {
  
  table.modal-content {
    display: block;
    border: none;
    background: transparent;
  }

  
  table.modal-content thead {
    display: none;
  }

  
  table.modal-content tbody {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  
  table.modal-content tbody tr {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    background: white;
    border: 1px solid rgb(226 232 240);
    border-radius: 0.75rem;
    padding: 1rem;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  }

  
  table.modal-content tbody tr:active {
    transform: scale(0.98);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  }

  
  table.modal-content tbody tr#table-loading,
  table.modal-content tbody tr#cards-loading,
  table.modal-content tbody tr#os-loading {
    display: block;
    border-radius: 0.75rem;
    padding: 1.5rem;
  }

  
  table.modal-content tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    border: none;
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  
  table.modal-content tbody td[data-label]::before {
    content: attr(data-label);
    font-weight: 600;
    color: rgb(100 116 139);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    flex-shrink: 0;
    margin-right: 1rem;
  }

  
  table.modal-content tbody td[data-label] > * {
    text-align: right;
    flex-shrink: 0;
  }

  
  table.modal-content tbody td:has(.actions),
  table.modal-content tbody td:has(button),
  table.modal-content tbody td:has(.flex.gap-2) {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgb(241 245 249);
  }

  
  table.modal-content tbody td:has(.actions)::before,
  table.modal-content tbody td:has(button)::before {
    display: none;
  }

  
  table.modal-content tbody td button,
  table.modal-content tbody td .btn {
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
  }

  
  table.modal-content tbody td .badge,
  table.modal-content tbody td [class*="badge"],
  table.modal-content tbody td [class*="status"] {
    font-size: 0.75rem;
    padding: 0.25rem 0.625rem;
    border-radius: 0.5rem;
    font-weight: 700;
    white-space: nowrap;
  }

  
  table.modal-content tbody td[data-label] {
    word-break: break-word;
    min-height: auto;
  }

  
  table.modal-content tbody tr td:first-child {
    font-weight: 600;
    font-size: 1rem;
    color: rgb(15 23 42);
    padding-bottom: 0.25rem;
  }

  
  table.modal-content tbody tr td:first-child::before {
    font-size: 0.75rem;
    font-weight: 700;
  }

  
  table.modal-content tbody tr:has(.text-center) {
    display: block;
    padding: 2rem;
    text-align: center;
  }

  
  table.modal-content tbody tr:has(.text-center) td {
    display: block;
  }

  
  table.modal-content tbody tr:has(.text-center) td::before {
    display: none;
  }

  
  table.modal-content tbody tr.animate-pulse td {
    display: block;
  }

  
  table.modal-content tbody tr.animate-pulse td::before {
    display: none;
  }

  .modal-content.rounded-2xl:has(table) {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
  }

  .modal-content.rounded-2xl:has(table) > div:last-child {
    display: flex;
    background: white;
    border: 1px solid rgb(226 232 240);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-top: 0.75rem;
  }

  
  table.modal-content + div {
    display: flex;
    background: white;
    border: 1px solid rgb(226 232 240);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-top: 0.75rem;
  }
}

/* Modal Header */

/* Modal Title */

.modal-title {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}

/* Modal Body */

/* Modal Footer */

/* ===============================================
     TABLES
     =============================================== */

/* Table Container */

/* Table */

.table {
  min-width: 100%;
}

.table > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
  --tw-divide-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-divide-opacity, 1));
}

/* Table Header */

/* Table Body */

/* ===============================================
     UTILITIES
     =============================================== */

/* Loading Spinner */

.spinner {
  display: inline-block;
  height: 1rem;
  width: 1rem;
}

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

  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.spinner {
  border-radius: 9999px;
  border-width: 2px;
  border-color: currentColor;
  border-top-color: transparent;
  animation: spin 1s linear infinite;
}

/* Divider */

/* Skeleton Loader */

@keyframes pulse {
  50% {
    opacity: 0.5;
  }

  0%, 100% {
    opacity: 1;
  }
}

.skeleton {
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@media (max-width: 767px) {
  .data-table tr.skeleton td,
  table.w-full tbody tr.skeleton td {
    display: block;
  }

  .data-table tr.skeleton td::before,
  table.w-full tbody tr.skeleton td::before {
    display: none;
  }
}

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

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

.visible {
  visibility: visible;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.inset-y-0 {
  top: 0px;
  bottom: 0px;
}

.-left-\[21px\] {
  left: -21px;
}

.bottom-0 {
  bottom: 0px;
}

.left-0 {
  left: 0px;
}

.left-3 {
  left: 0.75rem;
}

.right-0 {
  right: 0px;
}

.right-1\.5 {
  right: 0.375rem;
}

.right-3 {
  right: 0.75rem;
}

.right-4 {
  right: 1rem;
}

.top-0 {
  top: 0px;
}

.top-1\.5 {
  top: 0.375rem;
}

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

.top-4 {
  top: 1rem;
}

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

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

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

.z-\[1050\] {
  z-index: 1050;
}

.z-\[1060\] {
  z-index: 1060;
}

.z-\[1100\] {
  z-index: 1100;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

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

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

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

.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}

.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}

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

.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-3 {
  margin-left: 0.75rem;
}

.ml-5 {
  margin-left: 1.25rem;
}

.ml-6 {
  margin-left: 1.5rem;
}

.ml-auto {
  margin-left: auto;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mr-1\.5 {
  margin-right: 0.375rem;
}

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

.mt-1 {
  margin-top: 0.25rem;
}

.mt-1\.5 {
  margin-top: 0.375rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.block {
  display: block;
}

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

.inline {
  display: inline;
}

.flex {
  display: flex;
}

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

.table {
  display: table;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.size-1\.5 {
  width: 0.375rem;
  height: 0.375rem;
}

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

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

.size-2 {
  width: 0.5rem;
  height: 0.5rem;
}

.size-24 {
  width: 6rem;
  height: 6rem;
}

.size-3 {
  width: 0.75rem;
  height: 0.75rem;
}

.h-1 {
  height: 0.25rem;
}

.h-1\.5 {
  height: 0.375rem;
}

.h-10 {
  height: 2.5rem;
}

.h-11 {
  height: 2.75rem;
}

.h-12 {
  height: 3rem;
}

.h-14 {
  height: 3.5rem;
}

.h-16 {
  height: 4rem;
}

.h-2 {
  height: 0.5rem;
}

.h-2\.5 {
  height: 0.625rem;
}

.h-20 {
  height: 5rem;
}

.h-24 {
  height: 6rem;
}

.h-3 {
  height: 0.75rem;
}

.h-32 {
  height: 8rem;
}

.h-4 {
  height: 1rem;
}

.h-40 {
  height: 10rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-7 {
  height: 1.75rem;
}

.h-8 {
  height: 2rem;
}

.h-9 {
  height: 2.25rem;
}

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

.h-\[95vh\] {
  height: 95vh;
}

.h-\[96vh\] {
  height: 96vh;
}

.h-full {
  height: 100%;
}

.h-screen {
  height: 100vh;
}

.max-h-48 {
  max-height: 12rem;
}

.max-h-\[96vh\] {
  max-height: 96vh;
}

.max-h-\[calc\(100vh-240px\)\] {
  max-height: calc(100vh - 240px);
}

.max-h-\[calc\(100vh-280px\)\] {
  max-height: calc(100vh - 280px);
}

.max-h-\[calc\(95vh-180px\)\] {
  max-height: calc(95vh - 180px);
}

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

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

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

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

.w-1 {
  width: 0.25rem;
}

.w-1\.5 {
  width: 0.375rem;
}

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

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

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

.w-10 {
  width: 2.5rem;
}

.w-11 {
  width: 2.75rem;
}

.w-12 {
  width: 3rem;
}

.w-14 {
  width: 3.5rem;
}

.w-16 {
  width: 4rem;
}

.w-2 {
  width: 0.5rem;
}

.w-2\.5 {
  width: 0.625rem;
}

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

.w-20 {
  width: 5rem;
}

.w-24 {
  width: 6rem;
}

.w-28 {
  width: 7rem;
}

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

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

.w-32 {
  width: 8rem;
}

.w-36 {
  width: 9rem;
}

.w-4 {
  width: 1rem;
}

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

.w-40 {
  width: 10rem;
}

.w-5 {
  width: 1.25rem;
}

.w-56 {
  width: 14rem;
}

.w-64 {
  width: 16rem;
}

.w-7 {
  width: 1.75rem;
}

.w-8 {
  width: 2rem;
}

.w-9 {
  width: 2.25rem;
}

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

.w-full {
  width: 100%;
}

.w-px {
  width: 1px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.border-collapse {
  border-collapse: collapse;
}

.-translate-x-full {
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

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

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

.translate-x-full {
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

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

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

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

@keyframes pulse {
  50% {
    opacity: 0.5;
  }

  0%, 100% {
    opacity: 1;
  }
}

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

@keyframes scale-in {
  0% {
    transform: scale(0.95);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.animate-scale-in {
  animation: scale-in 0.2s ease-out;
}

@keyframes slide-in-up {
  0% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(0);
  }
}

.animate-slide-in-up {
  animation: slide-in-up 0.3s ease-out;
}

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

  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

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

.cursor-pointer {
  cursor: pointer;
}

.resize-none {
  resize: none;
}

.resize {
  resize: both;
}

.scroll-mt-20 {
  scroll-margin-top: 5rem;
}

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

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

.grid-cols-10 {
  grid-template-columns: repeat(10, 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));
}

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

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

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

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

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

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

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

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

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

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

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

.gap-0\.5 {
  gap: 0.125rem;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-10 {
  gap: 2.5rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-2\.5 {
  gap: 0.625rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.space-x-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

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

.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}

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

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

.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}

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

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

.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-divide-opacity, 1));
}

.divide-neutral-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(241 245 249 / var(--tw-divide-opacity, 1));
}

.divide-neutral-200 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-divide-opacity, 1));
}

.divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(241 245 249 / var(--tw-divide-opacity, 1));
}

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

.overflow-hidden {
  overflow: hidden;
}

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

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

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

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

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

.rounded {
  border-radius: 0.5rem;
}

.rounded-2xl {
  border-radius: 2rem;
}

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

.rounded-lg {
  border-radius: 1rem;
}

.rounded-md {
  border-radius: 0.75rem;
}

.rounded-sm {
  border-radius: 0.375rem;
}

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

.rounded-t-2xl {
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
}

.rounded-t-3xl {
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
}

.border {
  border-width: 1px;
}

.border-2 {
  border-width: 2px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-b-2 {
  border-bottom-width: 2px;
}

.border-l-2 {
  border-left-width: 2px;
}

.border-r {
  border-right-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-t-2 {
  border-top-width: 2px;
}

.border-none {
  border-style: none;
}

.border-amber-200 {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}

.border-amber-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
}

.border-amber-500 {
  --tw-border-opacity: 1;
  border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
}

.border-blue-100 {
  --tw-border-opacity: 1;
  border-color: rgb(219 234 254 / var(--tw-border-opacity, 1));
}

.border-blue-200 {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}

.border-blue-300 {
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}

.border-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.border-blue-600 {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}

.border-emerald-100 {
  --tw-border-opacity: 1;
  border-color: rgb(209 250 229 / var(--tw-border-opacity, 1));
}

.border-emerald-200 {
  --tw-border-opacity: 1;
  border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
}

.border-emerald-300 {
  --tw-border-opacity: 1;
  border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
}

.border-emerald-500 {
  --tw-border-opacity: 1;
  border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
}

.border-error\/20 {
  border-color: rgb(239 68 68 / 0.2);
}

.border-gray-100 {
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}

.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.border-green-200 {
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
}

.border-green-300 {
  --tw-border-opacity: 1;
  border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));
}

.border-green-500 {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}

.border-indigo-200 {
  --tw-border-opacity: 1;
  border-color: rgb(199 210 254 / var(--tw-border-opacity, 1));
}

.border-neutral-100 {
  --tw-border-opacity: 1;
  border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
}

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

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

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

.border-primary-200 {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}

.border-primary-600 {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}

.border-purple-200 {
  --tw-border-opacity: 1;
  border-color: rgb(233 213 255 / var(--tw-border-opacity, 1));
}

.border-purple-300 {
  --tw-border-opacity: 1;
  border-color: rgb(216 180 254 / var(--tw-border-opacity, 1));
}

.border-purple-600 {
  --tw-border-opacity: 1;
  border-color: rgb(147 51 234 / var(--tw-border-opacity, 1));
}

.border-red-100 {
  --tw-border-opacity: 1;
  border-color: rgb(254 226 226 / var(--tw-border-opacity, 1));
}

.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}

.border-red-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}

.border-red-500 {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}

.border-red-600 {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
}

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

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

.border-slate-200\/50 {
  border-color: rgb(226 232 240 / 0.5);
}

.border-slate-200\/80 {
  border-color: rgb(226 232 240 / 0.8);
}

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

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

.border-success\/20 {
  border-color: rgb(16 185 129 / 0.2);
}

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

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

.border-t-transparent {
  border-top-color: transparent;
}

.bg-\[\#10b981\] {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}

.bg-\[\#137fec\] {
  --tw-bg-opacity: 1;
  background-color: rgb(19 127 236 / var(--tw-bg-opacity, 1));
}

.bg-\[\#7c3aed\] {
  --tw-bg-opacity: 1;
  background-color: rgb(124 58 237 / var(--tw-bg-opacity, 1));
}

.bg-\[\#ec1313\] {
  --tw-bg-opacity: 1;
  background-color: rgb(236 19 19 / var(--tw-bg-opacity, 1));
}

.bg-\[\#ec4899\] {
  --tw-bg-opacity: 1;
  background-color: rgb(236 72 153 / var(--tw-bg-opacity, 1));
}

.bg-\[\#f59e0b\] {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}

.bg-amber-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}

.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}

.bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}

.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}

.bg-black\/60 {
  background-color: rgb(0 0 0 / 0.6);
}

.bg-black\/70 {
  background-color: rgb(0 0 0 / 0.7);
}

.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

.bg-blue-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(147 197 253 / var(--tw-bg-opacity, 1));
}

.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}

.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

.bg-blue-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}

.bg-emerald-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}

.bg-emerald-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}

.bg-emerald-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}

.bg-error {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}

.bg-error-light {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}

.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.bg-gray-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}

.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.bg-gray-50\/30 {
  background-color: rgb(249 250 251 / 0.3);
}

.bg-gray-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}

.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}

.bg-green-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}

.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}

.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}

.bg-indigo-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}

.bg-indigo-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}

.bg-indigo-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
}

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

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

.bg-neutral-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}

.bg-neutral-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
}

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

.bg-orange-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}

.bg-primary-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

.bg-primary-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.bg-primary-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}

.bg-primary-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

.bg-primary-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}

.bg-purple-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}

.bg-purple-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}

.bg-purple-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
}

.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}

.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}

.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

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

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

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

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

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

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

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

.bg-slate-900\/50 {
  background-color: rgb(15 23 42 / 0.5);
}

.bg-success {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}

.bg-success-light {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}

.bg-warning {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}

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

.bg-white\/80 {
  background-color: rgb(255 255 255 / 0.8);
}

.bg-yellow-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
}

.bg-yellow-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}

.bg-opacity-0 {
  --tw-bg-opacity: 0;
}

.bg-opacity-50 {
  --tw-bg-opacity: 0.5;
}

.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.from-blue-100 {
  --tw-gradient-from: #dbeafe var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(219 234 254 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-50 {
  --tw-gradient-from: #eff6ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-500 {
  --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-600 {
  --tw-gradient-from: #2563eb var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-green-500 {
  --tw-gradient-from: #22c55e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-green-600 {
  --tw-gradient-from: #16a34a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(22 163 74 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-neutral-900 {
  --tw-gradient-from: #0f172a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-orange-500 {
  --tw-gradient-from: #f97316 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary-100 {
  --tw-gradient-from: #dbeafe var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(219 234 254 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary-500 {
  --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-purple-500 {
  --tw-gradient-from: #a855f7 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-purple-600 {
  --tw-gradient-from: #9333ea var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-red-500 {
  --tw-gradient-from: #ef4444 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-slate-50 {
  --tw-gradient-from: #f8fafc var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(248 250 252 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-white {
  --tw-gradient-from: #fff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-yellow-500 {
  --tw-gradient-from: #eab308 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(234 179 8 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-blue-600 {
  --tw-gradient-to: rgb(37 99 235 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #2563eb var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-green-600 {
  --tw-gradient-to: rgb(22 163 74 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #16a34a var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-orange-600 {
  --tw-gradient-to: rgb(234 88 12 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #ea580c var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-purple-600 {
  --tw-gradient-to: rgb(147 51 234 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #9333ea var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-white {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-yellow-600 {
  --tw-gradient-to: rgb(202 138 4 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #ca8a04 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-blue-50 {
  --tw-gradient-to: #eff6ff var(--tw-gradient-to-position);
}

.to-blue-600 {
  --tw-gradient-to: #2563eb var(--tw-gradient-to-position);
}

.to-blue-700 {
  --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position);
}

.to-green-700 {
  --tw-gradient-to: #15803d var(--tw-gradient-to-position);
}

.to-indigo-50 {
  --tw-gradient-to: #eef2ff var(--tw-gradient-to-position);
}

.to-neutral-800 {
  --tw-gradient-to: #1e293b var(--tw-gradient-to-position);
}

.to-orange-700 {
  --tw-gradient-to: #c2410c var(--tw-gradient-to-position);
}

.to-primary-50 {
  --tw-gradient-to: #eff6ff var(--tw-gradient-to-position);
}

.to-primary-600 {
  --tw-gradient-to: #2563eb var(--tw-gradient-to-position);
}

.to-purple-700 {
  --tw-gradient-to: #7e22ce var(--tw-gradient-to-position);
}

.to-red-600 {
  --tw-gradient-to: #dc2626 var(--tw-gradient-to-position);
}

.to-slate-100 {
  --tw-gradient-to: #f1f5f9 var(--tw-gradient-to-position);
}

.to-slate-50\/50 {
  --tw-gradient-to: rgb(248 250 252 / 0.5) var(--tw-gradient-to-position);
}

.to-white {
  --tw-gradient-to: #fff var(--tw-gradient-to-position);
}

.to-yellow-700 {
  --tw-gradient-to: #a16207 var(--tw-gradient-to-position);
}

.bg-\[length\:20px_20px\] {
  background-size: 20px 20px;
}

.bg-\[right_12px_center\] {
  background-position: right 12px center;
}

.bg-no-repeat {
  background-repeat: no-repeat;
}

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

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

.p-0 {
  padding: 0px;
}

.p-1 {
  padding: 0.25rem;
}

.p-1\.5 {
  padding: 0.375rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-2\.5 {
  padding: 0.625rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

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

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

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

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-20 {
  padding-bottom: 5rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.pl-0 {
  padding-left: 0px;
}

.pl-10 {
  padding-left: 2.5rem;
}

.pl-11 {
  padding-left: 2.75rem;
}

.pr-10 {
  padding-right: 2.5rem;
}

.pr-12 {
  padding-right: 3rem;
}

.pr-4 {
  padding-right: 1rem;
}

.pt-16 {
  padding-top: 4rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-5 {
  padding-top: 1.25rem;
}

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

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

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

.font-display {
  font-family: Inter, sans-serif;
}

.font-mono {
  font-family: Fira Code, Courier New, monospace;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-5xl {
  font-size: 3rem;
  line-height: 1;
}

.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}

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

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

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

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

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

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

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

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

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

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

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

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-black {
  font-weight: 900;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.font-light {
  font-weight: 300;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

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

.leading-normal {
  line-height: 1.5;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-\[0\.015em\] {
  letter-spacing: 0.015em;
}

.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.text-amber-600 {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}

.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}

.text-amber-800 {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}

.text-amber-900 {
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}

.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}

.text-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}

.text-blue-900 {
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}

.text-emerald-500 {
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}

.text-emerald-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}

.text-emerald-700 {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}

.text-emerald-800 {
  --tw-text-opacity: 1;
  color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}

.text-emerald-900 {
  --tw-text-opacity: 1;
  color: rgb(6 78 59 / var(--tw-text-opacity, 1));
}

.text-error-dark {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}

.text-green-700 {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}

.text-green-900 {
  --tw-text-opacity: 1;
  color: rgb(20 83 45 / var(--tw-text-opacity, 1));
}

.text-indigo-700 {
  --tw-text-opacity: 1;
  color: rgb(67 56 202 / var(--tw-text-opacity, 1));
}

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

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

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

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

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

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

.text-orange-600 {
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}

.text-primary-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.text-primary-700 {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}

.text-purple-600 {
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}

.text-purple-700 {
  --tw-text-opacity: 1;
  color: rgb(126 34 206 / var(--tw-text-opacity, 1));
}

.text-purple-800 {
  --tw-text-opacity: 1;
  color: rgb(107 33 168 / var(--tw-text-opacity, 1));
}

.text-purple-900 {
  --tw-text-opacity: 1;
  color: rgb(88 28 135 / var(--tw-text-opacity, 1));
}

.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.text-red-900 {
  --tw-text-opacity: 1;
  color: rgb(127 29 29 / var(--tw-text-opacity, 1));
}

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

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

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

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

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

.text-success-dark {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}

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

.text-yellow-600 {
  --tw-text-opacity: 1;
  color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}

.text-yellow-700 {
  --tw-text-opacity: 1;
  color: rgb(161 98 7 / var(--tw-text-opacity, 1));
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.opacity-30 {
  opacity: 0.3;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-75 {
  opacity: 0.75;
}

.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_-2px_8px_rgba\(0\2c 0\2c 0\2c 0\.06\)\] {
  --tw-shadow: 0 -2px 8px rgba(0,0,0,0.06);
  --tw-shadow-colored: 0 -2px 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_-4px_24px_rgba\(0\2c 0\2c 0\2c 0\.04\)\] {
  --tw-shadow: 0 -4px 24px rgba(0,0,0,0.04);
  --tw-shadow-colored: 0 -4px 24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-blue-600\/20 {
  --tw-shadow-color: rgb(37 99 235 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-primary-500\/25 {
  --tw-shadow-color: rgb(59 130 246 / 0.25);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-primary-600\/20 {
  --tw-shadow-color: rgb(37 99 235 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-red-600\/20 {
  --tw-shadow-color: rgb(220 38 38 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}

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

.outline {
  outline-style: solid;
}

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

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

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

.ring-inset {
  --tw-ring-inset: inset;
}

.ring-\[\#137fec\] {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(19 127 236 / var(--tw-ring-opacity, 1));
}

.ring-blue-600\/10 {
  --tw-ring-color: rgb(37 99 235 / 0.1);
}

.ring-green-600\/10 {
  --tw-ring-color: rgb(22 163 74 / 0.1);
}

.ring-primary-50 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(239 246 255 / var(--tw-ring-opacity, 1));
}

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

.ring-slate-600\/10 {
  --tw-ring-color: rgb(71 85 105 / 0.1);
}

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

.ring-offset-2 {
  --tw-ring-offset-width: 2px;
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-xl {
  --tw-backdrop-blur: blur(24px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-filter {
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

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

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

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

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

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

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

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

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

.duration-300 {
  transition-duration: 300ms;
}

.duration-500 {
  transition-duration: 500ms;
}

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

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

/* Text utilities using design tokens */

/* Background utilities using design tokens */

/* Border utilities using design tokens */

/* Smooth transitions */

/* Custom Scrollbar */

.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--color-neutral-200);
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--color-neutral-300);
}

/**
 * Custom Base Styles
 */

/**
 * Custom Component Styles
 * Using new design system tokens and Shadcn/UI inspired patterns
 */

/**
 * Custom Utilities
 */

.placeholder\:text-gray-400::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.placeholder\:text-gray-400::placeholder {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.placeholder\:text-neutral-400::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

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

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

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

.last\:border-0:last-child {
  border-width: 0px;
}

.hover\:-translate-y-1:hover {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

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

.hover\:scale-110:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:border-blue-100:hover {
  --tw-border-opacity: 1;
  border-color: rgb(219 234 254 / var(--tw-border-opacity, 1));
}

.hover\:border-blue-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}

.hover\:border-blue-500:hover {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.hover\:border-emerald-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
}

.hover\:border-gray-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.hover\:border-gray-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}

.hover\:border-green-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));
}

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

.hover\:border-neutral-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
}

.hover\:border-orange-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(253 186 116 / var(--tw-border-opacity, 1));
}

.hover\:border-primary-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}

.hover\:border-primary-500:hover {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.hover\:border-purple-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(216 180 254 / var(--tw-border-opacity, 1));
}

.hover\:border-red-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}

.hover\:border-red-600:hover {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
}

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

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

.hover\:bg-amber-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-50\/50:hover {
  background-color: rgb(239 246 255 / 0.5);
}

.hover\:bg-blue-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}

.hover\:bg-emerald-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}

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

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

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

.hover\:bg-primary-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

.hover\:bg-primary-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-primary-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}

.hover\:bg-purple-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(126 34 206 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}

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

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

.hover\:bg-white\/60:hover {
  background-color: rgb(255 255 255 / 0.6);
}

.hover\:from-blue-700:hover {
  --tw-gradient-from: #1d4ed8 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(29 78 216 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:from-green-700:hover {
  --tw-gradient-from: #15803d var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(21 128 61 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:from-purple-700:hover {
  --tw-gradient-from: #7e22ce var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(126 34 206 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:via-blue-700:hover {
  --tw-gradient-to: rgb(29 78 216 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #1d4ed8 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.hover\:to-blue-800:hover {
  --tw-gradient-to: #1e40af var(--tw-gradient-to-position);
}

.hover\:to-green-800:hover {
  --tw-gradient-to: #166534 var(--tw-gradient-to-position);
}

.hover\:to-purple-800:hover {
  --tw-gradient-to: #6b21a8 var(--tw-gradient-to-position);
}

.hover\:text-blue-600:hover {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.hover\:text-blue-700:hover {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-600:hover {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-900:hover {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

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

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

.hover\:text-primary-600:hover {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.hover\:text-primary-700:hover {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}

.hover\:text-purple-700:hover {
  --tw-text-opacity: 1;
  color: rgb(126 34 206 / var(--tw-text-opacity, 1));
}

.hover\:text-red-600:hover {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.hover\:text-red-700:hover {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

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

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

.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.hover\:opacity-75:hover {
  opacity: 0.75;
}

.hover\:shadow:hover {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-lg:hover {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-md:hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-sm:hover {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-xl:hover {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-blue-500\/10:hover {
  --tw-shadow-color: rgb(59 130 246 / 0.1);
  --tw-shadow: var(--tw-shadow-colored);
}

.hover\:shadow-green-500\/10:hover {
  --tw-shadow-color: rgb(34 197 94 / 0.1);
  --tw-shadow: var(--tw-shadow-colored);
}

.hover\:shadow-orange-500\/10:hover {
  --tw-shadow-color: rgb(249 115 22 / 0.1);
  --tw-shadow: var(--tw-shadow-colored);
}

.hover\:shadow-primary-600\/30:hover {
  --tw-shadow-color: rgb(37 99 235 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}

.hover\:shadow-purple-500\/10:hover {
  --tw-shadow-color: rgb(168 85 247 / 0.1);
  --tw-shadow: var(--tw-shadow-colored);
}

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

.hover\:ring-\[\#10b981\]:hover {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity, 1));
}

.hover\:ring-\[\#7c3aed\]:hover {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(124 58 237 / var(--tw-ring-opacity, 1));
}

.hover\:ring-\[\#ec1313\]:hover {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(236 19 19 / var(--tw-ring-opacity, 1));
}

.hover\:ring-\[\#ec4899\]:hover {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(236 72 153 / var(--tw-ring-opacity, 1));
}

.hover\:ring-\[\#f59e0b\]:hover {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(245 158 11 / var(--tw-ring-opacity, 1));
}

.hover\:ring-blue-50:hover {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(239 246 255 / var(--tw-ring-opacity, 1));
}

.hover\:ring-green-50:hover {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(240 253 244 / var(--tw-ring-opacity, 1));
}

.hover\:ring-orange-50:hover {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 247 237 / var(--tw-ring-opacity, 1));
}

.hover\:ring-primary-100:hover {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(219 234 254 / var(--tw-ring-opacity, 1));
}

.hover\:ring-purple-50:hover {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(250 245 255 / var(--tw-ring-opacity, 1));
}

.hover\:ring-offset-2:hover {
  --tw-ring-offset-width: 2px;
}

.focus\:border-blue-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.focus\:border-green-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}

.focus\:border-primary-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.focus\:border-purple-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(168 85 247 / var(--tw-border-opacity, 1));
}

.focus\:border-red-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}

.focus\:border-transparent:focus {
  border-color: transparent;
}

.focus\:shadow-md:focus {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

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

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

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

.focus\:ring-blue-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}

.focus\:ring-blue-500\/20:focus {
  --tw-ring-color: rgb(59 130 246 / 0.2);
}

.focus\:ring-blue-500\/30:focus {
  --tw-ring-color: rgb(59 130 246 / 0.3);
}

.focus\:ring-blue-500\/50:focus {
  --tw-ring-color: rgb(59 130 246 / 0.5);
}

.focus\:ring-green-500\/20:focus {
  --tw-ring-color: rgb(34 197 94 / 0.2);
}

.focus\:ring-neutral-500\/50:focus {
  --tw-ring-color: rgb(100 116 139 / 0.5);
}

.focus\:ring-primary-500\/20:focus {
  --tw-ring-color: rgb(59 130 246 / 0.2);
}

.focus\:ring-primary-500\/50:focus {
  --tw-ring-color: rgb(59 130 246 / 0.5);
}

.focus\:ring-purple-500\/20:focus {
  --tw-ring-color: rgb(168 85 247 / 0.2);
}

.focus\:ring-red-500\/20:focus {
  --tw-ring-color: rgb(239 68 68 / 0.2);
}

.focus\:ring-red-500\/50:focus {
  --tw-ring-color: rgb(239 68 68 / 0.5);
}

.focus\:ring-slate-500\/20:focus {
  --tw-ring-color: rgb(100 116 139 / 0.2);
}

.active\:scale-95:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:scale-\[0\.98\]:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:bg-blue-800:active {
  --tw-bg-opacity: 1;
  background-color: rgb(30 64 175 / var(--tw-bg-opacity, 1));
}

.active\:bg-gray-200:active {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

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

.active\:bg-primary-800:active {
  --tw-bg-opacity: 1;
  background-color: rgb(30 64 175 / var(--tw-bg-opacity, 1));
}

.active\:bg-red-100:active {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}

.active\:bg-red-200:active {
  --tw-bg-opacity: 1;
  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
}

.active\:bg-red-800:active {
  --tw-bg-opacity: 1;
  background-color: rgb(153 27 27 / var(--tw-bg-opacity, 1));
}

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

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

.active\:from-blue-800:active {
  --tw-gradient-from: #1e40af var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 64 175 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.active\:to-blue-900:active {
  --tw-gradient-to: #1e3a8a var(--tw-gradient-to-position);
}

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

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

.disabled\:opacity-40:disabled {
  opacity: 0.4;
}

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

.disabled\:shadow-sm:disabled {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.disabled\:hover\:border-gray-300:hover:disabled {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.disabled\:hover\:border-neutral-300:hover:disabled {
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}

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

.group:hover .group-hover\:scale-110 {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:bg-orange-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 88 12 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:bg-purple-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:from-blue-200 {
  --tw-gradient-from: #bfdbfe var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(191 219 254 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.group:hover .group-hover\:from-primary-200 {
  --tw-gradient-from: #bfdbfe var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(191 219 254 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.group:hover .group-hover\:to-blue-100 {
  --tw-gradient-to: #dbeafe var(--tw-gradient-to-position);
}

.group:hover .group-hover\:to-primary-100 {
  --tw-gradient-to: #dbeafe var(--tw-gradient-to-position);
}

.group:hover .group-hover\:text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-orange-600 {
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-primary-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-purple-600 {
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}

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

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

.group:hover .group-hover\:text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.group:hover .group-hover\:shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.group:active .group-active\:scale-95 {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

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

.group:active .group-active\:opacity-50 {
  opacity: 0.5;
}

.dark\:border-blue-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(30 64 175 / var(--tw-border-opacity, 1));
}

.dark\:border-emerald-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(6 95 70 / var(--tw-border-opacity, 1));
}

.dark\:border-gray-600:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}

.dark\:border-gray-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}

.dark\:border-gray-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(31 41 55 / var(--tw-border-opacity, 1));
}

.dark\:border-purple-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(107 33 168 / var(--tw-border-opacity, 1));
}

.dark\:border-red-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));
}

.dark\:border-slate-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
}

.dark\:bg-blue-900\/20:is(.dark *) {
  background-color: rgb(30 58 138 / 0.2);
}

.dark\:bg-emerald-900\/20:is(.dark *) {
  background-color: rgb(6 78 59 / 0.2);
}

.dark\:bg-gray-700:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}

.dark\:bg-gray-800:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.dark\:bg-gray-800\/50:is(.dark *) {
  background-color: rgb(31 41 55 / 0.5);
}

.dark\:bg-purple-900\/20:is(.dark *) {
  background-color: rgb(88 28 135 / 0.2);
}

.dark\:bg-red-900\/20:is(.dark *) {
  background-color: rgb(127 29 29 / 0.2);
}

.dark\:bg-slate-900:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}

.dark\:text-blue-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}

.dark\:text-blue-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}

.dark\:text-emerald-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}

.dark\:text-emerald-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}

.dark\:text-gray-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.dark\:text-gray-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.dark\:text-purple-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(216 180 254 / var(--tw-text-opacity, 1));
}

.dark\:text-purple-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}

.dark\:text-red-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.dark\:text-slate-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}

.dark\:text-white:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.dark\:hover\:bg-gray-700:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}

@media (min-width: 640px) {
  .sm\:order-1 {
    order: 1;
  }

  .sm\:order-2 {
    order: 2;
  }

  .sm\:-mx-6 {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }

  .sm\:mx-4 {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .sm\:mb-2 {
    margin-bottom: 0.5rem;
  }

  .sm\:mb-6 {
    margin-bottom: 1.5rem;
  }

  .sm\:mb-8 {
    margin-bottom: 2rem;
  }

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:grid {
    display: grid;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:h-12 {
    height: 3rem;
  }

  .sm\:h-14 {
    height: 3.5rem;
  }

  .sm\:h-16 {
    height: 4rem;
  }

  .sm\:h-9 {
    height: 2.25rem;
  }

  .sm\:h-full {
    height: 100%;
  }

  .sm\:w-12 {
    width: 3rem;
  }

  .sm\:w-14 {
    width: 3.5rem;
  }

  .sm\:w-16 {
    width: 4rem;
  }

  .sm\:w-9 {
    width: 2.25rem;
  }

  .sm\:w-auto {
    width: auto;
  }

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

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

  .sm\:flex-none {
    flex: none;
  }

  @keyframes scale-in {
    0% {
      transform: scale(0.95);
      opacity: 0;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  .sm\:animate-scale-in {
    animation: scale-in 0.2s ease-out;
  }

  .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\:flex-row {
    flex-direction: row;
  }

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

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

  .sm\:gap-2 {
    gap: 0.5rem;
  }

  .sm\:gap-3 {
    gap: 0.75rem;
  }

  .sm\:gap-4 {
    gap: 1rem;
  }

  .sm\:gap-6 {
    gap: 1.5rem;
  }

  .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0px * var(--tw-space-y-reverse));
  }

  .sm\:space-y-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
  }

  .sm\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
  }

  .sm\:rounded-2xl {
    border-radius: 2rem;
  }

  .sm\:rounded-xl {
    border-radius: 1.5rem;
  }

  .sm\:p-4 {
    padding: 1rem;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .sm\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  .sm\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .sm\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .sm\:pb-0 {
    padding-bottom: 0px;
  }

  .sm\:pl-11 {
    padding-left: 2.75rem;
  }

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

  .sm\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .sm\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .sm\:text-\[20px\] {
    font-size: 20px;
  }

  .sm\:text-\[28px\] {
    font-size: 28px;
  }

  .sm\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .sm\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .sm\:shadow-md {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}

@media (min-width: 768px) {
  .md\:mx-4 {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .md\:mb-2 {
    margin-bottom: 0.5rem;
  }

  .md\:mb-4 {
    margin-bottom: 1rem;
  }

  .md\:mb-8 {
    margin-bottom: 2rem;
  }

  .md\:mt-6 {
    margin-top: 1.5rem;
  }

  .md\:block {
    display: block;
  }

  .md\:inline {
    display: inline;
  }

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

  .md\:h-11 {
    height: 2.75rem;
  }

  .md\:h-13 {
    height: 3.25rem;
  }

  .md\:h-14 {
    height: 3.5rem;
  }

  .md\:h-16 {
    height: 4rem;
  }

  .md\:h-auto {
    height: auto;
  }

  .md\:max-h-\[90vh\] {
    max-height: 90vh;
  }

  .md\:max-h-\[calc\(100vh-240px\)\] {
    max-height: calc(100vh - 240px);
  }

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

  .md\:w-14 {
    width: 3.5rem;
  }

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

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

  .md\:max-w-\[680px\] {
    max-width: 680px;
  }

  .md\:max-w-\[720px\] {
    max-width: 720px;
  }

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

  @keyframes scale-in {
    0% {
      transform: scale(0.95);
      opacity: 0;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  .md\:animate-scale-in {
    animation: scale-in 0.2s ease-out;
  }

  .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\:flex-row {
    flex-direction: row;
  }

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

  .md\:gap-4 {
    gap: 1rem;
  }

  .md\:gap-5 {
    gap: 1.25rem;
  }

  .md\:gap-6 {
    gap: 1.5rem;
  }

  .md\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
  }

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

  .md\:rounded-2xl {
    border-radius: 2rem;
  }

  .md\:rounded-xl {
    border-radius: 1.5rem;
  }

  .md\:border-r {
    border-right-width: 1px;
  }

  .md\:border-t-0 {
    border-top-width: 0px;
  }

  .md\:p-2\.5 {
    padding: 0.625rem;
  }

  .md\:p-4 {
    padding: 1rem;
  }

  .md\:p-6 {
    padding: 1.5rem;
  }

  .md\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .md\:py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .md\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .md\:pt-20 {
    padding-top: 5rem;
  }

  .md\:pt-6 {
    padding-top: 1.5rem;
  }

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

  .md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .md\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

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

  .md\:text-\[28px\] {
    font-size: 28px;
  }

  .md\:text-\[32px\] {
    font-size: 32px;
  }

  .md\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .lg\:left-64 {
    left: 16rem;
  }

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

  .lg\:mb-8 {
    margin-bottom: 2rem;
  }

  .lg\:ml-64 {
    margin-left: 16rem;
  }

  .lg\:block {
    display: block;
  }

  .lg\:hidden {
    display: none;
  }

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

  .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\:gap-3 {
    gap: 0.75rem;
  }

  .lg\:gap-6 {
    gap: 1.5rem;
  }

  .lg\:p-8 {
    padding: 2rem;
  }

  .lg\:pb-8 {
    padding-bottom: 2rem;
  }

  .lg\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .lg\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}