/**
 * Ultra-Optimized Portfolio Styling System v12.0
 * Features:
 * - Enhanced pill-shaped loading indicators with smooth animations
 * - Advanced skeleton synchronization with pill progress
 * - Improved responsive design with adaptive loading
 * - Superior performance optimizations
 * - Progressive enhancement approach
 * - Accessibility-first design
 * - Network-aware animations
 * - Mobile/tablet-optimized pill design
 */

/* ====================
   ROOT VARIABLES - ENHANCED PILL LOADING SYSTEM
   ==================== */
   :root {
    /* Brand Primary Colors - HSL for better theming */
    --primary-hue: 240;
    --primary-saturation: 75%;
    --primary-lightness: 60%;
    --primary-color: hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
    --primary-light: hsla(var(--primary-hue), var(--primary-saturation), 85%, 0.15);
    --primary-medium: hsla(var(--primary-hue), var(--primary-saturation), 70%, 0.3);
    --primary-dark: hsl(var(--primary-hue), var(--primary-saturation), 45%);
    --primary-darker: hsl(var(--primary-hue), var(--primary-saturation), 35%);
    --primary-gradient: linear-gradient(135deg, 
      hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness)), 
      hsl(calc(var(--primary-hue) + 15), var(--primary-saturation), calc(var(--primary-lightness) - 10%))
    );
    --primary-rgb: 79, 70, 229;
    
    /* Secondary Accent Colors */
    --secondary-hue: 340;
    --secondary-saturation: 85%;
    --secondary-lightness: 60%;
    --secondary-color: hsl(var(--secondary-hue), var(--secondary-saturation), var(--secondary-lightness));
    --secondary-light: hsla(var(--secondary-hue), var(--secondary-saturation), 85%, 0.15);
    --secondary-dark: hsl(var(--secondary-hue), var(--secondary-saturation), 45%);
    --secondary-gradient: linear-gradient(135deg, 
      hsl(var(--secondary-hue), var(--secondary-saturation), var(--secondary-lightness)), 
      hsl(calc(var(--secondary-hue) + 15), var(--secondary-saturation), calc(var(--secondary-lightness) - 10%))
    );
    --secondary-rgb: 236, 72, 153;
    
    /* Enhanced Semantic Colors */
    --success-hue: 142;
    --success-saturation: 70%;
    --success-lightness: 48%;
    --success-color: hsl(var(--success-hue), var(--success-saturation), var(--success-lightness));
    --success-light: hsla(var(--success-hue), var(--success-saturation), 85%, 0.15);
    --success-dark: hsl(var(--success-hue), var(--success-saturation), 38%);
    --success-rgb: 34, 197, 94;
    
    --warning-hue: 45;
    --warning-saturation: 95%;
    --warning-lightness: 50%;
    --warning-color: hsl(var(--warning-hue), var(--warning-saturation), var(--warning-lightness));
    --warning-light: hsla(var(--warning-hue), var(--warning-saturation), 85%, 0.15);
    --warning-dark: hsl(var(--warning-hue), var(--warning-saturation), 40%);
    --warning-rgb: 245, 158, 11;
    
    --info-hue: 199;
    --info-saturation: 85%;
    --info-lightness: 55%;
    --info-color: hsl(var(--info-hue), var(--info-saturation), var(--info-lightness));
    --info-light: hsla(var(--info-hue), var(--info-saturation), 85%, 0.15);
    --info-dark: hsl(var(--info-hue), var(--info-saturation), 45%);
    --info-rgb: 14, 165, 233;
    
    --error-hue: 0;
    --error-saturation: 85%;
    --error-lightness: 60%;
    --error-color: hsl(var(--error-hue), var(--error-saturation), var(--error-lightness));
    --error-light: hsla(var(--error-hue), var(--error-saturation), 85%, 0.15);
    --error-dark: hsl(var(--error-hue), var(--error-saturation), 50%);
    --error-rgb: 239, 68, 68;
    
    /* Enhanced Animation System */
    --animation-duration-instant: 0.05s;
    --animation-duration-fastest: 0.1s;
    --animation-duration-fast: 0.2s;
    --animation-duration-normal: 0.3s;
    --animation-duration-slow: 0.5s;
    --animation-duration-slowest: 0.8s;
    --animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --animation-timing-function-entrance: cubic-bezier(0.0, 0.0, 0.2, 1);
    --animation-timing-function-exit: cubic-bezier(0.4, 0.0, 1, 1);
    --animation-timing-function-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --animation-timing-function-spring: cubic-bezier(0.45, 1.64, 0.41, 0.8);
    
    /* Light Theme Neutral Colors */
    --text-color: hsl(222, 47%, 11%);
    --text-secondary: hsl(215, 25%, 27%);
    --text-muted: hsl(217, 19%, 35%);
    --text-rgb: 17, 24, 39;
    
    --bg-color: hsl(210, 20%, 98%);
    --bg-light: hsl(214, 15%, 95%);
    --bg-muted: hsl(214, 15%, 91%);
    --card-bg: hsl(0, 0%, 100%);
    --card-bg-hover: hsl(210, 40%, 98%);
    --card-bg-active: hsla(var(--primary-hue), var(--primary-saturation), 95%, 0.5);
    --bg-rgb: 249, 250, 251;
    --card-bg-rgb: 255, 255, 255;
    
    /* Enhanced Border System */
    --border-color: hsl(216, 12%, 84%);
    --border-light: hsl(214, 15%, 91%);
    --border-dark: hsl(216, 12%, 70%);
    --border-color-focus: var(--primary-color);
    --error-border: hsla(var(--error-hue), var(--error-saturation), var(--error-lightness), 0.7);
    --border-radius-sm: 0.25rem;
    --border-radius-md: 0.375rem;
    --border-radius-lg: 0.5rem;
    --border-radius-xl: 0.75rem;
    --border-radius-2xl: 1rem;
    --border-radius-3xl: 1.5rem;
    --border-radius-full: 9999px;
    
    /* Enhanced Glass Effect */
    --glass-bg: hsla(0, 0%, 100%, 0.65);
    --glass-border: hsla(0, 0%, 100%, 0.18);
    --glass-shadow: 
      0 8px 32px hsla(210, 20%, 15%, 0.15),
      0 0 0 1px hsla(0, 0%, 100%, 0.15) inset;
    --glass-highlight: hsla(0, 0%, 100%, 0.7);
    --glass-blur: 12px;
    
    /* Status Indicators */
    --online-color: var(--success-color);
    --away-color: var(--warning-color);
    --offline-color: hsl(215, 10%, 65%);
    
    /* Enhanced Gradient System */
    --gradient-start: hsla(var(--primary-hue), 80%, 75%, 0.2);
    --gradient-mid: hsla(calc(var(--primary-hue) + 30), 80%, 65%, 0.15);
    --gradient-end: hsla(calc(var(--primary-hue) + 60), 80%, 75%, 0.1);
    --gradient-angle: 135deg;
    --gradient-rainbow: linear-gradient(
      var(--gradient-angle),
      hsl(0, 80%, 75%) 0%,
      hsl(60, 80%, 75%) 20%,
      hsl(120, 80%, 75%) 40%,
      hsl(180, 80%, 75%) 60%,
      hsl(240, 80%, 75%) 80%,
      hsl(300, 80%, 75%) 100%
    );
    
    /* Enhanced Shadow System */
    --shadow-xs: 0 1px 2px hsla(210, 20%, 15%, 0.05);
    --shadow-sm: 0 2px 4px hsla(210, 20%, 15%, 0.07);
    --shadow-md: 
      0 4px 8px hsla(210, 20%, 15%, 0.07),
      0 2px 4px hsla(210, 20%, 15%, 0.05);
    --shadow-lg: 
      0 8px 16px hsla(210, 20%, 15%, 0.08),
      0 4px 8px hsla(210, 20%, 15%, 0.05);
    --shadow-xl: 
      0 16px 24px hsla(210, 20%, 15%, 0.08),
      0 6px 12px hsla(210, 20%, 15%, 0.05);
    --shadow-inner: inset 0 2px 4px hsla(210, 20%, 15%, 0.06);
    --shadow-focus: 0 0 0 3px hsla(var(--primary-hue), var(--primary-saturation), 65%, 0.35);
    
    /* Enhanced Glow Effects */
    --glow-primary: 0 0 15px hsla(var(--primary-hue), var(--primary-saturation), var(--primary-lightness), 0.5);
    --glow-secondary: 0 0 15px hsla(var(--secondary-hue), var(--secondary-saturation), var(--secondary-lightness), 0.5);
    --glow-success: 0 0 15px hsla(var(--success-hue), var(--success-saturation), var(--success-lightness), 0.5);
    --glow-error: 0 0 15px hsla(var(--error-hue), var(--error-saturation), var(--error-lightness), 0.5);
    
    /* Enhanced UI Variables */
    --navbar-bg: rgba(255, 255, 255, 0.98);
    --navbar-bg-blur: rgba(255, 255, 255, 0.85);
    --navbar-border: rgba(226, 232, 240, 0.8);
    --navbar-text: #1a202c;
    --navbar-text-muted: #4a5568;
    --sidebar-bg: #f0f0f0;
    --accent-color: var(--primary-color);
    --accent-color-hover: var(--primary-dark);
    --accent-color-rgb: var(--primary-rgb);
    
    /* Enhanced Focus States */
    --focus-outline: 3px solid rgba(var(--accent-color-rgb), 0.4);
    --focus-outline-offset: 2px;
    --focus-ring-color: hsla(var(--primary-hue), var(--primary-saturation), 50%, 0.3);
    --accent-shadow: 0 4px 12px rgba(var(--accent-color-rgb), 0.3);
    
    /* Enhanced Layout System */
    --container-width: 1280px;
    --content-width-narrow: 800px;
    --content-width-medium: 1024px;
    --content-width-full: var(--container-width);
    --header-height: 70px;
    --footer-height: 200px;
    --sidebar-width: 380px;
    --sidebar-width-tablet: 275px;
    --navbar-height: 60px;
    --navbar-mobile-height: 55px;
    --bottom-navbar-height: 65px;
    
    /* Enhanced Font System */
    --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: var(--font-family-mono);
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    
    /* Enhanced Transition System */
    --transition-standard: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-decelerate: 0.3s cubic-bezier(0, 0, 0.2, 1);
    --transition-accelerate: 0.3s cubic-bezier(0.4, 0, 1, 1);
    --transition-fast: 150ms;
    --transition-normal: 250ms;
    --transition-slow: 350ms;
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
    --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
    
    /* Enhanced Speed System */
    --speed-fastest: 100ms;
    --speed-fast: 200ms;
    --speed-normal: 300ms;
    --speed-slow: 400ms;
    --speed-slowest: 600ms;
    
    /* Enhanced Z-Index System */
    --z-back: -1;
    --z-normal: 1;
    --z-raised: 10;
    --z-tooltip: 20;
    --z-dropdown: 30;
    --z-sticky: 40;
    --z-fixed: 50;
    --z-modal: 60;
    --z-popover: 70;
    --z-maximum: 9999;
    --z-navbar: 900;
    --z-bottom-navbar: 950;
    --z-backdrop: 890;
    --z-notification: 990;
    --z-toast: 1000;
    --z-hidden: -1;
    --z-loading: 10000;
    
    /* Enhanced Spacing System */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    
    /* Enhanced Mobile Navigation */
    --mobile-icon-size: 22px;
    --desktop-icon-size: 20px;
    --indicator-height: 4px;
    --pill-height: 42px;
    --pill-horizontal-padding: 18px;
    
    /* Enhanced Responsiveness */
    --page-padding: 2rem;
    --page-padding-mobile: 1rem;
    --mobile-breakpoint: 768px;
    --tablet-breakpoint: 1024px;
    --desktop-breakpoint: 1280px;
    --large-desktop-breakpoint: 1536px;
    --bottom-padding: calc(var(--bottom-navbar-height) + env(safe-area-inset-bottom, 0px) + 10px);
    
    /* Enhanced Pill Loading System Variables */
    --pill-loading-height: 56px;
    --pill-loading-width: 300px;
    --pill-loading-width-mobile: 260px;
    --pill-loading-border-radius: 28px;
    --pill-loading-padding: 4px;
    --pill-loading-background: rgba(255, 255, 255, 0.95);
    --pill-loading-border: rgba(226, 232, 240, 0.8);
    --pill-loading-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    --pill-loading-backdrop-blur: 12px;
    --pill-loading-progress-height: 4px;
    --pill-loading-animation-duration: 0.35s;
    --immediate-loading-content-padding: 12px 20px;
    --immediate-loading-spinner-size: 20px;
    --immediate-loading-text-size: 0.875rem;
    
    /* Enhanced Skeleton Loading Variables */
    --skeleton-base-color: rgba(0, 0, 0, 0.08);
    --skeleton-shimmer-color: rgba(0, 0, 0, 0.12);
    --skeleton-animation-duration: 1.8s;
    --skeleton-border-radius: 6px;
    --skeleton-sync-delay: 100ms;
    --skeleton-progress-transition: 0.3s ease;
    
    /* Network-aware variables */
    --network-good-speed: 0.3s;
    --network-fair-speed: 0.2s;
    --network-slow-speed: 0.1s;
    --current-network-speed: var(--network-good-speed);
    
    /* Adaptive loading variables */
    --loading-opacity: 0.95;
    --loading-blur: 12px;
    --skeleton-opacity: 0.9;
    
    /* Offline mode variables */
    --offline-overlay: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(255, 0, 0, 0.05) 10px,
      rgba(255, 0, 0, 0.05) 20px
    );
  }


  
  
  /* Enhanced Dark Theme Variables */
  [data-theme="dark"] {
    /* Dark Mode Primary Colors */
    --primary-lightness: 70%;
    --primary-color: hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
    --primary-light: hsla(var(--primary-hue), var(--primary-saturation), 40%, 0.2);
    --primary-medium: hsla(var(--primary-hue), var(--primary-saturation), 50%, 0.3);
    --primary-dark: hsl(var(--primary-hue), var(--primary-saturation), 55%);
    --primary-darker: hsl(var(--primary-hue), var(--primary-saturation), 45%);
    --primary-gradient: linear-gradient(135deg, 
      hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness)), 
      hsl(calc(var(--primary-hue) + 15), var(--primary-saturation), calc(var(--primary-lightness) - 15%))
    );
    --primary-rgb: 129, 140, 248;
    
    /* Dark Mode Secondary Colors */
    --secondary-lightness: 70%;
    --secondary-color: hsl(var(--secondary-hue), var(--secondary-saturation), var(--secondary-lightness));
    --secondary-light: hsla(var(--secondary-hue), var(--secondary-saturation), 40%, 0.2);
    --secondary-dark: hsl(var(--secondary-hue), var(--secondary-saturation), 55%);
    --secondary-gradient: linear-gradient(135deg, 
      hsl(var(--secondary-hue), var(--secondary-saturation), var(--secondary-lightness)), 
      hsl(calc(var(--secondary-hue) + 15), var(--secondary-saturation), calc(var(--secondary-lightness) - 15%))
    );
    --secondary-rgb: 243, 114, 141;
    
    /* Dark Mode Semantic Colors */
    --success-lightness: 55%;
    --success-color: hsl(var(--success-hue), var(--success-saturation), var(--success-lightness));
    --success-light: hsla(var(--success-hue), var(--success-saturation), 40%, 0.2);
    --success-dark: hsl(var(--success-hue), var(--success-saturation), 45%);
    --success-rgb: 52, 211, 153;
    
    --warning-lightness: 60%;
    --warning-color: hsl(var(--warning-hue), var(--warning-saturation), var(--warning-lightness));
    --warning-light: hsla(var(--warning-hue), var(--warning-saturation), 40%, 0.2);
    --warning-dark: hsl(var(--warning-hue), var(--warning-saturation), 50%);
    --warning-rgb: 251, 191, 36;
    
    --info-lightness: 60%;
    --info-color: hsl(var(--info-hue), var(--info-saturation), var(--info-lightness));
    --info-light: hsla(var(--info-hue), var(--info-saturation), 40%, 0.2);
    --info-dark: hsl(var(--info-hue), var(--info-saturation), 50%);
    --info-rgb: 56, 189, 248;
    
    --error-lightness: 65%;
    --error-color: hsl(var(--error-hue), var(--error-saturation), var(--error-lightness));
    --error-light: hsla(var(--error-hue), var(--error-saturation), 40%, 0.2);
    --error-dark: hsl(var(--error-hue), var(--error-saturation), 55%);
    --error-rgb: 248, 113, 113;
    
    /* Dark Mode Neutral Colors */
    --text-color: hsl(220, 20%, 96%);
    --text-secondary: hsl(220, 15%, 85%);
    --text-muted: hsl(220, 10%, 65%);
    --text-rgb: 243, 244, 246;
    
    --bg-color: hsl(222, 47%, 11%);
    --bg-light: hsl(215, 28%, 17%);
    --bg-muted: hsl(215, 28%, 15%);
    --card-bg: hsl(222, 47%, 15%);
    --card-bg-hover: hsl(222, 47%, 17%);
    --card-bg-active: hsla(var(--primary-hue), 30%, 30%, 0.3);
    --bg-rgb: 17, 24, 39;
    --card-bg-rgb: 30, 41, 59;
    
    /* Dark Mode UI Colors */
    --navbar-bg: rgba(17, 24, 39, 0.98);
    --navbar-bg-blur: rgba(17, 24, 39, 0.85);
    --navbar-border: rgba(31, 41, 55, 0.8);
    --navbar-text: #f3f4f6;
    --navbar-text-muted: #9ca3af;
    --sidebar-bg: #1a1a1a;
    --border-color: hsl(225, 25%, 25%);
    --border-light: hsl(225, 20%, 23%);
    --border-dark: hsl(225, 25%, 30%);
    
    /* Dark Mode Glass Effect */
    --glass-bg: hsla(222, 47%, 15%, 0.75);
    --glass-border: hsla(225, 25%, 30%, 0.2);
    --glass-shadow: 
      0 8px 32px hsla(0, 0%, 0%, 0.35),
      0 0 0 1px hsla(0, 0%, 100%, 0.05) inset;
    --glass-highlight: hsla(0, 0%, 100%, 0.05);
    
    /* Dark Mode Gradient Colors */
    --gradient-start: hsla(var(--primary-hue), 80%, 50%, 0.2);
    --gradient-mid: hsla(calc(var(--primary-hue) + 30), 80%, 45%, 0.15);
    --gradient-end: hsla(calc(var(--primary-hue) + 60), 80%, 55%, 0.1);
    
    /* Dark Mode Enhanced Shadows */
    --shadow-xs: 0 1px 2px hsla(0, 0%, 0%, 0.2);
    --shadow-sm: 0 2px 4px hsla(0, 0%, 0%, 0.25);
    --shadow-md: 
      0 4px 8px hsla(0, 0%, 0%, 0.25),
      0 2px 4px hsla(0, 0%, 0%, 0.15);
    --shadow-lg: 
      0 8px 16px hsla(0, 0%, 0%, 0.3),
      0 4px 8px hsla(0, 0%, 0%, 0.2);
    --shadow-xl: 
      0 16px 24px hsla(0, 0%, 0%, 0.3),
      0 6px 12px hsla(0, 0%, 0%, 0.2);
    --shadow-inner: inset 0 2px 4px hsla(0, 0%, 0%, 0.25);
    --shadow-focus: 0 0 0 3px hsla(var(--primary-hue), var(--primary-saturation), 50%, 0.35);
    
    /* Dark Mode Enhanced Glow Effects */
    --glow-primary: 0 0 20px hsla(var(--primary-hue), var(--primary-saturation), var(--primary-lightness), 0.6);
    --glow-secondary: 0 0 20px hsla(var(--secondary-hue), var(--secondary-saturation), var(--secondary-lightness), 0.6);
    --glow-success: 0 0 20px hsla(var(--success-hue), var(--success-saturation), var(--success-lightness), 0.6);
    --glow-error: 0 0 20px hsla(var(--error-hue), var(--error-saturation), var(--error-lightness), 0.6);
    
    /* Dark Mode Error States */
    --error-bg: hsla(var(--error-hue), 30%, 20%, 0.6);
    --error-bg-hover: hsla(var(--error-hue), 30%, 25%, 0.7);
    --error-border: hsla(var(--error-hue), var(--error-saturation), var(--error-lightness), 0.7);
    
    /* Dark Mode Pill Loading System */
    --pill-loading-background: rgba(30, 41, 59, 0.95);
    --pill-loading-border: rgba(55, 65, 81, 0.8);
    --pill-loading-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    
    /* Dark Mode Skeleton Loading */
    --skeleton-base-color: rgba(255, 255, 255, 0.08);
    --skeleton-shimmer-color: rgba(255, 255, 255, 0.12);
    
    /* Dark Mode Loading System */
    --loading-backdrop-opacity: 0.95;
    --glass-bg: hsla(222, 47%, 11%, 0.85);
    
    /* Dark Mode Offline Variables */
    --offline-overlay: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(255, 0, 0, 0.1) 10px,
      rgba(255, 0, 0, 0.1) 20px
    );
  }
  
  /* ====================
     ENHANCED ANIMATION KEYFRAMES
     ==================== */
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  @keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
  }
  
  @keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  @keyframes slideLeft {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
  }
  
  @keyframes slideRight {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
  }
  
  @keyframes zoomIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
  }
  
  @keyframes zoomOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.95); }
  }
  
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
  
  @keyframes pulse {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }
  
  @keyframes pulse-core {
    0%, 100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.2; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.3; }
  }
  
  @keyframes dotPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
  }
  
  @keyframes gradientShift {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
  }
  
  @keyframes instantLoading {
    0% { left: -25%; }
    100% { left: 100%; }
  }
  
  @keyframes successPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
  }
  
  @keyframes loading-pulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
  }
  
  @keyframes loading-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
  
  @keyframes loading-progress {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
  }
  
  @keyframes network-status-in {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
  
  @keyframes network-status-out {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(-100%); opacity: 0; }
  }
  
  @keyframes offline-blink {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
  }
  
  /* Enhanced Pill Loading Keyframes */
  @keyframes pillExpand {
    0% {
      transform: translateX(-50%) translateY(80px) scale(0.8);
      opacity: 0;
      border-radius: 50px;
    }
    60% {
      transform: translateX(-50%) translateY(-5px) scale(1.05);
      opacity: 0.9;
      border-radius: var(--pill-loading-border-radius);
    }
    100% {
      transform: translateX(-50%) translateY(0) scale(1);
      opacity: 1;
      border-radius: var(--pill-loading-border-radius);
    }
  }
  
  @keyframes pillBreathe {
    0%, 100% {
      box-shadow: var(--pill-loading-shadow);
      transform: translateX(-50%) translateY(0) scale(1);
    }
    50% {
      box-shadow: var(--pill-loading-shadow), var(--glow-primary);
      transform: translateX(-50%) translateY(0) scale(1.02);
    }
  }
  
  @keyframes pillSuccess {
    0% { 
      transform: translateX(-50%) translateY(0) scale(1);
      box-shadow: var(--pill-loading-shadow);
    }
    50% { 
      transform: translateX(-50%) translateY(0) scale(1.05);
      box-shadow: var(--pill-loading-shadow), var(--glow-success);
    }
    100% { 
      transform: translateX(-50%) translateY(0) scale(1);
      box-shadow: var(--pill-loading-shadow);
    }
  }
  
  @keyframes pillError {
    0%, 100% { 
      transform: translateX(-50%) translateY(0) scale(1);
    }
    25% { 
      transform: translateX(-50%) translateY(0) scale(1.02) rotateZ(-1deg);
      box-shadow: var(--pill-loading-shadow), var(--glow-error);
    }
    75% { 
      transform: translateX(-50%) translateY(0) scale(1.02) rotateZ(1deg);
      box-shadow: var(--pill-loading-shadow), var(--glow-error);
    }
  }
  
  @keyframes pillProgressShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
  
  @keyframes pillSpinnerSuccess {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1); }
  }
  
  @keyframes pillSpinnerError {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-10deg) scale(1.1); }
    75% { transform: rotate(10deg) scale(1.1); }
  }
  
  /* Enhanced Skeleton Loading Keyframes */
  @keyframes skeletonShimmer {
    0% { 
      background-position: -200% 0;
      opacity: 0.6;
    }
    50% {
      opacity: 0.8;
    }
    100% { 
      background-position: 200% 0;
      opacity: 0.6;
    }
  }
  
  @keyframes skeletonPillSync {
    0% {
      transform: scaleX(0);
      opacity: 0.5;
    }
    50% {
      opacity: 0.8;
    }
    100% {
      transform: scaleX(1);
      opacity: 0.6;
    }
  }
  
  @keyframes skeletonActivate {
    0% {
      opacity: 0.3;
      transform: scale(1);
    }
    100% {
      opacity: 0.8;
      transform: scale(1.01);
    }
  }
  
  @keyframes skeletonComplete {
    0% {
      opacity: 0.8;
      transform: scale(1.01);
    }
    100% {
      opacity: 0;
      transform: scale(1);
    }
  }
  
  /* Base Reset */
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  html, body {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    height: 100%;
    scroll-padding-top: var(--header-height, 70px);
  }
  
  body {
    font-family: var(--font-family);
    font-size: 16px;
    line-height: 1.6;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color var(--current-network-speed), color var(--current-network-speed);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    overflow-wrap: break-word;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Accessibility Focus Styles */
  a:focus-visible, button:focus-visible, input:focus-visible, 
  select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: var(--focus-outline);
    outline-offset: 2px;
    position: relative;
    z-index: 1;
  }
  
  /* Visually Hidden Elements */
  .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  
  /* Enhanced preload state */
  .preload * {
    transition: none !important;
    animation: none !important;
  }
  

  
  .slow-connection .immediate-loading-system,
  .slow-connection .smart-loading-indicator,
  .slow-connection .pill-loading {
    transition-duration: var(--network-slow-speed);
  }

  /* ====================
     ENHANCED PILL LOADING SYSTEM
     ==================== */
  
  /* Loading System Container */
  .immediate-loading-system {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-loading);
    pointer-events: none;
  }
  
  /* Enhanced Pill Loading Indicator - Central component */
  .immediate-loading-indicator,
  .smart-loading-indicator {
    position: fixed;
    bottom: max(20px, calc(20px + env(safe-area-inset-bottom)));
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background-color: var(--pill-loading-background);
    border-radius: var(--pill-loading-border-radius);
    box-shadow: var(--pill-loading-shadow);
    width: var(--pill-loading-width);
    height: var(--pill-loading-height);
    z-index: var(--z-loading);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    display: none;
    transition: all var(--pill-loading-animation-duration) var(--ease-bounce);
    border: 1px solid var(--pill-loading-border);
    padding: var(--pill-loading-padding);
    flex-direction: column;
    backdrop-filter: blur(var(--pill-loading-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--pill-loading-backdrop-blur));
    will-change: transform, opacity;
  }
  
  .immediate-loading-indicator.active,
  .smart-loading-indicator.active {
    opacity: var(--loading-opacity);
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    display: flex;
    pointer-events: auto;
  }
  
  .immediate-loading-indicator.pill-style {
    border-radius: var(--pill-loading-border-radius);
  }
  
  /* Pill Animation States */
  .immediate-loading-indicator.pill-expanding {
    animation: pillExpand var(--pill-loading-animation-duration) var(--ease-bounce) forwards;
  }
  
  .immediate-loading-indicator.pill-breathing {
    animation: pillBreathe 2s ease-in-out infinite;
  }
  
  .immediate-loading-indicator.pill-success {
    border-color: var(--success-color);
    background: linear-gradient(135deg, var(--pill-loading-background), var(--success-light));
    animation: pillSuccess 0.6s ease-out forwards;
  }
  
  .immediate-loading-indicator.pill-error {
    border-color: var(--error-color);
    background: linear-gradient(135deg, var(--pill-loading-background), var(--error-light));
    animation: pillError 0.6s ease-out forwards;
  }
  
  /* Progress bar in pill loading indicator */
  .pill-loading-progress,
  .loading-progress {
    width: 100%;
    height: var(--pill-loading-progress-height);
    background-color: var(--bg-muted);
    border-radius: calc(var(--pill-loading-progress-height) / 2);
    overflow: hidden;
    margin-bottom: 4px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
  
  .pill-loading-bar,
  .loading-bar {
    height: 100%;
    width: 0%;
    background: var(--primary-gradient);
    background-size: 200% 100%;
    border-radius: calc(var(--pill-loading-progress-height) / 2);
    transition: width var(--pill-loading-animation-duration) var(--ease-out);
    animation: pillProgressShimmer 1.5s linear infinite;
    will-change: width;
    position: relative;
    overflow: hidden;
  }
  
  .pill-loading-bar::after,
  .loading-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: pillProgressShimmer 1.5s infinite;
  }
  
  /* Loading content section */
  .immediate-loading-content,
  .loading-content {
    display: flex;
    align-items: center;
    padding: var(--immediate-loading-content-padding);
    flex: 1;
  }
  
  .immediate-loading-main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
  }
  
  .immediate-loading-spinner,
  .loading-spinner {
    width: var(--immediate-loading-spinner-size);
    height: var(--immediate-loading-spinner-size);
    border: 2px solid transparent;
    border-top-color: var(--primary-color);
    border-left-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 8px;
    flex-shrink: 0;
    will-change: transform;
  }
  
  .immediate-loading-text,
  .loading-text {
    font-size: var(--immediate-loading-text-size);
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    line-height: 1.2;
  }
  
  /* Enhanced States */
  .immediate-loading-indicator.error .pill-loading-bar,
  .smart-loading-indicator.error .loading-bar {
    background: linear-gradient(90deg, var(--error-color), var(--error-dark));
    animation: none;
  }
  
  .immediate-loading-indicator.error .immediate-loading-spinner,
  .smart-loading-indicator.error .loading-spinner {
    border-top-color: var(--error-color);
    border-left-color: var(--error-color);
    animation: pillSpinnerError 0.6s ease-in-out;
  }
  
  .immediate-loading-indicator.error .immediate-loading-text,
  .smart-loading-indicator.error .loading-text {
    color: var(--error-color);
  }
  
  .immediate-loading-indicator.success .pill-loading-bar,
  .smart-loading-indicator.success .loading-bar {
    background: linear-gradient(90deg, var(--success-color), var(--success-dark));
    animation: none;
  }
  
  .immediate-loading-indicator.success .immediate-loading-spinner,
  .smart-loading-indicator.success .loading-spinner {
    border-top-color: var(--success-color);
    border-left-color: var(--success-color);
    animation: pillSpinnerSuccess 1s ease-in-out;
  }
  
  .immediate-loading-indicator.success .immediate-loading-text,
  .smart-loading-indicator.success .loading-text {
    color: var(--success-color);
  }
  
  /* Mini mode for mobile and fast actions */
  .immediate-loading-indicator.mini,
  .smart-loading-indicator.mini {
    width: var(--pill-loading-width-mobile);
    height: calc(var(--pill-loading-height) - 8px);
    padding: calc(var(--pill-loading-padding) - 1px);
  }
  
  .immediate-loading-indicator.mini .immediate-loading-content,
  .smart-loading-indicator.mini .loading-content {
    padding: 8px 12px;
  }
  
  .immediate-loading-indicator.mini .immediate-loading-spinner,
  .smart-loading-indicator.mini .loading-spinner {
    width: 16px;
    height: 16px;
  }
  
  .immediate-loading-indicator.mini .immediate-loading-text,
  .smart-loading-indicator.mini .loading-text {
    font-size: 0.75rem;
  }
  
  /* Mobile adjustments */
  @media (max-width: 768px) {
    .immediate-loading-indicator,
    .smart-loading-indicator {
      bottom: calc(var(--bottom-navbar-height) + max(10px, env(safe-area-inset-bottom)));
      width: var(--pill-loading-width-mobile);
      height: calc(var(--pill-loading-height) - 4px);
    }
  }
  
  /* Top Loading Bar - For quick actions */
  .top-loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: transparent;
    z-index: var(--z-loading);
    transform: translateY(-3px);
    transition: transform 0.2s ease;
    will-change: transform;
    pointer-events: none;
  }
  
  .top-loading-bar.active {
    transform: translateY(0);
  }
  
  .top-loading-bar::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 25%;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    animation: loading-shimmer 0.8s infinite;
    will-change: left;
  }
  
  /* ====================
     ENHANCED SKELETON LOADER WITH PILL SYNCHRONIZATION
     ==================== */
  
  .skeleton-loader {
    width: 100%;
    padding: 20px;
    opacity: var(--skeleton-opacity);
    pointer-events: none;
    transition: opacity var(--skeleton-progress-transition);
  }
  
  .skeleton-loader:not([hidden]) {
    display: block;
  }
  
  .skeleton-loader.pill-sync {
    position: relative;
  }
  
  .skeleton-loader.pill-sync-active {
    opacity: 1;
  }
  
  .skeleton,
  .skeleton-line,
  .skeleton-card {
    background: linear-gradient(
      90deg, 
      var(--skeleton-base-color) 0%, 
      var(--skeleton-shimmer-color) 50%, 
      var(--skeleton-base-color) 100%
    );
    background-size: 200% 100%;
    border-radius: var(--skeleton-border-radius);
    animation: skeletonShimmer var(--skeleton-animation-duration) ease-in-out infinite;
    transition: opacity var(--skeleton-progress-transition), transform var(--skeleton-progress-transition);
  }
  
  /* Enhanced Skeleton with Pill Synchronization */
  .pill-skeleton {
    position: relative;
    overflow: hidden;
    opacity: 0.6;
    transform: scale(1);
    transition: all var(--skeleton-progress-transition);
  }
  
  .pill-skeleton.skeleton-active {
    opacity: 0.8;
    animation: skeletonActivate 0.3s ease-out forwards;
  }
  
  .pill-skeleton.skeleton-completing {
    opacity: 0.9;
    transform: scale(1.01);
  }
  
  .pill-skeleton.pill-skeleton-sync {
    position: relative;
  }
  
  .pill-skeleton.pill-skeleton-sync::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    opacity: 0;
    transform: translateX(-100%);
    animation: skeletonPillSync var(--skeleton-animation-duration) ease-in-out infinite;
    animation-delay: var(--skeleton-delay, 0ms);
  }
  
  .pill-skeleton.skeleton-expanding::before {
    animation-duration: calc(var(--skeleton-animation-duration) * 0.8);
  }
  
  .pill-skeleton.skeleton-loading::before {
    opacity: 0.3;
    animation-duration: var(--skeleton-animation-duration);
  }
  
  .pill-skeleton.skeleton-finishing::before {
    opacity: 0.5;
    animation-duration: calc(var(--skeleton-animation-duration) * 1.2);
  }
  
  .skeleton-title {
    height: 40px;
    margin-bottom: 15px;
    width: 60%;
  }
  
  .skeleton-subtitle {
    height: 25px;
    margin-bottom: 40px;
    width: 40%;
  }
  
  .skeleton-section {
    margin-bottom: 30px;
  }
  
  .skeleton-line {
    height: 15px;
    margin-bottom: 10px;
    width: 100%;
  }
  
  .skeleton-line-short {
    width: 60%;
  }
  
  .skeleton-line-medium {
    width: 80%;
  }
  
  .skeleton-card {
    height: 150px;
    margin-bottom: 20px;
    border-radius: var(--border-radius-lg);
  }
  
  /* Pill-specific skeleton progress indication */
  .pill-skeleton[style*="--skeleton-progress"] {
    position: relative;
  }
  
  .pill-skeleton[style*="--skeleton-progress"]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: var(--skeleton-progress, 0%);
    background: var(--primary-color);
    border-radius: 1px;
    transition: width var(--skeleton-progress-transition);
  }
  
  /* Reading Progress Indicator */
  .immediate-progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(0,0,0,0.1);
    z-index: var(--z-fixed);
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  
  [data-theme="dark"] .immediate-progress-container {
    background: rgba(255,255,255,0.1);
  }
  
  .instant-progress-bar {
    height: 100%;
    background: var(--primary-gradient);
    background-size: 200% 100%;
    width: 0%;
    transition: width 0.1s ease;
    animation: loading-progress 2s linear infinite;
  }
  
  /* Screen Reader Announcer */
  .sr-announcer {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    pointer-events: none;
  }
  
  /* Enhanced Back to Top Button */
  .back-to-top {
    position: fixed;
    right: 25px;
    bottom: max(25px, calc(25px + env(safe-area-inset-bottom)));
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--accent-color);
    color: white;
    border: none;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-fixed);
    transition: transform 0.3s var(--ease-bounce), 
                opacity 0.3s ease, 
                box-shadow 0.3s ease,
                background-color 0.3s ease;
    opacity: 0;
    transform: scale(0.8) translateY(20px);
    pointer-events: none;
    -webkit-tap-highlight-color: transparent;
  }
  
  .back-to-top.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
  }
  
  .back-to-top:hover, .back-to-top:focus {
    background-color: var(--accent-color-hover);
    transform: scale(1.05) translateY(-2px);
    box-shadow: var(--shadow-lg);
  }
  
  .back-to-top:active {
    transform: scale(0.95);
  }
  
  .button-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background-color: var(--card-bg);
    color: var(--text-color);
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: var(--border-radius-sm);
    white-space: nowrap;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
  }
  
  .back-to-top:hover .button-tooltip,
  .back-to-top:focus .button-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-4px);
  }
  
  /* Improved Error Display */
  .error-display {
    position: relative;
    margin: 2rem auto;
    padding: 1.5rem;
    background-color: rgba(var(--error-rgb), 0.05);
    border-left: 4px solid var(--error-color);
    border-radius: var(--border-radius-md);
    max-width: 600px;
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.3s var(--ease-bounce), opacity 0.3s ease;
    box-shadow: var(--shadow-md);
  }
  
  .error-display.show-error {
    transform: translateY(0);
    opacity: 1;
  }
  
  .error-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .error-icon {
    color: var(--error-color);
    margin-bottom: 1rem;
    animation: pulse 2s infinite;
  }
  
  .error-title {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: var(--error-color);
  }
  
  .error-message {
    font-weight: 500;
    margin-bottom: 1.5rem;
    color: var(--text-color);
  }
  
  .error-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
  }
  
  /* Content Error Display */
  .content-error {
    position: relative;
    margin: 2rem auto;
    padding: 2rem;
    background-color: var(--card-bg);
    border-radius: var(--border-radius-lg);
    max-width: 600px;
    transform: translateY(20px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s var(--ease-bounce), opacity 0.3s ease, visibility 0.3s ease;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
  }
  
  .content-error.show-error {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  
  .content-error .error-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
  }
  
  .content-error .error-close-btn:hover {
    color: var(--text-color);
    background-color: var(--bg-muted);
  }
  
  /* Enhanced Toast Notifications - Mobile and Tablet Optimized */
  .toast-container {
    position: fixed;
    z-index: var(--z-toast);
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
  }
  
  /* Mobile positioning - takes full width with improved visibility */
  @media (max-width: 768px) {
    .toast-container {
      bottom: calc(var(--bottom-navbar-height) + max(20px, env(safe-area-inset-bottom, 10px)));
      left: 10px;
      right: 10px;
      padding: 0 10px;
    }
  }
  
  /* Tablet positioning - balanced approach */
  @media (min-width: 769px) and (max-width: 1024px) {
    .toast-container {
      bottom: 20px;
      right: 20px;
      left: auto;
      max-width: 400px;
    }
  }
  
  /* Desktop positioning - corner position */
  @media (min-width: 1025px) {
    .toast-container {
      bottom: 20px;
      right: 20px;
      left: auto;
      max-width: 400px;
    }
  }
  
  .toast {
    background-color: var(--card-bg);
    color: var(--text-color);
    padding: 14px 18px;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.3s var(--ease-bounce), opacity 0.3s ease;
    pointer-events: auto;
    margin-bottom: 0px;
    overflow: hidden;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--border-color);
    position: relative;
    max-width: 100%;
  }
  
  /* Mobile toast optimizations */
  @media (max-width: 768px) {
    .toast {
      width: 100%;
      padding: 16px;
      border-radius: var(--border-radius-lg);
      font-size: 0.9rem;
      flex-wrap: wrap;
    }
    
    .toast-content {
      flex: 0 0 100%;
      max-width: calc(100% - 40px);
    }
    
    .toast-close {
      position: absolute;
      top: 16px;
      right: 16px;
    }
  }
  
  .toast.show {
    transform: translateY(0);
    opacity: 1;
  }
  
  .toast.toast-error {
    border-left: 4px solid var(--error-color);
  }
  
  .toast.toast-success {
    border-left: 4px solid var(--success-color);
  }
  
  .toast.toast-warning {
    border-left: 4px solid var(--warning-color);
  }
  
  .toast.toast-info {
    border-left: 4px solid var(--info-color);
  }
  
  /* Toast with persistent offline message */
  .toast.toast-persistent {
    background-color: var(--error-color);
    color: white;
    border-left: 4px solid transparent;
  }
  
  .toast.toast-persistent.toast-error {
    border-left-color: rgba(255, 255, 255, 0.2);
  }
  
  .toast-icon {
    flex-shrink: 0;
    margin-top: 2px;
  }
  
  .toast-content {
    flex: 1;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  
  .toast-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 5px;
    margin: -5px;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .toast-close:hover {
    color: var(--text-color);
  }
  
  /* Persistent toast styles for offline indicator */
  .toast-persistent .toast-close {
    color: rgba(255, 255, 255, 0.8);
  }
  
  .toast-persistent .toast-close:hover {
    color: white;
  }
  
  /* Enhanced button styles */
  .primary-button, 
  .secondary-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.2rem;
    border-radius: var(--border-radius-md);
    font-weight: 500;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
  }
  
  .primary-button {
    background-color: var(--primary-color);
    color: white;
  }
  
  .primary-button:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
  
  .secondary-button {
    background-color: var(--bg-light);
    color: var(--text-color);
  }
  
  .secondary-button:hover {
    background-color: var(--bg-muted);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
  }
  
  /* Main Container Layout */
  .main-container {
    display: flex;
    min-height: 100vh;
    min-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    position: relative;
    overflow: hidden;
  }
  
  .content-wrapper {
    flex: 1;
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
  
  /* Enhanced layout structure for static sidebar/navbar */
  .layout-with-sidebar {
    display: flex;
    min-height: 100vh;
    width: 100%;
    position: relative;
  }
  
  /* Static sidebar that remains visible during navigation */
  .static-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    width: var(--sidebar-width);
    flex-shrink: 0;
    z-index: 50;
    background-color: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    transition: transform 0.3s ease;
    will-change: transform;
    box-shadow: var(--shadow-sm);
  }
  
  /* Content area that accommodates sidebar */
  .content-with-sidebar {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    max-width: calc(100% - var(--sidebar-width));
    position: relative;
  }
  
  /* Static navbar container */
  .static-navbar {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 100;
    background-color: var(--navbar-bg);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
  }
  
  /* Mobile navbar fixes and optimizations */
  .mobile-navbar {
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    z-index: var(--z-fixed);
  }
  
  .mobile-nav-item {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
  }
  
  /* Add ripple effect for tap feedback */
  .nav-ripple-effect {
    position: absolute;
    background-color: rgba(var(--accent-color-rgb), 0.1);
    border-radius: 50%;
    transform: scale(0);
    animation: ripple 0.6s ease-out;
    pointer-events: none;
  }
  
  @keyframes ripple {
    to {
      transform: scale(2);
      opacity: 0;
    }
  }
  
  /* Dynamic Content Container */
  .dynamic-content {
    position: relative;
    min-height: 200px;
    transition: opacity var(--current-network-speed);
  }
  
  .dynamic-content.is-loading {
    opacity: 0.7;
    pointer-events: none;
  }
  
  .dynamic-content.pill-transitioning {
    position: relative;
  }
  
  .dynamic-content.pill-transitioning::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, var(--primary-light), transparent);
    opacity: 0;
    animation: pillTransition 2s ease-in-out infinite;
    pointer-events: none;
  }
  
  @keyframes pillTransition {
    0%, 100% { opacity: 0; transform: translateX(-100%); }
    50% { opacity: 0.3; transform: translateX(100%); }
  }
  
  .dynamic-content-container {
    min-height: 400px;
  }
  
  /* Fluid content area with appropriate spacing */
  .fluid-content {
    padding: var(--page-padding) 0;
    transition: opacity var(--current-network-speed);
    min-height: 400px;
  }
  
  /* Enhanced offline mode */
  .offline-mode {
    position: relative;
  }
  
  .offline-mode::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--offline-overlay);
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
  }
  
  .offline-content {
    position: relative;
    margin: 2rem auto;
    padding: 2rem;
    background-color: var(--card-bg);
    border-radius: var(--border-radius-lg);
    max-width: 600px;
    text-align: center;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    animation: slideUp 0.3s var(--ease-bounce);
  }
  
  .offline-icon {
    color: var(--warning-color);
    margin-bottom: 1.5rem;
    animation: offline-blink 2s infinite;
  }
  
  .offline-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-color);
  }
  
  .offline-message {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
  }
  
  .offline-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
  }
  
  /* NoScript Warning */
  .noscript-warning {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--error-color);
    color: white;
    padding: 15px;
    text-align: center;
    font-weight: bold;
    z-index: 9999;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  }
  
  /* Enhanced loading states for body */
  body.pill-loading {
    position: relative;
  }
  
  body.pill-loading::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.02);
    z-index: calc(var(--z-loading) - 1);
    opacity: 0;
    animation: loading-overlay-fade 0.5s ease-out forwards;
    pointer-events: none;
  }
  
  [data-theme="dark"] body.pill-loading::before {
    background: rgba(255, 255, 255, 0.02);
  }
  
  @keyframes loading-overlay-fade {
    to { opacity: 1; }
  }
  
  /* Navigation feedback during pill loading */
  body.pill-loading .nav-link-active,
  body.pill-loading .mobile-nav-item.active .mobile-nav-link {
    position: relative;
    overflow: hidden;
  }
  
  body.pill-loading .nav-link-active::before,
  body.pill-loading .mobile-nav-item.active .mobile-nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.15), transparent);
    animation: loading-shimmer 1.5s infinite;
    pointer-events: none;
    border-radius: inherit;
  }
  
  /* Utility classes for animations */
  .fade-in {
    animation: fadeIn 0.5s ease forwards;
  }
  
  .fade-out {
    animation: fadeOut 0.5s ease forwards;
  }
  
  .slide-up {
    animation: slideUp 0.5s var(--ease-out) forwards;
  }
  
  .slide-down {
    animation: slideDown 0.5s var(--ease-out) forwards;
  }
  
  .zoom-in {
    animation: zoomIn 0.5s var(--ease-out) forwards;
  }
  
  /* Add animation delays for staggered effects */
  .stagger-item {
    opacity: 0;
  }
  
  .stagger-item.animated {
    opacity: 1;
    animation: fadeIn 0.5s ease forwards;
  }
  
  .stagger-delay-1 { animation-delay: 100ms; }
  .stagger-delay-2 { animation-delay: 200ms; }
  .stagger-delay-3 { animation-delay: 300ms; }
  .stagger-delay-4 { animation-delay: 400ms; }
  .stagger-delay-5 { animation-delay: 500ms; }
  
  /* Ensure proper z-index layering */
  .fluid-content {
    position: relative;
    z-index: 1;
  }
  
  /* Enhanced focus indicators for keyboard navigation */
  :focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
    position: relative;
    z-index: 2;
  }
  
  /* Optimize CPU/GPU rendering */
  .hardware-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
    will-change: transform, opacity;
  }
  
  /* Loading state styles */
  .loading-state {
    opacity: 0.7;
    pointer-events: none;
  }
  
  /* Adding smooth gradient animations */
  .animate-gradient {
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
  }
  
  /* Optimize for touch devices */
  @media (hover: hover) and (pointer: fine) {
    .hover-effect:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-lg);
    }
  }
  
  /* Device-specific optimizations */
  .ios-device .smooth-scroll {
    -webkit-overflow-scrolling: touch;
  }
  
  /* Animation for appearing items */
  .appear-animation {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  
  .appear-animation.appeared {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Enhanced link styles with better hover effects */
  a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease, text-decoration 0.2s ease;
  }
  
  a:hover {
    color: var(--primary-dark);
  }
  
  /* Mobile nav overlay */
  .mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 800;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  
  .mobile-nav-overlay.active {
    opacity: 1;
    visibility: visible;
  }
  
  /* Enhanced Offline Mode Styles */
  .offline-mode body {
    position: relative;
  }
  
  .offline-mode .offline-indicator {
    display: block;
  }
  
  .offline-indicator {
    display: none;
    position: fixed;
    top: 10px;
    right: 10px;
    background: var(--warning-color);
    color: white;
    padding: 5px 10px;
    border-radius: var(--border-radius-sm);
    font-size: 0.75rem;
    z-index: var(--z-notification);
    animation: pulse 2s infinite;
  }
  
  /* Cached pages modal styling */
  .modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  
  .modal.active {
    opacity: 1;
    visibility: visible;
  }
  
  .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
  }
  
  .modal-content {
    position: relative;
    background-color: var(--card-bg);
    border-radius: var(--border-radius-lg);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    z-index: 1;
    animation: zoomIn 0.3s var(--ease-bounce);
  }
  
  .modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .modal-title {
    font-size: 1.25rem;
    margin: 0;
  }
  
  .modal-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
  }
  
  .modal-close:hover {
    background-color: var(--bg-muted);
    color: var(--text-color);
  }
  
  .modal-body {
    padding: 1.5rem;
  }
  
  .modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
  }
  
  /* Cached pages list styles */
  .cached-pages-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
  }
  
  .cached-pages-list li {
    margin-bottom: 0.5rem;
  }
  
  .cached-page-link {
    display: block;
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius-md);
    background-color: var(--bg-light);
    color: var(--text-color);
    text-decoration: none;
    transition: all 0.2s ease;
  }
  
  .cached-page-link:hover {
    background-color: var(--bg-muted);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    color: var(--primary-color);
    text-decoration: none;
  }
  
  /* Responsive Adjustments */
  @media (max-width: 1200px) {
    .static-sidebar {
      width: var(--sidebar-width-tablet);
    }
    
    .content-with-sidebar {
      max-width: calc(100% - var(--sidebar-width-tablet));
    }
  }
  
  /* Tablet layout */
  @media (max-width: 1024px) {
    .layout-with-sidebar {
      flex-direction: column;
    }
    
    .static-sidebar {
      position: relative;
      width: 100%;
      height: auto;
      max-height: none;
      overflow: visible;
      border-right: none;
      border-bottom: 1px solid var(--border-color);
    }
    
    .content-with-sidebar {
      max-width: 100%;
    }
  }
  
  @media (max-width: 768px) {
    .main-container {
      flex-direction: column;
    }
    
    .back-to-top {
      width: 45px;
      height: 45px;
      right: 20px;
    }
    
    .offline-actions {
      flex-direction: column;
      gap: 0.75rem;
    }
  }
  
  /* Mobile view with bottom navbar */
  @media (max-width: 480px) {
    :root {
      --bottom-navbar-height: 65px;
      --page-padding: var(--page-padding-mobile);
    }
    
    body {
      padding-bottom: env(safe-area-inset-bottom);
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
    }
    
    .back-to-top {
      width: 40px;
      height: 40px;
      right: 15px;
      bottom: calc(var(--bottom-navbar-height) + max(env(safe-area-inset-bottom), 0px) + 10px);
    }
    
    .static-sidebar {
      margin-bottom: 0.5rem;
    }
    
    .fluid-content {
      padding: var(--page-padding-mobile) 0;
    }
    
    .error-actions {
      flex-direction: column;
      gap: 0.75rem;
    }
    
    .offline-actions {
      flex-direction: column;
      gap: 0.75rem;
    }
    
    .modal-content {
      width: 95%;
      max-height: 80vh;
    }
  }
  
  /* Bottom Safe Area Fix for Mobile */
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .back-to-top {
      bottom: max(25px, calc(25px + env(safe-area-inset-bottom)));
    }
  
    .immediate-loading-indicator,
    .smart-loading-indicator {
      bottom: max(20px, calc(20px + env(safe-area-inset-bottom)));
    }
  
    @media (max-width: 768px) {
      .immediate-loading-indicator,
      .smart-loading-indicator {
        bottom: calc(var(--bottom-navbar-height) + max(10px, env(safe-area-inset-bottom)));
      }
    }
  }
  
  /* Optimization for reduced motion preferences */
  @media (prefers-reduced-motion: reduce) {
    .immediate-loading-spinner,
    .loading-spinner,
    .pill-loading-bar,
    .loading-bar,
    .top-loading-bar::after,
    .skeleton,
    .pill-skeleton {
      animation: none !important;
    }
    
    html, body {
      scroll-behavior: auto !important;
    }
    
    .transition-all,
    .transition-opacity,
    .transition-transform {
      transition: none !important;
    }
    
    .animate-all {
      animation: none !important;
    }
    
    .immediate-loading-indicator,
    .smart-loading-indicator {
      transition: opacity 0.2s ease !important;
      animation: none !important;
    }
    
    .immediate-loading-indicator.pill-expanding,
    .immediate-loading-indicator.pill-breathing,
    .immediate-loading-indicator.pill-success,
    .immediate-loading-indicator.pill-error {
      animation: none !important;
    }
    
    body.pill-loading .nav-link-active::before,
    body.pill-loading .mobile-nav-item.active .mobile-nav-link::before {
      animation: none !important;
      opacity: 0.1;
    }
  }
  
  /* Print Styles */
  @media print {
    body {
      background-color: white;
      color: black;
    }
    
    .back-to-top,
    .immediate-loading-system,
    .toast-container,
    .immediate-progress-container,
    .immediate-loading-indicator,
    .smart-loading-indicator,
    .top-loading-bar,
    .skeleton-loader {
      display: none !important;
    }
    
    .static-sidebar,
    .static-navbar {
      display: none !important;
    }
    
    .content-with-sidebar {
      max-width: 100% !important;
    }
    
    a[href]:after {
      content: " (" attr(href) ")";
      font-size: 0.9em;
      color: #666;
    }
    
    @page {
      margin: 1.5cm;
    }
  }