@import url(https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap);
/**
 * Responsive Design Tokens
 * 
 * Comprehensive design token system for consistent responsive design
 * Replaces fixed pixel values with fluid, scalable alternatives
 */

:root {
  /* ===============================
     BREAKPOINTS & CONTAINER SIZES
     =============================== */
  
  /* Breakpoints (matches Material-UI) */
  --breakpoint-xs: 0px;
  --breakpoint-sm: 600px;
  --breakpoint-md: 900px;
  --breakpoint-lg: 1200px;
  --breakpoint-xl: 1536px;
  
  /* Container max widths */
  --container-xs: 100%;
  --container-sm: 600px;
  --container-md: 900px;
  --container-lg: 1200px;
  --container-xl: 1400px;
  --container-xxl: 1600px;

  /* ===============================
     RESPONSIVE SPACING SYSTEM
     =============================== */
  
  /* Base spacing using clamp() for fluid scaling */
  --space-0: 0;
  --space-1: clamp(0.25rem, 0.5vw, 0.375rem);    /* 4px - 6px */
  --space-2: clamp(0.5rem, 1vw, 0.75rem);        /* 8px - 12px */
  --space-3: clamp(0.75rem, 1.5vw, 1rem);        /* 12px - 16px */
  --space-4: clamp(1rem, 2vw, 1.5rem);           /* 16px - 24px */
  --space-5: clamp(1.25rem, 2.5vw, 1.75rem);     /* 20px - 28px */
  --space-6: clamp(1.5rem, 3vw, 2rem);           /* 24px - 32px */
  --space-8: clamp(2rem, 4vw, 3rem);             /* 32px - 48px */
  --space-10: clamp(2.5rem, 5vw, 3.5rem);        /* 40px - 56px */
  --space-12: clamp(3rem, 6vw, 4rem);            /* 48px - 64px */
  --space-16: clamp(4rem, 8vw, 6rem);            /* 64px - 96px */
  --space-20: clamp(5rem, 10vw, 8rem);           /* 80px - 128px */
  --space-24: clamp(6rem, 12vw, 10rem);          /* 96px - 160px */
  
  /* Semantic spacing aliases */
  --space-xs: var(--space-1);
  --space-sm: var(--space-2);
  --space-md: var(--space-4);
  --space-lg: var(--space-6);
  --space-xl: var(--space-8);
  --space-2xl: var(--space-12);
  --space-3xl: var(--space-16);

  /* ===============================
     FLUID TYPOGRAPHY SYSTEM
     =============================== */
  
  /* Font sizes using clamp() for perfect fluid scaling */
  --text-xs: clamp(0.75rem, 0.875vw, 0.875rem);     /* 12px - 14px */
  --text-sm: clamp(0.875rem, 1vw, 1rem);            /* 14px - 16px */
  --text-base: clamp(1rem, 1.125vw, 1.125rem);      /* 16px - 18px */
  --text-lg: clamp(1.125rem, 1.25vw, 1.25rem);      /* 18px - 20px */
  --text-xl: clamp(1.25rem, 1.5vw, 1.5rem);         /* 20px - 24px */
  --text-2xl: clamp(1.5rem, 2vw, 2rem);             /* 24px - 32px */
  --text-3xl: clamp(1.875rem, 2.5vw, 2.5rem);       /* 30px - 40px */
  --text-4xl: clamp(2.25rem, 3vw, 3rem);            /* 36px - 48px */
  --text-5xl: clamp(3rem, 4vw, 4rem);               /* 48px - 64px */
  --text-6xl: clamp(3.75rem, 5vw, 5rem);            /* 60px - 80px */
  
  /* Line heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  
  /* Font weights */
  --font-thin: 100;
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;

  /* ===============================
     RESPONSIVE LAYOUT SYSTEM
     =============================== */
  
  /* Widths using clamp() and viewport units */
  --w-screen: 100vw;
  --w-full: 100%;
  --w-auto: auto;
  --w-fit: fit-content;
  --w-min: min-content;
  --w-max: max-content;
  
  /* Responsive component widths */
  --w-xs: clamp(280px, 85vw, 320px);
  --w-sm: clamp(320px, 80vw, 384px);
  --w-md: clamp(384px, 75vw, 448px);
  --w-lg: clamp(448px, 70vw, 512px);
  --w-xl: clamp(512px, 65vw, 576px);
  --w-2xl: clamp(576px, 60vw, 672px);
  --w-3xl: clamp(672px, 55vw, 768px);
  --w-4xl: clamp(768px, 50vw, 896px);
  --w-5xl: clamp(896px, 45vw, 1024px);
  --w-6xl: clamp(1024px, 40vw, 1152px);
  
  /* Heights using viewport units */
  --h-screen: 100vh;
  --h-full: 100%;
  --h-auto: auto;
  --h-fit: fit-content;
  --h-min: min-content;
  --h-max: max-content;
  
  /* Responsive component heights */
  --h-xs: clamp(2rem, 8vw, 3rem);
  --h-sm: clamp(2.5rem, 10vw, 4rem);
  --h-md: clamp(3rem, 12vw, 5rem);
  --h-lg: clamp(4rem, 16vw, 6rem);
  --h-xl: clamp(5rem, 20vw, 8rem);

  /* ===============================
     BORDER RADIUS SYSTEM
     =============================== */
  
  --radius-none: 0;
  --radius-sm: clamp(0.125rem, 0.25vw, 0.25rem);    /* 2px - 4px */
  --radius-base: clamp(0.25rem, 0.5vw, 0.375rem);   /* 4px - 6px */
  --radius-md: clamp(0.375rem, 0.75vw, 0.5rem);     /* 6px - 8px */
  --radius-lg: clamp(0.5rem, 1vw, 0.75rem);         /* 8px - 12px */
  --radius-xl: clamp(0.75rem, 1.5vw, 1rem);         /* 12px - 16px */
  --radius-2xl: clamp(1rem, 2vw, 1.5rem);           /* 16px - 24px */
  --radius-3xl: clamp(1.5rem, 3vw, 2rem);           /* 24px - 32px */
  --radius-full: 9999px;

  /* ===============================
     SHADOW SYSTEM
     =============================== */
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-base: 0 clamp(1px, 0.25vw, 2px) clamp(3px, 0.75vw, 6px) 0 rgba(0, 0, 0, 0.1);
  --shadow-md: 0 clamp(2px, 0.5vw, 4px) clamp(6px, 1.5vw, 12px) -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 clamp(4px, 1vw, 8px) clamp(15px, 3vw, 25px) -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 clamp(8px, 2vw, 16px) clamp(25px, 5vw, 50px) -12px rgba(0, 0, 0, 0.25);
  --shadow-2xl: 0 clamp(12px, 3vw, 24px) clamp(50px, 8vw, 100px) -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --shadow-none: 0 0 #0000;

  /* ===============================
     RESPONSIVE GAPS
     =============================== */
  
  --gap-0: 0;
  --gap-1: var(--space-1);
  --gap-2: var(--space-2);
  --gap-3: var(--space-3);
  --gap-4: var(--space-4);
  --gap-5: var(--space-5);
  --gap-6: var(--space-6);
  --gap-8: var(--space-8);
  --gap-10: var(--space-10);
  --gap-12: var(--space-12);
  --gap-16: var(--space-16);
  --gap-20: var(--space-20);
  --gap-24: var(--space-24);

  /* ===============================
     COMPONENT-SPECIFIC TOKENS
     =============================== */
  
  /* Buttons */
  --btn-padding-sm: clamp(0.25rem 0.75rem, 1.5vw, 0.5rem 1rem);
  --btn-padding-md: clamp(0.5rem 1rem, 2vw, 0.75rem 1.5rem);
  --btn-padding-lg: clamp(0.75rem 1.5rem, 3vw, 1rem 2rem);
  --btn-font-size-sm: var(--text-sm);
  --btn-font-size-md: var(--text-base);
  --btn-font-size-lg: var(--text-lg);
  --btn-radius: var(--radius-md);
  
  /* Cards */
  --card-padding-sm: var(--space-4);
  --card-padding-md: var(--space-6);
  --card-padding-lg: var(--space-8);
  --card-radius: var(--radius-lg);
  --card-shadow: var(--shadow-md);
  
  /* Forms */
  --input-padding: clamp(0.5rem 0.75rem, 2vw, 0.75rem 1rem);
  --input-font-size: var(--text-base);
  --input-radius: var(--radius-md);
  --input-border-width: 1px;
  
  /* Navigation */
  --nav-height: 56px;
  --nav-height-sm: 64px;
  --nav-padding: var(--space-4);
  --nav-border: 1px solid var(--border-neutral);
  --nav-backdrop: rgba(30, 30, 45, 0.95);
  
  /* Layout Colors */
  --text-color-header: white;
  --appbar-bg: rgba(30, 30, 45, 0.95);
  --appbar-border-color: rgba(255, 255, 255, 0.1);
  --menu-bg: rgba(30, 30, 45, 0.95);
  --menu-border-color: rgba(255, 255, 255, 0.1);
  --menu-text-color: white;
  --menu-icon-color: white;
  --divider-color: rgba(255, 255, 255, 0.1);
  --nav-item-padding: clamp(0.5rem, 1.5vw, 0.75rem);
  
  /* Avatar */
  --avatar-xs: clamp(1.5rem, 4vw, 2rem);
  --avatar-sm: clamp(2rem, 5vw, 2.5rem);
  --avatar-md: clamp(2.5rem, 6vw, 3rem);
  --avatar-lg: clamp(3rem, 8vw, 4rem);
  --avatar-xl: clamp(4rem, 10vw, 5rem);
  
  /* Floating icon containers */
  --floating-icon-size: clamp(30px, 8vw, 35px);
  --floating-icon-offset: clamp(10px, 3vw, 15px);
  --card-content-padding-right: clamp(50px, 12vw, 70px);
  
  /* Icons */
  --icon-xs: clamp(0.75rem, 2vw, 1rem);
  --icon-sm: clamp(1rem, 2.5vw, 1.25rem);
  --icon-md: clamp(1.25rem, 3vw, 1.5rem);
  --icon-lg: clamp(1.5rem, 4vw, 2rem);
  --icon-xl: clamp(2rem, 5vw, 2.5rem);

  /* ===============================
     ANIMATION & TRANSITIONS
     =============================== */
  
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
  --transition-slower: 500ms ease;
  
  /* Reduced motion support */
  --transition-none: 0ms;
}

/* ===============================
   MEDIA QUERY ADJUSTMENTS
   =============================== */

/* Small screens adjustments */
@media (max-width: 599px) {
  :root {
    /* Tighter spacing on small screens */
    --space-8: clamp(1.5rem, 4vw, 2rem);
    --space-12: clamp(2rem, 6vw, 3rem);
    --space-16: clamp(2.5rem, 8vw, 4rem);
    
    /* Smaller text on mobile */
    --text-3xl: clamp(1.5rem, 2.5vw, 2rem);
    --text-4xl: clamp(1.875rem, 3vw, 2.5rem);
    --text-5xl: clamp(2.25rem, 4vw, 3rem);
  }
}

/* Large screens adjustments */
@media (min-width: 1536px) {
  :root {
    /* Larger spacing on big screens */
    --space-16: clamp(4rem, 6vw, 8rem);
    --space-20: clamp(5rem, 8vw, 12rem);
    --space-24: clamp(6rem, 10vw, 16rem);
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  :root {
    /* Adjust borders for high DPI */
    --input-border-width: 0.5px;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: var(--transition-none);
    --transition-base: var(--transition-none);
    --transition-slow: var(--transition-none);
    --transition-slower: var(--transition-none);
  }
}

/* High contrast preference */
@media (prefers-contrast: high) {
  :root {
    /* Increase shadows and borders for high contrast */
    --shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
    --shadow-base: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    --shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.2);
    --input-border-width: 2px;
  }
}

/* ===============================
   FLOATING ICON OVERLAP FIXES
   =============================== */

/* Ensure card content doesn't overlap with floating icons */
.card-content-with-floating-icon {
  padding-right: clamp(50px, 12vw, 70px) !important;
  padding-right: var(--card-content-padding-right) !important;
}

/* Floating icons should be properly sized and positioned */
.floating-card-icon {
  width: clamp(30px, 8vw, 35px) !important;
  width: var(--floating-icon-size) !important;
  height: clamp(30px, 8vw, 35px) !important;
  height: var(--floating-icon-size) !important;
  right: clamp(10px, 3vw, 15px) !important;
  right: var(--floating-icon-offset) !important;
  top: clamp(10px, 3vw, 15px) !important;
  top: var(--floating-icon-offset) !important;
}

/* Typography in cards with floating icons */
.card-title-with-floating-icon {
  margin-right: 0 !important;
  padding-right: 0 !important;
}

/* Responsive adjustments for small screens */
@media (max-width: 600px) {
  :root {
    --floating-icon-size: 28px;
    --floating-icon-offset: 8px;
    --card-content-padding-right: 45px;
  }
}
/**
 * Responsive Design Tokens
 * 
 * Comprehensive design token system for consistent responsive design
 * Replaces fixed pixel values with fluid, scalable alternatives
 */

:root {
  /* ===============================
     BREAKPOINTS & CONTAINER SIZES
     =============================== */
  
  /* Breakpoints (matches Material-UI) */
  --breakpoint-xs: 0px;
  --breakpoint-sm: 600px;
  --breakpoint-md: 900px;
  --breakpoint-lg: 1200px;
  --breakpoint-xl: 1536px;
  
  /* Container max widths */
  --container-xs: 100%;
  --container-sm: 600px;
  --container-md: 900px;
  --container-lg: 1200px;
  --container-xl: 1400px;
  --container-xxl: 1600px;

  /* ===============================
     RESPONSIVE SPACING SYSTEM
     =============================== */
  
  /* Base spacing using clamp() for fluid scaling */
  --space-0: 0;
  --space-1: clamp(0.25rem, 0.5vw, 0.375rem);    /* 4px - 6px */
  --space-2: clamp(0.5rem, 1vw, 0.75rem);        /* 8px - 12px */
  --space-3: clamp(0.75rem, 1.5vw, 1rem);        /* 12px - 16px */
  --space-4: clamp(1rem, 2vw, 1.5rem);           /* 16px - 24px */
  --space-5: clamp(1.25rem, 2.5vw, 1.75rem);     /* 20px - 28px */
  --space-6: clamp(1.5rem, 3vw, 2rem);           /* 24px - 32px */
  --space-8: clamp(2rem, 4vw, 3rem);             /* 32px - 48px */
  --space-10: clamp(2.5rem, 5vw, 3.5rem);        /* 40px - 56px */
  --space-12: clamp(3rem, 6vw, 4rem);            /* 48px - 64px */
  --space-16: clamp(4rem, 8vw, 6rem);            /* 64px - 96px */
  --space-20: clamp(5rem, 10vw, 8rem);           /* 80px - 128px */
  --space-24: clamp(6rem, 12vw, 10rem);          /* 96px - 160px */
  
  /* Semantic spacing aliases */
  --space-xs: var(--space-1);
  --space-sm: var(--space-2);
  --space-md: var(--space-4);
  --space-lg: var(--space-6);
  --space-xl: var(--space-8);
  --space-2xl: var(--space-12);
  --space-3xl: var(--space-16);

  /* ===============================
     FLUID TYPOGRAPHY SYSTEM
     =============================== */
  
  /* Font sizes using clamp() for perfect fluid scaling */
  --text-xs: clamp(0.75rem, 0.875vw, 0.875rem);     /* 12px - 14px */
  --text-sm: clamp(0.875rem, 1vw, 1rem);            /* 14px - 16px */
  --text-base: clamp(1rem, 1.125vw, 1.125rem);      /* 16px - 18px */
  --text-lg: clamp(1.125rem, 1.25vw, 1.25rem);      /* 18px - 20px */
  --text-xl: clamp(1.25rem, 1.5vw, 1.5rem);         /* 20px - 24px */
  --text-2xl: clamp(1.5rem, 2vw, 2rem);             /* 24px - 32px */
  --text-3xl: clamp(1.875rem, 2.5vw, 2.5rem);       /* 30px - 40px */
  --text-4xl: clamp(2.25rem, 3vw, 3rem);            /* 36px - 48px */
  --text-5xl: clamp(3rem, 4vw, 4rem);               /* 48px - 64px */
  --text-6xl: clamp(3.75rem, 5vw, 5rem);            /* 60px - 80px */
  
  /* Line heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  
  /* Font weights */
  --font-thin: 100;
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;

  /* ===============================
     RESPONSIVE LAYOUT SYSTEM
     =============================== */
  
  /* Widths using clamp() and viewport units */
  --w-screen: 100vw;
  --w-full: 100%;
  --w-auto: auto;
  --w-fit: fit-content;
  --w-min: min-content;
  --w-max: max-content;
  
  /* Responsive component widths */
  --w-xs: clamp(280px, 85vw, 320px);
  --w-sm: clamp(320px, 80vw, 384px);
  --w-md: clamp(384px, 75vw, 448px);
  --w-lg: clamp(448px, 70vw, 512px);
  --w-xl: clamp(512px, 65vw, 576px);
  --w-2xl: clamp(576px, 60vw, 672px);
  --w-3xl: clamp(672px, 55vw, 768px);
  --w-4xl: clamp(768px, 50vw, 896px);
  --w-5xl: clamp(896px, 45vw, 1024px);
  --w-6xl: clamp(1024px, 40vw, 1152px);
  
  /* Heights using viewport units */
  --h-screen: 100vh;
  --h-full: 100%;
  --h-auto: auto;
  --h-fit: fit-content;
  --h-min: min-content;
  --h-max: max-content;
  
  /* Responsive component heights */
  --h-xs: clamp(2rem, 8vw, 3rem);
  --h-sm: clamp(2.5rem, 10vw, 4rem);
  --h-md: clamp(3rem, 12vw, 5rem);
  --h-lg: clamp(4rem, 16vw, 6rem);
  --h-xl: clamp(5rem, 20vw, 8rem);

  /* ===============================
     BORDER RADIUS SYSTEM
     =============================== */
  
  --radius-none: 0;
  --radius-sm: clamp(0.125rem, 0.25vw, 0.25rem);    /* 2px - 4px */
  --radius-base: clamp(0.25rem, 0.5vw, 0.375rem);   /* 4px - 6px */
  --radius-md: clamp(0.375rem, 0.75vw, 0.5rem);     /* 6px - 8px */
  --radius-lg: clamp(0.5rem, 1vw, 0.75rem);         /* 8px - 12px */
  --radius-xl: clamp(0.75rem, 1.5vw, 1rem);         /* 12px - 16px */
  --radius-2xl: clamp(1rem, 2vw, 1.5rem);           /* 16px - 24px */
  --radius-3xl: clamp(1.5rem, 3vw, 2rem);           /* 24px - 32px */
  --radius-full: 9999px;

  /* ===============================
     SHADOW SYSTEM
     =============================== */
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-base: 0 clamp(1px, 0.25vw, 2px) clamp(3px, 0.75vw, 6px) 0 rgba(0, 0, 0, 0.1);
  --shadow-md: 0 clamp(2px, 0.5vw, 4px) clamp(6px, 1.5vw, 12px) -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 clamp(4px, 1vw, 8px) clamp(15px, 3vw, 25px) -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 clamp(8px, 2vw, 16px) clamp(25px, 5vw, 50px) -12px rgba(0, 0, 0, 0.25);
  --shadow-2xl: 0 clamp(12px, 3vw, 24px) clamp(50px, 8vw, 100px) -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --shadow-none: 0 0 #0000;

  /* ===============================
     RESPONSIVE GAPS
     =============================== */
  
  --gap-0: 0;
  --gap-1: var(--space-1);
  --gap-2: var(--space-2);
  --gap-3: var(--space-3);
  --gap-4: var(--space-4);
  --gap-5: var(--space-5);
  --gap-6: var(--space-6);
  --gap-8: var(--space-8);
  --gap-10: var(--space-10);
  --gap-12: var(--space-12);
  --gap-16: var(--space-16);
  --gap-20: var(--space-20);
  --gap-24: var(--space-24);

  /* ===============================
     COMPONENT-SPECIFIC TOKENS
     =============================== */
  
  /* Buttons */
  --btn-padding-sm: clamp(0.25rem 0.75rem, 1.5vw, 0.5rem 1rem);
  --btn-padding-md: clamp(0.5rem 1rem, 2vw, 0.75rem 1.5rem);
  --btn-padding-lg: clamp(0.75rem 1.5rem, 3vw, 1rem 2rem);
  --btn-font-size-sm: var(--text-sm);
  --btn-font-size-md: var(--text-base);
  --btn-font-size-lg: var(--text-lg);
  --btn-radius: var(--radius-md);
  
  /* Cards */
  --card-padding-sm: var(--space-4);
  --card-padding-md: var(--space-6);
  --card-padding-lg: var(--space-8);
  --card-radius: var(--radius-lg);
  --card-shadow: var(--shadow-md);
  
  /* Forms */
  --input-padding: clamp(0.5rem 0.75rem, 2vw, 0.75rem 1rem);
  --input-font-size: var(--text-base);
  --input-radius: var(--radius-md);
  --input-border-width: 1px;
  
  /* Navigation */
  --nav-height: 56px;
  --nav-height-sm: 64px;
  --nav-padding: var(--space-4);
  --nav-border: 1px solid var(--border-neutral);
  --nav-backdrop: rgba(30, 30, 45, 0.95);
  
  /* Layout Colors */
  --text-color-header: white;
  --appbar-bg: rgba(30, 30, 45, 0.95);
  --appbar-border-color: rgba(255, 255, 255, 0.1);
  --menu-bg: rgba(30, 30, 45, 0.95);
  --menu-border-color: rgba(255, 255, 255, 0.1);
  --menu-text-color: white;
  --menu-icon-color: white;
  --divider-color: rgba(255, 255, 255, 0.1);
  --nav-item-padding: clamp(0.5rem, 1.5vw, 0.75rem);
  
  /* Avatar */
  --avatar-xs: clamp(1.5rem, 4vw, 2rem);
  --avatar-sm: clamp(2rem, 5vw, 2.5rem);
  --avatar-md: clamp(2.5rem, 6vw, 3rem);
  --avatar-lg: clamp(3rem, 8vw, 4rem);
  --avatar-xl: clamp(4rem, 10vw, 5rem);
  
  /* Floating icon containers */
  --floating-icon-size: clamp(30px, 8vw, 35px);
  --floating-icon-offset: clamp(10px, 3vw, 15px);
  --card-content-padding-right: clamp(50px, 12vw, 70px);
  
  /* Icons */
  --icon-xs: clamp(0.75rem, 2vw, 1rem);
  --icon-sm: clamp(1rem, 2.5vw, 1.25rem);
  --icon-md: clamp(1.25rem, 3vw, 1.5rem);
  --icon-lg: clamp(1.5rem, 4vw, 2rem);
  --icon-xl: clamp(2rem, 5vw, 2.5rem);

  /* ===============================
     ANIMATION & TRANSITIONS
     =============================== */
  
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
  --transition-slower: 500ms ease;
  
  /* Reduced motion support */
  --transition-none: 0ms;
}

/* ===============================
   MEDIA QUERY ADJUSTMENTS
   =============================== */

/* Small screens adjustments */
@media (max-width: 599px) {
  :root {
    /* Tighter spacing on small screens */
    --space-8: clamp(1.5rem, 4vw, 2rem);
    --space-12: clamp(2rem, 6vw, 3rem);
    --space-16: clamp(2.5rem, 8vw, 4rem);
    
    /* Smaller text on mobile */
    --text-3xl: clamp(1.5rem, 2.5vw, 2rem);
    --text-4xl: clamp(1.875rem, 3vw, 2.5rem);
    --text-5xl: clamp(2.25rem, 4vw, 3rem);
  }
}

/* Large screens adjustments */
@media (min-width: 1536px) {
  :root {
    /* Larger spacing on big screens */
    --space-16: clamp(4rem, 6vw, 8rem);
    --space-20: clamp(5rem, 8vw, 12rem);
    --space-24: clamp(6rem, 10vw, 16rem);
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  :root {
    /* Adjust borders for high DPI */
    --input-border-width: 0.5px;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: var(--transition-none);
    --transition-base: var(--transition-none);
    --transition-slow: var(--transition-none);
    --transition-slower: var(--transition-none);
  }
}

/* High contrast preference */
@media (prefers-contrast: high) {
  :root {
    /* Increase shadows and borders for high contrast */
    --shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
    --shadow-base: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    --shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.2);
    --input-border-width: 2px;
  }
}

/* ===============================
   FLOATING ICON OVERLAP FIXES
   =============================== */

/* Ensure card content doesn't overlap with floating icons */
.card-content-with-floating-icon {
  padding-right: clamp(50px, 12vw, 70px) !important;
  padding-right: var(--card-content-padding-right) !important;
}

/* Floating icons should be properly sized and positioned */
.floating-card-icon {
  width: clamp(30px, 8vw, 35px) !important;
  width: var(--floating-icon-size) !important;
  height: clamp(30px, 8vw, 35px) !important;
  height: var(--floating-icon-size) !important;
  right: clamp(10px, 3vw, 15px) !important;
  right: var(--floating-icon-offset) !important;
  top: clamp(10px, 3vw, 15px) !important;
  top: var(--floating-icon-offset) !important;
}

/* Typography in cards with floating icons */
.card-title-with-floating-icon {
  margin-right: 0 !important;
  padding-right: 0 !important;
}

