:root {
    /* Light Theme */
    --bg-primary-light: #f8fafc;
    --bg-secondary-light: #ffffff;
    --text-primary-light: #212529;
    --text-secondary-light: #495057;
    --accent-light: #3dbdf5;
    --accent-hover-light: #2ba3d4;
    --accent-light-light: #7dd3f7;
    --accent-alpha-light: rgba(61, 189, 245, 0.1);
    --border-light: #dad9df;
    --shadow-light: rgba(0, 0, 0, 0.06);
    
    /* Semantic Colors - Light Theme */
    --success-light: #28a745;
    --success-hover-light: #218838;
    --warning-light: #ffc107;
    --warning-hover-light: #e0a800;
    --error-light: #dc3545;
    --error-hover-light: #c82333;



    /* Dark Theme - Enhanced Professional Colors */
    --bg-primary-dark: #0a0d14;
    --bg-secondary-dark: #0f1419;
    --text-primary-dark: #e6e8eb;
    --text-secondary-dark: #8b949e;
    --accent-dark: #58a6ff;
    --accent-hover-dark: #4a9eff;
    --accent-light-dark: #7bb8ff;
    --accent-alpha-dark: rgba(88, 166, 255, 0.1);
    --border-dark: #21262d;
    --shadow-dark: rgba(1, 4, 9, 0.9);
    --surface-dark: #161b22;
    --surface-elevated-dark: #1c2128;
    --surface-hover-dark: #21262d;
    
    /* Semantic Colors - Dark Theme */
    --success-dark: #3fb950;
    --success-hover-dark: #2ea043;
    --warning-dark: #d29922;
    --warning-hover-dark: #bf8700;
    --error-dark: #f85149;
    --error-hover-dark: #da3633;
    
    /* Palette Colors - Full 8-color support */
    --c1: #000; --c2: #000; --c3: #000; --c4: #000; --c5: #000; --c6: #000; --c7: #000; --c8: #000;
    --c1_alpha: rgba(0, 0, 0, 0.1); --c2_alpha: rgba(0, 0, 0, 0.1); --c3_alpha: rgba(0, 0, 0, 0.1); --c4_alpha: rgba(0, 0, 0, 0.1); --c5_alpha: rgba(0, 0, 0, 0.1); --c6_alpha: rgba(0, 0, 0, 0.1); --c7_alpha: rgba(0, 0, 0, 0.1); --c8_alpha: rgba(0, 0, 0, 0.1);
    --accent_alpha: rgba(61, 189, 245, 0.1);
    
    /* Light Theme Color Palette - Still in use */
    --color-palette-1: #f8fafc;
    --color-palette-2: #fefeff;
    --color-palette-3: #faf7fd;
    --color-palette-5: #ffffff;
    --color-palette-6: #faf9fc;
    --color-palette-7: #f9f9fc;
    --color-palette-23: #dad9df;
    --color-palette-24: #fbfcfe;
    --color-palette-25: #f9fafc;
    --color-palette-26: #959fae;
    --color-palette-27: #3dbdf5;
    --color-palette-28: #fffeff;
    --color-palette-29: #29315a;

    /* ===== ULTIMATE RESPONSIVE UI/UX SYSTEM ===== */
    
    /* Fluid Typography Scale */
    --font-size-xs: clamp(0.75rem, 2vw, 0.875rem);
    --font-size-sm: clamp(0.875rem, 2.5vw, 1rem);
    --font-size-base: clamp(1rem, 3vw, 1.125rem);
    --font-size-lg: clamp(1.125rem, 3.5vw, 1.25rem);
    --font-size-xl: clamp(1.25rem, 4vw, 1.5rem);
    --font-size-2xl: clamp(1.5rem, 4.5vw, 1.875rem);
    --font-size-3xl: clamp(1.875rem, 5vw, 2.25rem);
    
    /* Fluid Spacing Scale */
    --space-xs: clamp(0.25rem, 1vw, 0.5rem);
    --space-sm: clamp(0.5rem, 1.5vw, 0.75rem);
    --space-md: clamp(0.75rem, 2vw, 1rem);
    --space-lg: clamp(1rem, 2.5vw, 1.5rem);
    --space-xl: clamp(1.5rem, 3vw, 2rem);
    --space-2xl: clamp(2rem, 4vw, 3rem);
    
    /* Fluid Border Radius */
    --radius-sm: clamp(0.25rem, 1vw, 0.375rem);
    --radius-md: clamp(0.375rem, 1.5vw, 0.5rem);
    --radius-lg: clamp(0.5rem, 2vw, 0.75rem);
    --radius-xl: clamp(0.75rem, 2.5vw, 1rem);
    
    /* Fluid Padding/Margin */
    --padding-xs: clamp(0.25rem, 1vw, 0.5rem);
    --padding-sm: clamp(0.5rem, 1.5vw, 0.75rem);
    --padding-md: clamp(0.75rem, 2vw, 1rem);
    --padding-lg: clamp(1rem, 2.5vw, 1.5rem);
    --padding-xl: clamp(1.5rem, 3vw, 2rem);
    
    /* Responsive Container Widths */
    --container-xs: clamp(320px, 95vw, 480px);
    --container-sm: clamp(480px, 95vw, 640px);
    --container-md: clamp(640px, 95vw, 768px);
    --container-lg: clamp(768px, 95vw, 1024px);
    --container-xl: clamp(1024px, 95vw, 1280px);
    --container-2xl: clamp(1280px, 95vw, 1536px);
    
    /* Responsive Grid Gaps */
    --gap-xs: clamp(0.25rem, 1vw, 0.5rem);
    --gap-sm: clamp(0.5rem, 1.5vw, 0.75rem);
    --gap-md: clamp(0.75rem, 2vw, 1rem);
    --gap-lg: clamp(1rem, 2.5vw, 1.5rem);
    --gap-xl: clamp(1.5rem, 3vw, 2rem);
    
    /* Responsive Component Heights */
    --input-height-sm: clamp(2rem, 6vw, 2.5rem);
    --input-height-md: clamp(2.5rem, 7vw, 3rem);
    --input-height-lg: clamp(3rem, 8vw, 3.5rem);
    
    /* Responsive Button Sizes */
    --btn-height-sm: clamp(2rem, 6vw, 2.25rem);
    --btn-height-md: clamp(2.5rem, 7vw, 2.75rem);
    --btn-height-lg: clamp(3rem, 8vw, 3.25rem);
    
    /* Responsive Icon Sizes */
    --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, 3.5vw, 1.75rem);
    --icon-xl: clamp(1.75rem, 4vw, 2rem);
    
    /* Responsive Shadow Depths */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Responsive Animation Durations */
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    
    /* Responsive Z-Index Scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-popup: 1070;
    --z-toast: 1080;
    
    /* Responsive Breakpoints (for JavaScript) */
--breakpoint-xs: 320px;
--breakpoint-sm: 480px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
--breakpoint-2xl: 1536px;

/* ===== THEME TRANSITION OPTIMIZATIONS ===== */
/* Optimized theme transitions for instant responsiveness */
/* Optimize theme transitions - minimal and fast */
* {
    /* Minimal transitions for performance */
    transition: background-color 0.05s ease-out, 
                color 0.05s ease-out, 
                border-color 0.05s ease-out,
                box-shadow 0.05s ease-out;
}

/* Disable transitions during theme switching for instant feedback */
body.theme-transitioning *,
body.theme-transitioning *::before,
body.theme-transitioning *::after {
    transition: none !important;
}

/* Optimize theme-specific transitions */
.light-theme,
.dark-theme {
    /* Ensure instant theme application */
    transition: none;
}

/* Optimize theme toggle button for instant feedback */
#theme-toggle {
    /* Ensure instant visual feedback */
    transition: transform 0.05s ease-out, 
                background-color 0.05s ease-out,
                box-shadow 0.05s ease-out;
}

#theme-toggle:active {
    /* Instant feedback on click */
    transform: scale(0.95);
    transition: transform 0.05s ease-out;
}

/* Optimize theme icon transitions */
#theme-toggle svg {
    transition: opacity 0.1s ease-out, 
                transform 0.1s ease-out;
}

/* Instant theme icon switching */
#theme-toggle svg.hidden {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
}

#theme-toggle svg:not(.hidden) {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}
}

/* ===== ULTIMATE RESPONSIVE BASE STYLES ===== */

/* Fluid Typography System */
.text-fluid-xs { font-size: var(--font-size-xs); }
.text-fluid-sm { font-size: var(--font-size-sm); }
.text-fluid-base { font-size: var(--font-size-base); }
.text-fluid-lg { font-size: var(--font-size-lg); }
.text-fluid-xl { font-size: var(--font-size-xl); }
.text-fluid-2xl { font-size: var(--font-size-2xl); }
.text-fluid-3xl { font-size: var(--font-size-3xl); }

/* Fluid Spacing System */
.space-fluid-xs { gap: var(--space-xs); }
.space-fluid-sm { gap: var(--space-sm); }
.space-fluid-md { gap: var(--space-md); }
.space-fluid-lg { gap: var(--space-lg); }
.space-fluid-xl { gap: var(--space-xl); }
.space-fluid-2xl { gap: var(--space-2xl); }

/* Fluid Padding System */
.p-fluid-xs { padding: var(--padding-xs); }
.p-fluid-sm { padding: var(--padding-sm); }
.p-fluid-md { padding: var(--padding-md); }
.p-fluid-lg { padding: var(--padding-lg); }
.p-fluid-xl { padding: var(--padding-xl); }

/* Fluid Margin System */
.m-fluid-xs { margin: var(--space-xs); }
.m-fluid-sm { margin: var(--space-sm); }
.m-fluid-md { margin: var(--space-md); }
.m-fluid-lg { margin: var(--space-lg); }
.m-fluid-xl { margin: var(--space-xl); }

/* Fluid Border Radius System */
.rounded-fluid-sm { border-radius: var(--radius-sm); }
.rounded-fluid-md { border-radius: var(--radius-md); }
.rounded-fluid-lg { border-radius: var(--radius-lg); }
.rounded-fluid-xl { border-radius: var(--radius-xl); }

/* Responsive Container System */
.container-fluid-xs { max-width: var(--container-xs); }
.container-fluid-sm { max-width: var(--container-sm); }
.container-fluid-md { max-width: var(--container-md); }
.container-fluid-lg { max-width: var(--container-lg); }
.container-fluid-xl { max-width: var(--container-xl); }
.container-fluid-2xl { max-width: var(--container-2xl); }

/* Responsive Grid System */
.grid-fluid-xs { gap: var(--gap-xs); }
.grid-fluid-sm { gap: var(--gap-sm); }
.grid-fluid-md { gap: var(--gap-md); }
.grid-fluid-lg { gap: var(--gap-lg); }
.grid-fluid-xl { gap: var(--gap-xl); }

/* Responsive Input System */
.input-fluid-sm { height: var(--input-height-sm); }
.input-fluid-md { height: var(--input-height-md); }
.input-fluid-lg { height: var(--input-height-lg); }

/* Responsive Button System */
.btn-fluid-sm { height: var(--btn-height-sm); }
.btn-fluid-md { height: var(--btn-height-md); }
.btn-fluid-lg { height: var(--btn-height-lg); }

/* Custom Number Input Styling */
.custom-number-input {
    position: relative;
    min-height: 2.5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
}

.custom-number-input input[type="number"] {
    text-align: center;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-primary);
    background: transparent;
    border: none;
    outline: none;
    width: 100%;
    padding: 0.5rem 0;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

.custom-number-input input[type="number"]::-webkit-outer-spin-button,
.custom-number-input input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.custom-number-input input[type="number"]:focus {
    outline: none;
    box-shadow: none;
}

.custom-number-input:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent_alpha);
}

.custom-number-btn {
    position: relative;
    z-index: 10;
    border: none;
    background: transparent;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 2rem;
}

.custom-number-btn:hover {
    background-color: var(--primary_alpha);
    color: var(--text-primary);
}

.custom-number-btn:active {
    background-color: var(--primary_alpha);
    transform: scale(0.95);
}

.custom-number-btn:focus {
    outline: none;
    background-color: var(--primary_alpha);
    box-shadow: 0 0 0 2px var(--accent_alpha);
}

.custom-number-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.custom-number-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
    color: var(--text-secondary);
}

.custom-number-btn:disabled svg {
    opacity: 0.5;
}

.custom-number-btn svg {
    transition: transform 0.2s ease-in-out;
}

.custom-number-btn:hover svg {
    transform: scale(1.1);
}

.custom-number-btn:active svg {
    transform: scale(0.9);
}

/* Dark theme specific styling */
.dark-theme .custom-number-btn:hover {
    background-color: var(--primary_alpha);
}

.dark-theme .custom-number-btn:focus {
    background-color: var(--primary_alpha);
}

/* Light theme specific styling */
.light-theme .custom-number-btn:hover {
    background-color: var(--primary_alpha);
}

.light-theme .custom-number-btn:focus {
    background-color: var(--primary_alpha);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .custom-number-input {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        min-width: 0;
    }
    
    .custom-number-btn {
        width: 2.5rem;
        height: 2.5rem;
        flex-shrink: 0;
    }
    
    .custom-number-btn svg {
        width: 1rem;
        height: 1rem;
    }
    
    .custom-number-input input[type="number"] {
        min-width: 0;
        flex: 1;
    }
}

@media (max-width: 480px) {
    .custom-number-input {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        min-width: 0;
        width: 100%;
    }
    
    .custom-number-btn {
        width: 2.25rem;
        height: 2.25rem;
        flex-shrink: 0;
    }
    
    .custom-number-btn svg {
        width: 0.875rem;
        height: 0.875rem;
    }
    
    .custom-number-input input[type="number"] {
        min-width: 0;
        flex: 1;
        font-size: 0.75rem;
    }
}

/* Extra small screen support */
@media (max-width: 360px) {
    .custom-number-input {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        min-width: 0;
        width: 100%;
    }
    
    .custom-number-btn {
        width: 2rem;
        height: 2rem;
        flex-shrink: 0;
    }
    
    .custom-number-btn svg {
        width: 0.75rem;
        height: 0.75rem;
    }
    
    .custom-number-input input[type="number"] {
        min-width: 0;
        flex: 1;
        font-size: 0.7rem;
        padding: 0.25rem 0;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .custom-number-btn {
        border: 1px solid currentColor;
    }
    
    .custom-number-btn:hover {
        background-color: var(--accent);
        color: white;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .custom-number-btn svg {
        transition: none;
    }
    
    .custom-number-btn:hover svg {
        transform: none;
    }
    
    .custom-number-btn:active svg {
        transform: none;
    }
}

/* Responsive Icon System */
.icon-fluid-xs { width: var(--icon-xs); height: var(--icon-xs); }
.icon-fluid-sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon-fluid-md { width: var(--icon-md); height: var(--icon-md); }
.icon-fluid-lg { width: var(--icon-lg); height: var(--icon-lg); }
.icon-fluid-xl { width: var(--icon-xl); height: var(--icon-xl); }

/* ===== ENHANCED RESPONSIVE UTILITIES ===== */

/* Responsive Visibility */
@media (max-width: 480px) {
    .hidden-xs { display: none !important; }
    .block-xs { display: block !important; }
    .flex-xs { display: flex !important; }
}

@media (min-width: 481px) and (max-width: 768px) {
    .hidden-sm { display: none !important; }
    .block-sm { display: block !important; }
    .flex-sm { display: flex !important; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .hidden-md { display: none !important; }
    .block-md { display: block !important; }
    .flex-md { display: flex !important; }
}

@media (min-width: 1025px) {
    .hidden-lg { display: none !important; }
    .block-lg { display: block !important; }
    .flex-lg { display: flex !important; }
}

/* Responsive Text Alignment */
@media (max-width: 480px) {
    .text-center-xs { text-align: center !important; }
    .text-left-xs { text-align: left !important; }
    .text-right-xs { text-align: right !important; }
}

@media (min-width: 481px) and (max-width: 768px) {
    .text-center-sm { text-align: center !important; }
    .text-left-sm { text-align: left !important; }
    .text-right-sm { text-align: right !important; }
}

/* Responsive Flex Direction */
@media (max-width: 480px) {
    .flex-col-xs { flex-direction: column !important; }
    .flex-row-xs { flex-direction: row !important; }
}

@media (min-width: 481px) and (max-width: 768px) {
    .flex-col-sm { flex-direction: column !important; }
    .flex-row-sm { flex-direction: row !important; }
}

/* Responsive Grid Columns */
@media (max-width: 480px) {
    .grid-cols-1-xs { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
    .grid-cols-2-xs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .grid-cols-3-xs { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (min-width: 481px) and (max-width: 768px) {
    .grid-cols-1-sm { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
    .grid-cols-2-sm { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .grid-cols-3-sm { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* ===== ULTIMATE RESPONSIVE COMPONENT ENHANCEMENTS ===== */

/* Enhanced Responsive Cards */
.card-fluid {
    padding: var(--padding-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: all var(--duration-normal) ease;
}

.card-fluid:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

/* Enhanced Responsive Buttons */
.btn-fluid {
    height: var(--btn-height-md);
    padding: 0 var(--padding-lg);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    transition: all var(--duration-fast) ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    white-space: nowrap;
    cursor: pointer;
    border: none;
    outline: none;
}

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

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

/* Enhanced Responsive Inputs */
.input-fluid {
    height: var(--input-height-md);
    padding: 0 var(--padding-md);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    transition: all var(--duration-fast) ease;
    outline: none;
}

.input-fluid:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(61, 189, 245, 0.1);
}

/* Enhanced Responsive Selects */
.select-fluid {
    height: var(--input-height-md);
    padding: 0 var(--padding-md);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    transition: all var(--duration-fast) ease;
    outline: none;
    cursor: pointer;
}

.select-fluid:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(61, 189, 245, 0.1);
}

/* Enhanced Responsive Modals */
.modal-fluid {
    max-width: min(90vw, 600px);
    max-height: min(90vh, 800px);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

/* OLD TOOLTIP SYSTEM REMOVED - Replaced with modern popup card system */

/* ===== ULTIMATE RESPONSIVE LAYOUT SYSTEM ===== */

/* Responsive Container */
.container-fluid {
    width: 100%;
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--padding-md);
}

/* Enhanced full-screen layout optimizations */
/* ===== MEDIUM DESKTOP SLIDER THUMB OPTIMIZATION ===== */
@media (min-width: 1024px) and (max-width: 1279px) {
    /* Slightly smaller thumbs for medium desktop screens */
    .slider::-webkit-slider-thumb {
        height: 18px !important;
        width: 18px !important;
        margin-top: -6px !important;
    }
    
    .slider::-moz-range-thumb {
        height: 18px !important;
        width: 18px !important;
    }
    
    /* Responsive panel slider thumbs for medium desktop */
    #responsive-panel .slider::-webkit-slider-thumb {
        height: 18px !important;
        width: 18px !important;
        margin-top: -6px !important;
    }
    
    #responsive-panel .slider::-moz-range-thumb {
        height: 18px !important;
        width: 18px !important;
    }
}

@media (min-width: 1280px) {
    .container-fluid {
        max-width: var(--container-2xl);
        padding: 0 var(--padding-lg);
    }
    
    /* Enhanced palette display for large screens */
    #palette-display {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: var(--gap-lg);
        padding: var(--padding-xl);
    }
    
    /* Enhanced section spacing for large screens */
    .space-y-6.lg\\:space-y-8 {
        gap: var(--space-xl);
    }
    
    /* Enhanced live preview for large screens */
    #live-preview {
        padding: var(--padding-xl);
        min-height: 80vh;
    }
    
    /* ===== PROFESSIONAL SLIDER THUMB SIZING FOR DESKTOP ===== */
    
    /* Smaller, more professional slider thumbs for desktop screens */
    .slider::-webkit-slider-thumb {
        height: 16px !important;
        width: 16px !important;
        margin-top: -5px !important;
    }
    
    .slider::-moz-range-thumb {
        height: 16px !important;
        width: 16px !important;
    }
    
    /* Refined hover effects for smaller desktop thumbs */
    .slider::-webkit-slider-thumb:hover {
        transform: scale(1.1) !important; /* Reduced from 1.15 */
    }
    
    .slider::-moz-range-thumb:hover {
        transform: scale(1.1) !important; /* Reduced from 1.15 */
    }
    
    /* Refined active effects for smaller desktop thumbs */
    .slider::-webkit-slider-thumb:active {
        transform: scale(1.05) !important; /* Reduced from 1.1 */
    }
    
    .slider::-moz-range-thumb:active {
        transform: scale(1.05) !important; /* Reduced from 1.1 */
    }
    
    /* Professional focus ring sizing for desktop */
    .slider:focus::-webkit-slider-thumb {
        box-shadow: var(--slider-thumb-shadow-hover), 0 0 0 2px var(--slider-focus-ring) !important;
    }
    
    .slider:focus::-moz-range-thumb {
        box-shadow: var(--slider-thumb-shadow-hover), 0 0 0 2px var(--slider-focus-ring) !important;
    }
    
    /* Responsive panel slider thumbs also get desktop sizing */
    #responsive-panel .slider::-webkit-slider-thumb {
        height: 16px !important;
        width: 16px !important;
        margin-top: -5px !important;
    }
    
    #responsive-panel .slider::-moz-range-thumb {
        height: 16px !important;
        width: 16px !important;
    }
    
    #responsive-panel .slider::-webkit-slider-thumb:hover {
        transform: scale(1.1) !important;
    }
    
    #responsive-panel .slider::-moz-range-thumb:hover {
        transform: scale(1.1) !important;
    }
    
    #responsive-panel .slider::-webkit-slider-thumb:active {
        transform: scale(1.05) !important;
    }
    
    #responsive-panel .slider::-moz-range-thumb:active {
        transform: scale(1.05) !important;
    }
}

/* Responsive Grid */
.grid-fluid {
    display: grid;
    gap: var(--gap-md);
}

/* Responsive Flex */
.flex-fluid {
    display: flex;
    gap: var(--gap-md);
}

/* Responsive Stack */
.stack-fluid {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}

/* ===== ULTIMATE RESPONSIVE ANIMATIONS ===== */

/* Fluid Fade In */
@keyframes fluidFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fluid-fade-in {
    animation: fluidFadeIn var(--duration-normal) ease-out;
}

/* Fluid Scale In */
@keyframes fluidScaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-fluid-scale-in {
    animation: fluidScaleIn var(--duration-normal) ease-out;
}

/* Fluid Slide In */
@keyframes fluidSlideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-fluid-slide-in {
    animation: fluidSlideIn var(--duration-normal) ease-out;
}

/* ===== ULTIMATE RESPONSIVE INTERACTIONS ===== */

/* Fluid Hover Effects */
.hover-fluid {
    transition: all var(--duration-fast) ease;
}

.hover-fluid:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Fluid Focus Effects */
.focus-fluid:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(61, 189, 245, 0.2);
    border-color: var(--accent);
}

/* Fluid Active Effects */
.active-fluid:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

