:root {
                --bg-color: #ffffff;
                --text-color: #333333;
                --iconcard-hover: #f6f3ff;
                --control-bg: linear-gradient(90deg, #f1ecff 0%, #fff8fc 100%);
                --card-bg: #ffffff;
                --border-color: #efebf8;
                --button-primary: #6d56a3;
                --button-primary-hover: #574289;
                --button-download: #ffffff00;
                --button-download-hover: #6d56a3;
                --button-copy: #ffffff00;
                --button-copy-hover: #6d56a3;
                --tab-active: #6d56a3;
                --tab-inactive: #f1ecff;
            }
    
            .dark-mode {
                --bg-color: #121212;
                --text-color: #f5f5f5;
                --iconcard-hover: #1e1e1e;
                --control-bg: #1e1e1e;
                --card-bg: #1e1e1e;
                --border-color: #333333;
                --button-primary: #6d56a3;
                --button-primary-hover: #574289;
                --button-download: #ffffff00;
                --button-download-hover: #6d56a3;
                --button-copy: #ffffff00;
                --button-copy-hover: #6d56a3;
                --tab-active: #6d56a3;
                --tab-inactive: #1e1e1e;
            }
    
            body {
                font-family: Arial, sans-serif;
                max-width: 1200px;
                margin: 0 auto;
                padding: 20px;
                background-color: var(--bg-color);
                color: var(--text-color);
                transition: background-color 0.3s, color 0.3s;
            }
    
            h1 {
                color: var(--text-color);
                display: inline-block;
                margin-right: 20px;
            }
    
            .header-container {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 30px;
            }

            .theme-toggle-container {
                position: relative;
                display: inline-block;
            }
            
            .theme-toggle {
                background-color: var(--button-primary);
                color: white;
                border: none;
                padding: 8px;
                border-radius: 50%;
                cursor: pointer;
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: background-color 0.3s;
            }
            
            .theme-toggle:hover {
                background-color: var(--button-primary-hover);
            }
            
            .theme-toggle svg {
                width: 24px;
                height: 24px;
                fill: white;
            }
            
            .tooltip {
                position: absolute;
                bottom: -35px;
                left: 50%;
                transform: translateX(-50%);
                background-color: #333;
                color: white;
                padding: 5px 10px;
                border-radius: 4px;
                font-size: 12px;
                white-space: nowrap;
                opacity: 0;
                transition: opacity 0.3s;
                pointer-events: none;
                z-index: 100;
            }
        
            .theme-toggle-container:hover .tooltip {
                opacity: 1;
            }
                
            .theme-toggle:hover {
                background-color: var(--button-primary-hover);
            }
    
            .controls {
                margin-bottom: 20px;
                padding: 15px;
                background: var(--control-bg);
                border: 1px solid var(--border-color);
                border-radius: 5px;
                transition: background-color 0.3s;
                border: 1px solid var(--border-color);
            }

            .tabs {
                display: flex;
                margin-left: 8px;
            }

            .tab {
                padding: 8px 16px;
                cursor: pointer;
                background-color: var(--tab-inactive);
                border: 1px solid var(--border-color);
                border-bottom: none;
                border-radius: 5px 5px 0 0;
                margin-right: 8px;
                transition: background-color 0.3s;
            }

            .tab.active {
                background-color: var(--tab-active);
                color: white;
                border-color: var(--tab-active);
            }

            .tab-content {
                display: none;
            }

            .tab-content.active {
                display: block;
            }

            .filter-container {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            align-items: center;
            }
            
            select.filter-select {
                min-width: 120px;
                padding: 6px;
            }

            .search-container input {
                width:320px;
                padding: 8px;
                border: 1px solid var(--border-color);
                border-radius: 4px;
                font-size: 16px;
                background-color: var(--card-bg);
                color: var(--text-color);
                transition: border-color 0.3s, background-color 0.3s, color 0.3s;
            }
    
            .icon-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
                gap: 20px;
            }
    
            .icon-card {
                border: 1px solid var(--border-color);
                border-radius: 5px;
                padding: 15px;
                text-align: center;
                background-color: var(--card-bg);
                transition: border-color 0.3s, background-color 0.3s;
            }
    
            .icon-container {
                margin: 10px 0;
                display: flex;
                justify-content: center;
                align-items: center;
            }
    
            .icon-name {
                font-weight: 400;
                margin-bottom: 5px;
                color: var(--text-color);
                font-size: 14px;
            }
    
            button {
                color: white;
                border: none;
                padding: 5px 10px;
                margin: 5px;
                border-radius: 3px;
                cursor: pointer;
                font-size: 12px;
                transition: background-color 0.3s;
            }
    
            button:hover {
                background-color: var(--button-primary-hover);
            }
    
            .download-btn {
                background-color: var(--button-download);
                outline: 1px solid #6d56a3;
                color: #6d56a3;
            }
    
            .download-btn:hover {
                background-color: var(--button-download-hover);
                outline: 1px solid #6d56a3;
                color: #ffffff;
            }
    
            .copy-btn {
                background-color: var(--button-copy);
                outline: 1px solid #6d56a3;
                color: #6d56a3;
            }
    
            .copy-btn:hover {
                background-color: var(--button-copy-hover);
                outline: 1px solid #6d56a3;
                color: #ffffff;
            }

            .download-png-btn {
                background-color: var(--button-copy);
                outline: 1px solid #6d56a3;
                color: #6d56a3;
            }
            
            .download-png-btn:hover {
                background-color: var(--button-copy-hover);
                outline: 1px solid #6d56a3;
                color: #ffffff;
            }
   
            
            select, input {
                padding: 5px;
                margin-right: 10px;
                background-color: var(--card-bg);
                color: var(--text-color);
                border: 1px solid var(--border-color);
                transition: border-color 0.3s, background-color 0.3s, color 0.3s;
            }
    
            .no-results {
                text-align: center;
                padding: 20px;
                font-style: italic;
                color: var(--text-color);
                grid-column: 1 / -1;
            }
    
            .button-container {
                display: flex;
                justify-content: center;
                margin-top: 10px;
                display: none;
            }

            .icon-card:hover {
                .button-container
                {
                display: block;
               }
           }

           .icon-card:hover{
            background-color: var(--iconcard-hover);
           }

           .icon-card:hover .button-container {
            display: flex; /* Changed from block to flex for better button alignment */
           }

            .toast {
                position: fixed;
                bottom: 20px;
                left: 50%;
                transform: translateX(-50%);
                background-color: #333;
                color: white;
                padding: 12px 24px;
                border-radius: 4px;
                z-index: 1000;
                opacity: 0;
                transition: opacity 0.3s ease-in-out;
            }
            .toast.show {
                opacity: 1;
            }

            .footer {
                display: flex;
                font-size: 14px;
                font-weight: 200;
                color: #a1a1a1;
                padding: 20px;
                align-content: center;
                align-items: center;
                justify-content: center;
            }

            /* Color Extractor Styles */
            .color-extractor-container {
                background-color: var(--card-bg);
                border-radius: 8px;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                padding: 25px;
            }
            
            .upload-section {
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-bottom: 30px;
                padding: 20px;
                border: 2px dashed var(--border-color);
                border-radius: 5px;
                transition: all 0.3s;
                position: relative;
                min-height: 200px;
                justify-content: center;
            }
            
            .upload-section.has-image {
                border-style: solid;
                border-color: var(--button-primary);
                padding: 15px;
                min-height: auto;
            }
            
            .upload-section:hover {
                border-color: var(--button-primary);
            }
            
            .upload-section.drag-over {
                border-color: #2ecc71;
                background-color: rgba(46, 204, 113, 0.05);
            }
            
            .upload-btn {
                background-color: var(--button-primary);
                color: white;
                padding: 10px 20px;
                border: none;
                border-radius: 5px;
                cursor: pointer;
                font-size: 16px;
                transition: background-color 0.3s;
                margin-bottom: 10px;
            }
            
            .upload-btn:hover {
                background-color: var(--button-primary-hover);
            }
            
            .upload-content {
                text-align: center;
                z-index: 2;
            }
            
            .upload-content.hidden {
                display: none;
            }
            
            .image-preview {
                max-width: 100%;
                max-height: 300px;
                border-radius: 5px;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
                display: none;
            }
            
            .image-preview.show {
                display: block;
            }
            
            .replace-image-btn {
                background-color: #95a5a6;
                color: white;
                padding: 8px 16px;
                border: none;
                border-radius: 5px;
                cursor: pointer;
                font-size: 14px;
                transition: background-color 0.3s;
                margin-top: 10px;
            }
            
            .replace-image-btn:hover {
                background-color: #7f8c8d;
            }
            
            .color-results {
                margin-bottom: 30px;
            }
            
            .color-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
                gap: 15px;
                margin-top: 20px;
            }
            
            .color-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 10px;
                border-radius: 5px;
                background-color: var(--card-bg);
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
                transition: transform 0.2s;
                border: 1px solid var(--border-color);
            }
            
            .color-item:hover {
                transform: translateY(-3px);
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            }
            
            .color-swatch {
                width: 80px;
                height: 80px;
                border-radius: 50%;
                margin-bottom: 8px;
                border: 2px solid var(--border-color);
                cursor: pointer;
            }
            
            .color-values {
                width: 100%;
                text-align: center;
            }
            
            .color-value {
                font-family: monospace;
                font-size: 12px;
                cursor: pointer;
                padding: 3px 6px;
                border-radius: 3px;
                transition: background-color 0.2s;
                margin: 2px 0;
                display: block;
            }
            
            .color-value:hover {
                background-color: var(--iconcard-hover);
            }
            
            .color-value.hex {
                font-weight: bold;
                font-size: 14px;
            }
            
            .instructions {
                background-color: var(--iconcard-hover);
                padding: 15px;
                border-radius: 5px;
                margin-bottom: 20px;
                border-left: 4px solid var(--button-primary);
            }
            
            .loading {
                display: none;
                text-align: center;
                margin: 20px 0;
            }
            
            .spinner {
                border: 4px solid rgba(0, 0, 0, 0.1);
                border-radius: 50%;
                border-top: 4px solid var(--button-primary);
                width: 30px;
                height: 30px;
                animation: spin 1s linear infinite;
                margin: 0 auto 10px;
            }
            
            @keyframes spin {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }
            
            .no-colors {
                text-align: center;
                color: #7f8c8d;
                padding: 20px;
            }
            
            .error-message {
                color: #e74c3c;
                text-align: center;
                margin-top: 10px;
            }
            
            .copy-notification {
                position: fixed;
                bottom: 20px;
                right: 20px;
                background-color: #2ecc71;
                color: white;
                padding: 10px 20px;
                border-radius: 5px;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
                opacity: 0;
                transition: opacity 0.3s;
            }
            
            .copy-notification.show {
                opacity: 1;
            }
            
            .color-controls {
                display: flex;
                gap: 15px;
                margin-bottom: 20px;
                flex-wrap: wrap;
                align-items: center;
            }
            
            .control-group {
                display: flex;
                flex-direction: column;
                gap: 5px;
            }
            
            .control-label {
                font-size: 14px;
                color: var(--text-color);
            }
            
            .control-input {
                padding: 8px;
                border: 1px solid var(--border-color);
                border-radius: 4px;
                width: 100px;
                background-color: var(--card-bg);
                color: var(--text-color);
            }
            
            .color-count {
                font-size: 14px;
                color: var(--text-color);
                margin-top: 10px;
            }

            input#fileInput {
                display: none;
            }
            
            @media (max-width: 768px) {
                .color-grid {
                    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
                }
                
                .color-controls {
                    flex-direction: column;
                    align-items: flex-start;
                }
                
                .upload-section {
                    min-height: 150px;
                }
                
                .image-preview {
                    max-height: 200px;
                }
            }