/* Responsive adjustments for small screens */
@media (max-width: 600px) {
  :root {
    --floating-icon-size: 28px;
    --floating-icon-offset: 8px;
    --card-content-padding-right: 45px;
  }
}
/**
 * Responsive Utility Classes
 * 
 * Complete utility class system based on responsive design tokens
 * Replaces fixed pixel values with fluid, scalable alternatives
 */

/* Import design tokens */

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

/* Margin utilities */
.m-0 { margin: var(--space-0); }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-5 { margin: var(--space-5); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }
.m-10 { margin: var(--space-10); }
.m-12 { margin: var(--space-12); }
.m-16 { margin: var(--space-16); }
.m-20 { margin: var(--space-20); }
.m-24 { margin: var(--space-24); }
.m-auto { margin: auto; }

/* Margin directional utilities */
.mt-0 { margin-top: var(--space-0); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.mt-20 { margin-top: var(--space-20); }
.mt-24 { margin-top: var(--space-24); }

.mb-0 { margin-bottom: var(--space-0); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }
.mb-20 { margin-bottom: var(--space-20); }
.mb-24 { margin-bottom: var(--space-24); }

.ml-0 { margin-left: var(--space-0); }
.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }
.ml-3 { margin-left: var(--space-3); }
.ml-4 { margin-left: var(--space-4); }
.ml-5 { margin-left: var(--space-5); }
.ml-6 { margin-left: var(--space-6); }
.ml-8 { margin-left: var(--space-8); }
.ml-10 { margin-left: var(--space-10); }
.ml-12 { margin-left: var(--space-12); }
.ml-auto { margin-left: auto; }

.mr-0 { margin-right: var(--space-0); }
.mr-1 { margin-right: var(--space-1); }
.mr-2 { margin-right: var(--space-2); }
.mr-3 { margin-right: var(--space-3); }
.mr-4 { margin-right: var(--space-4); }
.mr-5 { margin-right: var(--space-5); }
.mr-6 { margin-right: var(--space-6); }
.mr-8 { margin-right: var(--space-8); }
.mr-10 { margin-right: var(--space-10); }
.mr-12 { margin-right: var(--space-12); }
.mr-auto { margin-right: auto; }

.mx-0 { margin-left: var(--space-0); margin-right: var(--space-0); }
.mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); }
.mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
.mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); }
.mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); }
.mx-5 { margin-left: var(--space-5); margin-right: var(--space-5); }
.mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); }
.mx-8 { margin-left: var(--space-8); margin-right: var(--space-8); }
.mx-10 { margin-left: var(--space-10); margin-right: var(--space-10); }
.mx-12 { margin-left: var(--space-12); margin-right: var(--space-12); }
.mx-auto { margin-left: auto; margin-right: auto; }

.my-0 { margin-top: var(--space-0); margin-bottom: var(--space-0); }
.my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.my-5 { margin-top: var(--space-5); margin-bottom: var(--space-5); }
.my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); }
.my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); }
.my-10 { margin-top: var(--space-10); margin-bottom: var(--space-10); }
.my-12 { margin-top: var(--space-12); margin-bottom: var(--space-12); }

/* Padding utilities */
.p-0 { padding: var(--space-0); }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
.p-10 { padding: var(--space-10); }
.p-12 { padding: var(--space-12); }
.p-16 { padding: var(--space-16); }
.p-20 { padding: var(--space-20); }
.p-24 { padding: var(--space-24); }

/* Padding directional utilities */
.pt-0 { padding-top: var(--space-0); }
.pt-1 { padding-top: var(--space-1); }
.pt-2 { padding-top: var(--space-2); }
.pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }
.pt-5 { padding-top: var(--space-5); }
.pt-6 { padding-top: var(--space-6); }
.pt-8 { padding-top: var(--space-8); }
.pt-10 { padding-top: var(--space-10); }
.pt-12 { padding-top: var(--space-12); }
.pt-16 { padding-top: var(--space-16); }
.pt-20 { padding-top: var(--space-20); }
.pt-24 { padding-top: var(--space-24); }

.pb-0 { padding-bottom: var(--space-0); }
.pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); }
.pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-5 { padding-bottom: var(--space-5); }
.pb-6 { padding-bottom: var(--space-6); }
.pb-8 { padding-bottom: var(--space-8); }
.pb-10 { padding-bottom: var(--space-10); }
.pb-12 { padding-bottom: var(--space-12); }
.pb-16 { padding-bottom: var(--space-16); }
.pb-20 { padding-bottom: var(--space-20); }
.pb-24 { padding-bottom: var(--space-24); }

.pl-0 { padding-left: var(--space-0); }
.pl-1 { padding-left: var(--space-1); }
.pl-2 { padding-left: var(--space-2); }
.pl-3 { padding-left: var(--space-3); }
.pl-4 { padding-left: var(--space-4); }
.pl-5 { padding-left: var(--space-5); }
.pl-6 { padding-left: var(--space-6); }
.pl-8 { padding-left: var(--space-8); }
.pl-10 { padding-left: var(--space-10); }
.pl-12 { padding-left: var(--space-12); }

.pr-0 { padding-right: var(--space-0); }
.pr-1 { padding-right: var(--space-1); }
.pr-2 { padding-right: var(--space-2); }
.pr-3 { padding-right: var(--space-3); }
.pr-4 { padding-right: var(--space-4); }
.pr-5 { padding-right: var(--space-5); }
.pr-6 { padding-right: var(--space-6); }
.pr-8 { padding-right: var(--space-8); }
.pr-10 { padding-right: var(--space-10); }
.pr-12 { padding-right: var(--space-12); }

.px-0 { padding-left: var(--space-0); padding-right: var(--space-0); }
.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
.px-10 { padding-left: var(--space-10); padding-right: var(--space-10); }
.px-12 { padding-left: var(--space-12); padding-right: var(--space-12); }

.py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); }
.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); }
.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }

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

/* Font sizes */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.text-5xl { font-size: var(--text-5xl); }
.text-6xl { font-size: var(--text-6xl); }

/* Font weights */
.font-thin { font-weight: var(--font-thin); }
.font-light { font-weight: var(--font-light); }
.font-normal { font-weight: var(--font-normal); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }
.font-extrabold { font-weight: var(--font-extrabold); }
.font-black { font-weight: var(--font-black); }

/* Line heights */
.leading-none { line-height: var(--leading-none); }
.leading-tight { line-height: var(--leading-tight); }
.leading-snug { line-height: var(--leading-snug); }
.leading-normal { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }
.leading-loose { line-height: var(--leading-loose); }

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

/* Container utilities */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  /* Removed default padding to prevent compression - padding handled by individual components */
}

/* Optional container max-widths - use only when specifically needed for constrained layouts */
.container-xs { max-width: var(--container-xs); }
.container-sm { max-width: var(--container-sm); }
.container-md { max-width: var(--container-md); }
.container-lg { max-width: var(--container-lg); }
.container-xl { max-width: var(--container-xl); }
.container-xxl { max-width: var(--container-xxl); }

/* Full-width container utilities */
.container-full { width: 100%; max-width: none; }
.w-full-force { width: 100% !important; max-width: none !important; }

/* Advanced full-width patterns */
.full-bleed {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

.full-width-section {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.breakout {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Kill CSS framework containers */
.no-container-limit {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* Viewport width utilities */
.vw-100 { width: 100vw; }
.min-vw-100 { min-width: 100vw; }
.max-vw-100 { max-width: 100vw; }

/* Overflow handling */
.overflow-x-hidden { overflow-x: hidden !important; }
.overflow-x-auto { overflow-x: auto !important; }
.overflow-x-scroll { overflow-x: scroll !important; }

/* Width utilities */
.w-auto { width: var(--w-auto); }
.w-full { width: var(--w-full); }
.w-screen { width: var(--w-screen); }
.w-fit { width: var(--w-fit); }
.w-min { width: var(--w-min); }
.w-max { width: var(--w-max); }
.w-xs { width: var(--w-xs); }
.w-sm { width: var(--w-sm); }
.w-md { width: var(--w-md); }
.w-lg { width: var(--w-lg); }
.w-xl { width: var(--w-xl); }
.w-2xl { width: var(--w-2xl); }
.w-3xl { width: var(--w-3xl); }
.w-4xl { width: var(--w-4xl); }
.w-5xl { width: var(--w-5xl); }
.w-6xl { width: var(--w-6xl); }

/* Height utilities */
.h-auto { height: var(--h-auto); }
.h-full { height: var(--h-full); }
.h-screen { height: var(--h-screen); }
.h-fit { height: var(--h-fit); }
.h-min { height: var(--h-min); }
.h-max { height: var(--h-max); }
.h-xs { height: var(--h-xs); }
.h-sm { height: var(--h-sm); }
.h-md { height: var(--h-md); }
.h-lg { height: var(--h-lg); }
.h-xl { height: var(--h-xl); }

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

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-1 { flex: 1 1; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }

/* Justify content */
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

/* Align items */
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }

/* Align self */
.self-auto { align-self: auto; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.self-center { align-self: center; }
.self-stretch { align-self: stretch; }
.self-baseline { align-self: baseline; }

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

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

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

/* Auto-fit grids */
.grid-auto-xs { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-auto-md { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-auto-lg { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); }
.grid-auto-xl { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }

/* Gap utilities */
.gap-0 { gap: var(--gap-0); }
.gap-1 { gap: var(--gap-1); }
.gap-2 { gap: var(--gap-2); }
.gap-3 { gap: var(--gap-3); }
.gap-4 { gap: var(--gap-4); }
.gap-5 { gap: var(--gap-5); }
.gap-6 { gap: var(--gap-6); }
.gap-8 { gap: var(--gap-8); }
.gap-10 { gap: var(--gap-10); }
.gap-12 { gap: var(--gap-12); }
.gap-16 { gap: var(--gap-16); }
.gap-20 { gap: var(--gap-20); }
.gap-24 { gap: var(--gap-24); }

/* ===============================
   BORDER RADIUS UTILITIES
   =============================== */

.rounded-none { border-radius: var(--radius-none); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius-base); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-3xl { border-radius: var(--radius-3xl); }
.rounded-full { border-radius: var(--radius-full); }

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

.shadow-none { box-shadow: var(--shadow-none); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-base); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }
.shadow-inner { box-shadow: var(--shadow-inner); }

/* ===============================
   RESPONSIVE VISIBILITY
   =============================== */

/* Mobile first approach */
.hidden { display: none; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }

/* Hide on mobile, show on larger screens */
.hidden-mobile { display: none; }
@media (min-width: 600px) {
  .hidden-mobile { display: block; }
}

/* Show on mobile, hide on larger screens */
.visible-mobile { display: block; }
@media (min-width: 600px) {
  .visible-mobile { display: none; }
}

/* Hide on tablet, show on mobile and desktop */
.hidden-tablet { display: block; }
@media (min-width: 600px) and (max-width: 1199px) {
  .hidden-tablet { display: none; }
}

/* Show only on tablet */
.visible-tablet { display: none; }
@media (min-width: 600px) and (max-width: 1199px) {
  .visible-tablet { display: block; }
}

/* Hide on desktop, show on mobile and tablet */
.hidden-desktop { display: block; }
@media (min-width: 1200px) {
  .hidden-desktop { display: none; }
}

/* Show only on desktop */
.visible-desktop { display: none; }
@media (min-width: 1200px) {
  .visible-desktop { display: block; }
}

/* ===============================
   RESPONSIVE BREAKPOINT VARIANTS
   =============================== */

/* Small screens and up (600px+) */
@media (min-width: 600px) {
  .sm\:text-xs { font-size: var(--text-xs); }
  .sm\:text-sm { font-size: var(--text-sm); }
  .sm\:text-base { font-size: var(--text-base); }
  .sm\:text-lg { font-size: var(--text-lg); }
  .sm\:text-xl { font-size: var(--text-xl); }
  .sm\:text-2xl { font-size: var(--text-2xl); }
  .sm\:text-3xl { font-size: var(--text-3xl); }
  
  .sm\:flex { display: flex; }
  .sm\:grid { display: grid; }
  .sm\:hidden { display: none; }
  .sm\:block { display: block; }
  
  .sm\:flex-row { flex-direction: row; }
  .sm\:flex-col { flex-direction: column; }
  
  .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Medium screens and up (900px+) */
@media (min-width: 900px) {
  .md\:text-xs { font-size: var(--text-xs); }
  .md\:text-sm { font-size: var(--text-sm); }
  .md\:text-base { font-size: var(--text-base); }
  .md\:text-lg { font-size: var(--text-lg); }
  .md\:text-xl { font-size: var(--text-xl); }
  .md\:text-2xl { font-size: var(--text-2xl); }
  .md\:text-3xl { font-size: var(--text-3xl); }
  
  .md\:flex { display: flex; }
  .md\:grid { display: grid; }
  .md\:hidden { display: none; }
  .md\:block { display: block; }
  
  .md\:flex-row { flex-direction: row; }
  .md\:flex-col { flex-direction: column; }
  
  .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Large screens and up (1200px+) */
@media (min-width: 1200px) {
  .lg\:text-xs { font-size: var(--text-xs); }
  .lg\:text-sm { font-size: var(--text-sm); }
  .lg\:text-base { font-size: var(--text-base); }
  .lg\:text-lg { font-size: var(--text-lg); }
  .lg\:text-xl { font-size: var(--text-xl); }
  .lg\:text-2xl { font-size: var(--text-2xl); }
  .lg\:text-3xl { font-size: var(--text-3xl); }
  .lg\:text-4xl { font-size: var(--text-4xl); }
  
  .lg\:flex { display: flex; }
  .lg\:grid { display: grid; }
  .lg\:hidden { display: none; }
  .lg\:block { display: block; }
  
  .lg\:flex-row { flex-direction: row; }
  .lg\:flex-col { flex-direction: column; }
  
  .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* Extra large screens and up (1536px+) */
@media (min-width: 1536px) {
  .xl\:text-lg { font-size: var(--text-lg); }
  .xl\:text-xl { font-size: var(--text-xl); }
  .xl\:text-2xl { font-size: var(--text-2xl); }
  .xl\:text-3xl { font-size: var(--text-3xl); }
  .xl\:text-4xl { font-size: var(--text-4xl); }
  .xl\:text-5xl { font-size: var(--text-5xl); }
  .xl\:text-6xl { font-size: var(--text-6xl); }
  
  .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .xl\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .xl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}
/**
 * Legacy Responsive Variables
 * 
 * DEPRECATED: Most variables moved to design-tokens.css
 * Only keeping unique variables not covered by design tokens
 */

:root {
  
  /* Unique responsive variables not in design-tokens.css */
  
  /* Grid layout variables - unique to this file */
  --grid-columns-xs: 1;
  --grid-columns-sm: 2;
  --grid-columns-md: 3;
  --grid-columns-lg: 4;
  --grid-columns-xl: 6;
  
  /* Responsive widths and heights - unique patterns */
  --responsive-width-xs: clamp(280px, 90vw, 320px);
  --responsive-width-sm: clamp(320px, 85vw, 480px);
  --responsive-width-md: clamp(480px, 80vw, 640px);
  --responsive-width-lg: clamp(640px, 75vw, 800px);
  --responsive-width-xl: clamp(800px, 70vw, 1024px);
}

/* Note: Most responsive variables have been moved to design-tokens.css
 * This file now only contains unique responsive patterns not covered by design tokens */

/**
 * Responsive Utility Classes
 *
 * Provides utility classes for responsive design across the application
 */

/* Responsive container classes */
.responsive-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
  max-width: 100%;
}

/* Mobile-specific spacing improvements */
@media (max-width: 480px) {
  .responsive-container {
    padding-left: 20px;
    padding-right: 20px;
  }
  
  /* Ensure cards don't touch screen edges on mobile */
  .responsive-card,
  .responsive-card-sm,
  .responsive-card-lg {
    margin-left: 4px;
    margin-right: 4px;
  }
}

.responsive-container-xs {
  max-width: var(--responsive-width-xs);
}

.responsive-container-sm {
  max-width: var(--responsive-width-sm);
}

.responsive-container-md {
  max-width: var(--responsive-width-md);
}

.responsive-container-lg {
  max-width: var(--responsive-width-lg);
}

.responsive-container-xl {
  max-width: var(--responsive-width-xl);
}

@media (min-width: 600px) {
  .responsive-container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

@media (min-width: 960px) {
  .responsive-container {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
    /* Removed max-width constraint to allow full-width layouts */
  }
}

@media (min-width: 1280px) {
  .responsive-container {
    /* Removed max-width constraint to allow full-width layouts */
  }
}

@media (min-width: 1536px) {
  .responsive-container {
    /* Removed max-width constraint to allow full-width layouts */
  }
}

/* Responsive grid utilities */
.responsive-grid {
  display: grid;
  grid-gap: var(--gap-4);
  gap: var(--gap-4);
  width: 100%;
  grid-template-columns: repeat(1, 1fr);
}

.responsive-grid-auto {
  display: grid;
  grid-gap: var(--gap-4);
  gap: var(--gap-4);
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.responsive-grid-auto-sm {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.responsive-grid-auto-lg {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

@media (min-width: 600px) {
  .responsive-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-6);
  }
}

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

@media (min-width: 1280px) {
  .responsive-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Responsive spacing classes */
.responsive-spacing-xs { margin-bottom: var(--space-1); }
.responsive-spacing-sm { margin-bottom: var(--space-2); }
.responsive-spacing-md { margin-bottom: var(--space-4); }
.responsive-spacing-lg { margin-bottom: var(--space-6); }
.responsive-spacing-xl { margin-bottom: var(--space-8); }
.responsive-spacing-2xl { margin-bottom: var(--space-12); }

/* Responsive padding classes */
.responsive-padding-xs { padding: var(--space-1); }
.responsive-padding-sm { padding: var(--space-2); }
.responsive-padding-md { padding: var(--space-4); }
.responsive-padding-lg { padding: var(--space-6); }
.responsive-padding-xl { padding: var(--space-8); }
.responsive-padding-2xl { padding: var(--space-12); }

/* Responsive margin classes */
.responsive-margin-xs { margin: var(--space-1); }
.responsive-margin-sm { margin: var(--space-2); }
.responsive-margin-md { margin: var(--space-4); }
.responsive-margin-lg { margin: var(--space-6); }
.responsive-margin-xl { margin: var(--space-8); }
.responsive-margin-2xl { margin: var(--space-12); }

/* Responsive gap classes */
.responsive-gap-xs { gap: var(--gap-1); }
.responsive-gap-sm { gap: var(--gap-2); }
.responsive-gap-md { gap: var(--gap-4); }
.responsive-gap-lg { gap: var(--gap-6); }
.responsive-gap-xl { gap: var(--gap-8); }
.responsive-gap-2xl { gap: var(--gap-12); }

/* Responsive typography classes */
.responsive-text-xs { font-size: var(--text-xs); }
.responsive-text-sm { font-size: var(--text-sm); }
.responsive-text-md { font-size: var(--text-base); }
.responsive-text-lg { font-size: var(--text-lg); }
.responsive-text-xl { font-size: var(--text-xl); }
.responsive-text-2xl { font-size: var(--text-2xl); }
.responsive-text-3xl { font-size: var(--text-3xl); }
.responsive-text-4xl { font-size: var(--text-4xl); }
.responsive-text-5xl { font-size: var(--text-5xl); }

.responsive-heading {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  font-weight: var(--font-bold);
}

.responsive-subheading {
  font-size: var(--text-xl);
  line-height: var(--leading-normal);
  font-weight: var(--font-semibold);
}

.responsive-body {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--font-normal);
}

.responsive-caption {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  font-weight: var(--font-normal);
}

/* Responsive card classes */
.responsive-card {
  border-radius: var(--radius-lg);
  padding: var(--card-padding-md);
  box-shadow: var(--shadow-md);
}

.responsive-card-sm {
  padding: var(--space-2);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.responsive-card-lg {
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

/* Responsive button classes */
.responsive-button {
  padding: var(--btn-padding-md);
  border-radius: var(--btn-radius);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
}

.responsive-button-sm {
  padding: var(--btn-padding-sm);
  font-size: var(--text-sm);
}

.responsive-button-lg {
  padding: var(--btn-padding-lg);
  font-size: var(--text-lg);
}

/* Responsive visibility classes */
.hide-on-mobile {
  display: none;
}

.show-on-mobile {
  display: block;
}

.hide-on-tablet {
  display: block;
}

.show-on-tablet {
  display: none;
}

.hide-on-desktop {
  display: block;
}

.show-on-desktop {
  display: none;
}

@media (min-width: 600px) {
  .hide-on-mobile {
    display: block;
  }
  
  .show-on-mobile {
    display: none;
  }
  
  .hide-on-tablet {
    display: none;
  }
  
  .show-on-tablet {
    display: block;
  }
}

@media (min-width: 1200px) {
  .hide-on-desktop {
    display: none;
  }
  
  .show-on-desktop {
    display: block;
  }
}

/* Responsive flexbox utilities */
.responsive-flex {
  display: flex;
  gap: var(--gap-4);
  flex-wrap: wrap;
}

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

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

@media (min-width: 768px) {
  .responsive-flex-col {
    flex-direction: row;
  }
}

/* Responsive positioning utilities */
.responsive-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

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

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

/**
 * Global Input Styling
 * 
 * These styles ensure consistent input appearance across the application
 * regardless of whether using MUI components or custom inputs.
 */

/* Apply to all standard input elements */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
  background-color: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
  border-radius: var(--border-radius-md);
  transition: all var(--transition-fast) var(--transition-ease);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}

/* Focus states */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15) !important;
  outline: none !important;
}

/* Placeholder styling */
::placeholder {
  color: var(--color-text-secondary) !important;
  opacity: 0.7 !important;
}

/* MUI overrides for consistency */
.MuiOutlinedInput-root {
  background-color: var(--color-surface) !important;
  -webkit-backdrop-filter: blur(5px) !important;
          backdrop-filter: blur(5px) !important;
}

.MuiOutlinedInput-notchedOutline {
  border-color: var(--color-border) !important;
}

.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: var(--color-primary-light) !important;
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--color-primary) !important;
  border-width: 2px !important;
}

.MuiInputLabel-root {
  color: var(--color-text-primary) !important;
}

.MuiInputLabel-root.Mui-focused {
  color: var(--color-primary) !important;
}

/* Input text color */
.MuiInputBase-input {
  color: var(--color-text-primary) !important;
}

/* Disabled state */
.MuiOutlinedInput-root.Mui-disabled {
  background-color: rgba(0, 0, 0, 0.04) !important;
}

.Mui-disabled .MuiOutlinedInput-notchedOutline {
  border-color: rgba(0, 0, 0, 0.1) !important;
}

/* For dark mode, adjust disabled state */
.dark-mode .MuiOutlinedInput-root.Mui-disabled {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.dark-mode .Mui-disabled .MuiOutlinedInput-notchedOutline {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Error states */
.MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline {
  border-color: var(--color-error) !important;
}

.MuiFormHelperText-root.Mui-error {
  color: var(--color-error) !important;
}

/* Date Picker & Select overrides */
.MuiCalendarPicker-root,
.MuiMenu-paper {
  background-color: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
  -webkit-backdrop-filter: blur(10px) !important;
          backdrop-filter: blur(10px) !important;
  border: 1px solid var(--color-border) !important;
}

.MuiCalendarPicker-root button,
.MuiMenuItem-root {
  color: var(--color-text-primary) !important;
}

.MuiCalendarPicker-root .Mui-selected,
.MuiMenuItem-root.Mui-selected {
  background-color: var(--color-primary) !important;
  color: white !important;
}

/* Input adornment fix */
.MuiInputAdornment-root {
  color: var(--color-text-secondary) !important;
}

/* Override autofill styles in browsers */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--color-text-primary) !important;
  -webkit-box-shadow: 0 0 0 30px var(--color-surface) inset !important;
  -webkit-transition: background-color 5000s ease-in-out 0s !important;
  transition: background-color 5000s ease-in-out 0s !important;
}
/**
 * Dashboard Theme Styling
 * 
 * These styles ensure consistent dashboard appearance across the application
 * with proper theming and color contrast.
 */

/* Dashboard Cards with Enhanced Glassmorphism */
.dashboard-card {
  background: var(--color-glass-strong) !important;
  color: var(--color-text-primary) !important;
  border-radius: var(--border-radius-lg) !important;
  border: 1px solid var(--color-glassmorphism-border) !important;
  padding: 1.5rem;
  min-height: 120px;
  transition: all var(--transition-normal) var(--transition-ease) !important;
  -webkit-backdrop-filter: blur(12px) !important;
          backdrop-filter: blur(12px) !important;
  box-shadow: 0 10px 30px var(--color-glassmorphism-shadow), inset 0 0 0 1px var(--color-glassmorphism-highlight) !important;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dashboard-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--glassmorphism-primary-gradient);
  opacity: 0.3;
  z-index: 0;
  border-radius: var(--border-radius-lg);
}

.dashboard-card > * {
  position: relative;
  z-index: 1;
}

.dashboard-card:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  transform: translateY(-2px);
}

.dashboard-card-special {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(99, 102, 241, 0.1)) !important;
  border: 1px solid rgba(99, 102, 241, 0.2) !important;
}

/* Dashboard Typography */
.dashboard-title {
  font-weight: var(--font-weight-bold) !important;
  color: var(--color-text-primary) !important;
  margin-bottom: var(--space-2);
}

.dashboard-subtitle {
  color: var(--color-text-secondary) !important;
  margin-bottom: var(--space-4);
}

.dashboard-card-title {
  font-weight: var(--font-weight-semibold) !important;
  color: var(--color-text-primary) !important;
  margin-bottom: var(--space-2);
}

/* Dashboard Buttons with Glassmorphism */
.dashboard-button {
  text-transform: none !important;
  font-weight: var(--font-weight-medium) !important;
  border-radius: var(--border-radius-md) !important;
  transition: all var(--transition-fast) var(--transition-ease) !important;
  -webkit-backdrop-filter: blur(8px) !important;
          backdrop-filter: blur(8px) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
  min-height: 44px !important;
  min-height: var(--button-min-height, 44px) !important;
  padding: var(--space-2) var(--space-3) !important;
  font-size: 0.875rem !important;
}

.dashboard-button-primary {
  background: rgba(99, 102, 241, 0.15) !important;
  border: 1px solid rgba(99, 102, 241, 0.3) !important;
  color: white !important;
}

.dashboard-button-primary:hover {
  background: rgba(99, 102, 241, 0.25) !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px) !important;
}

.dashboard-button-secondary {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: white !important;
}

.dashboard-button-secondary:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-2px) !important;
}