/* ===== ULTIMATE RESPONSIVE ACCESSIBILITY ===== */

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .btn-fluid {
        border: 2px solid currentColor;
    }
    
    .input-fluid,
    .select-fluid {
        border: 2px solid currentColor;
    }
    
    .card-fluid {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .animate-fluid-fade-in,
    .animate-fluid-scale-in,
    .animate-fluid-slide-in {
        animation: none;
    }
    
    .hover-fluid {
        transition: none;
    }
    
    .hover-fluid:hover {
        transform: none;
        box-shadow: var(--shadow-md);
    }
}

/* ===== ULTIMATE RESPONSIVE PERFORMANCE ===== */

/* Optimized Rendering */
.optimize-render {
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Smooth Scrolling */
.smooth-scroll {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* ===== ULTIMATE RESPONSIVE THEME SYSTEM ===== */

/* Enhanced Light Theme */
.light-theme {
    --bg-primary: var(--bg-primary-light);
    --bg-secondary: var(--bg-secondary-light);
    --text-primary: var(--text-primary-light);
    --text-secondary: var(--text-secondary-light);
    --accent: var(--accent-light);
    --accent-hover: var(--accent-hover-light);
    --accent-light: var(--accent-light-light);
    --accent-alpha: var(--accent-alpha-light);
    --border-color: var(--border-light);
    --shadow-color: var(--shadow-light);
    --success: var(--success-light);
    --success-hover: var(--success-hover-light);
    --warning: var(--warning-light);
    --warning-hover: var(--warning-hover-light);
    --error: var(--error-light);
    --error-hover: var(--error-hover-light);
    
    /* Enhanced Light Theme Shadows */
    --shadow-sm-light: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md-light: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg-light: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl-light: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Enhanced Dark Theme */
.dark-theme {
    --bg-primary: var(--bg-primary-dark);
    --bg-secondary: var(--bg-secondary-dark);
    --text-primary: var(--text-primary-dark);
    --text-secondary: var(--text-secondary-dark);
    --accent: var(--accent-dark);
    --accent-hover: var(--accent-hover-dark);
    --accent-light: var(--accent-light-dark);
    --accent-alpha: var(--accent-alpha-dark);
    --border-color: var(--border-dark);
    --shadow-color: var(--shadow-dark);
    --surface: var(--surface-dark);
    --surface-elevated: var(--surface-elevated-dark);
    --surface-hover: var(--surface-hover-dark);
    --success: var(--success-dark);
    --success-hover: var(--success-hover-dark);
    --warning: var(--warning-dark);
    --warning-hover: var(--warning-hover-dark);
    --error: var(--error-dark);
    --error-hover: var(--error-hover-dark);
    
    /* Enhanced Dark Theme Shadows */
    --shadow-sm-dark: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md-dark: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg-dark: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-xl-dark: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}

body {
    font-family: 'Inter', sans-serif;
    transition: background-color var(--duration-normal) ease, color var(--duration-normal) ease;
    
    /* CRITICAL: Global overflow prevention */
    overflow-x: hidden;
    overflow-y: hidden; /* Remove browser scroll */
    max-width: 100vw;
    min-width: 320px;
    height: 100vh; /* Full viewport height */
    
    /* Enhanced responsive typography */
    font-size: var(--font-size-base);
    line-height: 1.6;
    
    /* Enhanced responsive spacing */
    margin: 0;
    padding: 0;
    
    /* Enhanced responsive performance */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.light-theme {
    --bg-primary: var(--bg-primary-light);
    --bg-secondary: var(--bg-secondary-light);
    --text-primary: var(--text-primary-light);
    --text-secondary: var(--text-secondary-light);
    --accent: var(--accent-light);
    --border-color: var(--border-light);
    --shadow-color: var(--shadow-light);
    --success: var(--success-light);
    --warning: var(--warning-light);
    --error: var(--error-light);
}

.dark-theme {
    --bg-primary: var(--bg-primary-dark);
    --bg-secondary: var(--bg-secondary-dark);
    --text-primary: var(--text-primary-dark);
    --text-secondary: var(--text-secondary-dark);
    --accent: var(--accent-dark);
    --border-color: var(--border-dark);
    --shadow-color: var(--shadow-dark);
    --surface: var(--surface-dark);
    --surface-elevated: var(--surface-elevated-dark);
    --surface-hover: var(--surface-hover-dark);
    --success: var(--success-dark);
    --warning: var(--warning-dark);
    --error: var(--error-dark);
}

.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.border-color { border-color: var(--border-color); }
.accent-bg { background-color: var(--accent); }
.accent-text { color: var(--accent); }
.accent-border { border-color: var(--accent); }

/* Semantic Color Utilities */
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-error { color: var(--error); }
.bg-success { background-color: var(--success); }
.bg-warning { background-color: var(--warning); }
.bg-error { background-color: var(--error); }
.border-success { border-color: var(--success); }
.border-warning { border-color: var(--warning); }
.border-error { border-color: var(--error); }

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

/* Expandable Table Styles */
#wcag-matrix-hidden-rows {
    transition: all 0.3s ease-in-out;
}

#wcag-matrix-hidden-rows.hidden {
    display: none;
}

/* Table row visibility transitions */
tbody tr[role="row"] {
    transition: all 0.3s ease-in-out;
}

tbody tr[role="row"].hidden {
    display: none;
}

#wcag-matrix-expand-btn {
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
}

#wcag-matrix-expand-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

#wcag-matrix-expand-btn svg {
    transition: transform 0.2s ease-in-out;
}

#wcag-matrix-expand-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Subtle focus ring for expand button */
#wcag-matrix-expand-btn:focus {
    outline: none !important;
    box-shadow: 0 0 0 1px rgba(156, 163, 175, 0.3) !important;
}

/* Dark theme focus ring */
.dark-theme #wcag-matrix-expand-btn:focus {
    box-shadow: 0 0 0 1px rgba(75, 85, 99, 0.4) !important;
}

/* Remove any default browser focus styles */
#wcag-matrix-expand-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 1px rgba(156, 163, 175, 0.3);
}

.dark-theme #wcag-matrix-expand-btn:focus-visible {
    box-shadow: 0 0 0 1px rgba(75, 85, 99, 0.4);
}

/* Alternative: Completely invisible focus (uncomment if needed) */
/*
#wcag-matrix-expand-btn:focus,
#wcag-matrix-expand-btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
*/



.soft-shadow { box-shadow: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -1px var(--shadow-color); }
.smooth-transition { transition: all 0.3s ease-in-out; }

/* Component-specific styles using palette variables */
.preview-nav { background-color: var(--c1); color: var(--c5); }
.preview-button-primary { background-color: var(--c2); color: var(--c5); }
.preview-button-secondary { background-color: var(--c3); color: var(--c5); }
.preview-button-ghost { background-color: transparent; color: var(--c2); border: 1px solid var(--c2); }
.preview-card { background-color: var(--c5); border-color: var(--c4); }
.preview-card-header { color: var(--c1); }
.preview-card-body { color: var(--c2); }
.preview-alert { background-color: var(--c4); color: var(--c1); border-left-color: var(--c2); }
.preview-input { border-color: var(--c3); background-color: var(--c5); color: var(--c1); }
.preview-input:focus { border-color: var(--c2); box-shadow: 0 0 0 2px var(--c2_alpha); }
.preview-modal-content { background-color: var(--c5); }
.preview-modal-header { background-color: var(--c1); color: var(--c5); }
.preview-table { background-color: var(--c5); }
.preview-tab { color: var(--c2); }
.preview-tab-active { color: var(--c1); border-bottom-color: var(--c1); }

/* Toast Notification */
#toast {
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 500;
    opacity: 0;
    visibility: hidden;
    z-index: 99999;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* Base styling for all themes */
    background: var(--surface);
    border: 1px solid var(--border-color);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
}

/* Toast Z-Index Hierarchy:
 * - Toast: 99999 (highest priority, always on top)
 * - Platform Navigation Dropdown: 9999999 (dropdown menu), 9999998 (backdrop)
 * - Popup Cards: 999999 (with !important)
* - Popup Content: 10000 (with !important)
 * - Platform Preloader: 5000
 * - Modals: 9999 (Smart Color Wheel)
 * - Component Selector Panel: 50
 * - Component Selector Overlay: 40
 * - Panel Overlay: 40
 * - Other elements: 1-1000
 */
/* Light theme toast enhancements */
.light-theme #toast {
    background: #ffffff;
    border: 1px solid var(--border-color);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
}

/* Dark theme toast enhancements */
.dark-theme #toast {
    background: #1a1a1a;
    border: 1px solid var(--border-color);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 4px 16px rgba(0, 0, 0, 0.2);
    color: var(--text-primary);
}
#toast.show {
    bottom: 30px;
    opacity: 1;
    visibility: visible;
    transition: bottom 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.5s ease;
}

/* Component Selector Panel */
#component-selector-panel {
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    z-index: 200 !important; /* Highest priority - above overlay and tooltips */
    display: flex;
    flex-direction: column;
    background: 
        linear-gradient(135deg, var(--surface-elevated) 0%, var(--surface) 100%),
        radial-gradient(circle at 20% 80%, rgba(88, 166, 255, 0.05) 0%, transparent 50%);
    border-left: 1px solid var(--border-color);
    overflow-x: hidden;
    /* Header-aware positioning */
    top: var(--header-height, 4rem);
    height: calc(100vh - var(--header-height, 4rem));
}

/* Component Selector Overlay */
#overlay {
    transition: opacity 0.3s ease-in-out;
    backdrop-filter: blur(2px);
    top: var(--header-height, 4rem);
    height: calc(100vh - var(--header-height, 4rem));
    z-index: 150 !important; /* Below panel (200) but above tooltips (50) - overrides HTML z-[55] */
}
#component-selector-panel.open {
    transform: translateX(0);
}

/* Responsive adjustments for component selector */
@media (max-width: 768px) {
    #component-selector-panel {
        width: 100%;
        max-width: 100%;
        top: var(--header-height, 3.5rem);
        height: calc(100vh - var(--header-height, 3.5rem));
    }
    
    #overlay {
        top: var(--header-height, 3.5rem);
        height: calc(100vh - var(--header-height, 3.5rem));
    }
}

@media (max-width: 480px) {
    #component-selector-panel {
        padding: 1rem;
        top: var(--header-height, 3.25rem);
        height: calc(100vh - var(--header-height, 3.25rem));
    }
    
    #overlay {
        top: var(--header-height, 3.25rem);
        height: calc(100vh - var(--header-height, 3.25rem));
    }
}

/* Search input styling */
#component-search {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

#component-search:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent_alpha);
}

#component-search::placeholder {
    color: var(--text-secondary);
}

/* Dark theme search input enhancements */
.dark-theme #component-search {
    background: var(--surface);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    box-shadow: 
        0 1px 3px rgba(1, 4, 9, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.dark-theme #component-search:focus {
    background: var(--surface-elevated);
    border-color: var(--accent);
    box-shadow: 
        0 0 0 3px rgba(88, 166, 255, 0.15),
        0 2px 8px rgba(1, 4, 9, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

/* Showcase search input styling */
#showcase-search {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

#showcase-search:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent_alpha);
}

#showcase-search::placeholder {
    color: var(--text-secondary);
}

/* Dark theme showcase search input enhancements */
.dark-theme #showcase-search {
    background: var(--surface);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    box-shadow: 
        0 1px 3px rgba(1, 4, 9, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.dark-theme #showcase-search:focus {
    background: var(--surface-elevated);
    border-color: var(--accent);
    box-shadow: 
        0 0 0 3px rgba(88, 166, 255, 0.15),
        0 2px 8px rgba(1, 4, 9, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

/* Showcase search results styling */
.showcase-search-count {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--accent);
    font-weight: 500;
    margin-bottom: 1rem;
    animation: fadeInUp 0.3s ease-out;
}

.showcase-no-results {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
    animation: fadeInUp 0.3s ease-out;
}

.showcase-no-results svg {
    opacity: 0.5;
    margin-bottom: 1rem;
}

/* Filtered out components and categories */
.component-preview-container.filtered-out {
    display: none !important;
}

.category-section.filtered-out {
    display: none !important;
}

/* Enhanced Component Selector */
.component-selector-item {
    margin-bottom: 6px;
    width: 100%;
    box-sizing: border-box;
}

.component-selector-item label {
    transition: all 0.2s ease;
}

.component-selector-item label:hover {
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Component Grid Layout */
#component-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    min-height: 0;
    width: 100%;
}

/* Enhanced scrollbar for component list (matching showcase) */
#component-list::-webkit-scrollbar {
    width: 12px;
    background: transparent;
}

#component-list::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    margin: 4px 0;
}

#component-list::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--accent), var(--accent)/80);
    border-radius: 6px;
    border: 1px solid var(--accent);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

#component-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, var(--accent), var(--accent));
    border-color: var(--accent);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: scale(1.05);
}

#component-list::-webkit-scrollbar-thumb:active {
    background: linear-gradient(135deg, var(--accent), var(--accent)/90);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ===== DARK MODE VISIBILITY ENHANCEMENTS ===== */

/* Firefox scrollbar for component list */
#component-list {
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--bg-secondary);
}

/* Dark theme scrollbar enhancements for component list */
.dark-theme #component-list::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

.dark-theme #component-list::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--accent), var(--accent)/80);
    border-color: var(--accent);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ===== COLOR PALETTE GENERATOR SCROLLBAR STYLES ===== */

/* Color Palette Generator scrollbar - consistent with existing design */
#palette-generator::-webkit-scrollbar {
    width: 12px;
    background: transparent;
}

#palette-generator::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    margin: 4px 0;
}

#palette-generator::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--accent), var(--accent)/80);
    border-radius: 6px;
    border: 1px solid var(--accent);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

#palette-generator::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, var(--accent), var(--accent));
    border-color: var(--accent);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: scale(1.05);
}

#palette-generator::-webkit-scrollbar-thumb:active {
    background: linear-gradient(135deg, var(--accent), var(--accent)/90);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Firefox scrollbar for Color Palette Generator */
#palette-generator {
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--bg-secondary);
}

/* Dark theme scrollbar enhancements for Color Palette Generator */
.dark-theme #palette-generator::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

.dark-theme #palette-generator::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--accent), var(--accent)/80);
    border-color: var(--accent);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dark-theme #component-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, var(--accent), var(--accent));
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Dark theme component selector text visibility */
.dark-theme .component-selector-item label {
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.dark-theme .component-selector-item label .font-medium {
    color: var(--text-primary);
    font-weight: 600;
}

/* Dark theme component descriptions - Clear and readable */
.dark-theme .component-selector-item .text-xs {
    color: var(--text-secondary) !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-weight: 400;
    line-height: 1.4;
    transition: color 0.2s ease;
}

.dark-theme .component-selector-item:hover .text-xs {
    color: var(--text-primary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Force visibility for dark theme component descriptions */
.dark-theme #component-selector-panel .component-selector-item .text-xs {
    color: var(--text-secondary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.dark-theme #component-selector-panel .component-selector-item:hover .text-xs {
    color: var(--text-primary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Target the specific div structure from JavaScript */
.dark-theme .component-selector-item div .text-xs {
    color: var(--text-secondary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.dark-theme .component-selector-item:hover div .text-xs {
    color: var(--text-primary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Additional specificity for dark theme descriptions */
.dark-theme .component-selector-item label .text-xs {
    color: var(--text-secondary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.dark-theme .component-selector-item:hover label .text-xs {
    color: var(--text-primary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Target the exact structure: div > div > text-xs */
.dark-theme .component-selector-item div div .text-xs {
    color: var(--text-secondary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.dark-theme .component-selector-item:hover div div .text-xs {
    color: var(--text-primary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Override Tailwind classes with maximum specificity */
.dark-theme .component-selector-item .text-xs.text-secondary {
    color: var(--text-secondary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.dark-theme .component-selector-item:hover .text-xs.text-secondary {
    color: var(--text-primary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Maximum specificity override for dark theme */
.dark-theme #component-selector-panel .component-selector-item .text-xs.text-secondary {
    color: var(--text-secondary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.dark-theme #component-selector-panel .component-selector-item:hover .text-xs.text-secondary {
    color: var(--text-primary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Force visibility with !important for all possible combinations */
.dark-theme .component-selector-item div .text-xs.text-secondary {
    color: var(--text-secondary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.dark-theme .component-selector-item:hover div .text-xs.text-secondary {
    color: var(--text-primary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Target the exact JavaScript-generated structure */
.dark-theme .component-selector-item .text-xs.text-secondary.mt-1 {
    color: var(--text-secondary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.dark-theme .component-selector-item:hover .text-xs.text-secondary.mt-1 {
    color: var(--text-primary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Maximum specificity for the exact structure */
.dark-theme #component-selector-panel .component-selector-item .text-xs.text-secondary.mt-1 {
    color: var(--text-secondary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.dark-theme #component-selector-panel .component-selector-item:hover .text-xs.text-secondary.mt-1 {
    color: var(--text-primary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Nuclear option - target any text-xs in dark theme component selector */
.dark-theme .component-selector-item *[class*="text-xs"] {
    color: var(--text-secondary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.dark-theme .component-selector-item:hover *[class*="text-xs"] {
    color: var(--text-primary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Smooth scrolling for better UX */
html {
    scroll-behavior: smooth;
}

/* Performance optimizations */
.component-selector-item,
.component-item,
#hover-card {
    will-change: transform;
}

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

/* Hover card enhancements */
#hover-card {
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    z-index: 9999;
    position: fixed;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.95);
    /* OPTIMIZATION: Enhanced transitions for perfect synchronization */
    transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.15s ease;
    visibility: hidden;
    border-radius: 12px;
    overflow: hidden;
    max-width: 520px;
    min-width: 240px;
    display: flex;
    flex-direction: column;
}

#hover-card-preview {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    max-height: 300px;
    overflow-y: auto;
}

/* Dark theme specific enhancements */
.dark-theme #hover-card {
    background: 
        linear-gradient(135deg, var(--surface-elevated) 0%, var(--surface) 100%),
        radial-gradient(circle at center, rgba(88, 166, 255, 0.08) 0%, transparent 70%);
    border: 1px solid var(--border-color);
    box-shadow: 
        0 20px 40px rgba(1, 4, 9, 0.4),
        0 8px 16px rgba(1, 4, 9, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
}

/* Enhanced hover card content organization */
#hover-card .flex.items-start.justify-between {
    padding: 16px 16px 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

#hover-card #hover-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.4;
}

#hover-card #hover-card-status {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

#hover-card #hover-card-preview {
    padding: 12px;
    margin: 0;
    background: var(--bg-primary);
    border: none;
    border-radius: 0;
    max-height: 250px;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Ensure proper layout for components with unusual positioning */
#hover-card #hover-card-preview > div {
    position: relative !important;
    display: block !important;
}

#hover-card #hover-card-preview .fixed {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    top: auto !important;
    left: auto !important;
}

#hover-card .text-xs.text-secondary {
    padding: 12px 16px 16px 16px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    margin: 0;
}

/* Dark theme enhancements for hover card */
.dark-theme #hover-card .flex.items-start.justify-between {
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface-elevated) 100%);
    border-bottom-color: var(--border-color);
}

.dark-theme #hover-card #hover-card-title {
    color: var(--text-primary);
}

.dark-theme #hover-card .text-xs.text-secondary {
    background: var(--surface);
    border-top-color: var(--border-color);
    color: var(--text-secondary);
}

/* Consistent styling for all hover cards - maintaining visual consistency */
#hover-card {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border-color);
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
}

#hover-card .text-xs.text-secondary {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    font-weight: 400;
    padding: 12px 16px 16px 16px;
    margin-top: auto;
    flex-shrink: 0;
}

#hover-card .text-xs.text-secondary strong {
    color: var(--text-primary);
    font-weight: 600;
    display: inline;
    margin-right: 4px;
}

/* Dark theme consistency for all hover cards */
.dark-theme #hover-card {
    background: 
        linear-gradient(135deg, var(--surface-elevated) 0%, var(--surface) 100%),
        radial-gradient(circle at center, rgba(88, 166, 255, 0.08) 0%, transparent 70%);
    border-color: var(--border-color);
    box-shadow: 
        0 20px 40px rgba(1, 4, 9, 0.4),
        0 8px 16px rgba(1, 4, 9, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.dark-theme #hover-card .text-xs.text-secondary {
    background: var(--surface);
    border-top-color: var(--border-color);
}

.dark-theme #hover-card .text-xs.text-secondary strong {
    color: var(--text-primary);
}

.dark-theme #hover-card-preview {
    background: var(--surface);
    border: 1px solid var(--border-color);
    box-shadow: 
        0 4px 12px rgba(1, 4, 9, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Responsive hover card - Enhanced for mobile */
@media (max-width: 768px) {
    #hover-card {
        max-width: 320px;
        min-width: 200px;
        font-size: 0.875rem;
        /* Enhanced mobile positioning */
        position: fixed !important;
        z-index: 10000 !important;
        /* Ensure card is always visible */
        max-height: calc(100vh - 32px) !important;
        overflow: hidden;
    }
    
    #hover-card-preview {
        padding: 0.75rem;
        max-height: 180px;
        overflow-y: auto;
    }
    
    #hover-card .flex.items-start.justify-between {
        padding: 12px 12px 8px 12px;
    }
    
    #hover-card .text-xs.text-secondary {
        padding: 8px 12px 12px 12px;
        font-size: 0.75rem;
    }
    
    /* Mobile-specific hover card enhancements */
    #hover-card {
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        border-radius: 8px;
    }
}

@media (max-width: 480px) {
    #hover-card {
        max-width: 280px;
        min-width: 180px;
        font-size: 0.75rem;
        /* Ultra-mobile optimizations */
        max-height: calc(100vh - 16px) !important;
        border-radius: 6px;
        /* Enhanced mobile shadows */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    }
    
    #hover-card-preview {
        padding: 0.5rem;
        max-height: 160px;
        overflow-y: auto;
    }
    
    #hover-card .flex.items-start.justify-between {
        padding: 10px 10px 6px 10px;
    }
    
    #hover-card .text-xs.text-secondary {
        padding: 6px 10px 10px 10px;
        font-size: 0.6875rem;
    }
    
    /* Small mobile specific enhancements */
    #hover-card {
        /* Ensure perfect mobile visibility */
        position: fixed !important;
        z-index: 10001 !important;
        /* Optimize for very small screens */
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
    }
}

/* Component item hover effects */
.component-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Dark theme component hover effects */
.dark-theme .component-item:hover {
    background: 
        linear-gradient(135deg, var(--surface-hover) 0%, var(--surface-elevated) 100%),
        radial-gradient(circle at center, rgba(88, 166, 255, 0.1) 0%, transparent 70%);
    border-color: var(--accent);
    box-shadow: 
        0 6px 20px rgba(88, 166, 255, 0.2),
        0 4px 12px rgba(1, 4, 9, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

/* Enhanced component selector */
#component-selector-panel {
    max-width: 420px;
}

.component-selector-item {
    transition: all 0.2s ease;
}

.component-selector-item:hover {
    transform: translateX(4px);
}

/* Responsive component selector items */
@media (max-width: 768px) {
    .component-selector-item label {
        padding: 0.75rem;
    }
    
    .component-selector-item .font-medium {
        font-size: 0.875rem;
    }
    
    .component-selector-item .text-xs {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .component-selector-item label {
        padding: 0.5rem;
    }
    
    .component-selector-item .font-medium {
        font-size: 0.8rem;
    }
    
    .component-selector-item .text-xs {
        font-size: 0.7rem;
    }
}

/* Checkbox styling */
.component-checkbox:checked + label {
    border-color: var(--accent);
    background-color: var(--accent_alpha);
}

.component-checkbox:checked + label .font-medium {
    color: var(--accent);
}

/* Dark theme checkbox enhancements */
.dark-theme .component-checkbox:checked + label {
    border-color: var(--accent);
    background: 
        linear-gradient(135deg, var(--accent) 0%, rgba(88, 166, 255, 0.8) 100%),
        radial-gradient(circle at center, rgba(88, 166, 255, 0.2) 0%, transparent 70%);
    box-shadow: 
        0 4px 12px rgba(88, 166, 255, 0.25),
        0 2px 8px rgba(1, 4, 9, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.dark-theme .component-checkbox:checked + label .font-medium {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(1, 4, 9, 0.3);
}

/* Dark theme selected component descriptions - Clear and readable */
.dark-theme .component-checkbox:checked + label .text-xs {
    color: var(--text-primary) !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-weight: 400;
    line-height: 1.4;
}

.dark-theme .component-checkbox:checked + label div .text-xs {
    color: var(--text-primary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.dark-theme .component-checkbox:checked + label div div .text-xs {
    color: var(--text-primary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Force visibility for selected components in dark theme */
.dark-theme .component-checkbox:checked + label *[class*="text-xs"] {
    color: var(--text-primary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Maximum specificity for selected components */
.dark-theme #component-selector-panel .component-checkbox:checked + label .text-xs {
    color: var(--text-primary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.dark-theme #component-selector-panel .component-checkbox:checked + label div .text-xs {
    color: var(--text-primary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.dark-theme #component-selector-panel .component-checkbox:checked + label div div .text-xs {
    color: var(--text-primary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Target specific Tailwind classes for selected components */
.dark-theme .component-checkbox:checked + label .text-xs.text-secondary {
    color: var(--text-primary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.dark-theme .component-checkbox:checked + label .text-xs.text-secondary.mt-1 {
    color: var(--text-primary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Nuclear option for selected components */
.dark-theme .component-checkbox:checked + label *[class*="text-xs"] {
    color: var(--text-primary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Loading spinner for button */
.loader {
    width: 18px;
    height: 18px;
    border: 2px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

/* Dark theme loader enhancements */
.dark-theme .loader {
    border-color: #ffffff;
    border-bottom-color: transparent;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

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

/* ===== COMPREHENSIVE RESPONSIVE DESIGN ===== */

/* Main container responsiveness */
@media (max-width: 1024px) {
    .container {
        padding: 1rem;
    }
    
    .grid {
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0.75rem;
    }
    
    .grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    /* Adjust palette display for mobile */
    #palette-display {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: var(--gap-md);
        
        /* Enhanced responsive palette display */
        padding: var(--padding-lg);
        border-radius: var(--radius-lg);
        background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow-sm);
        
        /* Enhanced responsive performance */
        will-change: transform;
        transform: translateZ(0);
    }
    
    /* Mobile-optimized buttons */
    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
    
    /* Responsive form controls */
    select, input {
        font-size: 0.875rem;
        padding: 0.5rem;
    }
    
    /* Mobile: Fixed height for live preview */
    #live-preview {
        height: 50vh !important;
    }
    
    /* Mobile: Enhanced scrollbar (now handled by main showcase scrollbar styles) */
    
    /* CRITICAL: Prevent horizontal overflow */
    body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    /* Ensure containers don't overflow */
    .container {
        max-width: 100%;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    /* Fix grid overflow */
    .grid {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    /* Ensure flex items wrap properly */
    .flex {
        flex-wrap: wrap;
        max-width: 100%;
    }
    
    /* Fix long text overflow */
    .text-primary, .text-secondary {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* OLD TOOLTIP SYSTEM REMOVED - Replaced with modern popup card system */
}

@media (max-width: 480px) {
    .container {
        padding: 0.5rem;
    }
    
    .grid {
        gap: 0.5rem;
    }
    
    /* Ultra-mobile palette display */
    #palette-display {
        grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
        gap: 0.25rem;
    }
    
    /* Compact buttons for mobile */
    .btn {
        padding: 0.375rem 0.75rem;
        font-size: 0.8rem;
    }
    
    /* Smaller form controls */
    select, input {
        font-size: 0.8rem;
        padding: 0.375rem;
    }
    
    /* Adjust showcase section for mobile */
    #showcase-section {
        padding: 0.5rem;
    }
    
    .showcase-item {
        margin-bottom: 0.5rem;
    }
    
    /* CRITICAL: Ultra-mobile overflow prevention */
    body {
        overflow-x: hidden;
        max-width: 100vw;
        min-width: 320px;
    }
    
    /* Ensure all containers fit */
    .container, .grid, .flex {
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }
    
    /* Fix flex layouts for ultra-small screens */
    .flex {
        flex-direction: column;
        align-items: stretch;
    }
    
    /* Stack grid items vertically */
    .grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Ensure text doesn't cause overflow */
    h1, h2, h3, h4, h5, h6, p, span, div {
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }
    
    /* OLD TOOLTIP SYSTEM REMOVED - Replaced with modern popup card system */
    
    /* Ensure buttons don't overflow */
    .btn {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Touch-friendly interactions for mobile */
@media (hover: none) and (pointer: coarse) {
    .component-selector-item label:hover {
        transform: none;
    }
    
    .component-item:hover {
        transform: none;
    }
    
    /* Larger touch targets */
    .btn, select, input {
        min-height: 44px;
    }
    
    .component-selector-item label {
        min-height: 48px;
    }
}



/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .soft-shadow {
        box-shadow: 0 2px 4px -1px var(--shadow-color), 0 1px 2px -1px var(--shadow-color);
    }
}

/* Landscape orientation adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    #component-selector-panel {
        height: 100vh;
        max-height: 100vh;
    }
    
    #component-list {
        max-height: 60vh;
    }
}

/* Print styles */
@media print {
    #component-selector-panel,
    #hover-card,
    #toast {
        display: none !important;
    }
    
    .container {
        max-width: none;
        padding: 0;
    }
}

/* ===== DARK THEME ENHANCEMENTS ===== */

/* Dark theme body background */
.dark-theme body {
    background: 
        radial-gradient(ellipse at top, rgba(88, 166, 255, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at bottom, rgba(88, 166, 255, 0.02) 0%, transparent 50%),
        linear-gradient(135deg, var(--bg-primary-dark) 0%, var(--bg-secondary-dark) 100%);
    min-height: 100vh;
}

/* ===== HEADER DARK THEME ENHANCEMENTS ===== */

/* Dark theme header styling */
.dark-theme header {
    background: 
        linear-gradient(135deg, rgba(22, 27, 34, 0.95) 0%, rgba(28, 33, 40, 0.9) 100%),
        radial-gradient(circle at 20% 80%, rgba(88, 166, 255, 0.08) 0%, transparent 50%);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 
        0 4px 20px rgba(1, 4, 9, 0.3),
        0 2px 8px rgba(1, 4, 9, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
}

/* Dark theme header logo and title */
.dark-theme header h1 {
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 4px rgba(1, 4, 9, 0.3);
}

/* Dark theme header logo container */
.dark-theme header .bg-gradient-to-br {
    background: 
        linear-gradient(135deg, var(--accent) 0%, rgba(88, 166, 255, 0.8) 100%),
        radial-gradient(circle at center, rgba(88, 166, 255, 0.3) 0%, transparent 70%);
    box-shadow: 
        0 4px 12px rgba(88, 166, 255, 0.3),
        0 2px 8px rgba(1, 4, 9, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(88, 166, 255, 0.3);
}

/* Dark theme header subtitle */
.dark-theme header p {
    color: var(--text-secondary);
    opacity: 0.8;
}

/* Dark theme header buttons */
.dark-theme header button {
    background: 
        linear-gradient(135deg, var(--surface) 0%, var(--surface-elevated) 100%),
        radial-gradient(circle at center, rgba(88, 166, 255, 0.05) 0%, transparent 70%);
    border: 1px solid var(--border-color);
    box-shadow: 
        0 2px 8px rgba(1, 4, 9, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark theme header button icons */
.dark-theme header button svg {
    color: var(--text-secondary);
    transition: color 0.2s ease;
}


/* Dark theme header accent elements */
.dark-theme header .accent-text {
    color: var(--accent);
    filter: drop-shadow(0 0 8px rgba(88, 166, 255, 0.3));
}

/* Dark theme header container */
.dark-theme header .container {
    background: transparent;
    box-shadow: none;
    border: none;
}

/* ===== RESPONSIVE HEADER OPTIMIZATIONS ===== */

/* Base header responsive structure - OPTIMIZED FOR PERFECT FIT */
header {
    min-height: 64px; /* Exact perfect height for content */
    height: 64px; /* Fixed height for consistency */
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    
    /* Enhanced responsive header */
    padding: 0.75rem 0; /* 12px top/bottom for perfect content spacing */
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    
    /* Enhanced responsive performance */
    will-change: transform;
    transform: translateZ(0);
    
    /* Prevent flex wrap for cleaner layout */
    flex-wrap: nowrap;
}

header .container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

header .flex.items-center.justify-between {
    width: 100%;
    height: 100%; /* Use full header height */
    padding: 0; /* Remove extra padding, let header handle it */
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap; /* Prevent wrapping for cleaner layout */
    gap: 0.75rem; /* Consistent spacing between elements */
}

/* Logo container responsive optimizations */
header .flex.items-center.space-x-3,
header .flex.items-center.gap-0 {
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    gap: 0 !important;
}

/* Logo button responsive sizing and styling */
header .bg-gradient-to-br,
header #header-logo-reload {
    flex-shrink: 0;
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: linear-gradient(135deg, var(--accent) 0%, rgba(61, 189, 245, 0.8) 100%);
    cursor: pointer;
    outline: none;
}

/* Remove all focus and active effects */
header #header-logo-reload:focus,
header #header-logo-reload:focus-visible,
header #header-logo-reload:active {
    outline: none;
    transform: none;
}

header .bg-gradient-to-br img,
header #header-logo-reload img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    pointer-events: none;
}

/* Title responsive typography */
header h1 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
    
    /* Enhanced responsive typography */
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    
    /* Enhanced responsive performance */
    will-change: transform;
    transform: translateZ(0);
}

/* Navigation right responsive */
header .nav-right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Theme toggle responsive */
#theme-toggle {
    min-width: var(--btn-height-md);
    min-height: var(--btn-height-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    
    /* Enhanced responsive button */
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent) 80%, rgba(61, 189, 245, 0.8) 100%);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    transition: all var(--duration-fast) ease;
    
    /* Enhanced responsive performance */
    will-change: transform, box-shadow;
    transform: translateZ(0);
}


/* Dark theme header responsive adjustments */
@media (max-width: 768px) {
    .dark-theme header {
        background: 
            linear-gradient(135deg, rgba(22, 27, 34, 0.98) 0%, rgba(28, 33, 40, 0.95) 100%),
            radial-gradient(circle at 20% 80%, rgba(88, 166, 255, 0.1) 0%, transparent 50%);
    }
    
    .dark-theme header h1 {
        font-size: 1.125rem;
    }
    
    .dark-theme header button {
        padding: 0.75rem;
    }
    
    /* Light theme header adjustments - matching dark theme responsiveness */
    .light-theme header h1 {
        font-size: 1.125rem;
    }
    
    .light-theme header button {
        padding: 0.75rem;
    }
    
    /* Tablet optimizations */
    header {
        height: 60px; /* Tablet-optimized height */
        min-height: 60px;
        padding: 0.625rem 0;
    }
    
    header .flex.items-center.justify-between {
        height: 100%;
        gap: 0.75rem;
    }
    
    header .flex.items-center.space-x-3,
    header .flex.items-center.gap-0 {
        gap: 0 !important;
    }
    
    header .bg-gradient-to-br,
    header #header-logo-reload {
        min-width: 36px;
        min-height: 36px;
        padding: 0.5rem;
    }
    
    #theme-toggle {
        padding: 0.75rem;
    }
}

/* Mobile optimizations */
@media (max-width: 480px) {
    header {
        height: 56px; /* Mobile-optimized height */
        min-height: 56px;
        padding: 0.5rem 0;
    }
    
    header .flex.items-center.justify-between {
        height: 100%;
        gap: 0.5rem;
    }
    
    header .flex.items-center.space-x-3,
    header .flex.items-center.gap-0 {
        gap: 0 !important;
        flex: 1 1 auto;
        min-width: 0;
    }
    
    header h1 {
        font-size: 1rem;
        max-width: 120px;
    }
    
    header .bg-gradient-to-br,
    header #header-logo-reload {
        min-width: 32px;
        min-height: 32px;
        padding: 0.375rem;
    }
    
    #theme-toggle {
        min-width: 44px;
        min-height: 44px;
        padding: 0.75rem;
    }
    
    /* Dark theme mobile adjustments */
    .dark-theme header h1 {
        font-size: 1rem;
    }
    
    .dark-theme header button {
        padding: 0.75rem;
    }
    
    /* Light theme mobile adjustments - matching dark theme responsiveness */
    .light-theme header h1 {
        font-size: 1rem;
    }
    
    .light-theme header button {
        padding: 0.75rem;
    }
}

/* Small mobile optimizations */
@media (max-width: 360px) {
    header {
        height: 52px; /* Compact height for very small screens */
        min-height: 52px;
        padding: 0.375rem 0;
    }
    
    header .flex.items-center.justify-between {
        height: 100%;
        gap: 0.375rem;
    }
    
    header .flex.items-center.space-x-3,
    header .flex.items-center.gap-0 {
        gap: 0 !important;
    }
    
    header h1 {
        font-size: 0.875rem;
        max-width: 100px;
    }
    
    header .bg-gradient-to-br,
    header #header-logo-reload {
        min-width: 28px;
        min-height: 28px;
        padding: 0.25rem;
    }
    
    #theme-toggle {
        min-width: 40px;
        min-height: 40px;
        padding: 0.625rem;
    }
    
    /* Dark theme small mobile adjustments */
    .dark-theme header h1 {
        font-size: 0.875rem;
    }
    
    .dark-theme header button {
        padding: 0.625rem;
    }
    
    /* Light theme small mobile adjustments - matching dark theme responsiveness */
    .light-theme header h1 {
        font-size: 0.875rem;
    }
    
    .light-theme header button {
        padding: 0.625rem;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    header .flex.items-center.space-x-3,
    header .flex.items-center.gap-0 {
        gap: 0 !important;
    }
    
    header #theme-toggle {
        min-width: 48px;
        min-height: 48px;
        padding: 0.875rem;
    }
    
    header .bg-gradient-to-br,
    header #header-logo-reload {
        min-width: 44px;
        min-height: 44px;
        padding: 0.5rem;
    }
    
    header h1 {
        font-size: clamp(1rem, 4.5vw, 1.5rem);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    header {
        border-bottom: 2px solid var(--text-primary);
    }
    
    header h1 {
        color: var(--text-primary);
        text-shadow: none;
        background: none;
        -webkit-background-clip: unset;
        -webkit-text-fill-color: unset;
        background-clip: unset;
    }
    
    header #theme-toggle {
        border: 2px solid var(--text-primary);
        background: var(--bg-primary);
    }
    
    header #theme-toggle svg {
        color: var(--text-primary);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    header,
    header * {
        transition: none;
        animation: none;
    }
    
    header #theme-toggle:hover {
        transform: none;
    }
}

/* Landscape orientation optimizations */
@media (max-width: 768px) and (orientation: landscape) {
    header {
        height: 48px; /* Compact for landscape */
        min-height: 48px;
        padding: 0.375rem 0;
    }
    
    header .flex.items-center.justify-between {
        height: 100%;
    }
    
    header h1 {
        font-size: 0.875rem;
        max-width: 100px;
    }
    
    header .bg-gradient-to-br,
    header #header-logo-reload {
        min-width: 28px;
        min-height: 28px;
        padding: 0.25rem;
    }
    
    #theme-toggle {
        min-width: 40px;
        min-height: 40px;
        padding: 0.625rem;
    }
}

/* Print styles for header */
@media print {
    header {
        background: #ffffff !important;
        border-bottom: 2px solid #000000 !important;
        box-shadow: none !important;
        min-height: auto;
        height: auto;
    }
    
    header h1 {
        color: #000000 !important;
        font-size: 1.25rem !important;
        text-shadow: none !important;
    }
    
    header #theme-toggle {
        display: none !important;
    }
    
    header .bg-gradient-to-br {
        background: #f0f0f0 !important;
        border: 1px solid #000000 !important;
    }
}

/* ===== LIGHT THEME HEADER ENHANCEMENTS (PROFESSIONAL) ===== */
.light-theme header {
    background: 
        linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%),
        radial-gradient(circle at 20% 80%, var(--accent) 0%, transparent 50%),
        linear-gradient(90deg, var(--bg-primary) 0%, transparent 100%);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(41, 49, 90, 0.04), 0 2px 8px rgba(41, 49, 90, 0.02);
    backdrop-filter: blur(16px);
}

.light-theme header h1 {
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.light-theme header p {
    color: var(--text-secondary);
    opacity: 0.85;
}

.light-theme header .bg-gradient-to-br {
    background: linear-gradient(135deg, var(--accent) 0%, rgba(61, 189, 245, 0.8) 100%);
    box-shadow: 0 2px 8px rgba(61, 189, 245, 0.08);
    border: 1px solid var(--accent);
}

.light-theme header .accent-text {
    color: var(--accent);
}

.light-theme header button {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    box-shadow: 0 1px 4px rgba(41, 49, 90, 0.04);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}


.light-theme header button svg {
    color: var(--text-secondary);
    transition: color 0.2s;
}


.light-theme header .container {
    background: transparent;
    box-shadow: none;
    border: none;
}

/* ===== LIGHT THEME SURFACES ===== */
.light-theme .container,
.light-theme .bg-secondary,
.light-theme .soft-shadow {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(41, 49, 90, 0.03);
}

/* ===== LIGHT THEME BUTTONS ===== */
.light-theme .btn {
    background: linear-gradient(135deg, var(--accent) 0%, rgba(61, 189, 245, 0.8) 100%);
    color: #fff;
    border: 1px solid var(--accent);
    box-shadow: 0 2px 8px rgba(61, 189, 245, 0.08);
    font-weight: 600;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.light-theme .btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(41, 49, 90, 0.10);
    transform: translateY(-1px);
}

/* ===== LIGHT THEME SHOWCASE SECTION ===== */
.light-theme #showcase-section {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(41, 49, 90, 0.03);
    backdrop-filter: blur(8px);
}

/* ===== LIGHT THEME PALETTE COLOR SWATCHES ===== */
.light-theme .palette-color {
    border: 2px solid var(--border-color);
    box-shadow: 0 1px 4px rgba(41, 49, 90, 0.04);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.light-theme .palette-color:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(61, 189, 245, 0.12);
    transform: translateY(-2px) scale(1.05);
    z-index: 10;
    position: relative;
}

/* ===== LIGHT THEME SAVED PALETTES ===== */
.light-theme .saved-palette {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(41, 49, 90, 0.03);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.light-theme .saved-palette:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(61, 189, 245, 0.12);
    transform: translateY(-2px);
}

/* ===== LIGHT THEME TEXT ===== */
.light-theme .text-primary {
    color: var(--text-primary);
}
.light-theme .text-secondary {
    color: var(--text-secondary);
}

/* ===== LIGHT THEME BORDERS ===== */
.light-theme .border-color {
    border-color: var(--border-color);
}

/* Dark theme container enhancements */
.dark-theme .container {
    background: 
        linear-gradient(135deg, var(--surface-elevated) 0%, var(--surface) 100%),
        radial-gradient(circle at 20% 80%, rgba(88, 166, 255, 0.05) 0%, transparent 50%);
    border: 1px solid var(--border-color);
    box-shadow: 
        0 8px 32px rgba(1, 4, 9, 0.4),
        0 2px 8px rgba(1, 4, 9, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
}

/* Dark theme button enhancements */
.dark-theme .btn {
    background: 
        linear-gradient(135deg, var(--surface-hover) 0%, var(--surface) 100%),
        radial-gradient(circle at center, rgba(88, 166, 255, 0.1) 0%, transparent 70%);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    box-shadow: 
        0 2px 4px rgba(1, 4, 9, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark-theme .btn:hover {
    background: 
        linear-gradient(135deg, var(--accent) 0%, rgba(88, 166, 255, 0.8) 100%),
        radial-gradient(circle at center, rgba(88, 166, 255, 0.2) 0%, transparent 70%);
    border-color: var(--accent);
    color: #ffffff;
    box-shadow: 
        0 4px 12px rgba(88, 166, 255, 0.3),
        0 2px 4px rgba(1, 4, 9, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

/* Dark theme form controls */
.dark-theme select,
.dark-theme input {
    background: var(--surface);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    box-shadow: 
        0 1px 3px rgba(1, 4, 9, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

.dark-theme select:focus,
.dark-theme input:focus {
    background: var(--surface-elevated);
    border-color: var(--accent);
    box-shadow: 
        0 0 0 3px rgba(88, 166, 255, 0.15),
        0 2px 8px rgba(1, 4, 9, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

/* Dark theme palette display */
.dark-theme .palette-color {
    border: 2px solid var(--border-color);
    box-shadow: 
        0 2px 8px rgba(1, 4, 9, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark-theme .palette-color:hover {
    border-color: var(--accent);
    box-shadow: 
        0 4px 16px rgba(88, 166, 255, 0.25),
        0 2px 8px rgba(1, 4, 9, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-2px) scale(1.05);
    z-index: 10;
    position: relative;
}

/* Dark theme showcase section */
.dark-theme #showcase-section {
    background: 
        linear-gradient(135deg, var(--surface-elevated) 0%, var(--surface) 100%),
        radial-gradient(circle at 30% 70%, rgba(88, 166, 255, 0.08) 0%, transparent 50%);
    border: 1px solid var(--border-color);
    box-shadow: 
        0 8px 32px rgba(1, 4, 9, 0.3),
        0 4px 16px rgba(1, 4, 9, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

/* Dark theme saved palettes */
.dark-theme .saved-palette {
    background: 
        linear-gradient(135deg, var(--surface) 0%, var(--surface-elevated) 100%),
        radial-gradient(circle at center, rgba(88, 166, 255, 0.05) 0%, transparent 70%);
    border: 1px solid var(--border-color);
    box-shadow: 
        0 4px 16px rgba(1, 4, 9, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark-theme .saved-palette:hover {
    background: 
        linear-gradient(135deg, var(--surface-hover) 0%, var(--surface) 100%),
        radial-gradient(circle at center, rgba(88, 166, 255, 0.1) 0%, transparent 70%);
    border-color: var(--accent);
    box-shadow: 
        0 6px 20px rgba(88, 166, 255, 0.2),
        0 4px 16px rgba(1, 4, 9, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
} 

/* Enhanced Generate Palette button loading state for dark mode */
.dark-theme #generate-btn:disabled {
    background-color: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
    opacity: 0.9;
    cursor: not-allowed;
}

.dark-theme #generate-btn:disabled .loader {
    border-color: #ffffff;
    border-bottom-color: transparent;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

/* Select UI Components Panel: Light Mode */
.light-theme #component-selector-panel {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    border-left: 1px solid var(--border-color);
    box-shadow: -4px 0 24px rgba(41, 49, 90, 0.04);
}

/* Select UI Components Panel: Dark Mode */
.dark-theme #component-selector-panel {
    background: linear-gradient(135deg, var(--surface-elevated) 0%, var(--surface) 100%);
    border-left: 1px solid var(--border-color);
    box-shadow: -4px 0 24px rgba(1, 4, 9, 0.18);
} 

/* === Professional Component Showcase Layout - Full Size === */

/* Showcase container */
.showcase-container {
    max-width: 100%;
    margin: 0 auto;
}

/* Category sections */
.category-section {
    position: relative;
}

.category-section:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: -3rem;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--border-color), transparent);
}

/* Components container - full size layout */
.components-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Component preview frames - full size */
.component-preview-container {
    position: relative;
    width: 100%;
}

.component-preview-frame {
    position: relative;
    overflow: visible;
    will-change: auto;
    width: 100%;
    min-height: auto;
}

/* Category headers - larger and more prominent */
.showcase-container h2 {
    position: relative;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-size: 1.75rem;
}

/* Component titles - larger and more prominent */
.component-preview-container h3 {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 1.25rem;
    letter-spacing: -0.01em;
}

/* Animation for component frames */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
}

/* Dark theme enhancements for full-size */
.dark-theme .component-preview-frame {
    background: linear-gradient(135deg, var(--surface-elevated) 0%, var(--surface) 100%);
    border-color: var(--border-color);
    box-shadow: 
        0 6px 25px rgba(1, 4, 9, 0.25),
        0 3px 12px rgba(1, 4, 9, 0.15);
}

/* Light theme enhancements for full-size */
.light-theme .component-preview-frame {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    border-color: var(--border-color);
    box-shadow: 0 4px 12px rgba(41, 49, 90, 0.06);
}

/* Responsive adjustments for full-size layout */
@media (max-width: 768px) {
    .component-preview-frame {
        padding: 1rem;
    }
    
    .showcase-container h2 {
        font-size: 1.5rem;
    }
    
    .component-preview-container h3 {
        font-size: 1.125rem;
    }
    
    .components-container {
        gap: 1.5rem;
    }
}

@media (max-width: 480px) {
    .component-preview-frame {
        padding: 0.75rem;
    }
    
    .showcase-container h2 {
        font-size: 1.25rem;
    }
    
    .component-preview-container h3 {
        font-size: 1rem;
    }
    
    .components-container {
        gap: 1rem;
    }
}

/* Performance optimizations */
.component-preview-frame * {
    will-change: auto;
}

/* Ensure component preview frames match live preview styling */
.component-preview-frame {
    border-radius: 0.75rem !important; /* rounded-xl = 12px */
}

.component-preview-container {
    contain: layout style paint;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .animate-fade-in {
        animation: none;
        opacity: 1;
    }
}

/* Focus states for keyboard navigation */
.component-preview-frame:focus-within {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

/* Print styles for full-size layout */
@media print {
    .component-preview-frame {
        break-inside: avoid;
        box-shadow: none;
        border: 2px solid #ccc;
        margin-bottom: 2rem;
    }
    
    .components-container {
        gap: 2rem;
    }
} 

/* Slider Styles - Enhanced for Visibility */
/* ===== ENHANCED ENTERPRISE-GRADE SLIDER DESIGN ===== */

.slider {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: var(--space-sm);
    border-radius: var(--radius-md);
    background: linear-gradient(90deg, 
        var(--slider-track-start) 0%, 
        var(--slider-track-end) 100%);
    outline: none;
    cursor: pointer;
    border: none;
    position: relative;
    transition: all var(--duration-normal) cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
    
    /* Enhanced responsive slider */
    will-change: transform;
    transform: translateZ(0);
}

/* Webkit Track Styling */
.slider::-webkit-slider-track {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 8px;
    background: linear-gradient(90deg, 
        var(--slider-track-start) 0%, 
        var(--slider-track-end) 100%);
    border: none;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Webkit Thumb Styling */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: var(--slider-thumb-bg);
    border: 2px solid var(--slider-thumb-border);
    cursor: pointer;
    box-shadow: var(--slider-thumb-shadow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    margin-top: -7px;
}

.slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: var(--slider-thumb-shadow-hover);
    background: var(--slider-thumb-bg-hover);
}

.slider::-webkit-slider-thumb:active {
    transform: scale(1.1);
    box-shadow: var(--slider-thumb-shadow-active);
}

/* Firefox Track Styling */
.slider::-moz-range-track {
    height: 6px;
    border-radius: 8px;
    background: linear-gradient(90deg, 
        var(--slider-track-start) 0%, 
        var(--slider-track-end) 100%);
    border: none;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Firefox Thumb Styling */
.slider::-moz-range-thumb {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: var(--slider-thumb-bg);
    border: 2px solid var(--slider-thumb-border);
    cursor: pointer;
    box-shadow: var(--slider-thumb-shadow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.slider::-moz-range-thumb:hover {
    transform: scale(1.15);
    box-shadow: var(--slider-thumb-shadow-hover);
    background: var(--slider-thumb-bg-hover);
}

.slider::-moz-range-thumb:active {
    transform: scale(1.1);
    box-shadow: var(--slider-thumb-shadow-active);
}

/* Focus States */
.slider:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--slider-focus-ring);
}

.slider:focus::-webkit-slider-thumb {
    box-shadow: var(--slider-thumb-shadow-hover), 0 0 0 3px var(--slider-focus-ring);
}

.slider:focus::-moz-range-thumb {
    box-shadow: var(--slider-thumb-shadow-hover), 0 0 0 3px var(--slider-focus-ring);
}

/* Light Theme Slider Variables */
.light-theme {
    --slider-track-start: #e5e7eb;
    --slider-track-end: #d1d5db;
    --slider-thumb-bg: #ffffff;
    --slider-thumb-bg-hover: #f9fafb;
    --slider-thumb-border: #3b82f6;
    --slider-thumb-shadow: 0 4px 12px rgba(59, 130, 246, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1);
    --slider-thumb-shadow-hover: 0 6px 16px rgba(59, 130, 246, 0.4), 0 4px 8px rgba(0, 0, 0, 0.15);
    --slider-thumb-shadow-active: 0 4px 12px rgba(59, 130, 246, 0.5), 0 2px 4px rgba(0, 0, 0, 0.2);
    --slider-focus-ring: rgba(59, 130, 246, 0.2);
}

/* Dark Theme Slider Variables */
.dark-theme {
    --slider-track-start: #374151;
    --slider-track-end: #4b5563;
    --slider-thumb-bg: #1f2937;
    --slider-thumb-bg-hover: #111827;
    --slider-thumb-border: #3b82f6;
    --slider-thumb-shadow: 0 4px 12px rgba(59, 130, 246, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
    --slider-thumb-shadow-hover: 0 6px 16px rgba(59, 130, 246, 0.5), 0 4px 8px rgba(0, 0, 0, 0.4);
    --slider-thumb-shadow-active: 0 4px 12px rgba(59, 130, 246, 0.6), 0 2px 4px rgba(0, 0, 0, 0.5);
    --slider-focus-ring: rgba(59, 130, 246, 0.3);
}

/* Saturation Slider Specific Styling */
#saturation-slider {
    background: var(--saturation-gradient, linear-gradient(90deg, 
        hsl(0, 0%, 50%) 0%, 
        hsl(0, 25%, 50%) 12.5%, 
        hsl(0, 50%, 50%) 25%, 
        hsl(0, 75%, 50%) 37.5%, 
        hsl(0, 100%, 50%) 50%, 
        hsl(60, 100%, 50%) 62.5%, 
        hsl(120, 100%, 50%) 75%, 
        hsl(180, 100%, 50%) 87.5%, 
        hsl(240, 100%, 50%) 100%));
}

#saturation-slider::-webkit-slider-track {
    background: var(--saturation-gradient, linear-gradient(90deg, 
        hsl(0, 0%, 50%) 0%, 
        hsl(0, 25%, 50%) 12.5%, 
        hsl(0, 50%, 50%) 25%, 
        hsl(0, 75%, 50%) 37.5%, 
        hsl(0, 100%, 50%) 50%, 
        hsl(60, 100%, 50%) 62.5%, 
        hsl(120, 100%, 50%) 75%, 
        hsl(180, 100%, 50%) 87.5%, 
        hsl(240, 100%, 50%) 100%));
}

#saturation-slider::-moz-range-track {
    background: var(--saturation-gradient, linear-gradient(90deg, 
        hsl(0, 0%, 50%) 0%, 
        hsl(0, 25%, 50%) 12.5%, 
        hsl(0, 50%, 50%) 25%, 
        hsl(0, 75%, 50%) 37.5%, 
        hsl(0, 100%, 50%) 50%, 
        hsl(60, 100%, 50%) 62.5%, 
        hsl(120, 100%, 50%) 75%, 
        hsl(180, 100%, 50%) 87.5%, 
        hsl(240, 100%, 50%) 100%));
}

/* Brightness Slider Specific Styling */
#brightness-slider {
    background: var(--brightness-gradient, linear-gradient(90deg, 
        #000000 0%, 
        #1a1a1a 10%, 
        #333333 20%, 
        #4d4d4d 30%, 
        #666666 40%, 
        #808080 50%, 
        #999999 60%, 
        #b3b3b3 70%, 
        #cccccc 80%, 
        #e6e6e6 90%, 
        #ffffff 100%));
}

#brightness-slider::-webkit-slider-track {
    background: var(--brightness-gradient, linear-gradient(90deg, 
        #000000 0%, 
        #1a1a1a 10%, 
        #333333 20%, 
        #4d4d4d 30%, 
        #666666 40%, 
        #808080 50%, 
        #999999 60%, 
        #b3b3b3 70%, 
        #cccccc 80%, 
        #e6e6e6 90%, 
        #ffffff 100%));
}

#brightness-slider::-moz-range-track {
    background: var(--brightness-gradient, linear-gradient(90deg, 
        #000000 0%, 
        #1a1a1a 10%, 
        #333333 20%, 
        #4d4d4d 30%, 
        #666666 40%, 
        #808080 50%, 
        #999999 60%, 
        #b3b3b3 70%, 
        #cccccc 80%, 
        #e6e6e6 90%, 
        #ffffff 100%));
}

/* ===== RESPONSIVE SLIDER ENHANCEMENTS ===== */

/* Mobile Touch Optimizations */
@media (max-width: 768px) {
    .slider {
        height: 8px;
        margin: 8px 0;
    }
    
    .slider::-webkit-slider-track {
        height: 8px;
    }
    
    .slider::-moz-range-track {
        height: 8px;
    }
    
    .slider::-webkit-slider-thumb {
        height: 22px;
        width: 22px;
        margin-top: -7px;
    }
    
    .slider::-moz-range-thumb {
        height: 22px;
        width: 22px;
    }
    
    .slider::-webkit-slider-thumb:hover {
        transform: scale(1.1);
    }
    
    .slider::-moz-range-thumb:hover {
        transform: scale(1.1);
    }
}

/* Tablet Optimization - Intermediate Breakpoint */
@media (max-width: 640px) {
    .slider::-webkit-slider-thumb {
        height: 24px;
        width: 24px;
        margin-top: -8px;
    }
    
    .slider::-moz-range-thumb {
        height: 24px;
        width: 24px;
    }
    
    .slider::-webkit-slider-thumb:hover {
        transform: scale(1.08);
    }
    
    .slider::-moz-range-thumb:hover {
        transform: scale(1.08);
    }
}

/* Small Mobile Optimizations */
@media (max-width: 480px) {
    .slider {
        height: 10px;
        margin: 10px 0;
    }
    
    .slider::-webkit-slider-track {
        height: 10px;
    }
    
    .slider::-moz-range-track {
        height: 10px;
    }
    
    .slider::-webkit-slider-thumb {
        height: 26px;
        width: 26px;
        margin-top: -8px;
    }
    
    .slider::-moz-range-thumb {
        height: 26px;
        width: 26px;
    }
    
    .slider::-webkit-slider-thumb:hover {
        transform: scale(1.05);
    }
    
    .slider::-moz-range-thumb:hover {
        transform: scale(1.05);
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .slider {
        border: 2px solid var(--text-primary);
    }
    
    .slider::-webkit-slider-thumb {
        border: 3px solid var(--text-primary);
        background: var(--bg-primary);
    }
    
    .slider::-moz-range-thumb {
        border: 3px solid var(--text-primary);
        background: var(--bg-primary);
    }
    
    .slider:focus {
        box-shadow: 0 0 0 4px var(--text-primary);
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .slider,
    .slider::-webkit-slider-track,
    .slider::-webkit-slider-thumb,
    .slider::-moz-range-track,
    .slider::-moz-range-thumb {
        transition: none;
    }
    
    .slider::-webkit-slider-thumb:hover,
    .slider::-moz-range-thumb:hover {
        transform: none;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    .slider::-webkit-slider-thumb {
        height: 32px;
        width: 32px;
        margin-top: -13px;
    }
    
    .slider::-moz-range-thumb {
        height: 32px;
        width: 32px;
    }
    
    .slider::-webkit-slider-thumb:hover {
        transform: none;
    }
    
    .slider::-moz-range-thumb:hover {
        transform: none;
    }
}

/* High DPI Display Optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .slider::-webkit-slider-thumb {
        box-shadow: var(--slider-thumb-shadow), 0 0 0 1px rgba(0, 0, 0, 0.1);
    }
    
    .slider::-moz-range-thumb {
        box-shadow: var(--slider-thumb-shadow), 0 0 0 1px rgba(0, 0, 0, 0.1);
    }
}

/* Print Styles */
@media print {
    .slider {
        -webkit-print-color-adjust: exact;
        -moz-print-color-adjust: exact;
        print-color-adjust: exact;
        background: #000000 !important;
    }
    
    .slider::-webkit-slider-track {
        background: #000000 !important;
    }
    
    .slider::-moz-range-track {
        background: #000000 !important;
    }
    
    .slider::-webkit-slider-thumb {
        background: #ffffff !important;
        border: 2px solid #000000 !important;
        box-shadow: none !important;
    }
    
    .slider::-moz-range-thumb {
        background: #ffffff !important;
        border: 2px solid #000000 !important;
        box-shadow: none !important;
    }
    
    /* Additional print optimizations */
    .slider-group {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    
    .form-control-row {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    
    .slider-value {
        background: #ffffff !important;
        color: #000000 !important;
        border: 1px solid #000000 !important;
        box-shadow: none !important;
    }
}



/* Slider Container Enhancements */
.form-control-row {
    position: relative;
    padding: 8px 0;
}

.form-control-row .flex {
    align-items: center;
    gap: 12px;
    position: relative;
}

/* ===== SLIDER VALUE DISPLAY ENHANCEMENTS ===== */

.slider-value {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    min-width: 48px;
    text-align: center;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.slider-value:hover {
    background: var(--bg-primary);
    border-color: var(--accent);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Slider Animation Enhancements */
@keyframes sliderGlow {
    0% { box-shadow: var(--slider-thumb-shadow); }
    50% { box-shadow: var(--slider-thumb-shadow-hover); }
    100% { box-shadow: var(--slider-thumb-shadow); }
}

.slider:focus::-webkit-slider-thumb {
    animation: sliderGlow 2s ease-in-out infinite;
}

.slider:focus::-moz-range-thumb {
    animation: sliderGlow 2s ease-in-out infinite;
}

/* ===== ENHANCED SLIDER INTERACTIONS ===== */

/* Focus state enhancements */
.slider-focused {
    transform: scale(1.02);
}

.slider-focused::-webkit-slider-thumb {
    transform: scale(1.2);
    box-shadow: var(--slider-thumb-shadow-hover), 0 0 0 4px var(--slider-focus-ring);
}

.slider-focused::-moz-range-thumb {
    transform: scale(1.2);
    box-shadow: var(--slider-thumb-shadow-hover), 0 0 0 4px var(--slider-focus-ring);
}

/* Slider value display animations */
.slider-value {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.slider-value:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Slider track progress indicator */
.slider {
    position: relative;
    overflow: hidden;
}

.slider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--slider-progress, 50%);
    background: linear-gradient(90deg, 
        var(--accent) 0%, 
        var(--accent) 100%);
    border-radius: 8px;
    transition: width 0.1s ease;
    pointer-events: none;
    z-index: 1;
}

/* Slider thumb positioning improvements */
.slider::-webkit-slider-thumb {
    position: relative;
    z-index: 2;
}

.slider::-moz-range-thumb {
    position: relative;
    z-index: 2;
}

/* Slider accessibility improvements */
.slider:focus-visible {
    outline: none;
}

.slider:focus-visible::-webkit-slider-thumb {
    box-shadow: var(--slider-thumb-shadow-hover), 0 0 0 4px var(--slider-focus-ring);
}

.slider:focus-visible::-moz-range-thumb {
    box-shadow: var(--slider-thumb-shadow-hover), 0 0 0 4px var(--slider-focus-ring);
}





/* Enhanced Color Picker Styles */
input[type="color"] {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    cursor: pointer;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 8px;
}

/* Enhanced palette display styles */
#palette-display {
    position: relative;
    z-index: 1;
}

.palette-swatch {
    position: relative;
    transition: all 0.3s ease;
    z-index: 1;
}

.palette-swatch:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1001;
}

.palette-swatch .color-info {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 10px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.palette-swatch:hover .color-info {
    opacity: 1;
}

/* Color info display */
.color-info-display {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-secondary);
}

.color-info-display span {
    padding: 2px 6px;
    background: var(--bg-primary);
    border-radius: 4px;
    font-family: 'Courier New', monospace;
}


/* Logo Styles */
header img.logo-light,
header img.logo-dark {
    width: 80px !important;
    height: 80px !important;
    object-fit: contain;
    transition: all 0.3s ease;
}

/* Theme-specific logo visibility */
.light-theme .logo-light {
    display: block !important;
}

.light-theme .logo-dark {
    display: none !important;
}

.dark-theme .logo-light {
    display: none !important;
}

.dark-theme .logo-dark {
    display: block !important;
}

/* Logo container background to match header */
header .flex.items-center.justify-center.rounded-lg.bg-gradient-to-br.from-accent.to-accent\/80.p-2 {
    background: transparent !important;
    border: none;
    box-shadow: none;
    width: 100px !important;
    height: 100px !important;
}

/* Theme Toggle Button - Completely Clean */
#theme-toggle {
    background: linear-gradient(135deg, var(--accent) 0%, rgba(61, 189, 245, 0.8) 100%);
    color: #ffffff;
    border: 1px solid var(--accent);
    box-shadow: 0 2px 8px rgba(61, 189, 245, 0.08);
    font-weight: 600;
    /* Optimize for instant feedback */
    will-change: transform, background-color;
    /* Prevent layout shifts */
    min-width: 40px;
    min-height: 40px;
    /* Instant transitions */
    transition: transform 0.1s ease-out, 
                background-color 0.1s ease-out,
                box-shadow 0.1s ease-out;
}



/* Dark theme theme toggle button */
.dark-theme #theme-toggle {
    background: 
        linear-gradient(135deg, var(--accent) 0%, rgba(88, 166, 255, 0.8) 100%),
        radial-gradient(circle at center, rgba(88, 166, 255, 0.2) 0%, transparent 70%);
    border: 1px solid var(--accent);
    box-shadow: 
        0 2px 8px rgba(88, 166, 255, 0.15),
        0 1px 4px rgba(1, 4, 9, 0.1);
}

/* Theme toggle button icons - Permanent Gold color styling with smooth transitions */
#theme-toggle svg {
    color: #FFD700 !important; /* Beautiful gold color */
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.6));
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    opacity: 1;
    transform: scale(1);
}

.dark-theme #theme-toggle svg {
    color: #FFD700 !important; /* Gold color in dark mode */
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.7));
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Icon fade animations for smooth theme switching */
#theme-toggle svg.hidden {
    opacity: 0 !important;
    transform: scale(0.8) !important;
    pointer-events: none;
}

#theme-toggle svg:not(.hidden) {
    opacity: 1 !important;
    transform: scale(1) !important;
}



/* Enhanced gold glow effect */
#theme-toggle svg {
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Permanent gold shimmer effect */
@keyframes goldShimmer {
    0% {
        filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.6));
    }
    50% {
        filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
    }
    100% {
        filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.6));
    }
}

/* Permanent shimmer animation */
#theme-toggle svg {
    animation: goldShimmer 2s ease-in-out infinite;
}

/* Enhanced Random Button and Color Input Styles */
#random-color {
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

#random-color:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

#random-color:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Enhanced Color Picker Styles */
#seed-color {
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

#seed-color:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Enhanced Hex Input Styles */
#hex-input {
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

#hex-input:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    transform: translateY(-1px);
}

/* Enhanced Color Info Display */
#color-info-rgb,
#color-info-hsl {
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

#color-info-rgb:hover,
#color-info-hsl:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Dark mode specific enhancements */
.dark-theme #random-color {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dark-theme #random-color:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.dark-theme #seed-color {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dark-theme #seed-color:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.dark-theme #hex-input {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.dark-theme #hex-input:focus {
    box-shadow: 0 0 0 3px rgba(61, 189, 245, 0.2);
}

.dark-theme #color-info-rgb,
.dark-theme #color-info-hsl {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.dark-theme #color-info-rgb:hover,
.dark-theme #color-info-hsl:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
} 

/* OLD TOOLTIP SYSTEM REMOVED - Replaced with modern popup card system */

/* OLD TOOLTIP POSITIONING SYSTEM REMOVED - Replaced with modern popup card system */

/* OLD TOOLTIP SYSTEM COMPLETELY REMOVED - Replaced with modern popup card system */

/* OLD TOOLTIP SYSTEM REMOVED - Replaced with modern popup card system */

/* OLD TOOLTIP SYSTEM COMPLETELY REMOVED - Replaced with modern popup card system */

/* Platform Preloader - Modular, Theme-Aware, Animated */
.platform-preloader {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--preloader-bg, #fff);
  transition: opacity 0.5s cubic-bezier(.4,0,.2,1);
  opacity: 1;
  pointer-events: all;
}

.platform-preloader.hide {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(.4,0,.2,1);
}

.preloader-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  animation: preloader-bounce 1.2s infinite alternate cubic-bezier(.4,0,.2,1);
}

/* Platform Preloader Logo - Higher specificity to prevent conflicts */
.platform-preloader .preloader-logo svg {
  color: var(--preloader-accent, #38bdf8) !important;
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 2px 12px rgba(56,189,248,0.15));
  animation: preloader-spin 1.5s linear infinite;
}

/* Platform Preloader Title - Higher specificity to prevent conflicts */
.platform-preloader .preloader-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--preloader-accent, #38bdf8) !important;
  text-shadow: 0 2px 8px rgba(56,189,248,0.08);
}

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

@keyframes preloader-bounce {
  0% { transform: translateY(0);}
  100% { transform: translateY(-12px);}
}

/* Platform Preloader Blocks - Higher specificity to prevent conflicts */
.platform-preloader .preloader-blocks .block {
  fill: var(--preloader-accent, #38bdf8) !important;
  opacity: 0.7;
  transform: scale(0.7);
  animation: block-appear 1.2s cubic-bezier(.4,0,.2,1) forwards;
}
/* Platform Preloader Block Animation Delays - Higher specificity */
.platform-preloader .preloader-blocks .block1 { animation-delay: 0.0s; }
.platform-preloader .preloader-blocks .block2 { animation-delay: 0.1s; }
.platform-preloader .preloader-blocks .block3 { animation-delay: 0.2s; }
.platform-preloader .preloader-blocks .block4 { animation-delay: 0.3s; }
.platform-preloader .preloader-blocks .block5 { animation-delay: 0.4s; }
.platform-preloader .preloader-blocks .block6 { animation-delay: 0.5s; }
.platform-preloader .preloader-blocks .block7 { animation-delay: 0.6s; }
.platform-preloader .preloader-blocks .block8 { animation-delay: 0.7s; }
.platform-preloader .preloader-blocks .block9 { animation-delay: 0.8s; }

@keyframes block-appear {
  0%   { opacity: 0; transform: scale(0.3) translateY(20px);}
  60%  { opacity: 1; transform: scale(1.1) translateY(-4px);}
  80%  { opacity: 1; transform: scale(0.95) translateY(2px);}
  100% { opacity: 0.7; transform: scale(1) translateY(0);}
}

/* Platform Preloader Center Block Pulse - Higher specificity */
.platform-preloader .preloader-blocks .block5 {
  /* Center block pulses to draw attention */
  animation: block-center-pulse 1.2s 0.4s cubic-bezier(.4,0,.2,1) infinite alternate;
}
@keyframes block-center-pulse {
  0%   { opacity: 0.7; transform: scale(1);}
  100% { opacity: 1;   transform: scale(1.15);}
}

/* Platform Preloader Subtitle - Higher specificity to prevent conflicts */
.platform-preloader .preloader-subtitle {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--preloader-accent, #38bdf8) !important;
  opacity: 0.8;
  margin-top: 0.25rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

/* ===== PRELOADER MOBILE CONSISTENCY FIXES ===== */

/* Ensure preloader animations maintain consistent timing across all screen sizes */
@media (max-width: 768px) {
    /* Override mobile animation duration reduction for preloader */
    .platform-preloader .preloader-logo svg {
        animation-duration: 1.5s !important; /* Maintain original rotation speed */
        animation-timing-function: linear !important;
    }
    
    .platform-preloader .preloader-logo {
        animation-duration: 1.2s !important; /* Maintain original bounce speed */
        animation-timing-function: cubic-bezier(.4,0,.2,1) !important;
    }
    
    .platform-preloader .preloader-blocks .block {
        animation-duration: 1.2s !important; /* Maintain original block animation speed */
        animation-timing-function: cubic-bezier(.4,0,.2,1) !important;
    }
    
    .platform-preloader .preloader-blocks .block5 {
        animation-duration: 1.2s !important; /* Maintain original center pulse speed */
        animation-timing-function: cubic-bezier(.4,0,.2,1) !important;
    }
}

/* Ensure preloader animations are consistent on all screen sizes */
@media (max-width: 480px) {
    .platform-preloader .preloader-logo svg {
        animation-duration: 1.5s !important;
        animation-timing-function: linear !important;
    }
    
    .platform-preloader .preloader-logo {
        animation-duration: 1.2s !important;
        animation-timing-function: cubic-bezier(.4,0,.2,1) !important;
    }
    
    .platform-preloader .preloader-blocks .block {
        animation-duration: 1.2s !important;
        animation-timing-function: cubic-bezier(.4,0,.2,1) !important;
    }
    
    .platform-preloader .preloader-blocks .block5 {
        animation-duration: 1.2s !important;
        animation-timing-function: cubic-bezier(.4,0,.2,1) !important;
    }
}

/* Ultra-small screens - maintain consistent preloader behavior */
@media (max-width: 360px) {
    .platform-preloader .preloader-logo svg {
        animation-duration: 1.5s !important;
        animation-timing-function: linear !important;
    }
    
    .platform-preloader .preloader-logo {
        animation-duration: 1.2s !important;
        animation-timing-function: cubic-bezier(.4,0,.2,1) !important;
    }
    
    .platform-preloader .preloader-blocks .block {
        animation-duration: 1.2s !important;
        animation-timing-function: cubic-bezier(.4,0,.2,1) !important;
    }
    
    .platform-preloader .preloader-blocks .block5 {
        animation-duration: 1.2s !important;
        animation-timing-function: cubic-bezier(.4,0,.2,1) !important;
    }
}

/* Extra-ultra-small screens - maintain consistent preloader behavior */
@media (max-width: 320px) {
    .platform-preloader .preloader-logo svg {
        animation-duration: 1.5s !important;
        animation-timing-function: linear !important;
    }
    
    .platform-preloader .preloader-logo {
        animation-duration: 1.2s !important;
        animation-timing-function: cubic-bezier(.4,0,.2,1) !important;
    }
    
    .platform-preloader .preloader-blocks .block {
        animation-duration: 1.2s !important;
        animation-timing-function: cubic-bezier(.4,0,.2,1) !important;
    }
    
    .platform-preloader .preloader-blocks .block5 {
        animation-duration: 1.2s !important;
        animation-timing-function: cubic-bezier(.4,0,.2,1) !important;
    }
}

:root {
  --preloader-bg: #fff;
  --preloader-accent: #38bdf8;
}
.dark-mode {
  --preloader-bg: #1e293b;
  --preloader-accent: #38bdf8;
}

/* Main content fade-in */
.main-content {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.main-content.fade-in {
    opacity: 1;
}





/* Color input system responsive layout */
.color-input-system {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.color-input-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Form controls responsive layout */
.form-control-row {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.form-control-row .flex {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.form-label {
    min-width: 5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.slider-value {
    min-width: 3rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Enhanced slider touch targets */
.slider {
    min-height: 2rem; /* Better touch target for mobile */
    cursor: pointer;
}

/* Mobile-first responsive breakpoints */
@media (max-width: 1024px) {
}

@media (max-width: 768px) {
    
    .color-input-system {
        gap: 0.5rem;
    }
    
    .color-input-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    
    #seed-color {
        width: 3rem;
        height: 3rem;
        align-self: flex-start;
    }
    
    #hex-input {
        width: 100%;
        min-width: 0;
    }
    
    #random-color {
        width: 100%;
        justify-content: center;
        padding: 0.75rem 1rem;
    }
    
    .form-control-row .flex {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    
    .form-label {
        min-width: auto;
        text-align: left;
    }
    
    .slider {
        width: 100%;
        min-height: 2.5rem; /* Larger touch target on mobile */
    }
    
    .slider-value {
        min-width: 4rem;
        text-align: center;
    }
    
}

/* ===== RESPONSIVE PANEL SCROLLBAR STYLES ===== */

/* Responsive panel scrollbar - consistent with app design */
#responsive-panel .h-full.overflow-y-auto::-webkit-scrollbar {
    width: 12px;
    background: transparent;
}

#responsive-panel .h-full.overflow-y-auto::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    margin: 4px 0;
}

#responsive-panel .h-full.overflow-y-auto::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--accent), var(--accent)/80);
    border-radius: 6px;
    border: 1px solid var(--accent);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

#responsive-panel .h-full.overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, var(--accent), var(--accent));
    border-color: var(--accent);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: scale(1.05);
}

#responsive-panel .h-full.overflow-y-auto::-webkit-scrollbar-thumb:active {
    background: linear-gradient(135deg, var(--accent), var(--accent)/90);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Firefox scrollbar for responsive panel */
#responsive-panel .h-full.overflow-y-auto {
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--bg-secondary);
}

/* Dark theme responsive panel scrollbar */
.dark-theme #responsive-panel .h-full.overflow-y-auto::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

.dark-theme #responsive-panel .h-full.overflow-y-auto::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--accent), var(--accent)/80);
    border-color: var(--accent);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dark-theme #responsive-panel .h-full.overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, var(--accent-dark), var(--accent));
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

.dark-theme #responsive-panel .h-full.overflow-y-auto::-webkit-scrollbar-thumb:active {
    background: var(--accent-dark);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Panel Overlay */
#panel-overlay {
    transition: opacity 0.3s ease-in-out;
    backdrop-filter: blur(2px);
    top: var(--header-height, 4rem);
    height: calc(100vh - var(--header-height, 4rem));
    z-index: 150 !important; /* Below panel (200) but above tooltips (50) */
}

#panel-overlay.overlay-active {
    opacity: 1;
    pointer-events: auto;
}

/* Panel Sections */
#panel-palette-generator {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem;
}

.dark-theme #panel-palette-generator {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Panel Form Controls Optimization */
#responsive-panel .form-control-row {
    gap: 1rem;
}

#responsive-panel .form-label {
    min-width: 5rem;
    font-weight: 500;
}

#responsive-panel .slider-value {
    min-width: 3rem;
    text-align: center;
    font-weight: 500;
}

/* Panel Color Input System */
#responsive-panel .color-input-system {
    gap: 0.75rem;
}

#responsive-panel .color-input-row {
    gap: 0.75rem;
}

/* Panel Button Optimization */
#responsive-panel .btn-fluid {
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
}

#responsive-panel .btn-fluid:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

#responsive-panel .btn-fluid:active {
    transform: translateY(0);
}

/* Enhanced Panel Layout for Wider Width */
#responsive-panel .color-input-system {
    gap: 1rem;
}

#responsive-panel .color-input-row {
    gap: 1rem;
}

#responsive-panel .form-control-row {
    gap: 1.5rem;
}

#responsive-panel .form-label {
    min-width: 6rem;
    font-weight: 500;
}