/* Dashboard Lists */
.dashboard-list-item {
  padding: var(--space-4);
  border-radius: var(--border-radius-md) !important;
  margin-bottom: var(--space-1);
  transition: all var(--transition-fast) var(--transition-ease) !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.dashboard-list-item:hover {
  background-color: rgba(99, 102, 241, 0.08) !important;
}

.dashboard-list-item-icon {
  color: var(--color-primary) !important;
  min-width: 40px !important;
}

.dashboard-list-item-text {
  color: var(--color-text-primary) !important;
  font-weight: var(--font-weight-medium) !important;
}

.dashboard-list-item-secondary {
  color: var(--color-text-secondary) !important;
}

/* Dashboard Card Dividers */
.dashboard-card-divider {
  margin: var(--space-2) 0 var(--space-4) 0;
  background-color: var(--color-border) !important;
}

/* Dashboard Empty States */
.dashboard-empty-state {
  text-align: center !important;
  padding: var(--space-6);
}

.dashboard-empty-icon {
  color: var(--color-text-secondary) !important;
  margin-bottom: var(--space-4);
}

.dashboard-empty-text {
  color: var(--color-text-secondary) !important;
  margin-bottom: var(--space-4);
}
/* ClientDashboardPage.enhanced.css - Theme-aware dashboard styles with Glassmorphism UI */

/* Use existing values from dashboard-theme.css but extend with specific overrides for client dashboard */

.client-dashboard-container {
  min-height: auto;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow-x: visible;
  overflow-y: visible;
  color: var(--color-text-primary);
  padding: var(--spacing-lg);
  height: auto;
}

.client-dashboard-header {
  margin-bottom: var(--spacing-lg);
}

.client-dashboard-title {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.5px;
  margin-bottom: var(--spacing-sm);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.client-dashboard-subtitle {
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
}

/* Glassmorphism Card Styles */
.client-dashboard-card {
  background: var(--color-glass-strong) !important;
  -webkit-backdrop-filter: blur(12px) !important;
          backdrop-filter: blur(12px) !important;
  border: 1px solid var(--color-glassmorphism-border) !important;
  border-radius: var(--border-radius-lg) !important;
  box-shadow: 0 10px 30px var(--color-glassmorphism-shadow), inset 0 0 0 1px var(--color-glassmorphism-highlight) !important;
  height: 100%;
  transition: all var(--transition-normal) var(--transition-ease);
  padding: var(--spacing-lg);
  position: relative;
  overflow: hidden;
}

.client-dashboard-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: var(--glassmorphism-primary-gradient);
  opacity: 0.6;
  z-index: 0;
}

.client-dashboard-card-content {
  position: relative;
  z-index: 1;
}

.client-dashboard-card:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  transform: translateY(-2px);
}

.client-dashboard-card-special {
  background: var(--color-glass-medium) !important;
  -webkit-backdrop-filter: blur(12px) !important;
          backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(99, 102, 241, 0.15) !important;
}

.client-dashboard-card-title {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
}

.client-dashboard-card-title-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(16, 185, 129, 0.2));
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.client-dashboard-card-divider {
  border-color: var(--color-glassmorphism-border);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  height: 1px;
  margin: var(--spacing-sm) 0 var(--spacing-md) 0;
}

/* Button styles with Glassmorphism */
.client-dashboard-button {
  -webkit-backdrop-filter: blur(8px) !important;
          backdrop-filter: blur(8px) !important;
  border-radius: var(--border-radius-md) !important;
  font-weight: var(--font-weight-medium) !important;
  text-transform: none !important;
  transition: all var(--transition-fast) var(--transition-ease) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

.client-dashboard-button-primary {
  background: rgba(99, 102, 241, 0.15) !important;
  border: 1px solid rgba(99, 102, 241, 0.3) !important;
  color: white !important;
}

.client-dashboard-button-primary:hover {
  background: rgba(99, 102, 241, 0.25) !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px);
}

.client-dashboard-button-secondary {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: white !important;
}

.client-dashboard-button-secondary:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-2px) !important;
}

/* Profile card styling with Glassmorphism */
.client-profile-card {
  background: var(--color-glass-strong) !important;
  -webkit-backdrop-filter: blur(12px) !important;
          backdrop-filter: blur(12px) !important;
  border: 1px solid var(--color-glassmorphism-border) !important;
  box-shadow: 0 10px 30px var(--color-glassmorphism-shadow), inset 0 0 0 1px var(--color-glassmorphism-highlight) !important;
  position: relative;
  overflow: hidden;
}

.client-profile-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: var(--glassmorphism-primary-gradient);
  opacity: 0.6;
  z-index: 0;
}

/* Empty state styles with Glassmorphism */
.client-dashboard-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
}

.client-dashboard-empty-icon-container {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-md);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  border: 1px solid rgba(139, 92, 246, 0.2);
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.client-dashboard-empty-icon {
  color: rgba(139, 92, 246, 0.7);
}

.client-dashboard-empty-text {
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Animation for loading */
.client-rotating-icon {
  animation: var(--animation-spin);
}

/* Touch optimization */
.client-touch-target {
  min-height: 48px; /* Minimum size for touch targets */
}

/* Tablet and mobile styles */
@media (max-width: 1024px) {
  .client-dashboard-card {
    margin-bottom: var(--spacing-md);
  }
}

@media (max-width: 900px) {
  .client-dashboard-container {
    padding: var(--spacing-md);
  }

  .client-dashboard-title {
    font-size: var(--font-size-2xl);
  }

  .client-dashboard-card-title {
    font-size: var(--font-size-lg);
  }
}

@media (max-width: 768px) {
  .client-dashboard-container {
    padding: var(--spacing-md) var(--spacing-sm);
  }

  .client-dashboard-header {
    margin-bottom: var(--spacing-md);
  }

  .client-dashboard-title {
    font-size: var(--font-size-xl);
    line-height: 1.3;
  }

  .client-dashboard-card {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
  }

  .client-dashboard-card-title {
    font-size: var(--font-size-md);
  }

  .client-dashboard-card-divider {
    margin: var(--spacing-sm) 0 var(--spacing-md) 0;
  }
}

@media (max-width: 600px) {
  .client-dashboard-container {
    padding: var(--spacing-sm) var(--spacing-xs);
  }

  .client-dashboard-title {
    font-size: var(--font-size-md);
    margin-bottom: var(--spacing-xs);
  }

  .client-dashboard-card-divider {
    margin: var(--spacing-xs) 0 var(--spacing-sm) 0;
  }

  .client-dashboard-card {
    border-radius: var(--border-radius-md) !important;
  }
}

@media (max-width: 480px) {
  .client-dashboard-title {
    font-size: var(--font-size-sm);
  }

  .client-dashboard-subtitle {
    font-size: var(--font-size-sm);
  }

  .client-dashboard-card {
    padding: var(--spacing-sm);
  }

  .client-dashboard-card-title {
    font-size: var(--font-size-sm);
  }
}
/* ArtistDashboardPage.enhanced.css - Theme-aware dashboard styles with Glassmorphism UI */
/* Add high specificity selector to override inline styles */
/* Base glassmorphism styles for all paper components */
body .MuiPaper-root {
  background: var(--color-glass-strong) !important;
  -webkit-backdrop-filter: blur(12px) !important;
          backdrop-filter: blur(12px) !important;
  border: 1px solid var(--color-glassmorphism-border) !important;
  box-shadow: 0 10px 30px var(--color-glassmorphism-shadow), inset 0 0 0 1px var(--color-glassmorphism-highlight) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Special variant for stat cards */
body .MuiGrid-container .MuiGrid-item .MuiPaper-root {
  background: var(--color-glass-medium) !important;
}

/* Different colors for each stat card */
body .MuiGrid-container .MuiGrid-item:nth-child(1) .MuiPaper-root::before {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(99, 102, 241, 0.05)) !important;
}

body .MuiGrid-container .MuiGrid-item:nth-child(2) .MuiPaper-root::before {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(16, 185, 129, 0.05)) !important;
}

body .MuiGrid-container .MuiGrid-item:nth-child(3) .MuiPaper-root::before {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(239, 68, 68, 0.05)) !important;
}

body .MuiGrid-container .MuiGrid-item:nth-child(4) .MuiPaper-root::before {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(59, 130, 246, 0.05)) !important;
}

/* Special variant for profile card */
body .artist-profile-card,
body .MuiPaper-root:first-of-type {
  background: var(--color-glass-strong) !important;
  border: 1px solid rgba(99, 102, 241, 0.15) !important;
}

/* Special variant for action cards */
body .MuiPaper-root:nth-of-type(2) {
  background: rgba(30, 30, 45, 0.7) !important;
}

/* Ensure content stays above the gradient background */
body .MuiPaper-root > .MuiBox-root,
body .MuiPaper-root > .MuiTypography-root,
body .MuiPaper-root > .MuiDivider-root,
body .MuiPaper-root > .MuiGrid-root,
body .MuiPaper-root > .MuiList-root,
body .MuiPaper-root > * {
  position: relative !important;
  z-index: 2 !important;
}

/* Base gradient for all paper components */
body .MuiPaper-root::before {
  content: "" !important;
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: var(--glassmorphism-primary-gradient) !important;
  opacity: 0.6 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Special gradient for profile card */
body .MuiPaper-root:first-of-type::before {
  background: radial-gradient(circle at top left, rgba(99, 102, 241, 0.2), transparent 40%),
              radial-gradient(circle at bottom right, rgba(139, 92, 246, 0.15), transparent 40%) !important;
}

/* Special gradient for quick actions */
body .MuiPaper-root:nth-of-type(2)::before {
  background: radial-gradient(circle at bottom left, rgba(16, 185, 129, 0.15), transparent 40%),
              radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent 40%) !important;
}

/* Gradient for AI Tools */
body .MuiPaper-root:nth-of-type(3)::before {
  background: radial-gradient(circle at top right, rgba(236, 72, 153, 0.15), transparent 50%),
              radial-gradient(circle at bottom left, rgba(139, 92, 246, 0.1), transparent 40%) !important;
}

/* Gradient for projects */
body .MuiPaper-root:nth-of-type(4)::before {
  background: radial-gradient(circle at center, rgba(99, 102, 241, 0.12), transparent 60%) !important;
}

/* Use existing values from dashboard-theme.css but extend with specific overrides for artist dashboard */

.artist-dashboard-container {
  min-height: auto;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow-x: visible;
  overflow-y: visible;
  color: var(--color-text-primary);
  padding: var(--spacing-lg);
  height: auto;
}

.artist-dashboard-header {
  margin-bottom: var(--spacing-lg);
}

.artist-dashboard-title {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.5px;
  margin-bottom: var(--spacing-sm);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.artist-dashboard-subtitle {
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
}

/* Glassmorphism Card Styles */
.artist-dashboard-card {
  background: var(--color-glass-strong) !important;
  -webkit-backdrop-filter: blur(12px) !important;
          backdrop-filter: blur(12px) !important;
  border: 1px solid var(--color-glassmorphism-border) !important;
  border-radius: var(--border-radius-lg) !important;
  box-shadow: 0 10px 30px var(--color-glassmorphism-shadow), inset 0 0 0 1px var(--color-glassmorphism-highlight) !important;
  height: 100%;
  transition: all var(--transition-normal) var(--transition-ease);
  padding: var(--spacing-lg);
  position: relative;
  overflow: hidden;
}

.artist-dashboard-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: var(--glassmorphism-secondary-gradient);
  opacity: 0.6;
  z-index: 0;
}

.artist-dashboard-card-content {
  position: relative;
  z-index: 1;
}

.artist-dashboard-card:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  transform: translateY(-2px);
}

.artist-dashboard-card-special {
  background: rgba(20, 20, 35, 0.7) !important;
  -webkit-backdrop-filter: blur(12px) !important;
          backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(99, 102, 241, 0.15) !important;
}

.artist-dashboard-card-title {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
}

.artist-dashboard-card-title-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(16, 185, 129, 0.2));
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.artist-dashboard-card-divider {
  border-color: rgba(255, 255, 255, 0.06);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  height: 1px;
  margin: var(--spacing-sm) 0 var(--spacing-md) 0;
}

/* Button styles with Glassmorphism */
.artist-dashboard-button {
  -webkit-backdrop-filter: blur(8px) !important;
          backdrop-filter: blur(8px) !important;
  border-radius: var(--border-radius-md) !important;
  font-weight: var(--font-weight-medium) !important;
  text-transform: none !important;
  transition: all var(--transition-fast) var(--transition-ease) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

.artist-dashboard-button-primary {
  background: rgba(99, 102, 241, 0.15) !important;
  border: 1px solid rgba(99, 102, 241, 0.3) !important;
  color: white !important;
}

.artist-dashboard-button-primary:hover {
  background: rgba(99, 102, 241, 0.25) !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px);
}

.artist-dashboard-button-secondary {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: white !important;
}

.artist-dashboard-button-secondary:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-2px) !important;
}

/* Profile card styling with Glassmorphism */
.artist-profile-card {
  background: var(--color-glass-strong) !important;
  -webkit-backdrop-filter: blur(12px) !important;
          backdrop-filter: blur(12px) !important;
  border: 1px solid var(--color-glassmorphism-border) !important;
  box-shadow: 0 10px 30px var(--color-glassmorphism-shadow), inset 0 0 0 1px var(--color-glassmorphism-highlight) !important;
  position: relative;
  overflow: hidden;
}

.artist-profile-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: var(--glassmorphism-primary-gradient);
  opacity: 0.6;
  z-index: 0;
}

.artist-profile-header {
  position: relative;
  z-index: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.artist-profile-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}

.artist-profile-avatar-container {
  position: relative;
  padding: 4px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.3));
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  border-radius: 50%;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
}

.artist-profile-avatar {
  border: 2px solid rgba(255, 255, 255, 0.1);
  width: 80px;
  height: 80px;
}

.artist-profile-name {
  font-weight: 700;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.artist-profile-location {
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  gap: 4px;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  width: fit-content;
  font-size: 0.85rem;
}

.artist-profile-edit-button {
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  background: rgba(99, 102, 241, 0.12);
  border-radius: 8px;
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: white;
  padding: 6px 16px;
  font-weight: 500;
  text-transform: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.artist-profile-edit-button:hover {
  background: rgba(99, 102, 241, 0.18);
  border-color: rgba(99, 102, 241, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Bio container with frosted glass effect */
.artist-bio-container {
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.04);
  padding: var(--spacing-md);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
}

.artist-bio-text {
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  margin-bottom: 0;
}

.artist-bio-empty {
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.02);
  padding: var(--spacing-md);
  border-radius: 8px;
  border: 1px dashed rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.02);
}

.artist-bio-empty-text {
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
  margin-bottom: 0;
}

/* List item styles for glassmorphism */
.glassmorphism-list-item {
  padding: var(--spacing-md) !important;
  border-radius: var(--border-radius-md) !important;
  margin-bottom: var(--spacing-xs) !important;
  transition: all var(--transition-fast) var(--transition-ease) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  -webkit-backdrop-filter: blur(8px) !important;
          backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  position: relative !important;
}

.glassmorphism-list-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

.glassmorphism-list-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background: linear-gradient(to bottom, #6366F1, #8B5CF6);
  border-radius: 2px 0 0 2px;
  opacity: 0.7;
}

/* Empty state styles with Glassmorphism */
.artist-dashboard-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
}

.artist-dashboard-empty-icon-container {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-md);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  border: 1px solid rgba(139, 92, 246, 0.2);
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.artist-dashboard-empty-icon {
  color: rgba(139, 92, 246, 0.7);
}

.artist-dashboard-empty-text {
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Animation for loading */
.artist-rotating-icon {
  animation: var(--animation-spin);
}

/* Touch optimization */
.artist-touch-target {
  min-height: 48px; /* Minimum size for touch targets */
}

/* Media queries */
/* Mobile-specific styles */
@media (max-width: 768px) {
  body .MuiPaper-root {
    /* Reduce blur effect for better mobile performance */
    -webkit-backdrop-filter: blur(8px) !important;
            backdrop-filter: blur(8px) !important;
  }

  body .MuiPaper-root::before {
    /* Simplify gradients on mobile for better performance */
    opacity: 0.5 !important;
  }

  .artist-dashboard-container {
    padding: var(--spacing-md);
  }

  .artist-dashboard-card {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md) !important;
  }

  .artist-dashboard-title {
    font-size: var(--font-size-xl);
  }

  /* Adjust spacing for mobile */
  body .MuiBox-root {
    padding: var(--spacing-md) !important;
  }

  /* Ensure grid items stack properly */
  body .MuiGrid-container .MuiGrid-item {
    padding: var(--spacing-xs) !important;
  }
}

@media (max-width: 480px) {
  body .MuiPaper-root {
    /* Further reduce effects for very small screens */
    -webkit-backdrop-filter: blur(5px) !important;
            backdrop-filter: blur(5px) !important;
    border-width: 1px !important;
  }

  body .MuiPaper-root > * {
    /* Ensure content doesn't overflow on small screens */
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .artist-dashboard-container {
    padding: var(--spacing-sm);
  }

  .artist-dashboard-card {
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-sm) !important;
  }

  /* Make text more readable on small screens */
  .artist-dashboard-title {
    font-size: var(--font-size-lg);
  }

  /* Adjust stat card layouts */
  body .MuiGrid-container .MuiGrid-item .MuiPaper-root {
    height: auto !important;
    min-height: 100px !important;
  }

  /* Optimize footer spacing */
  body footer .MuiContainer-root {
    padding: var(--spacing-sm) !important;
  }
}
/* Enhanced base styles with mobile-first approach */

/* Import responsive design system - COMPLETE IMPORT ORDER FOR CONSISTENT LOADING */

/* Import theme CSS files at root level to prevent FOUC */

/* Import dashboard-specific CSS at root level */

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

/* Ensure full-width inheritance */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* CSS Variables for consistency */
:root {
  /* Colors */
  --primary: #4F46E5;
  --primary-light: #6366F1;
  --primary-dark: #4338CA;
  --secondary: #10B981;
  --secondary-light: #34D399;
  --secondary-dark: #059669;
  --background: #0D0C22;
  --card-bg: #171726;
  --paper: rgba(30, 30, 45, 0.6);
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-disabled: rgba(255, 255, 255, 0.5);
  --border-color: rgba(255, 255, 255, 0.1);
  --error: #EF4444;
  --success: #10B981;
  --warning: #F59E0B;
  --info: #3B82F6;
  
  /* Spacing - using design tokens (removed conflicting variables) */
  
  /* Shadows */
  --shadow-sm: 0px 1px 2px rgba(0, 0, 0, 0.06), 0px 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0px 4px 6px rgba(0, 0, 0, 0.05), 0px 5px 7px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0px 10px 15px rgba(0, 0, 0, 0.04), 0px 15px 20px rgba(0, 0, 0, 0.04);
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  
  /* Responsive variables */
  --font-size-base: 16px;
  --font-size-scaling: 1;
  --touch-scaling: 1;
  
  /* Dashboard components - Using design tokens */
  --dashboard-title-size: var(--text-xl);
  --dashboard-subtitle-size: var(--text-base);
  --dashboard-card-title-size: var(--text-lg);
  
  /* Container adjustments using design tokens */
  --container-padding-adjustment: 1;
  --card-min-height: var(--h-sm);
  --button-min-height: var(--h-xs);
}

/* Base font setting for responsive text - FIXED SIZE */
html {
  font-size: 16px; /* Fixed standard base font size instead of variable */
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden; /* Prevent horizontal scrollbars */
  width: 100%;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #0D0C22;
  background-color: var(--background);
  color: #FFFFFF;
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.5;
  overflow-x: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Improved accessibility and mobile-friendly forms */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

/* Make images responsive by default */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Prevent avatar images from becoming unexpectedly large */
.MuiAvatar-root img,
.MuiAvatar-img {
  max-width: 200px; /* Reasonable maximum for profile images */
  max-height: 200px;
  transition: all 0.2s ease-in-out; /* Smooth transitions */
}

/* Ensure header avatars have consistent sizing */
.MuiAppBar-root .MuiAvatar-root {
  width: 40px !important;
  height: 40px !important;
  transition: all 0.2s ease-in-out; /* Smooth transitions */
}

.MuiAppBar-root .MuiAvatar-root img {
  max-width: 40px !important;
  max-height: 40px !important;
  transition: all 0.2s ease-in-out; /* Smooth transitions */
}

/* Prevent layout shifts during loading */
.MuiAvatar-root {
  flex-shrink: 0; /* Prevent avatar from shrinking */
}

/* Ensure consistent avatar sizing across all components */
.MuiAvatar-root[style*="width"] {
  transition: all 0.2s ease-in-out;
}

/* PREVENT LAYOUT SHIFTS AND ENSURE CONSISTENT LOADING */

/* Ensure containers maintain consistent sizing during navigation */
.MuiContainer-root {
  transition: all 0.2s ease-in-out;
  min-height: 1px; /* Prevent collapse */
}

/* Prevent header size changes during navigation */
.MuiAppBar-root {
  height: var(--nav-height-sm);
  min-height: var(--nav-height-sm);
  transition: all 0.2s ease-in-out;
}

/* Ensure toolbar has consistent height */
.MuiToolbar-root {
  min-height: var(--nav-height-sm) !important;
  height: var(--nav-height-sm) !important;
  transition: all 0.2s ease-in-out;
}

/* Prevent color flashing during navigation */
.MuiPaper-root,
.MuiCard-root,
.MuiAccordion-root {
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* Ensure consistent button sizing */
.MuiButton-root {
  transition: all 0.2s ease-in-out;
  flex-shrink: 0;
}

/* Prevent text size shifts */
.MuiTypography-root {
  transition: font-size 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* Ensure smooth loading of components */
[class*="MuiBox-root"],
[class*="mui-"] {
  transition: all 0.2s ease-in-out;
}

/* PREVENT BACKDROP-FILTER LAYOUT SHIFTS */
[style*="backdrop-filter"] {
  will-change: auto; /* Prevent unnecessary layer creation */
  transform: translateZ(0); /* Force hardware acceleration for stability */
  backface-visibility: hidden; /* Prevent flickers */
}

/* Optimize glassmorphism containers */
[style*="backdrop-filter: blur"] {
  isolation: isolate; /* Create stacking context */
  contain: layout style; /* Contain layout changes */
}

/* Prevent CSS variable conflicts from causing font size jumps */
* {
  font-size: inherit; /* Ensure font inheritance is consistent */
}

/* Force consistent font sizing throughout app with maximum limits */
.MuiTypography-root {
  font-size: inherit !important; /* Override any conflicting typography sizes */
}

/* SMALLER TYPOGRAPHY - Reduced font sizes for cleaner look */
h1 { 
  font-size: var(--text-xl) !important; 
  line-height: var(--leading-tight) !important;
  font-weight: var(--font-semibold) !important;
}
h2 { 
  font-size: var(--text-lg) !important; 
  line-height: var(--leading-snug) !important;
  font-weight: var(--font-semibold) !important;
}
h3 { 
  font-size: var(--text-base) !important; 
  line-height: var(--leading-normal) !important;
  font-weight: var(--font-medium) !important;
}
h4, h5, h6 { 
  font-size: var(--text-sm) !important; 
  line-height: var(--leading-normal) !important;
  font-weight: var(--font-medium) !important;
}

/* Smaller body text using design tokens */
p, span, div {
  font-size: var(--text-sm) !important;
  line-height: var(--leading-normal) !important;
}

/* MUI Typography using smaller sizes - FIXED TEXT CUTOFF */
.MuiTypography-h1 { 
  font-size: var(--text-xl) !important; 
  line-height: var(--leading-tight) !important;
  white-space: normal !important;
  overflow: visible !important;
  word-wrap: break-word !important;
}
.MuiTypography-h2 { 
  font-size: var(--text-lg) !important; 
  line-height: var(--leading-snug) !important;
  white-space: normal !important;
  overflow: visible !important;
  word-wrap: break-word !important;
}
.MuiTypography-h3 { 
  font-size: var(--text-base) !important; 
  line-height: var(--leading-normal) !important;
  white-space: normal !important;
  overflow: visible !important;
  word-wrap: break-word !important;
}
.MuiTypography-h4 { 
  font-size: var(--text-sm) !important; 
  line-height: var(--leading-normal) !important;
  white-space: normal !important;
  overflow: visible !important;
  word-wrap: break-word !important;
}
.MuiTypography-h5 { 
  font-size: var(--text-xs) !important; 
  line-height: var(--leading-normal) !important;
  white-space: normal !important;
  overflow: visible !important;
  word-wrap: break-word !important;
}
.MuiTypography-h6 { 
  font-size: var(--text-xs) !important; 
  line-height: var(--leading-normal) !important;
  white-space: normal !important;
  overflow: visible !important;
  word-wrap: break-word !important;
}
.MuiTypography-body1 { 
  font-size: var(--text-sm) !important; 
  line-height: var(--leading-normal) !important;
  white-space: normal !important;
  overflow: visible !important;
  word-wrap: break-word !important;
}
.MuiTypography-body2 { 
  font-size: var(--text-xs) !important; 
  line-height: var(--leading-normal) !important;
  white-space: normal !important;
  overflow: visible !important;
  word-wrap: break-word !important;
}

/* Prevent transition conflicts */
* {
  transition-property: background-color, color, border-color, opacity, transform !important;
  transition-duration: 0.2s !important;
  transition-timing-function: ease-in-out !important;
}

/* Better handling of long words and URLs + EMERGENCY overflow prevention */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
}

/* Enhanced container layout with better spacing and height - FIXED TEXT CUTOFF */
.MuiCard-root,
.MuiPaper-root,
.dashboard-card {
  padding: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  border-radius: 12px !important;
  min-height: auto !important; /* Changed from fixed height to auto */
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important; /* Ensure content isn't clipped */
}

/* Mobile spacing fixes - prevent cards from being too close to screen edges */
@media (max-width: 768px) {
  .MuiCard-root,
  .MuiPaper-root,
  .dashboard-card {
    margin-left: 16px !important;
    margin-right: 16px !important;
    margin-bottom: 24px !important;
  }
  
  /* Add padding to main containers on mobile */
  .MuiContainer-root,
  [class*="container"],
  main {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (max-width: 480px) {
  .MuiCard-root,
  .MuiPaper-root,
  .dashboard-card {
    margin-left: 20px !important;
    margin-right: 20px !important;
    margin-bottom: 28px !important;
    padding: 1.25rem !important; /* Slightly reduce padding on very small screens */
  }
  
  /* Increase padding for very small screens */
  .MuiContainer-root,
  [class*="container"],
  main {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Fix text overflow and wrapping in cards */
.MuiCard-root *,
.MuiPaper-root *,
.dashboard-card * {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  text-overflow: visible !important;
  overflow: visible !important;
}

/* Ensure card content takes full available space */
.MuiCardContent-root {
  flex: 1 1 !important;
  overflow: visible !important;
  padding-bottom: 1rem !important;
}

/* Fix card actions positioning */
.MuiCardActions-root {
  margin-top: auto !important;
  padding-top: 0.5rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Add spacing between all major containers */
.MuiContainer-root {
  margin-bottom: 2rem !important;
}

/* Dashboard specific spacing improvements - FIXED GRID OVERFLOW */
.dashboard-grid,
.MuiGrid-container {
  gap: 1.5rem !important;
  overflow: visible !important;
  width: 100% !important;
  max-width: 100% !important;
}

.MuiGrid-item {
  margin-bottom: 1rem !important;
  overflow: visible !important;
  word-wrap: break-word !important;
  min-width: 0 !important; /* Allows flexbox items to shrink below content size */
  flex-basis: auto !important;
}

/* Fix specific grid sizing issues */
.MuiGrid-root.MuiGrid-item {
  max-width: 100% !important;
  flex-basis: auto !important;
}

/* Ensure grid items don't overflow horizontally */
.MuiGrid-container > .MuiGrid-item {
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  max-width: 100% !important;
}

/* Add spacing between sections */
section,
.section,
.dashboard-section {
  margin-bottom: 2rem !important;
}

/* Improve spacing for lists and navigation */
.MuiList-root {
  padding: 0.5rem 0 !important;
}

.MuiListItem-root {
  margin-bottom: 0.25rem !important;
  border-radius: 8px !important;
}

/* Proper icon spacing */
.MuiListItemIcon-root {
  min-width: 40px !important;
  margin-right: 12px !important;
}

.MuiSvgIcon-root {
  font-size: 1.25rem !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
}

/* Clean button styling with smaller text - FIXED TEXT CUTOFF */
.MuiButton-root {
  font-size: 0.75rem !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  text-transform: none !important;
  margin: 0.25rem !important;
  white-space: normal !important; /* Allow text wrapping in buttons */
  overflow: visible !important;
  min-height: 36px !important;
  height: auto !important;
  word-wrap: break-word !important;
}

/* Fix button text that might be too long */
.MuiButton-root .MuiButton-label {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

a {
  color: #6366F1;
  color: var(--primary-light);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button {
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
}

/* Touch target sizing */
.touch-target,
button:not(.MuiButton-root), 
a.nav-link,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"] {
  min-height: 44px;
  min-width: 44px;
}

/* Full-width responsive layout utils */
.container {
  width: 100vw;
  margin: 0;
  padding: 0 1rem;
  box-sizing: border-box;
}

/* Full-width layout without constraints */
.dashboard-page,
.main-content {
  width: 100%;
  margin: 0;
}

/* Full-width utility classes */
.text-center { text-align: center; }
.w-100 { width: 100%; }
.w-full { width: 100%; }
.w-screen { width: 100vw; }
.w-full-force { width: 100% !important; max-width: none !important; }
.h-100 { height: 100%; }
.h-screen { height: 100vh; }
.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.flex-row { flex-direction: row; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.align-center { align-items: center; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 1rem; }
.gap-4 { gap: 1.5rem; }

/* Container override utilities */
.no-max-width { max-width: none !important; }
.full-viewport { width: 100vw !important; margin-left: 0 !important; margin-right: 0 !important; }
.container-full { width: 100%; max-width: none; margin: 0; }

/* Margin utilities */
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 2rem; }

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 2rem; }

.mx-auto { margin-left: auto; margin-right: auto; }
.my-auto { margin-top: auto; margin-bottom: auto; }

/* Padding utilities */
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
.p-5 { padding: 2rem; }

/* Mobile optimizations - using media queries instead of classes */
/* Mobile phones (portrait) */
@media (max-width: 480px) {
  :root {
    --font-size-base: 16px; /* Keep standard 16px base for accessibility */
    --font-size-scaling: 1;
    --touch-scaling: 1;
    --dashboard-title-size: 1.125rem; /* Mobile appropriate title size */
    --dashboard-subtitle-size: 0.8rem; /* Mobile appropriate subtitle size */
    --dashboard-card-title-size: 0.9rem; /* Mobile appropriate card title size */
  }
  
  html {
    font-size: 16px;
    font-size: var(--font-size-base);
  }
  
  .container {
    padding: 0 0.5rem;
  }
  
  /* Ensure buttons and inputs are still readable */
  input, select, textarea, button {
    font-size: 13px;
  }
  
  /* Smaller touch targets but still accessible */
  .touch-target,
  button:not(.MuiButton-root), 
  a.nav-link,
  input[type="button"],
  input[type="submit"],
  input[type="reset"] {
    min-height: 38px;
    min-width: 38px;
  }
  
  /* Mobile text adjustments - MUCH SMALLER sizes for mobile */
  h1 { font-size: 1.125rem !important; }
  h2 { font-size: 1rem !important; }
  h3 { font-size: 0.875rem !important; }
  h4, h5, h6 { font-size: 0.75rem !important; }
  p, span, div { font-size: 0.75rem !important; }
  
  /* Specific dashboard text adjustments */
  .dashboard-title, .client-dashboard-title { font-size: 1rem !important; }
  .dashboard-subtitle, .client-dashboard-subtitle { font-size: 0.75rem !important; }
  
  /* MUI component text size overrides - MUCH SMALLER for mobile */
  .MuiTypography-body1 { font-size: 0.75rem !important; }
  .MuiTypography-body2 { font-size: 0.6875rem !important; }
  .MuiListItemText-primary { font-size: 0.75rem !important; }
  .MuiListItemText-secondary { font-size: 0.6875rem !important; }
  .MuiButton-root { font-size: 0.6875rem !important; }
  .MuiTab-root { font-size: 0.6875rem !important; }
  
  /* Add more spacing between containers on mobile - FIXED TEXT CUTOFF */
  .MuiCard-root,
  .MuiPaper-root,
  .dashboard-card {
    margin-bottom: 1rem !important;
    padding: 1rem !important;
    min-height: auto !important; /* Auto height instead of fixed */
    height: auto !important;
    overflow: visible !important;
  }
  
  /* Ensure mobile text doesn't overflow */
  .MuiCardContent-root {
    padding: 0.75rem !important;
    overflow: visible !important;
  }
  
  /* Mobile grid fixes */
  .MuiGrid-container {
    margin: 0 !important;
    width: 100% !important;
  }
  
  .MuiGrid-item {
    padding: 0.5rem !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  
  .MuiContainer-root {
    margin-bottom: 1.5rem !important;
  }
  
  /* Navigation text */
  nav a, .MuiDrawer-root .MuiListItemText-primary { font-size: 0.875rem !important; }
  
  /* Helper for mobile-specific flex direction */
  .flex-column-mobile { flex-direction: column; }
}

/* Tablets */
@media (min-width: 481px) and (max-width: 768px) {
  :root {
    --font-size-base: 16px; /* Keep standard 16px base for tablets */
    --font-size-scaling: 1;
    --touch-scaling: 1;
    --dashboard-title-size: 1.125rem; /* Tablet appropriate title size */
    --dashboard-subtitle-size: 0.875rem; /* Tablet appropriate subtitle size */
    --dashboard-card-title-size: 0.95rem; /* Tablet appropriate card title size */
  }
  
  html {
    font-size: 16px;
    font-size: var(--font-size-base);
  }
  
  .container {
    padding: 0 0.75rem;
  }
  
  /* Improve form input readability on tablets */
  input, select, textarea {
    font-size: 15px;
  }
}

/* Full-width mobile optimization - iOS Safari specific fixes */
@media (max-width: 480px) {
  /* iOS Safari address bar handling */
  html {
    height: -webkit-fill-available;
  }
  
  body {
    min-height: -webkit-fill-available;
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for newer browsers */
  }
  
  /* Prevent zoom on input focus in iOS Safari */
  input, select, textarea {
    font-size: 16px !important;
    transform: scale(1);
    transition: transform 0s;
  }
  
  /* Prevent horizontal scrolling on mobile */
  * {
    max-width: 100vw;
    overflow-x: hidden;
  }
  
  /* Fix touch scrolling */
  body, .main-container, .dashboard-container {
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
  }
  
  /* Prevent pull-to-refresh bouncing */
  body {
    overscroll-behavior-y: none;
    position: fixed;
    width: 100%;
  }
  
  #root {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
}

/* Advanced mobile viewport fixes */
@supports (-webkit-touch-callout: none) {
  /* iOS specific fixes */
  .mobile-safe-area {
    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);
  }
}

/* CSS Grid/Flexbox patterns for full-width layouts */
.full-width-grid {
  display: grid;
  grid-template-columns: 1fr;
  width: 100vw;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.full-width-flex {
  display: flex;
  flex-direction: column;
  width: 100vw;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Kill all max-width constraints globally */
.MuiContainer-root,
.MuiContainer-maxWidthXs,
.MuiContainer-maxWidthSm,
.MuiContainer-maxWidthMd,
.MuiContainer-maxWidthLg,
.MuiContainer-maxWidthXl,
.container,
.container-fluid,
.main-content,
.dashboard-content,
.page-content {
  max-width: none !important;
  width: 100% !important;
}

/* Force full-width for common CSS framework containers */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
.container-fluid {
  max-width: none !important;
  width: 100% !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* Bootstrap override killers */
.col,
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
.col-sm, .col-md, .col-lg, .col-xl, .col-xxl {
  max-width: none !important;
}

/* Tailwind CSS override killers */
.max-w-xs, .max-w-sm, .max-w-md, .max-w-lg, .max-w-xl,
.max-w-2xl, .max-w-3xl, .max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl,
.max-w-screen-sm, .max-w-screen-md, .max-w-screen-lg, .max-w-screen-xl {
  max-width: none !important;
}

/* Material-UI container killers */
.MuiContainer-maxWidthXs { max-width: none !important; }
.MuiContainer-maxWidthSm { max-width: none !important; }
.MuiContainer-maxWidthMd { max-width: none !important; }
.MuiContainer-maxWidthLg { max-width: none !important; }
.MuiContainer-maxWidthXl { max-width: none !important; }

/* Performance optimizations for full-width layouts */
.full-width-optimized {
  will-change: auto;
  contain: layout style;
  transform: translateZ(0);
}

/* Prevent layout shift utilities */
.layout-stable {
  min-height: 1px;
  flex-shrink: 0;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.5);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.7);
}

/* Accessibility utilities */
.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;
}

/* Focus styles for accessibility */
:focus-visible {
  outline: 2px solid #4F46E5;
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* EMERGENCY TEXT CUTOFF PREVENTION - Global fixes */
.dashboard-card,
.MuiCard-root,
.MuiPaper-root,
.card,
[class*="card"],
[class*="Card"] {
  /* Force auto height for all card-like elements */
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  
  /* Ensure overflow is visible for text content */
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  
  /* Allow text wrapping */
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

/* Reset overflow for media elements to prevent browser warnings */
img, video, canvas,
.MuiCard-root img,
.MuiPaper-root img,
[class*="card"] img,
[class*="Card"] img {
  overflow: hidden !important;
}

/* Specifically target image containers */
.dashboard-card img,
.dashboard-card video,
.dashboard-card canvas {
  overflow: hidden !important;
}

/* Fix for all text elements within cards */
.dashboard-card *,
.MuiCard-root *,
.MuiPaper-root *,
.card *,
[class*="card"] *,
[class*="Card"] * {
  /* Text wrapping and overflow fixes */
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  
  /* Remove any fixed widths that might cause cutoffs */
  max-width: 100% !important;
}

/* Specific fixes for common problematic elements */
.MuiListItemText-primary,
.MuiListItemText-secondary,
.MuiTypography-root,
h1, h2, h3, h4, h5, h6,
p, span, div, a {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
}

/* Fix for flex containers that might constrain children */
.MuiBox-root,
.MuiStack-root,
[class*="Box"],
[class*="Stack"] {
  overflow: visible !important;
  min-width: 0 !important; /* Allow flexbox items to shrink */
  max-width: 100% !important;
}
/* Enhanced Dashboard Styling with Dark Theme and Purple Accents */

.dashboard-container {
  background-color: #0D0C22;
  color: #fff;
  min-height: 100vh;
}

/* Dashboard header styling */
.dashboard-header {
  margin-bottom: 1.5rem;
}

.dashboard-title {
  font-weight: 700;
  background: linear-gradient(90deg, #fff 0%, #b8b9ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5rem;
}

.dashboard-subtitle {
  color: rgba(255, 255, 255, 0.7);
}

/* Card styling */
.dashboard-card {
  background: rgba(30, 30, 45, 0.95) !important;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  height: auto !important; /* Changed from 100% to auto for flexible height */
  min-height: 200px; /* Minimum height instead of fixed */
  width: 100% !important; /* Ensure cards use full width */
  max-width: none !important; /* Remove any max-width constraints */
  transition: all 0.3s ease;
  overflow: visible !important; /* Ensure content isn't clipped */
}

.dashboard-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
}

.dashboard-card-special {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(99, 102, 241, 0.07) 100%) !important;
  border: 1px solid rgba(99, 102, 241, 0.2) !important;
}

.dashboard-card-title {
  color: white;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dashboard-card-divider {
  background-color: rgba(255, 255, 255, 0.1) !important;
  margin: 12px 0 16px 0;
}

/* List items */
.dashboard-list-item {
  border-radius: 8px;
  margin-bottom: 8px;
  transition: all 0.2s ease;
  color: white !important;
  text-decoration: none;
}

.dashboard-list-item:hover {
  background-color: rgba(99, 102, 241, 0.15) !important;
}

.dashboard-list-item-text {
  color: white !important;
}

.dashboard-list-item-secondary {
  color: rgba(255, 255, 255, 0.7) !important;
}

.dashboard-list-item-icon {
  color: #6366F1 !important;
}

/* Button styling */
.dashboard-button {
  text-transform: none !important;
  border-radius: 10px !important;
  padding: 8px 16px !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
}

.dashboard-button-primary {
  background: linear-gradient(90deg, #6366F1 0%, #8B5CF6 100%) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3) !important;
}

.dashboard-button-primary:hover {
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5) !important;
  transform: translateY(-2px) !important;
}

.dashboard-button-secondary {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dashboard-button-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Empty state styling */
.dashboard-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
}

.dashboard-empty-icon {
  color: rgba(255, 255, 255, 0.2);
  margin-bottom: 1rem;
}

.dashboard-empty-text {
  color: rgba(255, 255, 255, 0.6) !important;
  max-width: 300px;
  margin: 0 auto 1rem auto;
}

/* Layout elements */
.dashboard-main {
  flex-grow: 1;
  padding: 24px;
  background-color: #0D0C22;
  min-height: calc(100vh - 64px);
  margin-top: 64px;
  background-image: radial-gradient(circle at 10% 20%, rgba(79, 70, 229, 0.05) 0%, transparent 40%),
                    radial-gradient(circle at 90% 80%, rgba(139, 92, 246, 0.05) 0%, transparent 40%);
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .dashboard-main {
    padding: 16px;
  }
  
  .dashboard-card {
    border-radius: 12px !important;
  }
}
/* Modern Dark Mode Authentication Styling */
.auth-page {
  min-height: 100vh;
  background-color: #14151a; /* Darker base background */
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(111, 76, 255, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(160, 100, 255, 0.08) 0%, transparent 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  position: relative;
  overflow: hidden;
}

/* Decorative elements */
.auth-decoration {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.auth-decoration.top-left {
  top: 5%;
  left: 5%;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(111, 76, 255, 0.1) 0%, transparent 70%);
  filter: blur(30px);
  animation: pulse 8s ease-in-out infinite alternate;
}

.auth-decoration.bottom-right {
  bottom: 5%;
  right: 5%;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(160, 100, 255, 0.1) 0%, transparent 70%);
  filter: blur(30px);
  animation: pulse 8s ease-in-out infinite alternate-reverse;
}

.auth-decoration.middle-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(111, 76, 255, 0.03) 0%, transparent 70%);
  filter: blur(40px);
  opacity: 0.5;
  z-index: -1;
}

/* Pulse animation for glowing elements */
@keyframes pulse {
  0% {
    opacity: 0.5;
    transform: scale(1);
  }
  100% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

/* Grid pattern */
.auth-grid-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.03;
  background-image: 
    radial-gradient(#a064ff 1px, transparent 1px),
    radial-gradient(#7c4dff 1px, transparent 1px);
  background-size: 30px 30px, 25px 25px;
  background-position: 0 0, 15px 15px;
  pointer-events: none;
  animation: grid-float 20s linear infinite;
}

@keyframes grid-float {
  0% {
    background-position: 0 0, 15px 15px;
  }
  100% {
    background-position: 30px 30px, 45px 45px;
  }
}

/* Auth form container */
.auth-container {
  max-width: 450px;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* Auth forms styling with laminated glass effect */
.auth-form-paper {
  /* Dark inner content with high transparency */
  background: rgba(18, 19, 26, 0.5) !important; 
  /* Blur for frosted inner content */
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  /* Smooth rounded corners */
  border-radius: 20px !important; 
  padding: 2.5rem !important;
  /* Clear lamination effect with outer glow */
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.25),
    0 0 30px rgba(111, 76, 255, 0.2) !important;
  position: relative;
  overflow: visible; /* Allow clear edge to extend beyond */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* Card inner content - before the clear lamination */
  z-index: 1;
  /* Subtle noise texture */
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27100%27 height=%27100%27%3E%3Cfilter id=%27noise%27 x=%270%27 y=%270%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.65%27 numOctaves=%273%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix type=%27saturate%27 values=%270%27/%3E%3C/filter%3E%3Crect width=%27100%27 height=%27100%27 filter=%27url%28%23noise%29%27 opacity=%270.025%27/%3E%3C/svg%3E");
  background-blend-mode: overlay;
  /* Critical: create stacking context for proper layering */
  transform: translateZ(0);
  /* Clear laminated edge - pseudo element approach */
  border: 6px solid transparent; /* Clear border space */
  background-clip: padding-box; /* Background doesn't extend into border */
  margin: 0; /* Counteract the border for proper layout */
}

/* Clear lamination layer */
.auth-form-paper:before {
  content: "";
  position: absolute;
  top: -6px; /* Match the border width */
  left: -6px;
  right: -6px;
  bottom: -6px;
  background: rgba(255, 255, 255, 0.03); /* Nearly transparent clear material */
  border-radius: 24px; /* Slightly larger than the card for the lamination effect */
  z-index: -1; /* Behind the content */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 
    /* Inner shadow to define the inner card edge */
    inset 0 0 0 6px rgba(18, 19, 26, 0.5),
    /* Outer edge highlights */
    0 0 0 1px rgba(255, 255, 255, 0.12), 
    0 0 0 transparent;
  /* Subtle reflective gradient for the clear edge */
  background-image: linear-gradient(
    135deg, 
    rgba(255, 255, 255, 0.08) 0%, 
    rgba(255, 255, 255, 0.03) 50%,
    rgba(255, 255, 255, 0.05) 100%
  );
  /* Plasticized look with very faint noise */
  background-blend-mode: overlay;
  /* Lamination gloss effect */
  pointer-events: none;
}

.auth-form-paper:hover {
  transform: translateY(-3px);
  /* Enhanced glow effect on hover */
  box-shadow: 
    0 15px 50px rgba(0, 0, 0, 0.3),
    0 0 45px rgba(138, 95, 255, 0.3) !important;
}

/* Lamination edge shimmer on hover */
.auth-form-paper:hover:before {
  box-shadow: 
    inset 0 0 0 6px rgba(18, 19, 26, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.18),
    0 0 20px rgba(255, 255, 255, 0.05);
  background-image: linear-gradient(
    135deg, 
    rgba(255, 255, 255, 0.12) 0%, 
    rgba(255, 255, 255, 0.04) 50%,
    rgba(255, 255, 255, 0.08) 100%
  );
}

/* Inner content gradient for depth */
.auth-form-paper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Radial corner gradient to give soft light without folded appearance */
  background: radial-gradient(
    circle at top right,
    rgba(180, 130, 255, 0.06) 0%,
    rgba(138, 95, 255, 0.04) 40%,
    rgba(80, 55, 190, 0.02) 70%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
  border-radius: 20px;
}

/* Light reflection along laminated edge top */
.auth-form-paper-reflection {
  position: absolute;
  top: -6px; /* Align with the laminated edge */
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.35),
    rgba(255, 255, 255, 0.1),
    transparent
  );
  filter: blur(0.3px);
  opacity: 0.6;
  z-index: 2;
  pointer-events: none;
  border-radius: 24px 24px 0 0;
}

/* Soft lighting for the laminated edge effect */
.auth-form-paper-glow {
  position: absolute;
  top: -10px; /* Extend beyond the lamination */
  left: -10px;
  right: -10px;
  bottom: -10px;
  border-radius: 30px; /* Larger than the lamination */
  z-index: -2; /* Behind the lamination layer */
  pointer-events: none;
  background: transparent;
  box-shadow: 
    0 0 20px 5px rgba(155, 100, 255, 0.12), /* Purple ambient glow */
    0 0 8px 2px rgba(255, 255, 255, 0.08); /* Subtle white edge highlight */
  opacity: 0.6;
  transition: opacity 0.5s ease, box-shadow 0.5s ease;
}

.auth-form-paper:hover .auth-form-paper-glow {
  opacity: 1;
  box-shadow: 
    0 0 30px 8px rgba(155, 100, 255, 0.18), /* Enhanced purple glow */
    0 0 12px 3px rgba(255, 255, 255, 0.1); /* Enhanced white highlight */
}

/* Light foreground element - flat design piece */
.auth-light-element {
  position: absolute;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 20px;
  pointer-events: none;
}

.auth-light-element.top-right {
  top: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  transform: rotate(25deg);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.03),
    rgba(255, 255, 255, 0.06)
  );
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.auth-light-element.bottom-left {
  bottom: 40px;
  left: 20px;
  width: 40px;
  height: 80px;
  transform: rotate(-15deg);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.02),
    rgba(255, 255, 255, 0.04)
  );
  border: 1px solid rgba(255, 255, 255, 0.03);
}

/* Subtle white sparkles/stars */
.auth-stars {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  mask-image: radial-gradient(circle at center, transparent 60%, black 100%);
  -webkit-mask-image: radial-gradient(circle at center, transparent 60%, black 100%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

.star {
  position: absolute;
  width: 1px;
  height: 1px;
  background: white;
  border-radius: 50%;
  filter: blur(0.8px);
  opacity: 0;
  animation: twinkle 5s infinite;
}

@keyframes twinkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 0.7;
    transform: scale(1);
  }
}

/* Typography */
.auth-title {
  color: white;
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-size: 1.75rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.auth-subtitle {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 2rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Status badge - for additional elements */
.auth-status-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  background-color: rgba(52, 211, 153, 0.1);
  color: #34d399;
  margin-bottom: 1rem;
}

.auth-status-badge.pending {
  background-color: rgba(251, 191, 36, 0.1);
  color: #fbbf24;
}

/* Form fields - laminated card style */
.auth-field .MuiInputBase-root {
  /* Slightly darker than the card to stand out against the laminated surface */
  background-color: rgba(25, 26, 35, 0.6);
  border-radius: 14px;
  /* Clear lamination style edge */
  border: 3px solid transparent;
  background-clip: padding-box; /* Background doesn't fill the border */
  color: white !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  margin-bottom: 0.5rem;
  /* Blur effect for the inner area */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  height: 56px;
  /* Slight inner shadow */
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  /* Very subtle noise texture */
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27100%27 height=%27100%27%3E%3Cfilter id=%27noise%27 x=%270%27 y=%270%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%273%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix type=%27saturate%27 values=%270%27/%3E%3C/filter%3E%3Crect width=%27100%27 height=%27100%27 filter=%27url%28%23noise%29%27 opacity=%270.015%27/%3E%3C/svg%3E");
  /* Position for the lamination effect */
  position: relative;
}

/* Clear lamination effect around the input fields */
.auth-field .MuiInputBase-root:after {
  content: "";
  position: absolute;
  top: -3px; /* Match the transparent border */
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 16px; /* Slightly larger radius for the clear edge */
  /* Very subtle shadow to define edges */
  box-shadow: 
    inset 0 0 0 3px rgba(25, 26, 35, 0.6), /* Inner border matches background */
    0 0 0 1px rgba(255, 255, 255, 0.07); /* Subtle outer highlight */
  /* Clear plastic look */
  background: rgba(255, 255, 255, 0.02);
  /* Glass-like reflective gradient */
  background-image: linear-gradient(
    135deg, 
    rgba(255, 255, 255, 0.05) 0%, 
    rgba(255, 255, 255, 0.02) 50%,
    rgba(255, 255, 255, 0.03) 100%
  );
  pointer-events: none;
  z-index: -1;
}

.auth-field .MuiInputBase-root:hover {
  /* Light up on hover */
  background-color: rgba(30, 31, 40, 0.65);
}

/* Enhanced lamination effect on hover */
.auth-field .MuiInputBase-root:hover:after {
  box-shadow: 
    inset 0 0 0 3px rgba(30, 31, 40, 0.65), /* Updated inner border */
    0 0 0 1px rgba(255, 255, 255, 0.1), 
    0 0 8px rgba(138, 95, 255, 0.15); /* Subtle purple glow */
  background: rgba(255, 255, 255, 0.03);
}

.auth-field .MuiInputBase-root.Mui-focused {
  /* Slightly brighter when focused */
  background-color: rgba(35, 36, 45, 0.7);
  /* Enhanced inner shadow for depth */
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
  /* Very subtle color tint when focused */
  background-image: linear-gradient(
    180deg,
    rgba(138, 95, 255, 0.03),
    transparent
  );
}

/* Enhanced lamination effect when focused */
.auth-field .MuiInputBase-root.Mui-focused:after {
  box-shadow: 
    inset 0 0 0 3px rgba(35, 36, 45, 0.7), /* Updated inner border */
    0 0 0 1px rgba(255, 255, 255, 0.12), 
    0 0 12px rgba(138, 95, 255, 0.25); /* Enhanced purple glow */
  background: rgba(255, 255, 255, 0.04);
}

/* Light reflection along the top edge */
.auth-field .MuiInputBase-root::before {
  content: "";
  position: absolute;
  top: -3px; /* Align with the clear edge */
  left: 5%;
  right: 5%;
  height: 1px;
  /* Light catching the top laminated edge */
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0.05),
    transparent
  );
  border-radius: 16px 16px 0 0;
  opacity: 0.7;
  /* Subtle diffusion of light */
  filter: blur(0.3px);
  transition: all 0.3s ease;
  z-index: 2; /* Above the lamination layer */
}

/* Enhanced reflection when focused */
.auth-field .MuiInputBase-root.Mui-focused::before {
  opacity: 1;
  /* Purple tint to the reflected light when focused */
  background: linear-gradient(90deg, 
    transparent, 
    rgba(138, 95, 255, 0.05),
    rgba(170, 140, 255, 0.2),
    rgba(138, 95, 255, 0.05),
    transparent
  );
}

/* ABSOLUTE white text enforcement */
.auth-page input,
.auth-page .MuiInputBase-input,
.auth-form-paper input,
.auth-form-paper .MuiInputBase-input,
.auth-field input,
.auth-field .MuiInputBase-input {
  color: #ffffff !important;
  caret-color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-fill-color: #ffffff !important;
  background-color: transparent !important;
}

/* Placeholder text */
.auth-page input::placeholder,
.auth-page .MuiInputBase-input::placeholder,
.auth-form-paper input::placeholder,
.auth-form-paper .MuiInputBase-input::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
  opacity: 1 !important;
}

/* Override autofill styles completely */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 0 0 1000px rgba(25, 26, 35, 0.8) inset !important;
  caret-color: #ffffff !important;
  color: #ffffff !important;
  background-color: rgba(25, 26, 35, 0.8) !important;
  -webkit-transition: background-color 5000s ease-in-out 0s !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* Label floating above the glass */
.auth-field .MuiInputLabel-root {
  color: rgba(255, 255, 255, 0.7) !important;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  /* Text shadow to help legibility against glass */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.auth-field .MuiInputLabel-root.Mui-focused {
  color: rgba(210, 180, 255, 0.95) !important;
  text-shadow: 0 0 10px rgba(138, 95, 255, 0.4);
}

/* Global auth text color enforcement */
.auth-page,
.auth-page *,
.auth-form-paper,
.auth-form-paper * {
  color: inherit;
}

/* Label styling */
.auth-page .MuiInputLabel-root,
.auth-form-paper .MuiInputLabel-root {
  color: rgba(255, 255, 255, 0.8) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.8) !important;
}

/* Focused label */
.auth-page .MuiInputLabel-root.Mui-focused,
.auth-form-paper .MuiInputLabel-root.Mui-focused {
  color: rgba(210, 180, 255, 0.95) !important;
  -webkit-text-fill-color: rgba(210, 180, 255, 0.95) !important;
}

.auth-field .MuiOutlinedInput-notchedOutline {
  border-color: transparent;
}

/* Helper text with subtle transparency */
.auth-field .MuiFormHelperText-root {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  margin-top: 0.25rem;
  letter-spacing: 0.01em;
  /* Very subtle text shadow for legibility */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Links */
.auth-link {
  color: #a064ff !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.auth-link:hover {
  color: #b88aff !important;
  text-decoration: none !important;
}

/* Alert boxes */
.auth-alert {
  background-color: rgba(255, 59, 48, 0.05) !important;
  color: #ff3b30 !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 59, 48, 0.1) !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.875rem !important;
}

/* Success alert */
.auth-alert-success {
  background-color: rgba(52, 199, 89, 0.05) !important;
  color: #34c759 !important;
  border: 1px solid rgba(52, 199, 89, 0.1) !important;
}

/* Checkbox style */
.auth-checkbox .MuiCheckbox-root {
  color: rgba(255, 255, 255, 0.5);
}

.auth-checkbox .Mui-checked {
  color: #a064ff !important;
}

.auth-checkbox .MuiFormControlLabel-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
}

/* Button with laminated effect */
.auth-button {
  /* Vibrant purple base */
  background: linear-gradient(90deg, 
    rgba(124, 77, 255, 0.85), 
    rgba(160, 100, 255, 0.85)
  ) !important;
  color: white !important;
  font-weight: 600 !important;
  /* Rounded corners matching other elements */
  border-radius: 16px !important;
  padding: 12px 24px !important;
  /* Basic shadows */
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.25),
    0 0 20px rgba(138, 95, 255, 0.3) !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  position: relative;
  /* Allow for clear lamination around the edges */
  overflow: visible;
  height: 56px; /* Taller button */
  /* Blur for inner content */
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  letter-spacing: 0.02em;
  font-size: 0.95rem;
  /* Subtle noise texture */
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27100%27 height=%27100%27%3E%3Cfilter id=%27noise%27 x=%270%27 y=%270%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.8%27 numOctaves=%273%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix type=%27saturate%27 values=%270%27/%3E%3C/filter%3E%3Crect width=%27100%27 height=%27100%27 filter=%27url%28%23noise%29%27 opacity=%270.02%27/%3E%3C/svg%3E");
  background-blend-mode: overlay;
  /* Create a clear space around button */
  border: 4px solid transparent;
  background-clip: padding-box;
  /* Fix position */
  margin: 0;
  z-index: 2;
  transform: translateZ(0);
}

/* Clear lamination layer */
.auth-button::before {
  content: '';
  position: absolute;
  top: -4px; /* Match the transparent border */
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 18px; /* Slightly larger for the clear edge */
  /* Clear plastic effect */
  background: rgba(255, 255, 255, 0.03);
  /* Shadow to define the inner content edge */
  box-shadow:
    /* Inner edge highlight */
    inset 0 0 0 4px rgba(124, 77, 255, 0.85),
    /* Outer thin highlight */
    0 0 0 1px rgba(255, 255, 255, 0.12);
  /* Glass-like reflective gradient */
  background-image: linear-gradient(
    135deg, 
    rgba(255, 255, 255, 0.08) 0%, 
    rgba(255, 255, 255, 0.03) 50%,
    rgba(255, 255, 255, 0.06) 100%
  );
  /* Lamination gloss effect */
  pointer-events: none;
  z-index: -1;
}

/* Light reflection across the button */
.auth-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Diagonal light reflection with subtle gradations */
  background: linear-gradient(
    120deg, 
    rgba(255, 255, 255, 0), 
    rgba(255, 255, 255, 0), 
    rgba(255, 255, 255, 0.1), 
    rgba(255, 255, 255, 0.15), 
    rgba(255, 255, 255, 0.08), 
    rgba(255, 255, 255, 0), 
    rgba(255, 255, 255, 0)
  );
  transform: translateX(-130%) skewX(-20deg);
  transition: transform 0.7s ease-out;
  border-radius: 16px;
  z-index: 0;
}