#responsive-panel .slider-value {
    min-width: 4rem;
    text-align: center;
    font-weight: 500;
}

/* Panel Section Enhancements */
#panel-palette-generator {
    padding: 1.5rem;
    margin-bottom: 2rem;
}

#responsive-panel .space-y-8 > * + * {
    margin-top: 2rem;
}

/* Panel Form Controls */
#responsive-panel input,
#responsive-panel select {
    font-size: 0.75rem;
    line-height: 1rem;
}

#responsive-panel .slider {
    height: 4px;
}

#responsive-panel .slider::-webkit-slider-track {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 6px;
    background: linear-gradient(90deg, 
        var(--slider-track-start) 0%, 
        var(--slider-track-end) 100%);
    border: none;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#responsive-panel .slider::-moz-range-track {
    height: 4px;
    border-radius: 6px;
    background: linear-gradient(90deg, 
        var(--slider-track-start) 0%, 
        var(--slider-track-end) 100%);
    border: none;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#responsive-panel .slider::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--slider-thumb-bg);
    cursor: pointer;
    border: 2px solid var(--slider-thumb-border);
    box-shadow: var(--slider-thumb-shadow);
    z-index: 2;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#responsive-panel .slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: var(--slider-thumb-shadow-hover);
    background: var(--slider-thumb-bg-hover);
}