/* Animate the light reflection on hover */
.auth-button:hover::after {
  transform: translateX(130%) skewX(-20deg);
}

/* Button hover state with raised effect */
.auth-button:hover {
  transform: translateY(-3px) !important;
  /* Enhanced glow and shadows on hover */
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(138, 95, 255, 0.4) !important;
  /* Brighter on hover */
  background: linear-gradient(90deg, 
    rgba(135, 90, 255, 0.9), 
    rgba(170, 115, 255, 0.9)
  ) !important;
}

/* Enhanced lamination effect on hover */
.auth-button:hover::before {
  box-shadow:
    /* Inner edge highlight updated */
    inset 0 0 0 4px rgba(135, 90, 255, 0.9),
    /* Enhanced outer highlight */
    0 0 0 1px rgba(255, 255, 255, 0.18),
    0 0 20px rgba(138, 95, 255, 0.2);
  background: rgba(255, 255, 255, 0.04);
  background-image: linear-gradient(
    135deg, 
    rgba(255, 255, 255, 0.12) 0%, 
    rgba(255, 255, 255, 0.04) 50%,
    rgba(255, 255, 255, 0.08) 100%
  );
}

/* Top edge light reflection */
.auth-button-reflection {
  position: absolute;
  top: -4px; /* Align with lamination edge */
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.25),
    rgba(255, 255, 255, 0.08),
    transparent
  );
  filter: blur(0.3px);
  opacity: 0.8;
  z-index: 2;
  pointer-events: none;
  border-radius: 18px 18px 0 0;
}

/* Button pressed state */
.auth-button:active {
  transform: translateY(1px) !important;
  /* Compressed shadows when pressed */
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.2),
    0 0 15px rgba(138, 95, 255, 0.3) !important;
  /* Darker when pressed */
  background: linear-gradient(90deg, 
    rgba(118, 75, 225, 0.8), 
    rgba(145, 90, 225, 0.8)
  ) !important;
}

/* Loading state with pulsing effect */
.auth-button-loading {
  opacity: 0.85 !important;
  background: linear-gradient(90deg, 
    rgba(110, 70, 210, 0.7), 
    rgba(145, 95, 235, 0.7)
  ) !important;
  /* Subtle pulsing animation when loading */
  animation: button-pulse 2s infinite alternate;
}

@keyframes button-pulse {
  0% {
    box-shadow: 
      0 4px 12px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(138, 95, 255, 0.2);
  }
  100% {
    box-shadow: 
      0 4px 12px rgba(0, 0, 0, 0.25),
      0 0 25px rgba(138, 95, 255, 0.3);
  }
}

/* Divider with text */
.auth-divider {
  display: flex;
  align-items: center;
  margin: 1.5rem 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.875rem;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1 1;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
}

.auth-divider::before {
  margin-right: 0.75rem;
}

.auth-divider::after {
  margin-left: 0.75rem;
}

/* Social login buttons with glass effect */
.auth-social-button {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Slightly more transparent than main card */
  background-color: rgba(30, 31, 40, 0.35) !important;
  color: white !important;
  /* Very thin border */
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 14px !important;
  padding: 12px !important;
  transition: all 0.3s ease !important;
  width: 100%;
  margin-bottom: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  /* Glass effect */
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  /* Subtle shadow */
  box-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 1px rgba(255, 255, 255, 0.04) !important;
  /* Very subtle noise */
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27100%27 height=%27100%27%3E%3Cfilter id=%27noise%27 x=%270%27 y=%270%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.8%27 numOctaves=%273%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix type=%27saturate%27 values=%270%27/%3E%3C/filter%3E%3Crect width=%27100%27 height=%27100%27 filter=%27url%28%23noise%29%27 opacity=%270.015%27/%3E%3C/svg%3E");
  /* Position for inner highlight */
  position: relative;
  overflow: hidden;
}

/* Top edge light effect */
.auth-social-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05),
    transparent
  );
  opacity: 0.7;
}

.auth-social-button:hover {
  /* Lighter glass on hover */
  background-color: rgba(35, 36, 45, 0.45) !important;
  /* Enhanced border and glow */
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 
    0 4px 10px rgba(0, 0, 0, 0.15),
    0 0 15px rgba(138, 95, 255, 0.1),
    inset 0 1px 1px rgba(255, 255, 255, 0.07) !important;
  transform: translateY(-1px);
}

.auth-social-button:active {
  transform: translateY(0px);
  /* Darker when pressed */
  background-color: rgba(25, 26, 35, 0.4) !important;
  box-shadow: 
    0 2px 5px rgba(0, 0, 0, 0.1),
    inset 0 1px 1px rgba(255, 255, 255, 0.03) !important;
}

.auth-social-button svg {
  margin-right: 0.75rem;
  /* Subtle glow around social icons */
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.1));
}