#responsive-panel .slider::-webkit-slider-thumb:active {
    transform: scale(1.1);
    box-shadow: var(--slider-thumb-shadow-active);
}

#responsive-panel .slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--slider-thumb-bg);
    cursor: pointer;
    border: 2px solid var(--slider-thumb-border);
    box-shadow: var(--slider-thumb-shadow);
    z-index: 2;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#responsive-panel .slider::-moz-range-thumb:hover {
    transform: scale(1.15);
    box-shadow: var(--slider-thumb-shadow-hover);
    background: var(--slider-thumb-bg-hover);
}

#responsive-panel .slider::-moz-range-thumb:active {
    transform: scale(1.1);
    box-shadow: var(--slider-thumb-shadow-active);
}

/* Panel Palette Display */
#panel-palette-display {
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

#panel-palette-display .palette-swatch {
    aspect-ratio: 1;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    position: relative;
    transition: all 0.3s ease;
    z-index: 1;
}

#panel-palette-display .palette-swatch:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1001;
}

#panel-palette-display .palette-swatch .color-info {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 10px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#panel-palette-display .palette-swatch:hover .color-info {
    opacity: 1;
}

/* Panel Saturation & Brightness Sliders - Match Full Screen Appearance */
#responsive-panel #saturation-slider {
    background: var(--saturation-gradient, linear-gradient(90deg, 
        hsl(0, 0%, 50%) 0%, 
        hsl(0, 25%, 50%) 12.5%, 
        hsl(0, 50%, 50%) 25%, 
        hsl(0, 75%, 50%) 37.5%, 
        hsl(0, 100%, 50%) 50%, 
        hsl(60, 100%, 50%) 62.5%, 
        hsl(120, 100%, 50%) 75%, 
        hsl(180, 100%, 50%) 87.5%, 
        hsl(240, 100%, 50%) 100%));
    --slider-progress: 50%;
    position: relative;
    overflow: hidden;
}

#responsive-panel #saturation-slider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--slider-progress, 50%);
    background: var(--saturation-gradient, linear-gradient(90deg, 
        hsl(0, 0%, 50%) 0%, 
        hsl(0, 25%, 50%) 12.5%, 
        hsl(0, 50%, 50%) 25%, 
        hsl(0, 75%, 50%) 37.5%, 
        hsl(0, 100%, 50%) 50%, 
        hsl(60, 100%, 50%) 62.5%, 
        hsl(120, 100%, 50%) 75%, 
        hsl(180, 100%, 50%) 87.5%, 
        hsl(240, 100%, 50%) 100%));
    z-index: 1;
    pointer-events: none;
}

#responsive-panel #saturation-slider::-webkit-slider-track {
    background: var(--saturation-gradient, linear-gradient(90deg, 
        hsl(0, 0%, 50%) 0%, 
        hsl(0, 25%, 50%) 12.5%, 
        hsl(0, 50%, 50%) 25%, 
        hsl(0, 75%, 50%) 37.5%, 
        hsl(0, 100%, 50%) 50%, 
        hsl(60, 100%, 50%) 62.5%, 
        hsl(120, 100%, 50%) 75%, 
        hsl(180, 100%, 50%) 87.5%, 
        hsl(240, 100%, 50%) 100%));
}

#responsive-panel #saturation-slider::-moz-range-track {
    background: var(--saturation-gradient, linear-gradient(90deg, 
        hsl(0, 0%, 50%) 0%, 
        hsl(0, 25%, 50%) 12.5%, 
        hsl(0, 50%, 50%) 25%, 
        hsl(0, 75%, 50%) 37.5%, 
        hsl(0, 100%, 50%) 50%, 
        hsl(60, 100%, 50%) 62.5%, 
        hsl(120, 100%, 50%) 75%, 
        hsl(180, 100%, 50%) 87.5%, 
        hsl(240, 100%, 50%) 100%));
}

#responsive-panel #brightness-slider {
    background: var(--brightness-gradient, linear-gradient(90deg, 
        #000000 0%, 
        #1a1a1a 10%, 
        #333333 20%, 
        #4d4d4d 30%, 
        #666666 40%, 
        #808080 50%, 
        #999999 60%, 
        #b3b3b3 70%, 
        #cccccc 80%, 
        #e6e6e6 90%, 
        #ffffff 100%));
    --slider-progress: 50%;
    position: relative;
    overflow: hidden;
}

#responsive-panel #brightness-slider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--slider-progress, 50%);
    background: var(--brightness-gradient, linear-gradient(90deg, 
        #000000 0%, 
        #1a1a1a 10%, 
        #333333 20%, 
        #4d4d4d 30%, 
        #666666 40%, 
        #808080 50%, 
        #999999 60%, 
        #b3b3b3 70%, 
        #cccccc 80%, 
        #e6e6e6 90%, 
        #ffffff 100%));
    z-index: 1;
    pointer-events: none;
}

#responsive-panel #brightness-slider::-webkit-slider-track {
    background: var(--brightness-gradient, linear-gradient(90deg, 
        #000000 0%, 
        #1a1a1a 10%, 
        #333333 20%, 
        #4d4d4d 30%, 
        #666666 40%, 
        #808080 50%, 
        #999999 60%, 
        #b3b3b3 70%, 
        #cccccc 80%, 
        #e6e6e6 90%, 
        #ffffff 100%));
}

#responsive-panel #brightness-slider::-moz-range-track {
    background: var(--brightness-gradient, linear-gradient(90deg, 
        #000000 0%, 
        #1a1a1a 10%, 
        #333333 20%, 
        #4d4d4d 30%, 
        #666666 40%, 
        #808080 50%, 
        #999999 60%, 
        #b3b3b3 70%, 
        #cccccc 80%, 
        #e6e6e6 90%, 
        #ffffff 100%));
}

/* Panel Slider Focus Effects */
#responsive-panel .slider:focus {
    outline: none;
}

#responsive-panel .slider:focus::-webkit-slider-thumb {
    box-shadow: var(--slider-thumb-shadow-hover), 0 0 0 3px var(--slider-focus-ring);
}

#responsive-panel .slider:focus::-moz-range-thumb {
    box-shadow: var(--slider-thumb-shadow-hover), 0 0 0 3px var(--slider-focus-ring);
}

/* Responsive Breakpoints */
@media (max-width: 1279px) {
    /* Hide desktop controls on smaller screens */
    .xl\:col-span-2.hidden.xl\:block {
        display: none !important;
    }
    
    /* Make live preview full width */
    .xl\:col-span-3 {
        grid-column: span 1 / span 1;
    }
    
    /* Adjust panel width for smaller screens */
    #responsive-panel {
        width: 512px;
        max-width: 95vw;
        top: var(--header-height, 4rem);
        height: calc(100vh - var(--header-height, 4rem));
    }
    
    /* Ensure overlay doesn't cover header */
    #panel-overlay {
        top: var(--header-height, 4rem);
        height: calc(100vh - var(--header-height, 4rem));
    }
}

@media (max-width: 768px) {
    #responsive-panel {
        width: 460px;
        max-width: 96vw;
        top: var(--header-height, 4rem);
        height: calc(100vh - var(--header-height, 4rem));
    }
    
    #panel-overlay {
        top: var(--header-height, 4rem);
        height: calc(100vh - var(--header-height, 4rem));
    }
    
    #panel-toggle {
        left: 8px;
    }
}

@media (max-width: 480px) {
    #responsive-panel {
        width: 400px;
        max-width: 98vw;
        top: var(--header-height, 4rem);
        height: calc(100vh - var(--header-height, 4rem));
    }
    
    #panel-overlay {
        top: var(--header-height, 4rem);
        height: calc(100vh - var(--header-height, 4rem));
    }
    
    #panel-toggle {
        left: 4px;
        padding: 8px;
    }
    
    #panel-toggle svg {
        width: 16px;
        height: 16px;
    }
}

/* Panel Animation States */
#responsive-panel.panel-opening {
    transform: translateX(0);
}

#responsive-panel.panel-closing {
    transform: translateX(-100%);
}

/* Panel Toggle Icon Animation */
#panel-toggle-icon {
    transition: transform 0.3s ease-in-out;
}

#panel-toggle.panel-active #panel-toggle-icon {
    transform: rotate(180deg);
}

/* Focus Management */
#responsive-panel:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    #responsive-panel {
        border: 2px solid var(--border-color);
    }
    
    #panel-toggle {
        border: 2px solid var(--accent);
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    #responsive-panel,
    #panel-toggle,
    #panel-overlay {
        transition: none;
    }
    
    #panel-toggle-icon {
        transition: none;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    #panel-toggle {
        min-width: 44px;
        min-height: 44px;
    }
    
    #panel-close {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Landscape Orientation */
@media (max-width: 768px) and (orientation: landscape) {
    #responsive-panel {
        width: 400px;
        max-width: 90vw;
        top: var(--header-height, 4rem);
        height: calc(100vh - var(--header-height, 4rem));
        max-height: calc(100vh - var(--header-height, 4rem));
    }
    
    #panel-overlay {
        top: var(--header-height, 4rem);
        height: calc(100vh - var(--header-height, 4rem));
    }
    

}

/* Additional Small Screen Breakpoints */
@media (max-width: 360px) {
    #responsive-panel {
        width: 320px;
        max-width: 98vw;
        top: var(--header-height, 4rem);
        height: calc(100vh - var(--header-height, 4rem));
    }
    
    #panel-overlay {
        top: var(--header-height, 4rem);
        height: calc(100vh - var(--header-height, 4rem));
    }
    
    #panel-toggle {
        left: 2px;
        padding: 6px;
    }
    
    #panel-toggle svg {
        width: 14px;
        height: 14px;
    }
}

/* Smart Color Wheel Component Styles */

/* Modal Animation */
#color-wheel-modal {
    animation: modalFadeIn 0.3s ease-out;
    z-index: 9999;
    /* Enhanced mobile support */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* Performance optimizations */
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Smooth transitions */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* Edge case handling */
    min-width: 280px;
    min-height: 400px;
    /* Cross-browser compatibility */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    /* Fallback for older browsers */
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
}

#color-wheel-modal.hidden {
    display: none;
}

/* Smart, centered, responsive modal content wrapper */
.cw-modal-content {
    /* Centered by parent flex container; constrain for all screens */
    width: 100%;
    max-width: 72rem; /* matches max-w-6xl */
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Modal Header - Compact and responsive */
.cw-modal-header {
    flex-shrink: 0; /* Prevent header from shrinking */
    min-height: 3rem; /* Ensure consistent minimum height */
}

/* Scroll only the inner content area, keep header fixed inside modal */
.cw-modal-content > .p-6 {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Accessibility modal tweaks (reuse modal system) - optimized for performance */
.a11y-modal-content { 
    box-sizing: border-box;
    /* Performance optimizations */
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Hardware acceleration */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    /* Prevent layout shifts */
    contain: layout style paint;
}

/* Ensure accessibility modal appears above all other elements */
#a11y-dashboard-modal {
    z-index: 200000 !important; /* Higher than popup cards (150000) and color wheel (9999) */
    /* Performance optimizations */
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Ensure accessibility modal content is properly centered */
#a11y-dashboard-modal .a11y-modal-content {
    /* Inherits centering from cw-modal-content class */
    position: relative;
}

/* Enhanced Accessibility Dashboard Styling */
#a11y-dashboard-content {
    /* Smooth scrolling for better UX */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* ===== ACCESSIBILITY DASHBOARD MODAL SCROLLBAR ===== */
/* Ultra-optimized scrollbar for accessibility dashboard modal */
#a11y-dashboard-content {
    /* Performance optimizations for smooth scrolling */
    will-change: scroll-position;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Hardware acceleration */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    /* Smooth scrolling */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* Optimized scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--bg-secondary);
    /* Prevent layout shifts */
    contain: layout style paint;
}

#a11y-dashboard-content::-webkit-scrollbar {
    width: 8px; /* Reduced width for better performance */
    background: transparent;
}

#a11y-dashboard-content::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 4px;
    /* Simplified styling for better performance */
    border: none;
    margin: 2px 0;
}

#a11y-dashboard-content::-webkit-scrollbar-thumb {
    background: var(--accent); /* Simplified solid color for better performance */
    border-radius: 4px;
    border: none;
    /* Removed complex gradients and shadows for better performance */
    transition: background-color 0.2s ease;
}

#a11y-dashboard-content::-webkit-scrollbar-thumb:hover {
    background: var(--accent-dark);
}

#a11y-dashboard-content::-webkit-scrollbar-thumb:active {
    background: var(--accent-dark);
}

/* Dark theme scrollbar enhancements - simplified for performance */
.dark-theme #a11y-dashboard-content::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

.dark-theme #a11y-dashboard-content::-webkit-scrollbar-thumb {
    background: var(--accent-dark);
}

.dark-theme #a11y-dashboard-content::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}


/* Professional section styling - optimized for performance */
#a11y-dashboard-content section {
    /* Performance optimizations */
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Reduced animation duration for better performance */
    animation: fadeInUp 0.3s ease-out;
    /* Prevent layout shifts */
    contain: layout style paint;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px) translateZ(0); /* Reduced movement for better performance */
    }
    to {
        opacity: 1;
        transform: translateY(0) translateZ(0);
    }
}

/* Disable animations on reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    #a11y-dashboard-content section {
        animation: none;
    }
}

/* Enhanced progress ring animation */
#a11y-dashboard-content .progress-ring {
    animation: progressRingFill 1.5s ease-out;
}

@keyframes progressRingFill {
    from {
        stroke-dashoffset: 100%;
    }
    to {
        stroke-dashoffset: var(--progress-offset);
    }
}

/* Professional hover effects for interactive elements */
#a11y-dashboard-content .color-swatch {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


/* Enhanced status indicators */
#a11y-dashboard-content .status-indicator {
    position: relative;
    overflow: hidden;
}

#a11y-dashboard-content .status-indicator::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}


/* Professional table styling */
#a11y-dashboard-content table {
    border-collapse: separate;
    border-spacing: 0;
}

#a11y-dashboard-content table th {
    background: linear-gradient(135deg, var(--surface-elevated) 0%, var(--secondary) 100%);
    position: sticky;
    top: 0;
    z-index: 10;
}


/* Enhanced recommendation cards */
#a11y-dashboard-content .recommendation-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

#a11y-dashboard-content .recommendation-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--accent);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}



/* Professional empty state */
#a11y-dashboard-content .empty-state {
    background: linear-gradient(135deg, var(--surface-elevated) 0%, var(--secondary) 100%);
    border: 2px dashed var(--border-color);
}

/* Enhanced color blindness analysis */
#a11y-dashboard-content .color-blindness-section {
    transition: all 0.3s ease;
}


/* Professional loading states */
#a11y-dashboard-content .loading-shimmer {
    background: linear-gradient(90deg, 
        var(--secondary) 25%, 
        var(--surface-elevated) 50%, 
        var(--secondary) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

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

/* Enhanced mobile responsiveness */
@media (max-width: 768px) {
    #a11y-dashboard-content section {
        margin-bottom: 1.5rem;
        padding: 1rem;
    }
    
    #a11y-dashboard-content .grid {
        gap: 0.75rem;
    }
    
    #a11y-dashboard-content table {
        font-size: 0.875rem;
    }
    
    #a11y-dashboard-content .progress-ring {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 480px) {
    #a11y-dashboard-content section {
        margin-bottom: 1rem;
        padding: 0.75rem;
    }
    
    #a11y-dashboard-content .grid {
        gap: 0.5rem;
    }
    
    #a11y-dashboard-content table th,
    #a11y-dashboard-content table td {
        padding: 0.5rem 0.25rem;
    }
}

/* Mobile-specific z-index management for accessibility modal */
@media (max-width: 768px) {
    #a11y-dashboard-modal {
        z-index: 200020 !important; /* Higher than mobile dropdowns and popup cards */
    }
}

@media (max-width: 480px) {
    #a11y-dashboard-modal {
        z-index: 200030 !important; /* Highest priority on very small screens */
    }
}

/* Accessibility Dashboard Close Button - Eliminate Black Frame Flash */
#a11y-dashboard-close {
    /* Completely remove all focus styles that could cause black frame */
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    
    /* Prevent any default browser focus styles */
    -webkit-tap-highlight-color: transparent;
    -webkit-focus-ring-color: transparent;
    -moz-outline: none;
    
    /* Smooth transitions without visual artifacts */
    transition: background-color 0.2s ease, transform 0.1s ease;
    
    /* Ensure no visual artifacts on interaction */
    background-color: transparent;
    position: relative;
    overflow: hidden;
}

/* Remove any focus states that could cause black frame */
#a11y-dashboard-close:focus,
#a11y-dashboard-close:focus-visible,
#a11y-dashboard-close:active,
#a11y-dashboard-close:hover {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background-color: rgba(0, 0, 0, 0.05);
    transform: none;
}

/* Dark theme specific adjustments */
.dark-theme #a11y-dashboard-close:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Ensure SVG icon doesn't cause visual artifacts */
#a11y-dashboard-close svg {
    transition: none;
    transform: none;
}

#a11y-dashboard-close:hover svg {
    transform: none;
}

/* Prevent any animation or transition artifacts */
#a11y-dashboard-close * {
    transition: none !important;
    animation: none !important;
}

/* Ensure modal remains perfectly centered and sized on all viewports */
@media (max-width: 1024px) {
    .cw-modal-content {
        max-width: 98vw;
        max-height: 95vh;
        margin: 0 1vw;
        border-radius: 0.75rem;
    }
    
    .cw-modal-header {
        padding: 0.75rem 1rem; /* Slightly more compact on tablets */
    }
}

@media (max-width: 768px) {
    .cw-modal-content {
        max-width: calc(100vw - 16px); /* Leave 8px on each side */
        max-height: 100vh;
        margin: 0 8px; /* Equal small margins on left and right */
        border-radius: 0.5rem; /* Maintain rounded corners with margins */
    }
    
    .cw-modal-header {
        padding: 0.5rem 0.75rem; /* More compact on mobile */
    }
    
    .cw-modal-header h2 {
        font-size: 1rem; /* Smaller font on mobile */
    }
}

@media (max-width: 480px) {
    .cw-modal-content {
        max-width: calc(100vw - 8px); /* Leave 4px on each side */
        max-height: 100vh;
        margin: 0 4px; /* Smaller equal margins for very small screens */
        border-radius: 0.375rem; /* Slightly smaller rounded corners */
    }
    
    .cw-modal-header {
        padding: 0.375rem 0.5rem; /* Ultra-compact on small screens */
        min-height: 2.5rem;
    }
    
    .cw-modal-header h2 {
        font-size: 0.875rem; /* Even smaller font on very small screens */
    }
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Color Wheel Canvas */
#color-wheel-canvas {
    border-radius: 50%;
    cursor: crosshair;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    box-shadow: 
        0 2px 6px rgba(0, 0, 0, 0.25),
        0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    /* Enhanced touch interaction */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    /* Performance optimizations */
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Smooth scaling */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    /* Edge case handling */
    min-width: 200px;
    min-height: 200px;
    max-width: 500px;
    max-height: 500px;
    /* Cross-browser compatibility */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    /* Fallback for older browsers */
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
}

#color-wheel-canvas:hover {
    transform: translateY(-1px);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.3),
        0 2px 6px rgba(0, 0, 0, 0.15);
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.15));
}

/* Harmony Button States */
.harmony-btn {
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent;
    /* Enhanced touch interaction */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    min-height: 44px; /* Touch-friendly minimum */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* Performance optimizations */
    will-change: transform, background-color;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.harmony-btn.active {
    background-color: var(--accent);
    color: white;
    border-color: var(--accent);
}

.harmony-btn:not(.active):hover {
    background-color: var(--primary);
    border-color: var(--border-color);
}

.harmony-btn:active {
    transform: scale(0.98);
    transition: transform 0.1s ease-in-out;
}

/* Color Blindness Button States */
.colorblind-btn {
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent;
}

.colorblind-btn.active {
    background-color: var(--accent);
    color: white;
    border-color: var(--accent);
}

.colorblind-btn:not(.active):hover {
    background-color: var(--primary);
    border-color: var(--border-color);
}

/* Palette Swatches */
.color-wheel-swatch {
    aspect-ratio: 1;
    border-radius: 0.5rem;
    border: 2px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    position: relative;
    overflow: hidden;
    min-height: 45px;
    max-height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Lead point (first color) styling - larger size */
.color-wheel-swatch:first-child {
    transform: scale(1.1);
    border-width: 3px;
}

.color-wheel-swatch:hover {
    transform: scale(1.05);
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Enhanced hover for lead point */
.color-wheel-swatch:first-child:hover {
    transform: scale(1.15);
    border-color: var(--accent);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.color-wheel-swatch .swatch-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-family: monospace;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.color-wheel-swatch:hover .swatch-info {
    opacity: 1;
}

/* Contrast Checker */
#contrast-preview {
    background: linear-gradient(45deg, transparent 50%, rgba(0,0,0,0.1) 50%);
    position: relative;
}

#contrast-preview::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    border-radius: inherit;
}

/* Accessibility Status Colors */
.wcag-pass {
    color: #10b981;
}

.wcag-fail {
    color: #ef4444;
}

.wcag-warn {
    color: #f59e0b;
}

/* Enhanced Mobile-First Responsive Design */
@media (max-width: 1024px) {
    #color-wheel-modal .max-w-6xl {
        max-width: 98vw;
        margin: 0 1vw;
        max-height: 95vh;
    }
    
    #color-wheel-canvas {
        width: min(350px, 50vw);
        height: min(350px, 50vw);
        min-width: 280px;
        min-height: 280px;
    }
    
    /* Optimize grid layout for medium screens */
    #color-wheel-modal .lg\\:grid-cols-12 {
        grid-template-columns: 1fr;
    }
    
    #color-wheel-modal .lg\\:col-span-8 {
        grid-column: span 1;
    }
    
    #color-wheel-modal .lg\\:col-span-4 {
        grid-column: span 1;
    }
    
    /* Optimize accessibility dashboard for medium screens */
    #color-wheel-modal .lg\\:col-span-4,
    #color-wheel-modal .lg\\:col-span-5,
    #color-wheel-modal .lg\\:col-span-3 {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    #color-wheel-modal .max-w-6xl {
        max-width: calc(100vw - 16px); /* Leave 8px on each side */
        margin: 0 8px; /* Equal small margins on left and right */
        max-height: 100vh;
        border-radius: 0.5rem; /* Maintain rounded corners with margins */
    }
    
    #color-wheel-modal .grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    #color-wheel-canvas {
        width: min(320px, 70vw);
        height: min(320px, 70vw);
        min-width: 260px;
        min-height: 260px;
    }
    
    .harmony-btn {
        font-size: 0.875rem;
        padding: 0.75rem 1rem;
        min-height: 44px; /* Touch-friendly minimum */
    }
    
    /* Optimize accessibility dashboard for mobile */
    #color-wheel-modal .grid.grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    #color-wheel-modal .grid.grid-cols-2 {
        grid-template-columns: 1fr;
    }
    
    /* Stack accessibility sections vertically on mobile */
    #color-wheel-modal .lg\\:col-span-4,
    #color-wheel-modal .lg\\:col-span-5,
    #color-wheel-modal .lg\\:col-span-3 {
        grid-column: span 1;
    }
    
    /* Enhanced mobile spacing */
    #color-wheel-modal .p-6 {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    #color-wheel-modal .max-w-6xl {
        max-width: calc(100vw - 8px); /* Leave 4px on each side */
        margin: 0 4px; /* Smaller equal margins for very small screens */
        max-height: 100vh;
        border-radius: 0.375rem; /* Slightly smaller rounded corners */
    }
    
    #color-wheel-modal .p-6 {
        padding: 1rem;
    }
    
    #color-wheel-canvas {
        width: min(280px, 80vw);
        height: min(280px, 80vw);
        min-width: 240px;
        min-height: 240px;
    }
    
    .color-wheel-swatch {
        aspect-ratio: 1;
        min-height: 60px;
    }
    
    .harmony-btn {
        font-size: 0.8125rem;
        padding: 0.625rem 0.875rem;
        min-height: 44px;
    }
}

/* Responsive Dropdown Styles for Color Wheel Modal */
.harmony-controls-dropdown,
.colorblind-controls-dropdown {
    position: relative;
    /* Ensure proper stacking context */
    z-index: 10;
    /* Create new stacking context to contain dropdowns */
    isolation: isolate;
    /* Add visual separation between sections */
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

/* Enhanced section isolation for Harmony Rules */
.harmony-controls-dropdown {
    /* Create stronger visual separation */
    background: var(--bg-secondary);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color);
}

/* Enhanced section isolation for Color Blindness */
.colorblind-controls-dropdown {
    /* Create stronger visual separation */
    background: var(--bg-secondary);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-top: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color);
    /* Ensure it stays below Harmony dropdown */
    z-index: 1;
    position: relative;
}

.harmony-dropdown-trigger,
.colorblind-dropdown-trigger {
    transition: all 0.2s ease-in-out;
}

.harmony-dropdown-trigger svg,
.colorblind-dropdown-trigger svg {
    transition: transform 0.2s ease-in-out;
}

.harmony-dropdown-menu,
.colorblind-dropdown-menu {
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    transform-origin: top;
    z-index: 200000; /* Ensure dropdowns appear above all other elements including tooltips */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    /* Ensure proper stacking context */
    isolation: isolate;
    /* Prevent interference with other sections */
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden; /* Prevent horizontal scroll */
    /* Add visual separation from parent */
    margin-top: 0.5rem;
    /* Enhanced shadow for better separation */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.1);
    /* Create visual barrier */
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    /* Ensure proper width constraints */
    width: 100%;
    box-sizing: border-box;
}

/* Specific z-index override for Harmony dropdown to appear above Color Blindness section and all tooltips */
.harmony-dropdown-menu {
    z-index: 200000 !important; /* Maximum priority to appear above all tooltips and sections */
    position: absolute !important;
    /* Ensure it creates its own stacking context */
    isolation: isolate !important;
    /* Force it above everything */
    transform: translateZ(0);
}

/* Ensure Color Blindness dropdown also appears above all tooltips */
.colorblind-dropdown-menu {
    z-index: 200000 !important; /* Maximum priority to appear above all tooltips and sections */
    position: absolute !important;
    /* Ensure it creates its own stacking context */
    isolation: isolate !important;
    /* Force it above everything */
    transform: translateZ(0);
}

.harmony-dropdown-menu.hidden,
.colorblind-dropdown-menu.hidden {
    opacity: 0;
    transform: scaleY(0);
    pointer-events: none;
    visibility: hidden;
}

/* Smooth dropdown animations */
.harmony-dropdown-menu:not(.hidden),
.colorblind-dropdown-menu:not(.hidden) {
    opacity: 1;
    transform: scaleY(1);
    visibility: visible;
    pointer-events: auto;
}

.harmony-dropdown-item,
.colorblind-dropdown-item {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    margin: 0.125rem;
    /* Prevent horizontal overflow */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: break-word;
}

/* Enhanced hover effects for all dropdown items - theme-adaptive blue hover */
.harmony-dropdown-item:hover,
.colorblind-dropdown-item:hover {
    background: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent) 100%);
    color: white;
    transform: translateX(2px) scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--accent-light);
    z-index: 1;
}

/* Active/selected state styling - only when not hovering */
.harmony-dropdown-item[aria-selected="true"]:not(:hover),
.colorblind-dropdown-item[aria-selected="true"]:not(:hover) {
    background-color: var(--accent);
    color: white;
    font-weight: 600;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Ensure all dropdown items have consistent base styling */
.harmony-dropdown-item,
.colorblind-dropdown-item {
    background-color: transparent !important;
    color: var(--text-primary) !important;
    font-weight: normal !important;
    box-shadow: none !important;
}

/* Override any conflicting styles for unselected items */
.harmony-dropdown-item[aria-selected="false"],
.colorblind-dropdown-item[aria-selected="false"] {
    background-color: transparent !important;
    color: var(--text-primary) !important;
    font-weight: normal !important;
    box-shadow: none !important;
}

/* Focus state for accessibility */
.harmony-dropdown-item:focus,
.colorblind-dropdown-item:focus {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    background-color: var(--primary);
}

/* Theme-specific hover enhancements */
.light-theme .harmony-dropdown-item:hover,
.light-theme .colorblind-dropdown-item:hover {
    background: linear-gradient(135deg, #2ba3d4 0%, #3dbdf5 50%, #7dd3f7 100%);
    box-shadow: 0 4px 12px rgba(61, 189, 245, 0.25), 0 2px 4px rgba(61, 189, 245, 0.15);
    border: 1px solid #7dd3f7;
}

.dark-theme .harmony-dropdown-item:hover,
.dark-theme .colorblind-dropdown-item:hover {
    background: linear-gradient(135deg, #4a9eff 0%, #58a6ff 50%, #7bb8ff 100%);
    box-shadow: 0 4px 12px rgba(88, 166, 255, 0.3), 0 2px 4px rgba(88, 166, 255, 0.2);
    border: 1px solid #7bb8ff;
}

/* Theme-specific section separation */
.light-theme .harmony-controls-dropdown,
.light-theme .colorblind-controls-dropdown {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-color: #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
}

.dark-theme .harmony-controls-dropdown,
.dark-theme .colorblind-controls-dropdown {
    background: linear-gradient(135deg, #0f1419 0%, #161b22 100%);
    border-color: #21262d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Active trigger state */
.harmony-dropdown-trigger.dropdown-active,
.colorblind-dropdown-trigger.dropdown-active {
    background-color: var(--primary);
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

/* Ensure dropdowns appear above popup help icons - removed conflicting z-index rule */

/* Ensure popup help icons don't interfere with dropdowns and panels */
.popup-help-icon {
    z-index: 50; /* Below panels (60) but above content to prevent interference */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Responsive Palette Grid Enhancements */
.responsive-palette-grid {
    transition: grid-template-columns 0.3s ease-in-out;
}

.responsive-palette-grid .color-wheel-swatch {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.responsive-palette-grid .color-wheel-swatch:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Smart Horizontal Layout for Small Screens */
@media (max-width: 768px) {
    .responsive-palette-grid {
        display: flex !important;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 0.5rem;
        padding: 0.25rem 0;
        scrollbar-width: thin;
        scrollbar-color: var(--accent) transparent;
        -webkit-overflow-scrolling: touch;
    }
    
    .responsive-palette-grid::-webkit-scrollbar {
        height: 4px;
    }
    
    .responsive-palette-grid::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .responsive-palette-grid::-webkit-scrollbar-thumb {
        background: var(--accent);
        border-radius: 2px;
    }
    
    .responsive-palette-grid::-webkit-scrollbar-thumb:hover {
        background: var(--accent);
        opacity: 0.8;
    }
    
    .responsive-palette-grid .color-wheel-swatch {
        flex-shrink: 0;
        min-width: 60px;
        min-height: 60px;
        width: 60px;
        height: 60px;
    }
}

/* Mobile-specific dropdown optimizations */
@media (max-width: 768px) {
    /* Enhanced section separation on mobile */
    .harmony-controls-dropdown {
        margin-bottom: 2.5rem;
        padding-bottom: 1.5rem;
        border-bottom: 2px solid var(--border-color);
    }
    
    .colorblind-controls-dropdown {
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        border-top: 2px solid var(--border-color);
        /* Ensure it stays below Harmony dropdown on mobile */
        z-index: 1;
        position: relative;
    }
    
    .harmony-dropdown-menu,
    .colorblind-dropdown-menu {
        max-height: 180px;
        overflow-y: auto;
        overflow-x: hidden; /* Prevent horizontal scroll on mobile */
        -webkit-overflow-scrolling: touch;
        /* Ensure proper positioning above all elements */
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 200020; /* Higher z-index for mobile to ensure visibility above all tooltips */
        /* Enhanced shadow for better visibility and separation */
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2), 0 6px 15px rgba(0, 0, 0, 0.15);
        /* Stronger visual barrier */
        border: 2px solid var(--border-color);
        border-radius: 0.75rem;
        /* Prevent visual interference */
        background: var(--bg-secondary);
        backdrop-filter: blur(10px);
        /* Ensure proper width constraints on mobile */
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Mobile-specific Harmony dropdown priority - above all tooltips */
    .harmony-dropdown-menu {
        z-index: 200020 !important; /* Maximum mobile priority above all tooltips */
        position: absolute !important;
        isolation: isolate !important;
        transform: translateZ(0);
    }
    
    /* Mobile-specific Color Blindness dropdown priority - above all tooltips */
    .colorblind-dropdown-menu {
        z-index: 200020 !important; /* Maximum mobile priority above all tooltips */
        position: absolute !important;
        isolation: isolate !important;
        transform: translateZ(0);
    }
    
    .harmony-dropdown-item,
    .colorblind-dropdown-item {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        min-height: 44px;
        display: flex;
        align-items: center;
        /* Ensure consistent hover effects on mobile */
        touch-action: manipulation;
    }
    
    /* Enhanced mobile hover states - theme-adaptive blue hover */
    .harmony-dropdown-item:hover,
    .colorblind-dropdown-item:hover {
        background: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent) 100%);
        color: white;
        transform: translateX(2px) scale(1.02);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
        border: 1px solid var(--accent-light);
        z-index: 1;
    }
    
    /* Mobile theme-specific hover enhancements */
    .light-theme .harmony-dropdown-item:hover,
    .light-theme .colorblind-dropdown-item:hover {
        background: linear-gradient(135deg, #2ba3d4 0%, #3dbdf5 50%, #7dd3f7 100%);
        box-shadow: 0 4px 12px rgba(61, 189, 245, 0.25), 0 2px 4px rgba(61, 189, 245, 0.15);
        border: 1px solid #7dd3f7;
    }
    
    .dark-theme .harmony-dropdown-item:hover,
    .dark-theme .colorblind-dropdown-item:hover {
        background: linear-gradient(135deg, #4a9eff 0%, #58a6ff 50%, #7bb8ff 100%);
        box-shadow: 0 4px 12px rgba(88, 166, 255, 0.3), 0 2px 4px rgba(88, 166, 255, 0.2);
        border: 1px solid #7bb8ff;
    }
    
    /* Override grid layout for horizontal scrolling */
    .responsive-palette-grid {
        gap: 0.5rem;
        /* Horizontal layout is handled above */
    }
    
    .responsive-palette-grid .color-wheel-swatch {
        min-height: 60px;
        border-radius: 0.5rem;
        /* Fixed dimensions handled above */
    }
}

@media (max-width: 480px) {
    /* Enhanced section separation on very small screens */
    .harmony-controls-dropdown {
        margin-bottom: 3rem;
        padding-bottom: 2rem;
        border-bottom: 3px solid var(--border-color);
    }
    
    .colorblind-controls-dropdown {
        margin-top: 2rem;
        padding-top: 2rem;
        border-top: 3px solid var(--border-color);
        /* Ensure it stays below Harmony dropdown on very small screens */
        z-index: 1;
        position: relative;
    }
    
    .harmony-dropdown-item,
    .colorblind-dropdown-item {
        padding: 0.625rem 0.875rem;
        font-size: 0.8125rem;
        /* Enhanced touch targets for very small screens */
        min-height: 48px;
    }
    
    /* Ensure dropdowns are properly positioned on very small screens */
    .harmony-dropdown-menu,
    .colorblind-dropdown-menu {
        z-index: 200030; /* Even higher z-index for very small screens above all tooltips */
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25), 0 8px 20px rgba(0, 0, 0, 0.2);
        /* Maximum visual separation */
        border: 3px solid var(--border-color);
        border-radius: 1rem;
        /* Enhanced backdrop for complete isolation */
        backdrop-filter: blur(15px);
        background: var(--bg-secondary);
        /* Prevent horizontal scroll on very small screens */
        overflow-x: hidden;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Very small screen Harmony dropdown priority - above all tooltips */
    .harmony-dropdown-menu {
        z-index: 200030 !important; /* Maximum very small screen priority above all tooltips */
        position: absolute !important;
        isolation: isolate !important;
        transform: translateZ(0);
    }
    
    /* Very small screen Color Blindness dropdown priority - above all tooltips */
    .colorblind-dropdown-menu {
        z-index: 200030 !important; /* Maximum very small screen priority above all tooltips */
        position: absolute !important;
        isolation: isolate !important;
        transform: translateZ(0);
    }
    
    /* Enhanced hover effects for very small screens */
    .harmony-dropdown-item:hover,
    .colorblind-dropdown-item:hover {
        transform: translateX(1px) scale(1.01);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.15);
    }
    
    /* Enhanced horizontal layout for very small screens */
    .responsive-palette-grid {
        gap: 0.375rem;
        padding: 0.125rem 0;
    }
    
    .responsive-palette-grid .color-wheel-swatch {
        min-width: 50px;
        min-height: 50px;
        width: 50px;
        height: 50px;
        border-radius: 0.375rem;
    }
    
    /* Compact mobile layout */
    #color-wheel-modal .space-y-4 {
        gap: 0.75rem;
    }
    
    #color-wheel-modal .space-y-6 {
        gap: 1rem;
    }
}

/* Ultra-small screens (360px and below) */
@media (max-width: 360px) {
    /* Modal container optimizations for ultra-small screens */
    #color-wheel-modal .max-w-6xl {
        max-width: calc(100vw - 8px); /* Minimal margins to prevent frame cutting */
        margin: 0 4px;
        max-height: 98vh; /* Use almost full viewport height */
        border-radius: 0.25rem; /* Minimal rounded corners */
    }
    
    /* Ultra-compact padding - ensure section frames fit */
    #color-wheel-modal .p-6 {
        padding: 0.375rem; /* Reduced to prevent frame cutting */
    }
    
    /* Ensure section frames are fully visible */
    #color-wheel-modal .bg-secondary.p-6 {
        padding: 0.375rem;
        margin: 0; /* Remove any margins that could cause cutting */
    }
    
    /* Optimized canvas size for ultra-small screens */
    #color-wheel-canvas {
        width: min(240px, 90vw);
        height: min(240px, 90vw);
        min-width: 200px;
        min-height: 200px;
    }
    
    /* Compact harmony buttons */
    .harmony-btn {
        font-size: 0.75rem;
        padding: 0.5rem 0.75rem;
        min-height: 36px; /* Reduced for ultra-small screens */
    }
    
    /* Ultra-compact spacing */
    #color-wheel-modal .space-y-4 {
        gap: 0.375rem;
    }
    
    #color-wheel-modal .space-y-6 {
        gap: 0.5rem;
    }
    
    /* Optimize Base Color section for ultra-small screens */
    #color-wheel-modal .lg\\:col-span-4 {
        padding: 0.5rem;
    }
    
    /* Compact color input layout */
    #color-wheel-modal .flex.items-center.gap-3 {
        gap: 0.5rem;
    }
    
    #color-wheel-modal input[type="color"] {
        width: 3rem; /* 48px */
        height: 3rem; /* 48px */
    }
    
    /* Compact grid layouts */
    #color-wheel-modal .grid.grid-cols-2 {
        gap: 0.5rem;
    }
    
    /* Reduce palette swatch size */
    .color-wheel-swatch {
        aspect-ratio: 1;
        min-height: 48px; /* Smaller swatches */
    }
    
    /* Compact form elements */
    #color-wheel-modal input,
    #color-wheel-modal button {
        font-size: 0.75rem;
        padding: 0.5rem;
    }
    
    /* Optimize accessibility checker for ultra-small screens */
    #color-wheel-modal .bg-secondary.p-4 {
        padding: 0.5rem;
    }
    
    /* Ensure proper scrolling on ultra-small screens */
    #color-wheel-modal .overflow-y-auto {
        max-height: calc(98vh - 60px); /* Account for header */
        overflow-y: auto;
    }
}