/* Artist registration link styling */
.artist-register-link-container {
  margin-top: 1.5rem !important;
  padding: 12px;
  background: rgba(111, 76, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(111, 76, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.artist-register-link-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(111, 76, 255, 0.05),
    rgba(160, 100, 255, 0.05)
  );
  -webkit-mask-image: radial-gradient(
    ellipse at center,
    black 0%,
    transparent 70%
  );
          mask-image: radial-gradient(
    ellipse at center,
    black 0%,
    transparent 70%
  );
  pointer-events: none;
}

.artist-register-link-container .auth-link {
  font-weight: 700 !important;
  background: linear-gradient(90deg, #7c4dff, #a064ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(138, 95, 255, 0.4);
  position: relative;
}

.artist-register-link-container .auth-link::after {
  content: "→";
  display: inline-block;
  margin-left: 5px;
  transition: transform 0.3s ease;
  background: linear-gradient(90deg, #7c4dff, #a064ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.artist-register-link-container .auth-link:hover::after {
  transform: translateX(3px);
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .auth-form-paper {
    padding: 1.5rem !important;
    border-radius: 16px !important;
  }
  
  .auth-decoration.top-left,
  .auth-decoration.bottom-right {
    width: 200px;
    height: 200px;
  }
}
/* Admin Dashboard CSS - Using shared dashboard theme */

/* Admin metrics styling */
.admin-metric {
  margin-bottom: 1rem;
}

.admin-metric-value {
  font-size: 2.5rem;
  font-weight: 700;
  background: linear-gradient(90deg, #6366F1 0%, #8B5CF6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.admin-metric-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

/* User menu button */
.user-menu-button {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.user-menu-button::before {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: linear-gradient(45deg, 
    rgba(99, 102, 241, 0) 0%, 
    rgba(99, 102, 241, 0.1) 50%, 
    rgba(99, 102, 241, 0) 100%
  );
  transition: all 0.6s ease-in-out;
  z-index: -1;
}

.user-menu-button:hover::before {
  top: -50%;
  left: -50%;
  transform: rotate(45deg);
}

/* Dashboard tabs */
.MuiTabs-root {
  background: rgba(30, 30, 40, 0.3);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: 4px;
  border: 1px solid rgba(99, 102, 241, 0.2);
}

/* Artist applications table */
.dashboard-applications-table th {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  background: linear-gradient(135deg, rgba(25, 25, 40, 0.9) 0%, rgba(35, 35, 60, 0.95) 100%);
  border-bottom: 1px solid rgba(99, 102, 241, 0.3);
}

.dashboard-applications-table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Status chips */
.status-chip-pending {
  background-color: rgba(245, 158, 11, 0.15) !important;
  color: rgba(245, 158, 11, 0.9) !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
}

.status-chip-approved {
  background-color: rgba(16, 185, 129, 0.15) !important;
  color: rgba(16, 185, 129, 0.9) !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
}

.status-chip-rejected {
  background-color: rgba(239, 68, 68, 0.15) !important;
  color: rgba(239, 68, 68, 0.9) !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
}

/* Dialog styling */
.application-details-dialog {
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}

.application-details-dialog .MuiPaper-root {
  background: linear-gradient(135deg, rgba(25, 25, 40, 0.95) 0%, rgba(40, 40, 65, 0.95) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 16px;
  overflow: hidden;
}

/* Mobile responsiveness */
@media (max-width: 600px) {
  .dashboard-container {
    padding-top: 70px;
  }
  
  .dashboard-header {
    margin-bottom: 16px !important;
  }
  
  .admin-app-bar {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}
/* AITools Component Animations */

@keyframes ai-tools-pulse {
  0% {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 0 5px rgba(130, 94, 251, 0);
  }
  50% {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 0 10px rgba(130, 94, 251, 0.1);
  }
  100% {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 0 5px rgba(130, 94, 251, 0);
  }
}

@keyframes typography-pulse {
  0% {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 0 5px rgba(16, 185, 129, 0);
  }
  50% {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 0 10px rgba(16, 185, 129, 0.1);
  }
  100% {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 0 5px rgba(16, 185, 129, 0);
  }
}

@keyframes ai-glow {
  0% {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(130, 94, 251, 0.1);
  }
  100% {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 25px rgba(130, 94, 251, 0.2);
  }
}

/* Optimized animations for mobile */
@media (max-width: 600px) {
  @keyframes ai-tools-pulse {
    0%, 100% {
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
    }
    50% {
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 5px rgba(130, 94, 251, 0.1);
    }
  }
  
  @keyframes typography-pulse {
    0%, 100% {
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
    }
    50% {
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 5px rgba(16, 185, 129, 0.1);
    }
  }
  
  @keyframes ai-glow {
    0%, 100% {
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    }
    50% {
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 0 10px rgba(130, 94, 251, 0.15);
    }
  }
}

/* Text glow effect */
.text-glow {
  text-shadow: 0 0 10px rgba(138, 78, 255, 0.7);
}

/* Button pulse animation */
@keyframes button-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

.pulse-button {
  animation: button-pulse 2s infinite;
}

/* Reduced motion preference support */
@media (prefers-reduced-motion: reduce) {
  .ai-tools-container, 
  .ai-tools-container *::before,
  .ai-tools-container *::after {
    animation: none !important;
    transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease !important;
  }
}

/* ArtistDashboardPage.css - Responsive dashboard styles */

.artist-dashboard-container {
  min-height: 100%;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem;
  overflow-x: hidden;
}

/* Header section */
.dashboard-header {
  margin-bottom: 1rem; /* Reduced margin to minimize excessive space */
}

.dashboard-title {
  color: white;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 0.5rem;
}

.dashboard-subtitle {
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

/* Dashboard cards */
.dashboard-card {
  background-color: rgba(26, 26, 46, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px !important;
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  width: 100%;
}

.dashboard-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important;
  transform: translateY(-3px);
}

.dashboard-card-header {
  background-color: rgba(20, 20, 35, 0.7) !important;
  padding: 1.25rem 1.5rem !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dashboard-card-header-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.dashboard-card-title {
  color: white;
  font-weight: 600;
  font-size: 1.15rem;
}

.dashboard-card-title-icon {
  color: #6366F1;
}

.dashboard-card-content {
  padding: 1.5rem !important;
}

.dashboard-card-divider {
  background-color: rgba(255, 255, 255, 0.1);
  margin: 0.75rem 0 1.25rem 0;
}

/* Stats cards */
.stats-wrapper {
  margin-bottom: 2rem;
}

.stat-card {
  background: rgba(30, 30, 45, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 1.5rem;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.stat-card:hover {
  border-color: rgba(99, 102, 241, 0.3);
  transform: translateY(-2px);
}

.stat-card-highlighted {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(79, 70, 229, 0.1) 100%) !important;
  border: 1px solid rgba(99, 102, 241, 0.3) !important;
}

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(99, 102, 241, 0.2);
  margin-bottom: 1rem;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: white;
  margin-bottom: 0.5rem;
}

.stat-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

/* List items */
.dashboard-list-item {
  padding: 1rem !important;
  border-radius: 10px !important;
  margin-bottom: 0.75rem !important;
  transition: background-color 0.3s ease !important;
  text-decoration: none !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.dashboard-list-item:hover {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.1);
}

.dashboard-list-item-primary {
  border-left: 3px solid #6366F1 !important;
}

.dashboard-list-item-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.dashboard-list-icon {
  color: #6366F1 !important;
  margin-right: 1rem !important;
}

.dashboard-list-item-details {
  flex: 1 1;
}

.dashboard-list-item-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.dashboard-list-item-secondary {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
}

.dashboard-list-item-action {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Calendar styles */
.calendar-wrapper {
  width: 100%;
}

.calendar-day {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0.75rem;
  height: 100%;
  transition: all 0.3s ease;
}

.calendar-day:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.calendar-day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.calendar-day-number {
  font-weight: 600;
  font-size: 1.1rem;
}

.calendar-day-name {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
}

.calendar-event {
  padding: 0.5rem;
  border-radius: 6px;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
  background-color: rgba(99, 102, 241, 0.15);
  border-left: 3px solid #6366F1;
}

/* Action buttons */
.dashboard-action-button {
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
  text-transform: none;
}

.dashboard-action-primary {
  background: linear-gradient(90deg, #6366F1 0%, #8B5CF6 100%);
  color: white;
  border: none;
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3);
}

.dashboard-action-primary:hover {
  box-shadow: 0 6px 15px rgba(99, 102, 241, 0.4);
  transform: translateY(-2px);
}

.dashboard-action-secondary {
  background-color: rgba(255, 255, 255, 0.05);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.dashboard-action-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Empty states */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
}

.empty-state-icon {
  width: 48px;
  height: 48px;
  opacity: 0.5;
  margin-bottom: 1rem;
}

.empty-state-text {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 1.5rem;
}

/* Responsive styles */
@media (max-width: 1024px) {
  .artist-dashboard-container {
    padding: 1.25rem;
  }

  .dashboard-card-header {
    padding: 1rem 1.25rem !important;
  }

  .dashboard-card-content {
    padding: 1.25rem !important;
  }

  .stat-card {
    padding: 1.25rem;
  }
}

@media (max-width: 768px) {
  .artist-dashboard-container {
    padding: 1rem;
  }

  .dashboard-header {
    margin-bottom: 1.5rem;
  }

  .dashboard-title {
    font-size: 1.75rem;
  }

  .dashboard-card {
    border-radius: 12px !important;
    margin-bottom: 1rem;
  }

  .dashboard-card-header {
    padding: 0.875rem 1rem !important;
  }

  .dashboard-card-title {
    font-size: 1rem;
  }

  .dashboard-card-content {
    padding: 1rem !important;
  }

  .stat-card {
    padding: 1rem;
    border-radius: 10px;
  }

  .stat-icon {
    width: 36px;
    height: 36px;
    margin-bottom: 0.75rem;
  }

  .stat-value {
    font-size: 1.75rem;
  }

  .dashboard-list-item {
    padding: 0.875rem !important;
  }
}

@media (max-width: 600px) {
  .artist-dashboard-container {
    padding: 0.75rem 0.5rem;
  }

  .dashboard-title {
    font-size: 1.25rem;
  }

  .dashboard-subtitle {
    font-size: 0.9rem;
  }

  .stats-wrapper {
    margin-bottom: 1.5rem;
  }

  .stat-card {
    padding: 0.875rem;
  }

  .stat-icon {
    width: 32px;
    height: 32px;
  }

  .stat-value {
    font-size: 1.5rem;
  }

  .stat-label {
    font-size: 0.8rem;
  }

  .dashboard-list-item {
    padding: 0.75rem !important;
  }

  .dashboard-list-icon {
    margin-right: 0.75rem !important;
  }

  .dashboard-list-item-title {
    font-size: 0.9rem;
  }

  .dashboard-list-item-secondary {
    font-size: 0.8rem;
  }

  .dashboard-action-button {
    padding: 0.625rem 1rem;
    font-size: 0.9rem;
  }

  .empty-state {
    padding: 1.5rem 1rem;
  }

  .empty-state-icon {
    width: 40px;
    height: 40px;
  }

  .empty-state-text {
    font-size: 0.9rem;
  }
  
  /* Stack actions in mobile */
  .dashboard-actions {
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
  }
  
  .dashboard-actions button {
    width: 100%;
  }
}

/* Animation for AI Design Card */
@keyframes ai-card-pulse {
  0% {
    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    border-color: rgba(130, 94, 251, 0.3);
  }
  50% {
    box-shadow: 0 15px 35px rgba(99, 102, 241, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
    border-color: rgba(130, 94, 251, 0.5);
  }
  100% {
    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    border-color: rgba(130, 94, 251, 0.3);
  }
}

/* Enhanced glow effect for UI elements */
@keyframes glow {
  0% {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
  }
  100% {
    box-shadow: 0 12px 30px rgba(99, 102, 241, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.15);
  }
}

/* Typography animation */
@keyframes text-glow {
  0% {
    text-shadow: 0 0 5px rgba(16, 185, 129, 0.2);
  }
  50% {
    text-shadow: 0 0 15px rgba(16, 185, 129, 0.6);
  }
  100% {
    text-shadow: 0 0 5px rgba(16, 185, 129, 0.2);
  }
}

.ai-design-card-pulse {
  animation: ai-card-pulse 3s infinite;
}

.typography-card-heading {
  animation: text-glow 3s infinite;
}

.typography-studio-container {
  position: relative;
  overflow: hidden;
}

.typography-studio-container::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at bottom right, rgba(16, 185, 129, 0.3), transparent 70%);
  z-index: 0;
  opacity: 0.6;
  pointer-events: none;
}

/* Enhanced card effects */
.enhanced-card {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.enhanced-card:hover {
  transform: translateY(-8px) scale(1.01);
  z-index: 10;
}

@media (max-width: 480px) {
  .artist-dashboard-container {
    padding: 0.5rem 0.25rem;
  }

  .dashboard-title {
    font-size: 1.125rem;
  }

  .dashboard-subtitle {
    font-size: 0.85rem;
  }

  .stat-value {
    font-size: 1.25rem;
  }

  .dashboard-list-item {
    padding: 0.625rem !important;
  }

  .dashboard-list-icon {
    margin-right: 0.5rem !important;
  }

  .dashboard-list-item-title {
    font-size: 0.85rem;
  }

  .dashboard-list-item-secondary {
    font-size: 0.75rem;
  }

  .calendar-day {
    padding: 0.5rem;
  }

  .calendar-day-number {
    font-size: 0.9rem;
  }

  .calendar-day-name {
    font-size: 0.75rem;
  }

  .calendar-event {
    padding: 0.375rem;
    font-size: 0.75rem;
  }
}

/* Add enhanced AI Tools styling */
@keyframes ai-tools-pulse {
  0% { box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 0 0 rgba(139, 92, 246, 0.3); }
  70% { box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 0 15px rgba(139, 92, 246, 0); }
  100% { box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 0 0 rgba(139, 92, 246, 0); }
}

@keyframes ai-glow {
  0% { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(139, 92, 246, 0.2); }
  50% { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 15px 2px rgba(139, 92, 246, 0.4); }
  100% { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(139, 92, 246, 0.2); }
}

.ai-tools-container {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transition: all 0.4s ease;
}

.ai-tools-container:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.ai-tools-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), transparent 50%);
  z-index: 0;
  pointer-events: none;
}
/* Loading Spinner Styles */
.loading-spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 24px;
}

.loading-spinner-container.full-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height for mobile browsers */
  max-width: 100%;
  max-height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  z-index: 10000;
  margin: 0;
  padding: 0;
  overflow: hidden; /* Prevent scrolling */
  /* Lock body scroll when loading */
  overscroll-behavior: contain;
  /* Center content on all devices */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

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

.spinner-message {
  margin-top: 16px;
  text-align: center;
}

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

/* Additional animation for the full page spinner */
.full-page .spinner {
  animation: pulse 1.5s infinite alternate;
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.2);
    opacity: 1;
  }
}

/* Ensure full-page loaders work on all devices */
.loading-spinner-container.full-page,
[style*="position: fixed"][style*="z-index: 10000"] {
  /* Additional mobile viewport fixes */
  min-height: 100vh;
  min-height: 100dvh;
  width: 100vw;
  /* Prevent any potential scrolling issues */
  touch-action: none;
  -webkit-overflow-scrolling: touch;
  /* Ensure no content can escape */
  contain: layout style paint;
}

/* Global scroll lock when full-page loader is active */
body:has(.loading-spinner-container.full-page),
body:has([style*="position: fixed"][style*="z-index: 10000"]) {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
}

/* Fallback for browsers that don't support :has() */
.scroll-locked {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
}
/* StudioProfilePage.css - Glass-style collaborative workspace */

/* Base container styles */
.studio-container {
  padding: 1rem 0;
  position: relative;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

/* Loading states */
.studio-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

.studio-loading-container .MuiCircularProgress-root {
  color: #6366F1;
}

/* Project header styles */
.project-header-paper {
  background: linear-gradient(135deg, rgba(20, 20, 35, 0.7) 0%, rgba(30, 30, 50, 0.8) 100%) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(99, 102, 241, 0.3) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2) !important;
  padding: 1.5rem !important;
  margin-bottom: 2rem !important;
  position: relative;
  overflow: hidden;
}

.project-header-paper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at bottom right, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.project-header-paper::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(rgba(99, 102, 241, 0.05), transparent);
  transform: rotate(45deg);
  z-index: 0;
  pointer-events: none;
}

.project-header-content {
  position: relative;
  z-index: 1;
}

.project-title {
  font-weight: 700 !important;
  margin-bottom: 0.5rem !important;
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.project-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.project-type-chip {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.3)) !important;
  color: #a5a8ff !important;
  border: 1px solid rgba(99, 102, 241, 0.3) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.project-date {
  color: rgba(255, 255, 255, 0.7) !important;
}

.project-stepper {
  margin-top: 1rem;
}

.project-stepper .MuiStepLabel-label {
  color: rgba(255, 255, 255, 0.7) !important;
}

.project-stepper .MuiStepLabel-label.Mui-active {
  color: #a5a8ff !important;
}

.project-stepper .MuiStepLabel-label.Mui-completed {
  color: rgba(255, 255, 255, 0.9) !important;
}

.project-stepper .MuiStepIcon-root {
  color: rgba(30, 30, 45, 0.9) !important;
}

.project-stepper .MuiStepIcon-root.Mui-completed {
  color: rgba(99, 102, 241, 0.6) !important;
}

.project-stepper .MuiStepIcon-root.Mui-active {
  color: #6366F1 !important;
}

.project-participants {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  background: rgba(20, 20, 35, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 1rem;
  border: 1px solid rgba(99, 102, 241, 0.2);
  position: relative;
  z-index: 1;
}

.participant-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.participant-avatar {
  width: 50px !important;
  height: 50px !important;
  border: 2px solid rgba(99, 102, 241, 0.4) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}

.participant-label {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 0.75rem !important;
}

.participant-name {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 600 !important;
}

.participant-divider {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Project content styles */
.project-content-paper {
  background: linear-gradient(135deg, rgba(20, 20, 35, 0.6) 0%, rgba(30, 30, 50, 0.7) 100%) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(99, 102, 241, 0.25) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
  position: relative;
  overflow: hidden;
}

.project-tabs {
  background-color: rgba(20, 20, 35, 0.8) !important;
  border-bottom: 1px solid rgba(99, 102, 241, 0.2) !important;
  padding: 0 1rem !important;
}

.project-tabs .MuiTab-root {
  color: rgba(255, 255, 255, 0.7) !important;
  text-transform: none !important;
  font-weight: 600 !important;
  min-height: 64px !important;
}

.project-tabs .MuiTab-root.Mui-selected {
  color: rgba(255, 255, 255, 0.95) !important;
}

.project-tabs .MuiTabs-indicator {
  background-color: #6366F1 !important;
}

.tab-divider {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.tab-content {
  padding: 1.5rem;
}

/* Design Studio Tab */
.design-main-container {
  margin-bottom: 2rem;
  background: linear-gradient(135deg, rgba(25, 25, 40, 0.5) 0%, rgba(35, 35, 60, 0.6) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 16px;
  border: 1px solid rgba(99, 102, 241, 0.2);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}

.design-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.section-title {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.design-actions {
  display: flex;
  gap: 0.5rem;
}

.action-button {
  color: rgba(255, 255, 255, 0.8) !important;
  background-color: rgba(30, 30, 45, 0.6) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(99, 102, 241, 0.2) !important;
  transition: all 0.3s ease !important;
}

.action-button:hover {
  background-color: rgba(99, 102, 241, 0.15) !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

.current-design-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.design-image-container {
  width: 100%;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background-color: rgba(20, 20, 35, 0.8);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(99, 102, 241, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
}

.design-image {
  width: 100%;
  max-height: 500px;
  object-fit: contain;
}

.annotation-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 5;
  cursor: pointer;
}

.annotation-tooltip {
  position: absolute;
  top: 20px;
  left: 0;
  background: rgba(20, 20, 35, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0.5rem;
  border-radius: 8px;
  border: 1px solid rgba(99, 102, 241, 0.3);
  width: 150px;
  display: none;
  z-index: 10;
}

.annotation-marker:hover .annotation-tooltip {
  display: block;
}

.empty-design {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background-color: rgba(20, 20, 35, 0.5);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  padding: 2rem;
}

.design-feedback {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.feedback-input .MuiOutlinedInput-root {
  background-color: rgba(20, 20, 35, 0.7) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(99, 102, 241, 0.25) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.send-feedback-button {
  background: linear-gradient(135deg, #6366F1, #8B5CF6) !important;
  color: white !important;
  border-radius: 8px !important;
  padding: 0.6rem 1.5rem !important;
  text-transform: none !important;
  font-weight: 500 !important;
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3) !important;
  transition: all 0.3s ease !important;
  height: 50px !important;
}

.send-feedback-button:hover {
  box-shadow: 0 6px 15px rgba(99, 102, 241, 0.4) !important;
  transform: translateY(-2px) !important;
}

/* Compare Mode */
.compare-container {
  width: 100%;
}

.compare-label {
  color: rgba(255, 255, 255, 0.7) !important;
  margin-bottom: 0.75rem !important;
}

.compare-image-container {
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(20, 20, 35, 0.8);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(99, 102, 241, 0.2);
  cursor: pointer;
}

.compare-image-container.empty {
  background-color: rgba(20, 20, 35, 0.5);
  border-style: dashed;
}

.compare-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.empty-compare {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.5);
}

.compare-caption {
  display: block;
  margin-top: 0.5rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
}

.compare-controls {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.reset-compare-button, .exit-compare-button {
  background-color: rgba(30, 30, 45, 0.6) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* AI Generator Section */
.ai-generator-container {
  background: linear-gradient(135deg, rgba(25, 25, 40, 0.5) 0%, rgba(35, 35, 60, 0.6) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 16px;
  border: 1px solid rgba(99, 102, 241, 0.2);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.section-divider {
  background-color: rgba(255, 255, 255, 0.1) !important;
  margin-bottom: 1.5rem !important;
}

.ai-settings {
  padding-right: 1.5rem;
}

.settings-header {
  color: rgba(255, 255, 255, 0.8) !important;
  margin-top: 1rem !important;
  margin-bottom: 0.5rem !important;
  font-weight: 600 !important;
}

.ai-reference-selector {
  margin-bottom: 1.5rem;
}

.selected-reference-card {
  background-color: rgba(20, 20, 35, 0.7) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(99, 102, 241, 0.3) !important;
  overflow: hidden !important;
}

.selected-reference-image {
  object-fit: cover !important;
}

.selected-reference-content {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0.5rem 1rem !important;
  background-color: rgba(20, 20, 35, 0.9) !important;
}

.reference-label {
  color: rgba(255, 255, 255, 0.8) !important;
}

.remove-reference-button {
  color: rgba(255, 255, 255, 0.7) !important;
}

.no-reference-selected {
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(20, 20, 35, 0.5);
  border-radius: 12px;
  border: 1px dashed rgba(99, 102, 241, 0.2);
  text-align: center;
  padding: 1rem;
}

.style-selector {
  margin-bottom: 1.5rem;
}

.style-toggle-group {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
}

.style-toggle-button {
  background-color: rgba(20, 20, 35, 0.7) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  text-transform: none !important;
  border: 1px solid rgba(99, 102, 241, 0.2) !important;
  border-radius: 8px !important;
  font-size: 0.75rem !important;
  transition: all 0.3s ease !important;
}

.style-toggle-button.Mui-selected {
  background-color: rgba(99, 102, 241, 0.2) !important;
  color: #a5a8ff !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
}

.more-styles-button {
  color: rgba(255, 255, 255, 0.7) !important;
  text-transform: none !important;
  font-size: 0.75rem !important;
}

.parameter-sliders {
  margin-bottom: 1.5rem;
}

.parameter-slider {
  margin-bottom: 1rem;
}

.parameter-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
}

.parameter-slider-input {
  color: #6366F1 !important;
}

.parameter-slider-input .MuiSlider-rail {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

.parameter-slider-input .MuiSlider-track {
  background-color: #6366F1 !important;
}

.parameter-slider-input .MuiSlider-thumb {
  background-color: #8B5CF6 !important;
  border: 2px solid #6366F1 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

.generate-button {
  background: linear-gradient(135deg, #6366F1, #8B5CF6) !important;
  color: white !important;
  border-radius: 12px !important;
  padding: 0.75rem !important;
  text-transform: none !important;
  font-weight: 500 !important;
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3) !important;
  transition: all 0.3s ease !important;
}

.generate-button:hover {
  box-shadow: 0 6px 15px rgba(99, 102, 241, 0.4) !important;
  transform: translateY(-2px) !important;
  background: linear-gradient(135deg, #5254cc, #7349d1) !important;
}

.generate-button:disabled {
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: none !important;
}

.results-header {
  color: rgba(255, 255, 255, 0.8) !important;
  margin-bottom: 1rem !important;
}

.generating-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: rgba(255, 255, 255, 0.7);
}

.generating-indicator .MuiCircularProgress-root {
  color: #6366F1 !important;
}

.ai-results-grid {
  width: 100%;
}

.ai-result-card {
  background: linear-gradient(135deg, rgba(20, 20, 35, 0.6) 0%, rgba(30, 30, 50, 0.7) 100%) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(99, 102, 241, 0.2) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.3s ease !important;
  position: relative;
  overflow: hidden;
  height: 100%;
}

.ai-result-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25) !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
}

.ai-result-image {
  width: 100% !important;
  object-fit: cover !important;
  background-color: rgba(20, 20, 35, 0.9) !important;
}

.ai-result-actions {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: linear-gradient(45deg, transparent, rgba(20, 20, 35, 0.7) 50%);
  border-bottom-left-radius: 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ai-result-card:hover .ai-result-actions {
  opacity: 1;
}

.ai-action-button {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  background-color: rgba(20, 20, 35, 0.6) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  width: 36px !important;
  height: 36px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.ai-result-content {
  padding: 0.75rem !important;
  background-color: rgba(20, 20, 35, 0.9) !important;
}

.ai-result-info {
  display: block !important;
  margin-bottom: 0.75rem !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

.use-as-version-button {
  background-color: rgba(99, 102, 241, 0.1) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
  text-transform: none !important;
  font-weight: 500 !important;
  font-size: 0.8125rem !important;
  transition: all 0.3s ease !important;
}

.use-as-version-button:hover {
  background-color: rgba(99, 102, 241, 0.2) !important;
  border-color: rgba(99, 102, 241, 0.5) !important;
}

.empty-results {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  background-color: rgba(20, 20, 35, 0.5);
  border-radius: 12px;
  border: 1px dashed rgba(99, 102, 241, 0.2);
  padding: 2rem;
  text-align: center;
}

/* Versions Container */
.versions-container {
  background: linear-gradient(135deg, rgba(25, 25, 40, 0.5) 0%, rgba(35, 35, 60, 0.6) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 16px;
  border: 1px solid rgba(99, 102, 241, 0.2);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  height: 100%;
}

.add-version-button {
  background-color: rgba(20, 20, 35, 0.6) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  text-transform: none !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
}

.add-version-button:hover {
  background-color: rgba(99, 102, 241, 0.1) !important;
  border-color: rgba(99, 102, 241, 0.5) !important;
}

.versions-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-height: 800px;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.versions-list::-webkit-scrollbar {
  width: 6px;
}

.versions-list::-webkit-scrollbar-track {
  background: rgba(20, 20, 35, 0.3);
  border-radius: 10px;
}

.versions-list::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.3);
  border-radius: 10px;
}

.version-card {
  background: linear-gradient(135deg, rgba(20, 20, 35, 0.6) 0%, rgba(30, 30, 50, 0.7) 100%) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(99, 102, 241, 0.2) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.3s ease !important;
  overflow: hidden;
}

.version-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25) !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
}

.version-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background-color: rgba(20, 20, 35, 0.9);
}

.version-title {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 600 !important;
}

.version-status-chip {
  font-size: 0.75rem !important;
  height: 24px !important;
}

.version-image {
  width: 100% !important;
  background-color: rgba(20, 20, 35, 0.9) !important;
  cursor: pointer !important;
}

.version-content {
  padding: 0.75rem 1rem !important;
  background-color: rgba(20, 20, 35, 0.8) !important;
}

.version-notes {
  color: rgba(255, 255, 255, 0.9) !important;
  margin-bottom: 0.5rem !important;
}

.version-meta {
  display: block !important;
  margin-bottom: 0.75rem !important;
  font-size: 0.75rem !important;
}

.version-feedback {
  background-color: rgba(99, 102, 241, 0.1);
  border-left: 3px solid #6366F1;
  padding: 0.5rem;
  margin-top: 0.5rem;
  border-radius: 4px;
}

.version-actions {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  background-color: rgba(20, 20, 35, 0.9);
}

.version-action-button {
  background-color: rgba(30, 30, 45, 0.6) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  text-transform: none !important;
  font-size: 0.75rem !important;
  transition: all 0.3s ease !important;
  border-radius: 8px !important;
}

.version-action-button:hover {
  background-color: rgba(99, 102, 241, 0.1) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

/* References Tab */
.references-tab {
  padding: 0.5rem;
}

.upload-button {
  background: linear-gradient(135deg, #6366F1, #8B5CF6) !important;
  color: white !important;
  border-radius: 8px !important;
  padding: 0.5rem 1.5rem !important;
  text-transform: none !important;
  font-weight: 500 !important;
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3) !important;
  transition: all 0.3s ease !important;
}

.upload-button:hover {
  box-shadow: 0 6px 15px rgba(99, 102, 241, 0.4) !important;
  transform: translateY(-2px) !important;
}

.references-grid {
  padding-top: 1rem;
}

.reference-card {
  background: linear-gradient(135deg, rgba(20, 20, 35, 0.6) 0%, rgba(30, 30, 50, 0.7) 100%) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(99, 102, 241, 0.2) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.3s ease !important;
  position: relative;
  overflow: hidden;
  height: 100%;
}

.reference-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25) !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
}

.reference-image {
  width: 100% !important;
  object-fit: cover !important;
  background-color: rgba(20, 20, 35, 0.9) !important;
  cursor: pointer !important;
  transition: transform 0.3s ease !important;
}

.reference-card:hover .reference-image {
  transform: scale(1.02) !important;
}

.reference-actions {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.5rem;
  display: flex;
  gap: 0.5rem;
  background: linear-gradient(45deg, transparent, rgba(20, 20, 35, 0.7) 50%);
  border-bottom-left-radius: 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.reference-card:hover .reference-actions {
  opacity: 1;
}

.reference-action-button {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  background-color: rgba(20, 20, 35, 0.6) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  width: 36px !important;
  height: 36px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.reference-content {
  padding: 0.75rem 1rem !important;
  background-color: rgba(20, 20, 35, 0.8) !important;
}

.reference-notes .MuiOutlinedInput-root {
  background-color: rgba(20, 20, 35, 0.7) !important;
  border-radius: 8px !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  border: 1px solid rgba(99, 102, 241, 0.2) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 0.875rem !important;
}

.reference-meta {
  display: block !important;
  margin-top: 0.75rem !important;
  font-size: 0.75rem !important;
}

/* Messages Tab */
.messages-tab {
  height: 600px;
  display: flex;
  flex-direction: column;
}

.messages-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.messages-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.message-item {
  display: flex;
  gap: 1rem;
  max-width: 80%;
}

.client-message {
  align-self: flex-end;
  flex-direction: row-reverse;
}

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

.message-avatar {
  width: 40px !important;
  height: 40px !important;
  border: 2px solid rgba(99, 102, 241, 0.4) !important;
}

.message-content {
  background: rgba(20, 20, 35, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 1rem;
  position: relative;
}

.client-message .message-content {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.3) 100%);
  border: 1px solid rgba(99, 102, 241, 0.3);
}

.artist-message .message-content {
  background: rgba(30, 30, 45, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.message-sender {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 600 !important;
}

.message-time {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 0.75rem !important;
}

.message-text {
  color: rgba(255, 255, 255, 0.9) !important;
}

.message-input-container {
  padding: 1rem;
  background: rgba(20, 20, 35, 0.6);
  border-top: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 0 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.message-input .MuiOutlinedInput-root {
  background-color: rgba(30, 30, 45, 0.8) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(99, 102, 241, 0.2) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.send-message-button {
  background: linear-gradient(135deg, #6366F1, #8B5CF6) !important;
  color: white !important;
  border-radius: 8px !important;
  padding: 0.75rem 2rem !important;
  text-transform: none !important;
  font-weight: 500 !important;
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3) !important;
  transition: all 0.3s ease !important;
  align-self: flex-end;
}

.send-message-button:hover {
  box-shadow: 0 6px 15px rgba(99, 102, 241, 0.4) !important;
  transform: translateY(-2px) !important;
}

/* Timeline Tab */
.timeline-tab {
  padding: 0.5rem;
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.filter-button {
  background-color: rgba(30, 30, 45, 0.6) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  text-transform: none !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
}

.timeline-container {
  position: relative;
  padding-left: 2rem;
  border-left: 2px solid rgba(99, 102, 241, 0.3);
  margin-left: 1rem;
}

.timeline-event {
  position: relative;
  padding-bottom: 2rem;
}

.timeline-marker {
  position: absolute;
  left: -2.5rem;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.3));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6366F1;
  border: 2px solid rgba(99, 102, 241, 0.4);
  z-index: 2;
}

.start-marker {
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  color: white;
}

.timeline-content {
  background: linear-gradient(135deg, rgba(20, 20, 35, 0.6) 0%, rgba(30, 30, 50, 0.7) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 12px;
  border: 1px solid rgba(99, 102, 241, 0.2);
  padding: 1rem;
  margin-left: 1rem;
}

.event-title {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 600 !important;
  margin-bottom: 0.75rem !important;
}

.event-image-container {
  max-width: 200px;
  margin-bottom: 0.75rem;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(99, 102, 241, 0.2);
}

.event-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.event-description {
  color: rgba(255, 255, 255, 0.8) !important;
  margin-bottom: 0.5rem !important;
}

.event-feedback {
  background-color: rgba(99, 102, 241, 0.1);
  border-left: 3px solid #6366F1;
  padding: 0.5rem;
  margin: 0.5rem 0;
  border-radius: 4px;
}

.event-time {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Details Tab */
.details-tab {
  padding: 0.5rem;
}

.detail-section {
  background: linear-gradient(135deg, rgba(20, 20, 35, 0.6) 0%, rgba(30, 30, 50, 0.7) 100%) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(99, 102, 241, 0.25) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
  margin-bottom: 1.5rem !important;
  overflow: hidden;
}

.detail-content {
  padding: 1.5rem !important;
}

.detail-label {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin-bottom: 0.25rem !important;
}

.detail-text {
  color: rgba(255, 255, 255, 0.9) !important;
  margin-bottom: 1rem !important;
}

.appointment-item {
  background: rgba(20, 20, 35, 0.5);
  border-radius: 12px;
  border: 1px solid rgba(99, 102, 241, 0.2);
  padding: 1rem;
  margin-bottom: 1rem;
}

.appointment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.appointment-title {
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.appointment-status {
  font-size: 0.75rem !important;
  height: 24px !important;
}

.appointment-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.appointment-date, .appointment-duration {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.appointment-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.reschedule-button {
  background-color: rgba(30, 30, 45, 0.6) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
  text-transform: none !important;
  font-size: 0.75rem !important;
}

.schedule-button {
  background: linear-gradient(135deg, #6366F1, #8B5CF6) !important;
  color: white !important;
  border-radius: 8px !important;
  padding: 0.75rem !important;
  text-transform: none !important;
  font-weight: 500 !important;
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3) !important;
  transition: all 0.3s ease !important;
}

.stage-stepper {
  margin-bottom: 2rem;
}

.stage-actions {
  display: flex;
  justify-content: center;
}

.advance-stage-button {
  background: linear-gradient(135deg, #6366F1, #8B5CF6) !important;
  color: white !important;
  border-radius: 8px !important;
  padding: 0.75rem 2rem !important;
  text-transform: none !important;
  font-weight: 500 !important;
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3) !important;
  transition: all 0.3s ease !important;
}

/* Dialogs */
.detail-dialog .MuiPaper-root {
  background: linear-gradient(135deg, rgba(20, 20, 35, 0.8) 0%, rgba(30, 30, 50, 0.9) 100%) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(99, 102, 241, 0.3) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
  overflow: hidden;
}

.detail-dialog-title {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background-color: rgba(20, 20, 35, 0.9) !important;
  padding: 1rem 1.5rem !important;
}

.close-dialog-button {
  color: rgba(255, 255, 255, 0.7) !important;
}

.detail-dialog-content {
  padding: 1.5rem !important;
}

.detail-image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.detail-image {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.detail-notes, .detail-feedback {
  background-color: rgba(20, 20, 35, 0.7);
  border-radius: 8px;
  padding: 1rem;
  width: 100%;
  border: 1px solid rgba(99, 102, 241, 0.2);
}

.detail-meta {
  width: 100%;
  text-align: right;
}

.detail-dialog-actions {
  background-color: rgba(20, 20, 35, 0.9) !important;
  padding: 1rem 1.5rem !important;
}

.upload-dialog .MuiPaper-root {
  background: linear-gradient(135deg, rgba(20, 20, 35, 0.8) 0%, rgba(30, 30, 50, 0.9) 100%) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(99, 102, 241, 0.3) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
  overflow: hidden;
}

.upload-dialog-title {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background-color: rgba(20, 20, 35, 0.9) !important;
  padding: 1rem 1.5rem !important;
}

.upload-dialog-content {
  padding: 1.5rem !important;
}

.upload-area {
  background: rgba(20, 20, 35, 0.5);
  border: 2px dashed rgba(99, 102, 241, 0.3);
  border-radius: 12px;
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.upload-area:hover {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.5);
}

.upload-icon {
  color: #6366F1 !important;
  margin-bottom: 1rem !important;
}

/* Responsive adjustments */
@media (max-width: 960px) {
  .participant-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .project-participants {
    flex-direction: column;
    gap: 1rem;
  }
  
  .participant-divider {
    display: none !important;
  }
  
  .project-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .project-tabs {
    padding: 0 !important;
  }
  
  .project-tabs .MuiTab-root {
    min-height: 56px !important;
    padding: 0.5rem !important;
    font-size: 0.85rem !important;
    min-width: 60px !important; /* Reduce min-width of tabs */
  }
  
  .ai-settings {
    padding-right: 0;
    margin-bottom: 1.5rem;
  }
  
  .design-feedback {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .design-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  
  .timeline-marker {
    width: 32px;
    height: 32px;
    left: -2rem;
  }
  
  .timeline-container {
    margin-left: 0;
  }
  
  /* Fix container width issues */
  .studio-container {
    width: 100%;
    max-width: 100%;
    padding: 0.5rem;
  }
  
  /* Make grids stack better on medium screens */
  .MuiGrid-item {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
  }
}

@media (max-width: 768px) {
  .studio-container {
    padding: 0.5rem;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  
  .project-header-paper, .project-content-paper {
    padding: 0.75rem !important;
    border-radius: 12px !important;
    margin-bottom: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  .tab-content {
    padding: 0.75rem;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  
  .design-main-container, .ai-generator-container, .versions-container {
    padding: 0.75rem;
    margin-bottom: 1rem;
    border-radius: 12px;
    width: 100%;
    max-width: 100%;
  }
  
  .project-stepper {
    margin-top: 0.75rem;
    width: 100%;
    overflow-x: auto;
  }
  
  .project-title {
    font-size: 1.5rem !important;
    word-break: break-word;
  }
  
  .message-item {
    max-width: 90%;
  }
  
  .section-title {
    font-size: 1.1rem !important;
  }
  
  .participant-avatar {
    width: 40px !important;
    height: 40px !important;
  }
  
  .parameter-sliders {
    margin-bottom: 1rem;
  }
  
  .parameter-slider {
    margin-bottom: 0.75rem;
  }
  
  .style-toggle-group {
    gap: 0.4rem !important;
    flex-wrap: wrap !important;
  }
  
  .ai-result-card, .version-card, .reference-card {
    border-radius: 10px !important;
  }
  
  .ai-result-image, .version-image, .reference-image {
    height: 130px !important;
  }
  
  .ai-result-content, .version-content, .reference-content {
    padding: 0.5rem 0.75rem !important;
  }
  
  .version-actions {
    padding: 0.5rem 0.75rem;
  }
  
  .compare-controls {
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
  }
  
  .reset-compare-button, .exit-compare-button {
    width: 100%;
  }
  
  .message-input-container {
    padding: 0.75rem;
  }
  
  .send-message-button {
    padding: 0.5rem 1.5rem !important;
  }
  
  .timeline-container {
    padding-left: 1.5rem;
  }
  
  .timeline-event {
    padding-bottom: 1.5rem;
  }
  
  .timeline-content {
    padding: 0.75rem;
    margin-left: 0.75rem;
  }
  
  .event-image-container {
    max-width: 150px;
  }
  
  .detail-content {
    padding: 1rem !important;
  }
  
  .detail-section {
    border-radius: 12px !important;
    margin-bottom: 1rem !important;
  }
  
  .appointment-item {
    padding: 0.75rem;
    margin-bottom: 0.75rem;
  }
  
  .upload-area {
    padding: 1.5rem 1rem;
  }
  
  /* Ensure Grid layout stacks properly */
  .MuiGrid-container {
    width: 100% !important;
    margin: 0 !important;
  }
  
  .MuiGrid-item {
    padding: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
  }
  
  /* Fix tab container */
  .project-tabs {
    max-width: 100%;
    overflow-x: auto;
  }
  
  /* Ensure all elements stay within the viewport */
  .project-content-paper {
    overflow: hidden !important;
  }
}

@media (max-width: 600px) {
  .studio-container {
    padding: 0.5rem;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }
  
  .project-header-paper, .project-content-paper {
    padding: 0.75rem !important;
    border-radius: 10px !important;
    margin-bottom: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .tab-content {
    padding: 0.75rem;
    width: 100%;
    max-width: 100%;
  }
  
  .design-main-container, .ai-generator-container, .versions-container {
    padding: 0.75rem;
    margin-bottom: 1rem;
    border-radius: 10px;
    width: 100%;
  }
  
  .project-stepper {
    display: none !important;
  }
  
  .project-title {
    font-size: 1.25rem !important;
    width: 100%;
    word-break: break-word;
  }
  
  .project-tabs .MuiTab-root {
    min-width: 50px !important; /* Reduced further for small screens */
    min-height: 50px !important;
    padding: 0.5rem 0.25rem !important;
    font-size: 0.75rem !important;
  }
  
  .message-item {
    max-width: 100%;
  }
  
  .section-title, .results-header, .summary-heading {
    font-size: 1rem !important;
  }
  
  .section-divider {
    margin-bottom: 1rem !important;
  }
  
  .design-actions, .thread-actions {
    gap: 0.25rem;
  }
  
  .action-button, .ai-action-button, .reference-action-button {
    width: 32px !important;
    height: 32px !important;
  }
  
  .generate-button {
    font-size: 0.85rem !important;
  }
  
  .ai-result-image, .version-image, .reference-image {
    height: 110px !important;
  }
  
  .style-toggle-button {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.7rem !important;
  }
  
  .version-action-button {
    font-size: 0.7rem !important;
    padding: 0.25rem 0.5rem !important;
  }
  
  .message-avatar {
    width: 32px !important;
    height: 32px !important;
  }
  
  .message-content {
    padding: 0.75rem;
  }
  
  .message-sender {
    font-size: 0.9rem !important;
  }
  
  .message-text {
    font-size: 0.85rem !important;
  }
  
  .send-message-button {
    padding: 0.4rem 1rem !important;
    font-size: 0.85rem !important;
  }
  
  .participant-avatar {
    width: 36px !important;
    height: 36px !important;
  }
  
  .event-title {
    font-size: 0.95rem !important;
  }
  
  .upload-icon {
    font-size: 2rem !important;
  }
  
  .ai-result-info {
    font-size: 0.7rem !important;
  }
  
  .timeline-marker {
    width: 28px;
    height: 28px;
    left: -1.75rem;
  }
  
  .detail-dialog-content, .upload-dialog-content {
    padding: 1rem !important;
  }
  
  .detail-dialog-title, .upload-dialog-title, .detail-dialog-actions {
    padding: 0.75rem 1rem !important;
  }
  
  /* Force all grid items to stack on mobile */
  .MuiGrid-container {
    flex-direction: column !important;
  }
  
  .MuiGrid-item {
    padding: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
  }
  
  /* Fix tab overflow issues */
  .project-tabs {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Make design feedback component more compact */
  .design-feedback {
    margin-top: 0.5rem;
  }
  
  .feedback-input {
    margin-bottom: 0.5rem;
  }
  
  /* Ensure dialogs fit on screen */
  .detail-dialog .MuiPaper-root,
  .upload-dialog .MuiPaper-root {
    width: 95% !important;
    margin: 0 auto !important;
  }
  
  /* Fix scrolling issues */
  .versions-list {
    max-height: 400px;
  }
  
  /* Ensure images don't overflow */
  .design-image {
    max-width: 100%;
    max-height: 300px;
  }
}
/* ArtistProfilePage.css - Responsive mobile-friendly styles */

.profile-container {
  max-width: 100%;
  width: 100%;
  padding: 1.5rem 1rem;
  overflow-x: hidden;
}

.profile-header {
  background: rgba(30, 30, 45, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
  border: 1px solid rgba(99, 102, 241, 0.2);
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.profile-content {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 2rem;
  gap: 2rem;
  width: 100%;
}

.profile-sidebar {
  width: 100%;
}

.profile-main {
  width: 100%;
}

.profile-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid rgba(99, 102, 241, 0.3);
  background-color: rgba(30, 30, 45, 0.8);
}

.profile-info {
  margin-bottom: 1.5rem;
}

.profile-name {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.profile-specialty {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1rem;
}

.profile-card {
  background: rgba(30, 30, 45, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.card-divider {
  background-color: rgba(255, 255, 255, 0.1);
  margin: 1rem 0;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  width: 100%;
}

.portfolio-item {
  height: 250px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.portfolio-item:hover {
  transform: translateY(-5px);
}

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

.availability-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 0.5rem;
  gap: 0.5rem;
  width: 100%;
  margin-bottom: 1rem;
}

.day-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
  background-color: rgba(20, 20, 35, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.day-available {
  background-color: rgba(99, 102, 241, 0.2);
  border-color: rgba(99, 102, 241, 0.4);
  color: white;
}

.contact-button, .book-button {
  width: 100%;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
  text-transform: none;
  font-size: 1rem;
}

.book-button {
  background: linear-gradient(90deg, #6366F1 0%, #8B5CF6 100%);
  color: white;
  border: none;
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3);
}

.book-button:hover {
  box-shadow: 0 6px 15px rgba(99, 102, 241, 0.4);
  transform: translateY(-2px);
}

.contact-button {
  background-color: transparent;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  margin-top: 0.75rem;
}

.contact-button:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.5);
}

.rating-stars {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.star {
  color: #6366F1;
}

.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.review-item {
  padding: 1rem;
  background-color: rgba(20, 20, 35, 0.7);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.review-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.review-author {
  font-weight: 600;
}

.review-date {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

.social-links {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.social-link {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(20, 20, 35, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
}

.social-link:hover {
  background-color: rgba(99, 102, 241, 0.2);
  border-color: rgba(99, 102, 241, 0.4);
  color: white;
  transform: translateY(-2px);
}

/* Form Editing Styles */
.edit-input {
  width: 100%;
  background-color: rgba(30, 30, 45, 0.8);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 6px;
  padding: 10px 12px;
  color: white;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.edit-input:focus {
  outline: none;
  border-color: rgba(139, 92, 246, 0.6);
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

.edit-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.edit-textarea {
  width: 100%;
  background-color: rgba(30, 30, 45, 0.8);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 6px;
  padding: 10px 12px;
  color: white;
  font-size: 0.9rem;
  min-height: 100px;
  resize: vertical;
  font-family: inherit;
  transition: all 0.3s ease;
}

.edit-textarea:focus {
  outline: none;
  border-color: rgba(139, 92, 246, 0.6);
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

.edit-textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.edit-actions {
  margin-top: 1.5rem;
}

/* Tablet and mobile styles */
@media (max-width: 1024px) {
  .profile-content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .profile-main {
    order: 2;
  }

  .profile-sidebar {
    order: 1;
  }
}

@media (max-width: 768px) {
  .profile-container {
    padding: 1rem 0.75rem;
  }

  .profile-header {
    padding: 1.5rem;
    border-radius: 12px;
  }

  .profile-avatar {
    width: 100px;
    height: 100px;
  }

  .profile-name {
    font-size: 1.75rem;
  }

  .profile-specialty {
    font-size: 1rem;
  }

  .profile-card {
    padding: 1.25rem;
    border-radius: 10px;
  }

  .card-title {
    font-size: 1.1rem;
  }

  .portfolio-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .portfolio-item {
    height: 150px;
  }

  .availability-days {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem 1rem;
  }

  .day-circle {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .profile-container {
    padding: 0.75rem 0.5rem;
  }

  .profile-header {
    padding: 1.25rem;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .profile-avatar {
    width: 80px;
    height: 80px;
  }

  .profile-name {
    font-size: 1.5rem;
  }

  .profile-info {
    margin-bottom: 1rem;
  }

  .profile-card {
    padding: 1rem;
    margin-bottom: 1rem;
  }

  .portfolio-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

  .portfolio-item {
    height: 120px;
  }

  .availability-days {
    grid-template-columns: repeat(7, 1fr);
    gap: 0.25rem;
  }

  .day-circle {
    width: 28px;
    height: 28px;
    font-size: 0.7rem;
  }

  .contact-button, .book-button {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }

  .review-item {
    padding: 0.75rem;
  }

  .social-links {
    justify-content: center;
  }
}
.AvatarUpload_container__\+-19X {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
}

.AvatarUpload_image__ULScn {
  transition: filter 0.2s ease-in-out;
}

.AvatarUpload_actions__tyNhI {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 4px 0;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.AvatarUpload_container__\+-19X:hover .AvatarUpload_actions__tyNhI {
  opacity: 1;
}

.AvatarUpload_container__\+-19X:hover .AvatarUpload_image__ULScn {
  filter: brightness(0.8);
}

.AvatarUpload_uploadButton__VsktM {
  color: white !important;
}

.AvatarUpload_deleteButton__qkHAm {
  color: #f87171 !important;
}

/* Fallback avatar styling */
.AvatarUpload_fallbackAvatar__GnMj9 {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  color: white;
  font-weight: bold;
  font-size: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.AvatarUpload_fallbackAvatarSmall__oXmXS {
  font-size: 1.5rem;
}

.AvatarUpload_fallbackAvatarLarge__ATm9P {
  font-size: 3rem;
}

/* Avatar loading state */
.AvatarUpload_loading__n\+Ote {
  background: linear-gradient(90deg, 
    rgba(139, 92, 246, 0.2) 0%, 
    rgba(99, 102, 241, 0.2) 50%, 
    rgba(139, 92, 246, 0.2) 100%);
  background-size: 200% 100%;
  animation: AvatarUpload_loadingPulse__1-DLS 1.5s infinite;
}

@keyframes AvatarUpload_loadingPulse__1-DLS {
  0% { background-position: 0% 0; }
  100% { background-position: -200% 0; }
}

/* Avatar error state */
.AvatarUpload_error__OnKpL {
  border: 2px solid rgba(239, 68, 68, 0.5);
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .AvatarUpload_actions__tyNhI {
    opacity: 1;
    background: rgba(0, 0, 0, 0.6);
  }
}
/* PortfolioPage.css - Responsive styling for the artist portfolio page */

.portfolio-container {
  max-width: 100%;
  width: 100%;
  padding: 1.5rem 1rem;
  overflow-x: hidden;
  min-height: 90vh;
}

.portfolio-header {
  background: rgba(30, 30, 45, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 2rem;
  border: 1px solid rgba(99, 102, 241, 0.2);
  width: 100%;
}

.portfolio-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  background: linear-gradient(90deg, #fff, #a4a6f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.back-button {
  color: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  text-transform: none;
  font-weight: 500;
}

.back-button:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: white;
}

.upload-button {
  background: linear-gradient(90deg, #6366F1 0%, #8B5CF6 100%);
  color: white;
  border: none;
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3);
  border-radius: 8px;
  padding: 0.5rem 1.25rem;
  text-transform: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.upload-button:hover {
  box-shadow: 0 6px 15px rgba(99, 102, 241, 0.4);
  transform: translateY(-2px);
  background: linear-gradient(90deg, #5254CC 0%, #7C4DE0 100%);
}

.portfolio-card {
  background: rgba(30, 30, 45, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.portfolio-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  border-color: rgba(99, 102, 241, 0.3);
}

.portfolio-item-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: white;
  margin-bottom: 0.5rem;
}

.portfolio-item-description {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 0.75rem;
}

.portfolio-item-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 4px;
  padding: 2px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.portfolio-card:hover .portfolio-item-actions {
  opacity: 1;
}

.portfolio-item-actions .MuiIconButton-root {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  padding: 4px;
}

.portfolio-item-actions .MuiIconButton-root:hover {
  color: white;
  background-color: rgba(255, 255, 255, 0.1);
}

.portfolio-tag {
  background-color: rgba(30, 30, 45, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  font-size: 0.75rem;
  height: 24px;
}

.style-tag {
  background-color: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.3);
  color: #a4a6f7;
}

.location-tag {
  background-color: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
  color: #34d399;
}

.year-tag {
  background-color: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
  color: #93c5fd;
}

.empty-portfolio {
  text-align: center;
  padding: 4rem 1rem;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(30, 30, 45, 0.4);
  border-radius: 16px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
}

/* Responsive styles */
@media (max-width: 768px) {
  .portfolio-header {
    padding: 1.5rem;
    margin-bottom: 1rem;
  }
  
  .portfolio-title {
    font-size: 1.5rem;
  }
  
  .portfolio-item-title {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .portfolio-container {
    padding: 1rem 0.5rem;
  }
  
  .portfolio-header {
    padding: 1.25rem;
    border-radius: 12px;
  }
  
  .portfolio-title {
    font-size: 1.25rem;
  }
  
  .upload-button {
    width: 100%;
    margin-top: 1rem;
  }
}
/**
 * Theme settings styles
 * These styles are used for handling theme and accessibility preferences
 */

/* Default (desktop) variables */
:root {
  --spacing-multiplier: 1.1;
  --density-scale: 1;
  --spacing-unit: calc(8px * var(--density-scale));
  --component-padding: calc(16px * var(--density-scale));
}

/* Tablet media query */
@media (max-width: 1024px) {
  :root {
    --spacing-multiplier: 1;
  }
}

/* Mobile media query */
@media (max-width: 768px) {
  :root {
    --spacing-multiplier: 0.9;
  }
}

/* Accessibility: Reduced Motion */
.reduced-motion * {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* Accessibility: High Contrast */
.high-contrast {
  --mui-palette-divider: rgba(255, 255, 255, 0.25) !important;
}

.high-contrast.light-mode {
  --color-primary: #0a57c2 !important;
  --color-background: #ffffff !important;
  --color-surface: #f8f9fc !important;
  --color-text-primary: #000000 !important;
  --color-text-secondary: #222222 !important;
  --color-border: #222222 !important;
  --color-error: #d32f2f !important;
  --color-success: #066e06 !important;
}

.high-contrast.dark-mode {
  --color-primary: #68a9ff !important;
  --color-background: #0a0a0a !important;
  --color-surface: #121212 !important;
  --color-text-primary: #ffffff !important;
  --color-text-secondary: #e0e0e0 !important;
  --color-border: #e0e0e0 !important;
  --color-error: #ff6b6b !important;
  --color-success: #66d066 !important;
}

/* Accessibility: Large Text */
.large-text {
  --font-size-base: 1.125rem !important;
  --font-size-sm: 1rem !important;
  --font-size-lg: 1.275rem !important;
  --font-size-xl: 1.5rem !important;
  --font-size-2xl: 1.75rem !important;
  --font-size-3xl: 2.1rem !important;
  --font-size-4xl: 2.5rem !important;
}

/* Density settings */
.density-compact {
  --density-scale: 0.85;
  --spacing-unit: calc(8px * var(--density-scale));
  --component-padding: calc(12px * var(--density-scale));
}

.density-standard {
  --density-scale: 1;
  --spacing-unit: calc(8px * var(--density-scale));
  --component-padding: calc(16px * var(--density-scale));
}

.density-comfortable {
  --density-scale: 1.15;
  --spacing-unit: calc(8px * var(--density-scale));
  --component-padding: calc(20px * var(--density-scale));
}

/* Screen reader optimizations */
.screen-reader-optimized .visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Theme settings card specific styles */
.theme-color-option {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s;
  border: 2px solid transparent;
}

.theme-color-option:hover {
  transform: scale(1.1);
}

.theme-color-option.selected {
  border: 2px solid var(--mui-palette-divider);
  box-shadow: 0 0 0 2px var(--mui-palette-background-paper);
}

/* Theme mode selector */
.theme-mode-selector {
  background-color: var(--mui-palette-background-paper);
  border-radius: 8px;
  padding: 4px;
  display: flex;
  margin-bottom: 16px;
}

.theme-mode-option {
  flex: 1 1;
  padding: 8px 16px;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s;
}

.theme-mode-option.selected {
  background-color: var(--mui-palette-primary-main);
  color: var(--mui-palette-primary-contrastText);
}

/* Font size preview */
.font-size-preview {
  padding: 12px;
  border-radius: 8px;
  background-color: var(--mui-palette-background-default);
  margin-top: 8px;
  margin-bottom: 16px;
}

.font-size-preview .preview-header {
  font-weight: 500;
  margin-bottom: 8px;
}

.font-size-preview .preview-text {
  opacity: 0.8;
}

/* Preview box for theme settings */
.theme-preview-box {
  border-radius: 8px;
  padding: 16px;
  background-color: var(--mui-palette-background-default);
  box-shadow: var(--mui-shadows-2);
  margin-top: 16px;
  margin-bottom: 24px;
  overflow: hidden;
}

.theme-preview-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.theme-preview-header .preview-title {
  font-weight: 600;
  margin-left: 8px;
}

.theme-preview-content {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.theme-preview-button {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.875rem;
}

.theme-preview-primary {
  background-color: var(--mui-palette-primary-main);
  color: var(--mui-palette-primary-contrastText);
}

.theme-preview-secondary {
  background-color: var(--mui-palette-secondary-main);
  color: var(--mui-palette-secondary-contrastText);
}

.theme-preview-text {
  margin-top: 8px;
}

/* Animation toggle */
.animation-toggle-container {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.animation-icon {
  margin-right: 8px;
}

.animation-description {
  margin-top: 4px;
  font-size: 0.875rem;
  opacity: 0.7;
}
/* Unified Profile Page Styles */

.profile-container {
  padding: 0;
}

.profile-header {
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(85, 60, 154, 0.08), rgba(63, 81, 181, 0.08));
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: visible; /* Changed from hidden to visible to prevent text cutoff */
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
  height: auto; /* Allow flexible height */
}

.profile-header-content {
  padding: 1.5rem;
}

.profile-avatar-wrapper {
  position: relative;
  display: inline-block;
}

.profile-avatar {
  width: 120px;
  height: 120px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid rgba(255, 255, 255, 0.7);
}

.profile-avatar-container {
  position: relative;
  display: inline-block;
}

.profile-avatar-upload-btn {
  position: absolute !important;
  bottom: 0;
  right: 0;
  background-color: #6366F1 !important;
  color: white !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.2s ease-in-out;
}

.profile-avatar-upload-btn:hover {
  transform: scale(1.1);
  background-color: #4F46E5 !important;
}

.artist-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: rgba(139, 92, 246, 0.15);
  color: rgba(139, 92, 246, 0.9);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}

.profile-save-button {
  background: linear-gradient(90deg, #6366F1 0%, #8B5CF6 100%) !important;
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3) !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
}

.profile-save-button:hover {
  box-shadow: 0 6px 15px rgba(99, 102, 241, 0.4) !important;
  background: linear-gradient(90deg, #5253d4 0%, #7c50dc 100%) !important;
}

.profile-cancel-button {
  border-radius: 8px !important;
  font-weight: 500 !important;
}

.profile-delete-button {
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
}

.profile-delete-button:hover {
  border-color: #ef4444 !important;
  background-color: rgba(239, 68, 68, 0.08) !important;
}

.profile-completion-bar {
  width: 100%;
  height: 6px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  margin: 8px 0;
  overflow: hidden;
}

.profile-completion-progress {
  height: 100%;
  background: linear-gradient(90deg, #6366F1 0%, #8B5CF6 100%);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.profile-form-card {
  border-radius: 12px;
  background-color: rgba(30, 30, 30, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  height: auto; /* Allow flexible height */
  overflow: visible; /* Changed from default to visible to prevent text cutoff */
}

.profile-info-card {
  border-radius: 12px;
  background-color: rgba(30, 30, 30, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.5rem;
  height: auto; /* Changed from 100% to auto for flexible height */
  min-height: 200px; /* Minimum height instead of fixed */
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: visible; /* Ensure content isn't clipped */
}

.profile-form-group {
  margin-bottom: 1rem;
}

.profile-alert {
  margin-bottom: 1rem;
  border-radius: 8px;
}

.profile-tabs .MuiTab-root {
  min-width: 120px;
  text-transform: none;
  font-weight: 500;
}

.profile-tabs .Mui-selected {
  color: #8B5CF6 !important;
}

.profile-tabs .MuiTabs-indicator {
  background-color: #8B5CF6;
}

.portfolio-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

.portfolio-preview-item {
  aspect-ratio: 1/1;
  overflow: visible; /* Changed from hidden to visible to prevent text cutoff */
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.2);
  height: auto; /* Allow flexible height */
}

.portfolio-preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.portfolio-preview-item:hover .portfolio-preview-image {
  transform: scale(1.05);
}

.secondary-button {
  border-radius: 8px !important;
  border-color: rgba(99, 102, 241, 0.5) !important;
  color: white !important;
}

.secondary-button:hover {
  border-color: rgba(99, 102, 241, 0.8) !important;
  background: rgba(99, 102, 241, 0.1) !important;
}

.calendar-section {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: 12px;
  background-color: rgba(30, 30, 30, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .profile-container {
    padding-top: 1rem;
  }
  
  .profile-header-content {
    padding: 1rem;
  }
  
  .profile-avatar {
    width: 100px;
    height: 100px;
  }
  
  .portfolio-preview-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.discovery-card {
  height: auto; /* Changed from 100% to auto for flexible height */
  min-height: 300px; /* Minimum height to ensure content isn't cramped */
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: visible; /* Changed from hidden to visible to prevent text cutoff */
  position: relative;
}

.discovery-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.discovery-card-media {
  height: 160px; /* Further reduced for mobile */
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.5s ease;
}

/* Responsive card media heights - optimized for better spacing */
@media (min-width: 600px) {
  .discovery-card-media {
    height: 200px;
  }
}

@media (min-width: 960px) {
  .discovery-card-media {
    height: 240px;
  }
}

@media (min-width: 1280px) {
  .discovery-card-media {
    height: 280px;
  }
}

.discovery-card:hover .discovery-card-media {
  transform: scale(1.05);
}

/* Modal styling */
.discovery-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 1000px;
  height: 80vh;
  max-height: 800px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  outline: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.discovery-modal-image-container {
  flex: 1 1;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  max-height: 100%;
}

.discovery-modal-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.discovery-modal-details {
  width: 100%;
  max-width: 400px;
  padding: 24px;
  overflow-y: auto;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Mobile-first responsive adjustments */
@media (max-width: 480px) {
  .discovery-card {
    min-height: 180px; /* Further reduced for mobile */
  }
  
  .discovery-card-media {
    height: 140px; /* Even smaller for very small screens */
  }
  
  .discovery-modal {
    width: 95%;
    height: 95vh;
    flex-direction: column;
  }
  
  .discovery-modal-image-container {
    height: 50%;
  }
  
  .discovery-modal-details {
    max-width: 100%;
    height: 50%;
    padding: 16px; /* Reduced padding on mobile */
  }
}

/* Tablet responsive adjustments */
@media (max-width: 768px) and (min-width: 481px) {
  .discovery-card {
    min-height: 250px;
  }
  
  .discovery-modal {
    width: 92%;
    height: 90vh;
    flex-direction: column;
  }
  
  .discovery-modal-image-container {
    height: 55%;
  }
  
  .discovery-modal-details {
    max-width: 100%;
    height: 45%;
    padding: 20px;
  }
}

/* Larger tablet/small desktop adjustments */
@media (max-width: 900px) and (min-width: 769px) {
  .discovery-modal {
    flex-direction: column;
    height: 85vh;
  }
  
  .discovery-modal-image-container {
    height: 60%;
  }
  
  .discovery-modal-details {
    max-width: 100%;
    height: 40%;
  }
}

/* Loading skeleton animation */
@keyframes skeleton-loading {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200px 100%;
  animation: skeleton-loading 1.5s infinite;
}
/* Homepage.css - Enhanced mobile-friendly styles for better responsiveness */

.home-page {
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  background-color: #0D0C22;
  position: relative;
  -webkit-overflow-scrolling: touch;
  touch-action: manipulation;
  height: auto !important;
}

/* Common section styles - improved vertical spacing */
.home-section {
  width: 100%;
  max-width: 100%;
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem);
  position: relative;
  box-sizing: border-box;
  scroll-margin-top: 70px; /* For anchor links */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Card styles with improved accessibility and hover effects */
.testimonial-card {
  padding: clamp(1rem, 3vw, 1.5rem);
  height: 100%;
  background-color: rgba(30, 30, 45, 0.6);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform, box-shadow;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

/* Content width constraint for better readability */
.content-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

/* Responsive typography */
h1, h2, h3, h4, h5, h6 {
  word-break: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
}

/* Better image handling */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Tablet styles */
@media (max-width: 960px) {
  .home-section {
    padding: 3rem 1.5rem;
  }
}

/* Small tablet/large mobile styles */
@media (max-width: 768px) {
  .home-section {
    padding: 2.5rem 1rem;
  }

  .testimonial-card {
    padding: 1.25rem;
  }
}

/* Mobile styles */
@media (max-width: 480px) {
  /* Critical mobile scrolling fixes */
  html, body {
    overflow-y: auto !important;
    height: auto !important;
    position: static !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    font-size: 14px;
  }
  
  /* Force optimal section padding */
  .home-section {
    padding: 1.5rem 0.75rem;
    margin-bottom: 1rem;
    height: auto !important;
    min-height: auto !important;
    position: static !important;
    overflow: visible !important;
    z-index: 1;
  }
  
  /* Make sure all sections can be reached with scrolling */
  #root, .home-page, body, html {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }
  
  /* Ensure proper stacking context */
  .fixed-element, [style*="position: fixed"] {
    position: absolute !important;
  }
  
  /* Ensure the features section can be scrolled past */
  [class*="features"], [id*="features"] {
    position: static !important;
    overflow: visible !important;
    height: auto !important;
    z-index: 1 !important;
  }
  
  /* Optimize card padding */
  .testimonial-card {
    padding: 1rem;
  }
  
  /* Fix for the first container on smaller devices */
  .hero-section {
    padding: 1rem 0.5rem;
    height: auto !important;
    min-height: auto !important;
  }
  
  /* Improve button sizes for mobile */
  .MuiButton-sizeLarge {
    padding: 12px 24px;
    font-size: 0.9rem;
  }
  
  /* Better typography spacing */
  .MuiTypography-h2 {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
  }
  
  .MuiTypography-h5 {
    font-size: 1rem !important;
    line-height: 1.4 !important;
  }
}

/* Extra small screens */
@media (max-width: 360px) {
  .home-section {
    padding: 1rem 0.5rem;
  }
  
  .MuiButton-sizeLarge {
    padding: 10px 20px;
    font-size: 0.85rem;
    min-height: 44px; /* iOS touch target minimum */
  }
  
  .MuiTypography-h2 {
    font-size: 1.5rem !important;
  }
  
  .MuiContainer-root {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* Enhanced fixes for Safari/iOS and modern mobile browsers */
@supports (-webkit-touch-callout: none) {
  html, body {
    height: auto !important;
    min-height: 100%;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    position: static !important;
    overscroll-behavior-y: none;
  }
  
  .home-page {
    height: auto !important;
    min-height: 100vh;
    max-height: none !important;
    position: relative !important;
    touch-action: manipulation !important;
  }
  
  /* Ensure sections stack properly and can be scrolled past */
  .home-section {
    margin-bottom: 2rem !important;
    padding-bottom: clamp(2rem, 5vw, 3rem) !important;
    display: flex !important;
    height: auto !important;
  }
  
  /* Fix for momentum scrolling issues */
  .scrollable-content {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  
  /* Fix for sticky elements in Safari */
  .sticky-element {
    position: sticky !important;
  }
}

/* Fix for newer browsers with smooth scrolling */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Fix for browsers that support overscroll-behavior */
@supports (overscroll-behavior: contain) {
  html, body {
    overscroll-behavior-y: contain;
  }
}

/* High-resolution screen optimizations */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi) {
  .home-page {
    will-change: transform;
  }
  
  /* Optimize rendering on high-dpi displays */
  .image-container img {
    image-rendering: high-quality;
  }
}

/* Enhanced responsive layouts */
@media (max-width: 1280px) {
  .content-container {
    max-width: 95%;
  }
}

/* Better responsive grid for feature cards */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: clamp(1rem, 3vw, 2rem);
  gap: clamp(1rem, 3vw, 2rem);
  width: 100%;
}

/* Responsive button group styling */
.responsive-button-group {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 480px) {
  .responsive-button-group {
    flex-direction: column;
    width: 100%;
  }
  
  .responsive-button-group > * {
    width: 100%;
  }
}

/* Animations optimized for lower-powered devices */
@media (prefers-reduced-motion), (max-width: 768px) {
  .reduced-motion {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* Improve text readability on small screens */
@media (max-width: 480px) {
  h1, .h1-style {
    font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
    line-height: 1.2 !important;
  }
  
  h2, .h2-style {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    line-height: 1.25 !important;
  }
  
  p, .body-text {
    font-size: clamp(0.875rem, 3.5vw, 1rem) !important;
    line-height: 1.5 !important;
  }
}

/* Performance optimizations for animations */
.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Improved touch targets for mobile */
@media (max-width: 768px) {
  button, 
  .button, 
  [role="button"],
  a.button-style {
    min-height: 44px;
    min-width: 44px;
    padding: 0.6rem 1rem;
  }
  
  input, 
  select {
    min-height: 44px;
    font-size: 16px; /* Prevents iOS zoom */
  }
}
/* HomeResponsive.css - Additional responsive styles for the homepage */

/* Container queries for advanced responsive layouts */
@supports (container-type: inline-size) {
  .container-responsive {
    container-type: inline-size;
    container-name: content;
  }
  
  @container content (max-width: 768px) {
    .container-card {
      flex-direction: column;
    }
    
    .container-card-image {
      width: 100%;
      aspect-ratio: 16/9;
    }
  }
}

/* Enhanced responsive grid system */
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 1.5rem;
  gap: 1.5rem;
  width: 100%;
}

/* Responsive grid items with flexible spans */
.grid-item-lg {
  grid-column: span 6;
}

.grid-item-md {
  grid-column: span 4;
}

.grid-item-sm {
  grid-column: span 3;
}

/* Responsive adjustments for grid items */
@media (max-width: 1024px) {
  .grid-item-lg {
    grid-column: span 12;
  }
  
  .grid-item-md {
    grid-column: span 6;
  }
  
  .grid-item-sm {
    grid-column: span 4;
  }
}

@media (max-width: 768px) {
  .grid-item-md {
    grid-column: span 12;
  }
  
  .grid-item-sm {
    grid-column: span 6;
  }
}

@media (max-width: 480px) {
  .responsive-grid {
    gap: 1rem;
  }
  
  .grid-item-sm {
    grid-column: span 12;
  }
}

/* Flexible image handling */
.responsive-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Aspect ratio container for consistent layouts */
.aspect-ratio-container {
  position: relative;
  width: 100%;
}

.aspect-ratio-container::before {
  content: "";
  display: block;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.aspect-ratio-container > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Aspect ratio variations */
.aspect-ratio-square::before {
  padding-bottom: 100%; /* 1:1 aspect ratio */
}

.aspect-ratio-portrait::before {
  padding-bottom: 150%; /* 2:3 aspect ratio */
}

/* Glassmorphism surface with responsive adjustments */
.glass-surface {
  background: rgba(30, 32, 40, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

@media (max-width: 768px) {
  .glass-surface {
    border-radius: 12px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

/* Responsive spacing system */
.space-y {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 5vw, 3rem);
}

.space-x {
  display: flex;
  flex-direction: row;
  gap: clamp(1rem, 3vw, 2rem);
}

@media (max-width: 768px) {
  .space-x {
    flex-direction: column;
  }
}

/* Responsive typography with fluid sizing */
.fluid-text-xl {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.1;
}

.fluid-text-lg {
  font-size: clamp(1.5rem, 4vw, 3rem);
  line-height: 1.2;
}

.fluid-text-md {
  font-size: clamp(1.25rem, 3vw, 2rem);
  line-height: 1.3;
}

.fluid-text-base {
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.5;
}

.fluid-text-sm {
  font-size: clamp(0.875rem, 1.5vw, 1rem);
  line-height: 1.6;
}

/* High-contrast text for better readability */
.high-contrast-text {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Enhanced responsive buttons */
.responsive-button {
  border-radius: 12px;
  padding: clamp(0.75rem, 2vw, 1.25rem) clamp(1.5rem, 3vw, 2.5rem);
  font-size: clamp(0.875rem, 2.5vw, 1.125rem);
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Loading optimizations */
.lazy-load {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.lazy-load.loaded {
  opacity: 1;
  transform: translateY(0);
}

/* Custom scrollbar for better UX */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
}

/* UserTypeSelector component styles */
.user-type-tab {
  padding: 1.5rem;
  border-radius: 16px;
  cursor: pointer;
  height: 100%;
  position: relative;
  overflow: hidden;
  background-color: rgba(30, 30, 45, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.user-type-tab.active {
  background-color: rgba(99, 102, 241, 0.15);
  border-color: #6366F1;
  box-shadow: 0 20px 25px -5px rgba(99, 102, 241, 0.15);
}

.user-type-tab:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  border-color: rgba(99, 102, 241, 0.3);
}

.tab-content {
  position: relative;
  z-index: 1;
}

.tab-header {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.tab-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 12px;
  margin-right: 0.75rem;
  transition: background-color 0.3s ease;
}

.active .tab-icon-container {
  background-color: rgba(99, 102, 241, 0.3);
  color: #6366F1;
}

.tab-icon-container:not(.active) {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
}

.tab-title {
  font-weight: bold;
  color: white;
  margin: 0;
}

.tab-description {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.tab-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.active .tab-status {
  color: #6366F1;
}

.tab-status:not(.active) {
  color: rgba(255, 255, 255, 0.6);
}

.status-indicator {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #6366F1;
}

.status-text {
  font-weight: 600;
}

.decorative-background {
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0.1;
  transform: translate(20%, 20%);
  z-index: 0;
}

@media (max-width: 768px) {
  .user-type-tab {
    padding: 1.25rem;
  }
  
  .tab-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .tab-icon-container {
    margin-bottom: 0.75rem;
    margin-right: 0;
  }
}
/* Enhanced styles for feature cards with glass effect */

/* Feature Card */
.feature-card {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 16px;
  height: auto; /* Changed from 100% to auto for flexible height */
  min-height: 200px; /* Minimum height instead of fixed */
  overflow: visible; /* Changed from hidden to visible to prevent text cutoff */
  position: relative;
  /* Advanced glassmorphism effect with depth */
  background: linear-gradient(135deg, rgba(25, 25, 35, 0.4) 0%, rgba(30, 32, 40, 0.7) 100%);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  /* Multi-layered shadow for depth and realism */
  box-shadow: 
    0 15px 35px -10px rgba(0, 0, 0, 0.3),
    0 4px 10px -3px rgba(0, 0, 0, 0.4),
    0 -5px 10px -5px rgba(255, 255, 255, 0.1) inset,
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 8px 2px rgba(99, 102, 241, 0.1);
}

/* Add the glow effect behind each card */
.feature-card::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, rgba(99, 102, 241, 0) 70%);
  filter: blur(20px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  opacity: 0.4;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.feature-card:hover {
  transform: perspective(1000px) rotateX(2deg) rotateY(-1deg) scale(1.03);
  box-shadow: 
    0 20px 40px -12px rgba(99, 102, 241, 0.3),
    0 8px 15px -5px rgba(0, 0, 0, 0.4),
    0 -5px 10px -5px rgba(255, 255, 255, 0.1) inset,
    0 0 0 1px rgba(99, 102, 241, 0.1),
    0 0 15px 5px rgba(99, 102, 241, 0.3);
}

.feature-card:hover::before {
  opacity: 0.8;
  filter: blur(25px);
}

.feature-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.feature-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.feature-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
}

.feature-card-title {
  font-weight: 600;
  color: #fff;
}

.feature-card-description {
  margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.7);
  flex-grow: 1;
  /* Add text cutoff prevention */
  overflow: visible !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  text-overflow: clip !important;
  min-height: auto !important;
  line-height: 1.5 !important;
}

/* Learn more button */
.enhanced-learn-more-button-container {
  display: flex;
  margin-top: auto;
}

.enhanced-learn-more-button {
  color: #6366F1 !important;
  text-transform: none !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  padding: 8px 16px !important;
  border-radius: 10px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  background: rgba(99, 102, 241, 0.1) !important;
  border: 1px solid rgba(99, 102, 241, 0.2) !important;
  box-shadow: 
    0 4px 10px -3px rgba(99, 102, 241, 0.1),
    0 0 0 1px rgba(99, 102, 241, 0.1) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !important;
}

/* Shimmer effect for button */
.enhanced-learn-more-button::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  ) !important;
  transition: left 0.7s ease !important;
  z-index: 1 !important;
}

.enhanced-learn-more-button:hover::before {
  left: 100% !important;
}

/* Glow effect behind button */
.enhanced-learn-more-button::after {
  content: "" !important;
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, transparent 70%) !important;
  filter: blur(15px) !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: -1 !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.enhanced-learn-more-button:hover {
  background: rgba(99, 102, 241, 0.15) !important;
  transform: translateY(-2px) !important;
  box-shadow: 
    0 8px 15px -5px rgba(99, 102, 241, 0.3),
    0 0 0 1px rgba(99, 102, 241, 0.2) !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
}

.enhanced-learn-more-button:hover::after {
  opacity: 1 !important;
}

.learn-more-text {
  position: relative;
  transition: color 0.2s ease;
  z-index: 2;
}

.enhanced-learn-more-button:hover .learn-more-text {
  color: #4F46E5;
}

/* Glass Effect Card */
.glass-card {
  background: rgba(30, 30, 45, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}

.glass-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(130deg, #6366F1, transparent 40%, transparent 60%, #8B5CF6);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.glass-card:hover::before {
  opacity: 1;
}

/* Glassmorphism Icon Design */
.glass-icon {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: rgba(20, 20, 35, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.glass-icon::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(130deg, #6366F1, transparent 40%, transparent 60%, #8B5CF6);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.glass-icon:hover {
  transform: scale(1.1) rotate(-5deg);
  box-shadow: 0 12px 40px rgba(99, 102, 241, 0.3);
}

.glass-icon:hover::before {
  opacity: 1;
}

/* Background animation */
@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.animated-bg {
  background: linear-gradient(-45deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.15), rgba(99, 102, 241, 0.1));
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
}

/* Responsive styles */
@media (max-width: 600px) {
  .glass-icon {
    width: 70px;
    height: 70px;
  }
  
  .feature-card {
    padding: 16px;
  }
  
  .feature-card-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .feature-card-icon {
    margin-bottom: 0.5rem;
    margin-right: 0;
  }
}

/* Fix for Safari browser */
@media not all and (-webkit-min-device-pixel-ratio:0), not all and (min-resolution:.001dpcm) { 
  @supports (-webkit-appearance:none) {
    .glass-card::before, 
    .glass-icon::before {
      -webkit-mask-composite: source-out;
    }
  }
}
/* Feature popup styling - simplified version */
.enhanced-feature-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.enhanced-feature-popup-container {
  background-color: rgba(23, 23, 38, 0.95);
  border-radius: 20px;
  max-width: 90%;
  width: 550px;
  max-height: 90vh;
  position: relative;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(99, 102, 241, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 10001;
}

.popup-corner-accent {
  position: absolute;
  width: 40px;
  height: 40px;
  z-index: 0;
}

.popup-corner-accent.top-left {
  top: 0;
  left: 0;
  border-top: 2px solid rgba(99, 102, 241, 0.5);
  border-left: 2px solid rgba(99, 102, 241, 0.5);
  border-top-left-radius: 12px;
}

.popup-corner-accent.top-right {
  top: 0;
  right: 0;
  border-top: 2px solid rgba(99, 102, 241, 0.5);
  border-right: 2px solid rgba(99, 102, 241, 0.5);
  border-top-right-radius: 12px;
}

.popup-corner-accent.bottom-left {
  bottom: 0;
  left: 0;
  border-bottom: 2px solid rgba(99, 102, 241, 0.5);
  border-left: 2px solid rgba(99, 102, 241, 0.5);
  border-bottom-left-radius: 12px;
}

.popup-corner-accent.bottom-right {
  bottom: 0;
  right: 0;
  border-bottom: 2px solid rgba(99, 102, 241, 0.5);
  border-right: 2px solid rgba(99, 102, 241, 0.5);
  border-bottom-right-radius: 12px;
}

.enhanced-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 2;
}

.enhanced-popup-title-container {
  display: flex;
  align-items: center;
}

.enhanced-popup-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: rgba(99, 102, 241, 0.2);
  border-radius: 12px;
  margin-right: 1rem;
  color: #6366F1;
}

.enhanced-popup-title {
  font-weight: 700;
  color: white;
  margin: 0;
}

.enhanced-popup-close-button {
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s ease;
}

.enhanced-popup-close-button:hover {
  color: white;
  background-color: rgba(255, 255, 255, 0.1);
}

.enhanced-popup-content {
  padding: 1.5rem;
  overflow-y: auto;
  max-height: 60vh;
}

.enhanced-popup-description {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1.5rem;
  line-height: 1.6;
  font-size: 1rem;
}

.enhanced-popup-benefits-title {
  color: white;
  margin-bottom: 1rem;
  font-weight: 600;
}

.enhanced-popup-benefits-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.enhanced-popup-benefit-item {
  display: flex;
  align-items: flex-start;
}

.enhanced-popup-benefit-icon {
  margin-right: 0.75rem;
  color: #6366F1;
  margin-top: 2px;
}

.enhanced-popup-benefit-text {
  color: rgba(255, 255, 255, 0.75);
}

.enhanced-popup-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(15, 15, 25, 0.5);
}

.enhanced-popup-nav-button {
  color: rgba(255, 255, 255, 0.7);
  text-transform: none;
  font-weight: 500;
}

.enhanced-popup-nav-button:hover {
  color: white;
  background-color: rgba(255, 255, 255, 0.05);
}

.enhanced-popup-dots {
  display: flex;
  gap: 8px;
}

.enhanced-popup-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.enhanced-popup-dot.active {
  background-color: #6366F1;
  transform: scale(1.2);
}

.enhanced-popup-dot:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

/* Fix for modals on mobile */
@media (max-width: 600px) {
  .enhanced-feature-popup-container {
    max-width: 95%;
    max-height: 95vh;
  }
  
  .enhanced-popup-header {
    padding: 1rem;
  }
  
  .enhanced-popup-content {
    padding: 1rem;
    max-height: 65vh;
  }
  
  .enhanced-popup-footer {
    padding: 0.75rem 1rem;
  }
  
  .enhanced-popup-icon-container {
    width: 40px;
    height: 40px;
  }
}

/* Popup backdrop */
.popup-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  z-index: 9999;
}
/* Enhanced common.css with better mobile support */

/* Square decoration styling */
.square-decoration {
  display: block;
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.square-decoration.top-left {
  top: 30px;
  left: 30px;
}

.square-decoration.top-right {
  top: 30px;
  right: 30px;
}

.square-decoration.bottom-left {
  bottom: 30px;
  left: 30px;
}

.square-decoration.bottom-right {
  bottom: 30px;
  right: 30px;
}

/* Global container for consistent spacing across components */
.content-container {
  width: 100%;
  max-width: none; /* Remove width constraint for full-width design */
  margin: 0 auto;
  padding: 2rem;
}

/* Flex layout helpers */
.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

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

.gap-2 {
  gap: 0.5rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-8 {
  gap: 2rem;
}

/* Card container for mobile grid support */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  width: 100%;
}

/* Standard section spacing */
.section {
  padding: 4rem 2rem;
}

.section-title {
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  text-align: center;
}

.section-subtitle {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  max-width: none; /* Remove width constraint for full-width design */
  margin: 0 auto 3rem auto;
  line-height: 1.6;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.5);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.7);
}

/* Touch-friendly target sizes for mobile */
.touch-target {
  min-height: 44px;
  min-width: 44px;
}

/* Mobile input enhancements */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  font-size: 16px; /* Prevents iOS zoom on focus */
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .section {
    padding: 3rem 1.5rem;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

@media (max-width: 768px) {
  .square-decoration {
    width: 40px;
    height: 40px;
  }
  
  .section {
    padding: 2.5rem 1rem;
  }
  
  .section-title {
    font-size: 1.75rem;
  }
  
  .section-subtitle {
    font-size: 1rem;
    margin-bottom: 2rem;
  }
  
  .card-grid {
    grid-template-columns: 1fr;
  }
  
  .flex-row {
    flex-direction: column;
  }
  
  .flex-row.mobile-preserve {
    flex-direction: row;
  }
  
  .content-container {
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .square-decoration {
    width: 30px;
    height: 30px;
  }
  
  .section {
    padding: 2rem 0.75rem;
  }
  
  .section-title {
    font-size: 1.5rem;
  }
}

/* Accessibility enhanced focus styles */
:focus {
  outline: 2px solid #6366F1;
  outline-offset: 2px;
}

/* Utility class for visually hiding content (for screen readers) */
.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;
}
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.875rem 1.5rem;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 8px;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
  gap: 10px;
  text-align: center;
}

.btn:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
}

/* Primary button (default) */
.btn-primary {
  background: linear-gradient(90deg, #4f46e5, #6366f1);
  color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(90deg, #4338ca, #4f46e5);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Secondary button */
.btn-secondary {
  background-color: #f3f4f6;
  color: #4b5563;
}

.btn-secondary:hover:not(:disabled) {
  background-color: #e5e7eb;
}

/* Outline button */
.btn-outline {
  background-color: transparent;
  border: 1px solid #d1d5db;
  color: #4b5563;
}

.btn-outline:hover:not(:disabled) {
  background-color: #f9fafb;
  border-color: #9ca3af;
}

/* Link button */
.btn-link {
  background-color: transparent;
  color: #4f46e5;
  padding: 0.5rem;
  text-decoration: underline;
}

.btn-link:hover:not(:disabled) {
  color: #4338ca;
}

/* Loading state */
.btn.loading {
  opacity: 0.85;
  cursor: not-allowed;
}

/* Disabled state */
.btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Spinner animation */
.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: currentColor;
  animation: spin 0.8s linear infinite;
}

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

/* Full width variant */
.btn.btn-full {
  width: 100%;
}