/* Extra-ultra-small screens (320px and below) */
@media (max-width: 320px) {
    /* Maximum space utilization for smallest screens - ensure frame visibility */
    #color-wheel-modal .max-w-6xl {
        max-width: calc(100vw - 4px); /* Small margin to prevent frame cutting */
        margin: 0 2px;
        max-height: 100vh; /* Use full viewport height */
        border-radius: 0; /* Remove rounded corners for maximum space */
    }
    
    /* Minimal padding for maximum content space - prevent frame cutting */
    #color-wheel-modal .p-6 {
        padding: 0.25rem; /* Ultra-minimal padding to prevent cutting */
    }
    
    /* Ensure section frames are fully visible on smallest screens */
    #color-wheel-modal .bg-secondary.p-6 {
        padding: 0.25rem;
        margin: 0; /* Remove any margins that could cause cutting */
        box-sizing: border-box; /* Ensure padding is included in width calculation */
    }
    
    /* Ultra-compact canvas for smallest screens */
    #color-wheel-canvas {
        width: min(200px, 95vw);
        height: min(200px, 95vw);
        min-width: 180px;
        min-height: 180px;
    }
    
    /* Ultra-compact harmony buttons */
    .harmony-btn {
        font-size: 0.6875rem; /* 11px */
        padding: 0.375rem 0.5rem;
        min-height: 32px;
    }
    
    /* Minimal spacing for maximum content */
    #color-wheel-modal .space-y-4 {
        gap: 0.25rem;
    }
    
    #color-wheel-modal .space-y-6 {
        gap: 0.375rem;
    }
    
    /* Ultra-compact Base Color section */
    #color-wheel-modal .lg\\:col-span-4 {
        padding: 0.375rem;
    }
    
    /* Minimal color input */
    #color-wheel-modal input[type="color"] {
        width: 2.5rem; /* 40px */
        height: 2.5rem; /* 40px */
    }
    
    /* Ultra-compact palette swatches */
    .color-wheel-swatch {
        min-height: 40px;
    }
    
    /* Ultra-compact form elements */
    #color-wheel-modal input,
    #color-wheel-modal button {
        font-size: 0.6875rem;
        padding: 0.375rem;
    }
    
    /* Minimal accessibility checker padding */
    #color-wheel-modal .bg-secondary.p-4 {
        padding: 0.375rem;
    }
    
    /* Ensure content fits with scrolling */
    #color-wheel-modal .overflow-y-auto {
        max-height: calc(100vh - 50px); /* Account for minimal header */
        overflow-y: auto;
    }
    
    /* Stack all sections vertically for maximum space efficiency */
    #color-wheel-modal .grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    /* Ensure all grid items take full width */
    #color-wheel-modal .lg\\:col-span-8,
    #color-wheel-modal .lg\\:col-span-4 {
        grid-column: span 1;
        width: 100%;
    }
    
    /* Optimize section frames for ultra-small screens - prevent right-side cutting */
    #color-wheel-modal .bg-secondary.p-6 {
        padding: 0.25rem;
        margin: 0 0 0.5rem 0; /* Only bottom margin, no side margins */
        box-sizing: border-box; /* Ensure padding is included in width calculation */
        width: 100%; /* Ensure full width usage */
        max-width: 100%; /* Prevent overflow */
    }
    
    /* Ensure grid items don't cause frame cutting */
    #color-wheel-modal .grid > * {
        box-sizing: border-box;
        max-width: 100%;
    }
    
    /* Prevent any element from causing horizontal overflow */
    #color-wheel-modal * {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Compact section headers */
    #color-wheel-modal h3 {
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
    }
    
    /* Ultra-compact form controls */
    #color-wheel-modal .grid.grid-cols-2 {
        grid-template-columns: 1fr;
        gap: 0.375rem;
    }
    
    /* Minimize button spacing */
    #color-wheel-modal .space-y-4 > * + * {
        margin-top: 0.375rem;
    }
    
    /* Ensure proper touch targets on ultra-small screens */
    #color-wheel-modal button {
        min-height: 36px;
        min-width: 36px;
    }
    
    /* Optimize dropdown menus for ultra-small screens */
    #color-wheel-modal .harmony-dropdown-menu,
    #color-wheel-modal .colorblind-dropdown-menu {
        font-size: 0.75rem;
        padding: 0.25rem;
    }
    
    /* Compact dropdown items */
    #color-wheel-modal .harmony-dropdown-item,
    #color-wheel-modal .colorblind-dropdown-item {
        padding: 0.375rem 0.5rem;
        font-size: 0.75rem;
    }
    
    /* Ensure section borders are fully visible */
    #color-wheel-modal .border {
        border-width: 1px; /* Ensure borders are visible */
    }
    
    /* Prevent any content from overflowing section frames */
    #color-wheel-modal .bg-secondary {
        overflow: hidden; /* Prevent content from breaking frame bounds */
    }
    
    /* Ensure canvas container fits within section frame */
    #color-wheel-modal .relative.flex.justify-center.items-center {
        max-width: 100%;
        overflow: hidden;
    }
    
    /* Ensure form elements fit within section frames */
    #color-wheel-modal input,
    #color-wheel-modal button,
    #color-wheel-modal select {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* Dark Theme Adjustments */
.dark-theme #color-wheel-modal {
    background-color: rgba(0, 0, 0, 0.7);
}

.dark-theme #color-wheel-canvas {
    background-color: #121212;
    box-shadow: 
        0 2px 6px rgba(0, 0, 0, 0.4),
        0 1px 3px rgba(0, 0, 0, 0.2);
}

.dark-theme .color-wheel-swatch .swatch-info {
    background: rgba(0, 0, 0, 0.9);
}

/* Enhanced Dark Mode Styling for Color Wheel Section */
.dark-theme #color-wheel-modal .bg-secondary {
    background: var(--bg-secondary-dark);
    border: 1px solid var(--border-dark);
}

.dark-theme #color-wheel-modal .bg-gray-50 {
    background: var(--bg-primary-dark);
    border: 1px solid var(--border-dark);
}

.dark-theme #color-wheel-modal .border-gray-200 {
    border-color: var(--border-dark);
}

.dark-theme #color-wheel-modal .border-gray-700 {
    border-color: var(--border-dark);
}

/* Enhanced contrast for dark mode */
.dark-theme #color-wheel-modal .text-primary {
    color: var(--text-primary-dark);
}

.dark-theme #color-wheel-modal .text-secondary {
    color: var(--text-secondary-dark);
}

.dark-theme #color-wheel-modal .bg-gray-900 {
    background: var(--bg-primary-dark);
}

/* Focus States for Accessibility */
#color-wheel-modal button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

#color-wheel-canvas:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

/* Loading States */
.color-wheel-loading {
    opacity: 0.6;
    pointer-events: none;
}

.color-wheel-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--accent);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

@keyframes colorWheelIdle {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(1deg); }
}

#color-wheel-canvas.idle {
    animation: colorWheelIdle 5s ease-in-out infinite;
}

/* Harmony Overlay */
#harmony-overlay {
    pointer-events: none;
}

.harmony-line {
    position: absolute;
    background: var(--accent);
    height: 2px;
    transform-origin: center;
    opacity: 0.8;
    transition: all 0.3s ease-in-out;
}

.harmony-point {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
    background: var(--accent);
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.harmony-point:hover {
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease-in-out;
}

/* Color Wheel Handle */
.color-wheel-handle {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid white;
    background: var(--accent);
    cursor: grab;
    transform: translate(-50%, -50%);
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.color-wheel-handle:hover {
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
}

.color-wheel-handle:active {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease-in-out;
}

.color-wheel-handle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* OLD COLOR WHEEL TOOLTIP SYSTEM REMOVED - Replaced with modern popup card system */

/* Smart Color Wheel Button - Matching Theme Toggle Styling */
#color-wheel-btn {
    background: linear-gradient(135deg, var(--accent) 0%, rgba(61, 189, 245, 0.8) 100%);
    color: #ffffff;
    border: 1px solid var(--accent);
    box-shadow: 0 2px 8px rgba(61, 189, 245, 0.08);
    font-weight: 600;
}

/* OLD DYNAMIC TOOLTIP SYSTEM REMOVED - Replaced with modern popup card system */

/* OLD TOOLTIP TEXT STYLING SYSTEM REMOVED - Replaced with modern popup card system */

/* Dark theme color wheel button */
.dark-theme #color-wheel-btn {
    background: 
        linear-gradient(135deg, var(--accent) 0%, rgba(88, 166, 255, 0.8) 100%),
        radial-gradient(circle at center, rgba(88, 166, 255, 0.2) 0%, transparent 70%);
    border: 1px solid var(--accent);
    box-shadow: 
        0 2px 8px rgba(88, 166, 255, 0.15),
        0 1px 4px rgba(1, 4, 9, 0.1);
}

/* Color wheel button icon styling */
#color-wheel-btn svg {
    color: #FFD700 !important; /* Beautiful gold color to match theme toggle */
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.6));
    transition: all 0.2s ease-in-out;
}

.dark-theme #color-wheel-btn svg {
    color: #FFD700 !important; /* Gold color in dark mode */
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.7));
}

/* Enhanced gold glow effect */
#color-wheel-btn svg {
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Gold shimmer effect to match theme toggle */
@keyframes colorWheelGoldShimmer {
    0% {
        filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.6));
    }
    50% {
        filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
    }
    100% {
        filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.6));
    }
}

/* Shimmer animation */
#color-wheel-btn svg {
    animation: colorWheelGoldShimmer 2s ease-in-out infinite;
}

/* Focus states for accessibility */
#color-wheel-btn:focus-visible svg {
    transform: scale(1.05);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #color-wheel-btn svg {
        width: 1.25rem;
        height: 1.25rem;
    }
}

@media (max-width: 480px) {
    #color-wheel-btn svg {
        width: 1.125rem;
        height: 1.125rem;
    }
}

/* Print Styles */
@media print {
    #panel-toggle,
    #responsive-panel,
    #panel-overlay,
    #color-wheel-modal {
        display: none !important;
    }
}

/* ===== ENHANCED COMPONENT SHOWCASE SCROLLBAR & NAVIGATION ===== */

/* Enhanced scrollbar for showcase section */
#showcase-section::-webkit-scrollbar {
    width: 12px;
    background: transparent;
}

#showcase-section::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    margin: 4px 0;
}

#showcase-section::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--accent), var(--accent)/80);
    border-radius: 6px;
    border: 1px solid var(--accent);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

#showcase-section::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, var(--accent), var(--accent));
    border-color: var(--accent);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: scale(1.05);
}

#showcase-section::-webkit-scrollbar-thumb:active {
    background: linear-gradient(135deg, var(--accent), var(--accent)/90);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Firefox scrollbar */
#showcase-section {
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--bg-secondary);
}

/* Dark theme scrollbar enhancements */
.dark-theme #showcase-section::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

.dark-theme #showcase-section::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--accent), var(--accent)/80);
    border-color: var(--accent);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dark-theme #showcase-section::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, var(--accent), var(--accent));
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
}



/* Smooth scrolling for showcase, component list, and color wheel modal */
#showcase-section,
#component-list,
#color-wheel-modal .overflow-y-auto {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Showcase container positioning */
#live-preview {
    position: relative;
}

/* ===== ENHANCED COLOR WHEEL MODAL SCROLLBAR ===== */

/* Enhanced scrollbar for color wheel modal */
#color-wheel-modal .overflow-y-auto::-webkit-scrollbar {
    width: 12px;
    background: transparent;
}

#color-wheel-modal .overflow-y-auto::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    margin: 4px 0;
}

#color-wheel-modal .overflow-y-auto::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--accent), var(--accent)/80);
    border-radius: 6px;
    border: 1px solid var(--accent);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

#color-wheel-modal .overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, var(--accent), var(--accent));
    border-color: var(--accent);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: scale(1.05);
}

#color-wheel-modal .overflow-y-auto::-webkit-scrollbar-thumb:active {
    background: linear-gradient(135deg, var(--accent), var(--accent)/90);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Firefox scrollbar for color wheel modal */
#color-wheel-modal .overflow-y-auto {
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--bg-secondary);
}

/* Dark theme scrollbar enhancements for color wheel modal */
.dark-theme #color-wheel-modal .overflow-y-auto::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

.dark-theme #color-wheel-modal .overflow-y-auto::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--accent), var(--accent)/80);
    border-color: var(--accent);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dark-theme #color-wheel-modal .overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, var(--accent), var(--accent));
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ===== COMPLIANCE METRICS DARK MODE ENHANCEMENTS ===== */

/* Enhanced compliance metric cards with proper dark mode styling */
.compliance-metric-card {
    transition: all var(--duration-normal) cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.compliance-metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(88, 166, 255, 0.05) 100%);
    opacity: 0;
    transition: opacity var(--duration-normal) ease;
    pointer-events: none;
}



/* Dark theme specific enhancements */
.dark-theme .compliance-metric-card {
    background: var(--surface-elevated);
    border-color: var(--border-color);
    box-shadow: 0 2px 8px rgba(1, 4, 9, 0.3);
}

.dark-theme .compliance-metric-card::before {
    background: linear-gradient(135deg, transparent 0%, rgba(88, 166, 255, 0.1) 100%);
}

.dark-theme .compliance-metric-card:hover {
    background: var(--surface-elevated);
    border-color: var(--accent);
    box-shadow: 
        0 4px 12px rgba(1, 4, 9, 0.4),
        0 0 0 1px rgba(88, 166, 255, 0.2);
}

/* Light theme specific enhancements */
.light-theme .compliance-metric-card {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.light-theme .compliance-metric-card::before {
    background: linear-gradient(135deg, transparent 0%, rgba(61, 189, 245, 0.08) 100%);
}

.light-theme .compliance-metric-card:hover {
    background: var(--bg-secondary);
    border-color: var(--accent);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(61, 189, 245, 0.2);
}

/* Enhanced status colors for dark mode */
.dark-theme .compliance-metric-card .text-green-600 {
    color: #4ade80 !important; /* Brighter green for dark mode */
    text-shadow: 0 1px 2px rgba(1, 4, 9, 0.3);
}

.light-theme .compliance-metric-card .text-green-600 {
    color: #16a34a !important; /* Standard green for light mode */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Responsive enhancements */
@media (max-width: 768px) {
    .compliance-metric-card {
        padding: 0.75rem;
    }
    
    .compliance-metric-card:hover {
        transform: translateY(-0.5px);
    }
}

@media (max-width: 480px) {
    .compliance-metric-card {
        padding: 0.625rem;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .compliance-metric-card {
        border-width: 2px;
    }
    
    .compliance-metric-card:hover {
        border-width: 2px;
        box-shadow: 0 0 0 2px var(--accent);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .compliance-metric-card {
        transition: none;
    }
    
    .compliance-metric-card:hover {
        transform: none;
    }
    
    .compliance-metric-card::before {
        transition: none;
    }
}

/* ===== MODERN POPUP CARD SYSTEM ===== */
/* Replaces old hover-based tooltip system with click-based popup cards */

/* Popup Card Container */
.popup-card-container {
    position: relative;
    display: inline-block;
}

/* Help Icon Styling - Enhanced for proper alignment */
.popup-help-icon {
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    opacity: 0.7;
    /* Ensure proper centering of SVG content */
    box-sizing: border-box;
    z-index: 50; /* Below panels (60) but above content */
}

.popup-help-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    /* Ensure SVG content is properly centered */
    margin: auto;
}

.popup-help-icon:hover {
    opacity: 1;
    color: var(--accent);
    transform: scale(1.05);
}

.popup-help-icon:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 50%;
}

/* Ensure proper sizing for different icon contexts */
.popup-help-icon.w-8 {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
}

.popup-help-icon.w-6 {
    width: 1.5rem;
    height: 1.5rem;
    min-width: 1.5rem;
    min-height: 1.5rem;
}

/* Ensure proper padding for bordered icons */
.popup-help-icon.border-2 {
    padding: 0.125rem; /* 2px padding for 2px border */
}

.popup-help-icon.border {
    padding: 0.25rem; /* 4px padding for 1px border */
}

/* Enhanced Popup Card System with Professional Theming */
/* ENHANCED LIGHT MODE - PROFESSIONAL THEMING */
.popup-card {
    position: relative;
    max-width: 320px; /* Professional compact width (was min(420px, 90vw)) */
    min-width: 280px; /* Reduced minimum width (was 320px) */
    width: 320px; /* Fixed width for consistency */
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(248, 250, 252, 0.95) 100%);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 16px;
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.15),
        0 10px 20px -5px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(59, 130, 246, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    z-index: 150000 !important; /* Lower than dropdowns but higher than other content */
    backdrop-filter: blur(24px) saturate(200%);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    overflow: hidden;
    max-height: 80vh;
    overflow-y: auto;
}

/* ENHANCED DARK MODE - PROFESSIONAL THEMING */
.dark-theme .popup-card {
    background: linear-gradient(135deg, 
        rgba(31, 41, 55, 0.98) 0%, 
        rgba(17, 24, 39, 0.95) 100%);
    border: 1px solid rgba(75, 85, 99, 0.8);
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.6),
        0 10px 20px -5px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(59, 130, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(24px) saturate(200%);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
}

.popup-card.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.popup-card.hide {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

/* Popup Card Header */
.popup-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.popup-card-title {
    font-weight: 700;
    font-size: 1rem;
    color: #1f2937;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dark-theme .popup-card-title {
    color: #f9fafb;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Close Button */
.popup-card-close {
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
}

.popup-card-close:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.popup-card-close:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.popup-card-close svg {
    width: 0.875rem;
    height: 0.875rem;
}

/* Enhanced Popup Card Content with Professional Styling */
.popup-card-content {
    padding: 1.5rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: #374151;
    max-height: calc(80vh - 120px);
    overflow-y: auto;
}

.dark-theme .popup-card-content {
    color: #d1d5db;
}

/* Structured Content Styling */
.popup-section {
    margin-bottom: 1.5rem;
}

.popup-section:last-child {
    margin-bottom: 0;
}

.popup-section-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dark-theme .popup-section-title {
    color: #f9fafb;
}

.popup-subsection-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.dark-theme .popup-subsection-title {
    color: #e5e7eb;
}

.popup-description {
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0 0 1rem 0;
    font-style: italic;
}

.dark-theme .popup-description {
    color: #9ca3af;
}

.popup-feature-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.popup-feature-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem;
    background: rgba(243, 244, 246, 0.5);
    border-radius: 8px;
    border-left: 3px solid #3b82f6;
}

.dark-theme .popup-feature-item {
    background: rgba(31, 41, 55, 0.6);
    border-left-color: #60a5fa;
}

.popup-feature-label {
    font-weight: 600;
    color: #1f2937;
    font-size: 0.8125rem;
}

.dark-theme .popup-feature-label {
    color: #f3f4f6;
}

.popup-feature-desc {
    color: #4b5563;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.dark-theme .popup-feature-desc {
    color: #d1d5db;
}

.popup-tip-box {
    background: linear-gradient(135deg, #dbeafe 0%, #e0f2fe 100%);
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 1rem;
    margin: 0.75rem 0;
}

.dark-theme .popup-tip-box {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.2) 0%, rgba(31, 41, 55, 0.4) 100%);
    border-color: rgba(59, 130, 246, 0.3);
}

.popup-tip-box p {
    margin: 0 0 0.5rem 0;
    color: #1e40af;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.popup-tip-box p:last-child {
    margin-bottom: 0;
}

.dark-theme .popup-tip-box p {
    color: #93c5fd;
}

.popup-tip-box strong {
    font-weight: 600;
    color: #1e3a8a;
}

.dark-theme .popup-tip-box strong {
    color: #dbeafe;
}

/* Custom scrollbar for popup content */
.popup-card-content::-webkit-scrollbar {
    width: 6px;
}

.popup-card-content::-webkit-scrollbar-track {
    background: transparent;
}

.popup-card-content::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.5);
    border-radius: 3px;
}

.popup-card-content::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 163, 175, 0.8);
}

.dark-theme .popup-card-content::-webkit-scrollbar-thumb {
    background: rgba(75, 85, 99, 0.6);
}

.dark-theme .popup-card-content::-webkit-scrollbar-thumb:hover {
    background: rgba(75, 85, 99, 0.9);
}

/* Popup Card Stack */
.popup-card-stack {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 150000 !important; /* Lower than dropdowns but higher than other content */
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    pointer-events: none;
}

.popup-card-stack .popup-card {
    pointer-events: auto;
    position: relative;
    bottom: auto;
    left: auto;
}

/* Close All Button */
.popup-close-all {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #1f2937;
    border: 1px solid #374151;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    color: #ffffff;
    cursor: pointer;
    z-index: 150001 !important; /* Lower than dropdowns but higher than other content */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    backdrop-filter: blur(15px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.popup-close-all.show {
    opacity: 1;
    visibility: visible;
}

.popup-close-all:hover {
    background: #111827;
    color: #ffffff;
}

.dark-theme .popup-close-all {
    background: #374151;
    border-color: #4b5563;
    color: #ffffff;
}

.dark-theme .popup-close-all:hover {
    background: #4b5563;
    color: #ffffff;
}

/* ENHANCED HEADER THEMING */
.dark-theme .popup-card-header {
    border-bottom: 1px solid rgba(75, 85, 99, 0.6);
    background: linear-gradient(135deg, 
        rgba(31, 41, 55, 0.4) 0%, 
        rgba(17, 24, 39, 0.2) 100%);
}

.popup-card-header {
    border-bottom: 1px solid rgba(226, 232, 240, 0.7);
    background: linear-gradient(135deg, 
        rgba(248, 250, 252, 0.4) 0%, 
        rgba(255, 255, 255, 0.2) 100%);
}

/* ENHANCED CLOSE BUTTON THEMING */
.dark-theme .popup-card-close:hover {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}

.popup-card-close:hover {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

/* Professional Responsive Design - Adaptive to All Screen Sizes */
@media (max-width: 1024px) {
    .popup-card {
        max-width: 280px; /* Compact on tablets */
        min-width: 240px;
        width: 280px;
    }

    .popup-card-content {
        padding: 1.25rem;
        font-size: 0.8125rem;
    }

    .popup-section-title {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .popup-card {
        max-width: 260px; /* Mobile-friendly width */
        min-width: 220px;
        width: 260px;
    }
    
    .popup-card-stack {
        bottom: 16px;
        left: 16px;
        right: 16px;
        gap: 0.75rem;
        max-width: none;
    }
    
    .popup-close-all {
        bottom: 16px;
        right: 16px;
        z-index: 150000; /* Lower than dropdowns but higher than other content */
    }
    
    .popup-card-content {
        padding: 1rem;
        font-size: 0.8125rem;
        max-height: calc(75vh - 100px);
    }
    
    .popup-card-header {
        padding: 1rem 1rem 0.75rem;
    }
    
    .popup-section {
        margin-bottom: 1.25rem;
    }
    
    .popup-feature-item {
        padding: 0.625rem;
    }
}

@media (max-width: 640px) {
    .popup-card {
        max-width: 240px; /* Smaller mobile width */
        min-width: 200px;
        width: 240px;
    }

    .popup-card-stack {
        bottom: 14px;
        left: 14px;
    }
}

@media (max-width: 480px) {
    .popup-card {
        max-width: calc(100vw - 32px); /* Near full width with margins */
        min-width: calc(100vw - 32px);
        width: calc(100vw - 32px);
    }
    
    .popup-card-stack {
        bottom: 12px;
        left: 12px;
        right: 12px;
        gap: 0.5rem;
    }
    
    .popup-close-all {
        bottom: 12px;
        right: 12px;
        padding: 0.5rem 0.875rem;
        font-size: 0.75rem;
    }
    
    .popup-card-content {
        padding: 0.875rem;
        font-size: 0.8125rem;
        max-height: calc(70vh - 80px);
    }
    
    .popup-card-header {
        padding: 0.875rem 0.875rem 0.625rem;
    }
    
    .popup-card-title {
        font-size: 0.9375rem;
    }
    
    .popup-section-title {
        font-size: 0.9375rem;
    }
    
    .popup-subsection-title {
        font-size: 0.875rem;
    }
    
    .popup-feature-item {
        padding: 0.5rem;
    }
    
    .popup-feature-label,
    .popup-feature-desc {
        font-size: 0.75rem;
    }
    
    .popup-tip-box {
        padding: 0.75rem;
    }
    
    .popup-tip-box p {
        font-size: 0.75rem;
    }
}

@media (max-width: 360px) {
    .popup-card {
        max-width: calc(100vw - 16px);
        min-width: calc(100vw - 16px);
        width: calc(100vw - 16px);
    }
    
    .popup-card-stack {
        bottom: 8px;
        left: 8px;
        right: 8px;
        gap: 0.375rem;
    }
    
    .popup-close-all {
        bottom: 8px;
        right: 8px;
        padding: 0.375rem 0.75rem;
        font-size: 0.6875rem;
    }
    
    .popup-card-content {
        padding: 0.75rem;
        font-size: 0.75rem;
        max-height: calc(65vh - 70px);
    }
    
    .popup-card-header {
        padding: 0.75rem 0.75rem 0.5rem;
    }
    
    .popup-section {
        margin-bottom: 1rem;
    }
    
    .popup-feature-item {
        padding: 0.375rem;
    }
    
    .popup-tip-box {
        padding: 0.625rem;
    }
}

/* Landscape orientation optimization */
@media (max-height: 600px) and (orientation: landscape) {
    .popup-card {
        max-height: 85vh;
    }
    
    .popup-card-content {
        max-height: calc(85vh - 80px);
    }
    
    .popup-section {
        margin-bottom: 1rem;
    }
    
    .popup-feature-item {
        padding: 0.5rem;
    }
    
    .popup-tip-box {
        padding: 0.75rem;
    }
}

/* Ultra-wide screen optimization */
@media (min-width: 1440px) {
    .popup-card {
        max-width: 460px;
        min-width: 420px;
    }
    
    .popup-card-content {
        padding: 1.75rem;
        font-size: 0.9375rem;
    }
    
    .popup-section-title {
        font-size: 1.1875rem;
    }
    
    .popup-subsection-title {
        font-size: 1rem;
    }
}

/* Accessibility Support */
@media (prefers-reduced-motion: reduce) {
    .popup-card,
    .popup-card-close,
    .popup-close-all {
        transition: none;
    }
    
    .popup-card.show,
    .popup-card.hide {
        transition: none;
    }
}

@media (prefers-contrast: high) {
    .popup-card {
        border: 2px solid var(--text-primary);
    }
    
    .popup-card-close {
        border: 1px solid var(--text-primary);
    }
    
    .popup-close-all {
        border: 2px solid var(--text-primary);
    }
}

/* Focus Management */
.popup-card:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Print Styles */
@media print {
    .popup-card,
    .popup-card-stack,
    .popup-close-all {
        display: none !important;
    }
}

/* ENTERPRISE: Error State Styling */
.popup-card-error {
    border-left: 4px solid #ef4444 !important;
    background: linear-gradient(135deg, 
        rgba(254, 242, 242, 0.95) 0%, 
        rgba(252, 225, 226, 0.9) 100%) !important;
}

.dark-theme .popup-card-error {
    background: linear-gradient(135deg, 
        rgba(55, 22, 22, 0.95) 0%, 
        rgba(40, 20, 20, 0.9) 100%) !important;
    border-left-color: #f87171 !important;
}

/* ENTERPRISE: Performance Optimization Classes */
.popup-card-optimized {
    will-change: transform, opacity;
    transform: translateZ(0); /* Force hardware acceleration */
}

.popup-card-stack.performance-mode .popup-card {
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

/* ENTERPRISE: Loading State */
.popup-card-loading {
    opacity: 0.7;
    pointer-events: none;
}

.popup-card-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 2px solid transparent;
    border-top: 2px solid var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 1000;
}

/* Animations */
@keyframes popupSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes popupSlideOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

.popup-animate-in {
    animation: popupSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.popup-animate-out {
    animation: popupSlideOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Responsive Panel Controller - Enhanced Panel States and Animations */
#responsive-panel {
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 250 !important; /* Highest priority for responsive controls panel - overrides HTML z-[60] */
}

#responsive-panel.panel-open {
    transform: translateX(0);
}

#panel-overlay {
    opacity: 0;
    z-index: 200 !important; /* Below responsive panel (250) but above content - overrides HTML z-[55] */
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#panel-overlay.overlay-active {
    opacity: 1;
    visibility: visible;
}

#panel-toggle.panel-active {
    background-color: var(--accent-color);
    transform: translateY(-50%) scale(1.05);
}

/* Panel Toggle Button Enhanced States */
#panel-toggle {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#panel-toggle:hover {
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

#panel-toggle:active {
    transform: translateY(-50%) scale(0.95);
}

/* Responsive Panel Content Enhancements */
#responsive-panel.panel-open {
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
}

/* Panel Close Button Enhanced States */
#panel-close {
    transition: all 0.2s ease;
}

#panel-close:hover {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    transform: scale(1.1);
}

/* Panel Overlay Enhanced States */
#panel-overlay.overlay-active {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Responsive Breakpoint Enhancements */
@media (max-width: 640px) {
    #responsive-panel {
        width: calc(100vw - 2rem);
        max-width: calc(100vw - 2rem);
    }
    
    #panel-toggle {
        left: 1rem;
    }
}

@media (max-width: 480px) {
    #responsive-panel {
        width: calc(100vw - 1rem);
        max-width: calc(100vw - 1rem);
    }
    
    #panel-toggle {
        left: 0.5rem;
    }
}

/* Enhanced Responsive Visibility Management */
@media (min-width: 1280px) {
    /* xl+ screens: Always hide button regardless of JavaScript state */
    #panel-toggle {
        display: none !important;
    }
    
    /* xl+ screens: Always hide responsive panel */
    #responsive-panel {
        display: none !important;
    }
    
    /* xl+ screens: Always hide panel overlay */
    #panel-overlay {
        display: none !important;
    }
}

@media (max-width: 1279px) {
    /* Below xl screens: Show button when not hidden by JavaScript */
    #panel-toggle:not(.button-hidden) {
        display: block !important;
    }
    
    /* Below xl screens: Show responsive panel */
    #responsive-panel {
        display: block !important;
    }
    
    /* Below xl screens: Show panel overlay when needed */
    #panel-overlay {
        display: block !important;
    }
}


/* ===== WCAG MATRIX EXPAND BUTTON CENTERING ===== */
/* Ensure the expand button stays centered */







#wcag-matrix-expand-btn {
    /* Maintain centering regardless of parent overflow changes */
    position: relative;
    margin: 0 auto;
}

/* Ensure the button's parent cell maintains centering */
#wcag-matrix-expand-btn:parent {
    text-align: center !important;
    width: 100% !important;
}

/* Ensure the flex container maintains centering */
#wcag-matrix-expand-btn:parent > div {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

/* Override any conflicting styles during content preparation */
.a11y-modal-content #wcag-matrix-expand-btn {
    margin: 0 auto !important;
}

.a11y-modal-content #wcag-matrix-expand-btn:parent {
    text-align: center !important;
    width: 100% !important;
}

.a11y-modal-content #wcag-matrix-expand-btn:parent > div {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

/* ===== EXPORT DROPDOWN STYLES ===== */
/* Color Picker Modal Styles - Theme-Aware */
#color-picker-modal {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: var(--z-modal);
}

#color-picker-modal .bg-secondary {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    box-shadow: 0 25px 50px -12px var(--shadow-color);
}

/* Color picker input styling */
.color-picker-input {
    width: 3rem;
    height: 3rem;
    border-radius: 0.5rem;
    border: 2px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--bg-primary);
}

.color-picker-input:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px var(--shadow-color);
    border-color: var(--accent);
}

.color-picker-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-alpha);
}

/* Text input styling */
.color-picker-text-input {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-family: 'Inter', monospace;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    width: 100%;
}

.color-picker-text-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-alpha);
}

.color-picker-text-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}

/* Button styling */
#color-picker-modal button {
    transition: all 0.2s ease;
    font-weight: 500;
}

#color-picker-modal button:hover {
    transform: translateY(-1px);
}

#color-picker-modal button:active {
    transform: translateY(0);
}

#color-picker-modal button:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-alpha);
}

/* Enhanced Palette Swatch Styles */
.palette-swatch {
    position: relative;
    overflow: hidden;
}

.palette-swatch .group-hover\:bg-opacity-20 {
    transition: all 0.3s ease;
}

.palette-swatch:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.palette-swatch .color-info {
    transition: all 0.3s ease;
}

.palette-swatch:hover .color-info {
    transform: translateY(-2px);
}

/* Edit Button Animation */
.palette-swatch .group-hover\:opacity-100 {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.palette-swatch .group-hover\:opacity-100 svg {
    transition: transform 0.2s ease;
}

.palette-swatch:hover .group-hover\:opacity-100 svg {
    transform: scale(1.1);
}

/* Professional Responsive Design for Edit Color Modal */
@media (max-width: 1200px) {
    #color-picker-modal .bg-secondary {
        max-width: 26rem; /* Slightly smaller on large tablets */
        margin: 0 auto;
    }

    .color-picker-text-input {
        min-height: 2.5rem; /* Better touch targets */
    }
}

@media (max-width: 1024px) {
    #color-picker-modal .bg-secondary {
        max-width: 24rem; /* Compact on tablets */
        margin: 0 auto;
        padding: 1.5rem;
    }

    .color-picker-text-input {
        font-size: 0.9rem;
        min-height: 2.5rem;
    }

    /* Optimize form layout for tablets */
    .color-picker-form-row {
        gap: 0.75rem;
    }
}

@media (max-width: 768px) {
    #color-picker-modal {
        padding: 1rem;
    }

    #color-picker-modal .bg-secondary {
        max-width: calc(100vw - 2rem); /* Responsive but with margins */
        margin: 0 auto;
        padding: 1.25rem;
        max-height: calc(100vh - 2rem);
    }

    /* Stack form elements vertically on mobile */
    .color-picker-form-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .color-picker-label {
        width: auto;
        text-align: left;
        margin-bottom: 0.25rem;
    }

    .color-picker-input,
    .color-picker-text-input {
        width: 100%;
        min-height: 2.75rem; /* Larger touch targets for mobile */
    }

    .color-picker-input {
        width: 3rem;
        height: 3rem;
        align-self: center;
    }

    /* Optimize button layout */
    #color-picker-modal .flex.gap-3 {
        flex-direction: column;
        gap: 0.75rem;
    }

    #color-picker-modal .flex.gap-3 > * {
        width: 100%;
        min-height: 3rem; /* 44px minimum touch target */
    }

    .palette-swatch:hover {
        transform: none; /* Disable hover effects on mobile */
    }
}

@media (max-width: 480px) {
    #color-picker-modal {
        padding: 0.5rem;
    }

    #color-picker-modal .bg-secondary {
        max-width: calc(100vw - 1rem);
        margin: 0 auto;
        padding: 1rem;
        max-height: calc(100vh - 1rem);
    }

    /* Compact layout for small screens */
    .color-picker-preview-section {
        margin-bottom: 1rem;
    }

    .color-picker-form-section .space-y-4 {
        gap: 0.75rem;
    }

    .color-picker-text-input {
        font-size: 1rem; /* Prevent zoom on iOS */
        min-height: 3rem;
    }

    #color-picker-modal .flex.gap-3 > * {
        min-height: 3.25rem; /* Even larger touch targets */
    }
}

/* Responsive Panel Compatibility */
@media (max-width: 1279px) {
    #color-picker-modal {
        z-index: calc(var(--z-modal) + 10); /* Ensure it appears above responsive panel */
    }
    
    /* Adjust positioning when panel might be open */
    #color-picker-modal .bg-secondary {
        max-width: calc(100vw - 2rem);
        margin: 0 auto;
    }
}

/* Theme-aware styling is now handled by CSS custom properties above */

.export-dropdown-container {
    position: relative;
    display: inline-block;
}

.export-dropdown-trigger {
    position: relative;
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.export-dropdown-trigger::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.export-dropdown-trigger:hover {
    transform: translateY(-1px);
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.1);
}

.export-dropdown-trigger:hover::before {
    left: 100%;
}

.export-dropdown-trigger:active {
    transform: translateY(0);
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.export-dropdown-menu {
    position: absolute;
    /* STATIC POSITIONING: Always appear above the button */
    top: auto;
    bottom: 100%;
    left: 0;
    z-index: 50;
    min-width: 12rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    box-shadow: 
        0 20px 25px -5px rgba(0, 0, 0, 0.1), 
        0 10px 10px -5px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
    /* Static margin for consistent spacing above button */
    margin-bottom: 0.25rem;
    margin-top: 0;
}

/* STATIC POSITIONING: Always above button - no dynamic calculation needed */
.export-dropdown-menu:not(.dropdown-up):not(.dropdown-down):not(.dropdown-left):not(.dropdown-right) {
    /* Static positioning - always above button */
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 0.25rem;
    left: 0;
    right: auto;
}

/* STATIC POSITIONING: Always above - dropdown-up class now redundant but kept for compatibility */
.export-dropdown-menu.dropdown-up {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 0.25rem;
    transform: translateY(10px);
}

.export-dropdown-menu.dropdown-up:not(.hidden) {
    transform: translateY(0);
}

/* STATIC POSITIONING: Force dropdown-down to also appear above for consistency */
.export-dropdown-menu.dropdown-down {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 0.25rem;
    transform: translateY(10px);
}

.export-dropdown-menu.dropdown-down:not(.hidden) {
    transform: translateY(0);
}

.export-dropdown-menu.dropdown-left {
    left: 0;
    right: auto;
}

.export-dropdown-menu.dropdown-right {
    left: auto;
    right: 0;
}

.export-dropdown-menu:not(.hidden) {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.export-dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.export-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    border: none;
    background: none;
    width: 100%;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0.375rem;
    margin: 0.125rem;
}

.export-option::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--accent-alpha) 0%, transparent 50%, var(--accent-alpha) 100%);
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.export-option:hover {
    background: linear-gradient(135deg, var(--accent-alpha) 0%, var(--bg-primary) 50%, var(--accent-alpha) 100%);
    transform: translateX(2px);
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.export-option:hover::before {
    opacity: 1;
}

.export-option:focus {
    outline: none;
    background: linear-gradient(135deg, var(--accent-alpha) 0%, var(--bg-primary) 50%, var(--accent-alpha) 100%);
    box-shadow: 
        inset 0 0 0 2px var(--accent),
        0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateX(2px);
}

.export-option:active {
    transform: translateX(1px) scale(0.98);
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.export-option svg {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    color: var(--text-secondary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.export-option:hover svg {
    color: var(--accent);
    transform: scale(1.1);
}

.export-option:focus svg {
    color: var(--accent);
    transform: scale(1.05);
}

/* Dark theme adjustments */
.dark-theme .export-dropdown-menu {
    background: var(--bg-secondary-dark);
    border-color: var(--border-dark);
    box-shadow: 
        0 20px 25px -5px rgba(0, 0, 0, 0.4), 
        0 10px 10px -5px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.dark-theme .export-option {
    color: var(--text-primary-dark);
}

.dark-theme .export-option::before {
    background: linear-gradient(135deg, var(--accent-alpha-dark) 0%, transparent 50%, var(--accent-alpha-dark) 100%);
}

.dark-theme .export-option:hover {
    background: linear-gradient(135deg, var(--accent-alpha-dark) 0%, var(--bg-primary-dark) 50%, var(--accent-alpha-dark) 100%);
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.dark-theme .export-option:focus {
    background: linear-gradient(135deg, var(--accent-alpha-dark) 0%, var(--bg-primary-dark) 50%, var(--accent-alpha-dark) 100%);
    box-shadow: 
        inset 0 0 0 2px var(--accent-dark),
        0 4px 8px rgba(0, 0, 0, 0.3);
}

.dark-theme .export-option svg {
    color: var(--text-secondary-dark);
}

.dark-theme .export-option:hover svg {
    color: var(--accent-dark);
}

.dark-theme .export-option:focus svg {
    color: var(--accent-dark);
}

/* Enhanced dark theme trigger button */
.dark-theme .export-dropdown-trigger::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.dark-theme .export-dropdown-trigger:hover {
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .export-dropdown-menu {
        min-width: 10rem;
    }
    
    .export-option {
        padding: 0.625rem 0.875rem;
        font-size: 0.8125rem;
    }
    
    /* STATIC POSITIONING: Mobile adjustments - always above */
    .export-dropdown-menu.dropdown-up {
        margin-bottom: 0.5rem;
    }
    
    .export-dropdown-menu.dropdown-down {
        margin-bottom: 0.5rem; /* Changed from margin-top to margin-bottom for consistency */
    }
}

@media (max-width: 480px) {
    .export-dropdown-menu {
        min-width: 8rem;
        max-width: calc(100vw - 2rem); /* Prevent overflow on very small screens */
    }
    
    .export-option {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }
    
    .export-option svg {
        width: 0.875rem;
        height: 0.875rem;
    }
    
    /* STATIC POSITIONING: Enhanced mobile - always above */
    .export-dropdown-menu.dropdown-up {
        margin-bottom: 0.75rem;
        transform: translateY(15px);
    }
    
    .export-dropdown-menu.dropdown-down {
        margin-bottom: 0.75rem; /* Changed from margin-top to margin-bottom */
        transform: translateY(15px); /* Changed from -15px to 15px for consistency */
    }
    
    .export-dropdown-menu.dropdown-up:not(.hidden) {
        transform: translateY(0);
    }
    
    .export-dropdown-menu.dropdown-down:not(.hidden) {
        transform: translateY(0);
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .export-dropdown-menu {
        /* Larger touch targets on mobile */
        min-width: 11rem;
    }
    
    .export-option {
        padding: 0.75rem 1rem;
        min-height: 44px; /* iOS touch target minimum */
    }
}