@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
            
            :root {
                --primary: #3b82f6;
                --primary-hover: #2563eb;
                --primary-light: #dbeafe;
                --success: #10b981;
                --danger: #ef4444;
                --bg-soft: #f8fafc;
            }
            
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            
            body {
                font-family: 'Inter', sans-serif;
                scroll-behavior: smooth;
                overflow-x: hidden;
            }
            
            /* Enhanced Glass Card */
            .glass-card {
                background: rgba(255, 255, 255, 0.98);
                backdrop-filter: blur(20px);
                border: 1px solid rgba(226, 232, 240, 0.5);
                box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.1);
            }
            
            /* Animated Gradient Background */
            .hero-gradient {
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                position: relative;
                overflow: hidden;
            }
            
            .hero-gradient::before {
                content: '';
                position: absolute;
                width: 200%;
                height: 200%;
                background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
                background-size: 50px 50px;
                animation: moveGrid 20s linear infinite;
            }
            
            @keyframes moveGrid {
                0% { transform: translate(0, 0); }
                100% { transform: translate(50px, 50px); }
            }
            
            /* Enhanced Step Indicator */
            .step-container {
                position: relative;
                display: flex;
                justify-content: space-between;
                padding: 0 20px;
            }
            
            .step-item {
                flex: 1;
                text-align: center;
                position: relative;
                z-index: 2;
            }
            
            .step-circle {
                width: 48px;
                height: 48px;
                border-radius: 50%;
                background: #e2e8f0;
                color: #94a3b8;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0 auto 12px;
                font-weight: 700;
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                border: 3px solid transparent;
            }
            
            .step-item.active .step-circle {
                background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
                color: white;
                transform: scale(1.15);
                box-shadow: 0 8px 20px -5px rgba(59, 130, 246, 0.4);
            }
            
            .step-item.completed .step-circle {
                background: #10b981;
                color: white;
            }
            
            .step-line {
                position: absolute;
                top: 24px;
                left: 0;
                right: 0;
                height: 3px;
                background: #e2e8f0;
                z-index: 1;
            }
            
            .step-line-progress {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
                transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
                width: 0%;
            }
            
            /* Enhanced Buttons */
            .btn-primary {
                background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
                color: white;
                padding: 16px 32px;
                border-radius: 12px;
                font-weight: 700;
                border: none;
                cursor: pointer;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                box-shadow: 0 4px 15px -3px rgba(59, 130, 246, 0.3);
            }
            
            .btn-primary:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 25px -5px rgba(59, 130, 246, 0.4);
            }
            
            .btn-primary:active {
                transform: translateY(0);
            }
            
            /* Enhanced Upload Zone */
            .upload-zone {
                border: 2px dashed #cbd5e1;
                border-radius: 20px;
                padding: 48px 24px;
                text-align: center;
                transition: all 0.3s ease;
                cursor: pointer;
                background: white;
            }
            
            .upload-zone:hover {
                border-color: #3b82f6;
                background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
                transform: translateY(-2px);
            }
            
            .upload-zone.dragover {
                border-color: #3b82f6;
                background: #dbeafe;
                transform: scale(1.02);
            }
            
            /* Color Picker Enhancement */
            .color-option {
                width: 100%;
                aspect-ratio: 1;
                border-radius: 12px;
                cursor: pointer;
                border: 3px solid transparent;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                position: relative;
            }
            
            .color-option:hover {
                transform: translateY(-4px) scale(1.05);
                box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
            }
            
            .color-option.selected {
                border-color: #3b82f6;
                transform: scale(1.1);
            }
            
            .color-option.selected::after {
                content: '✓';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: white;
                font-size: 20px;
                font-weight: bold;
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            }
            
            /* Custom Range Slider */
            input[type="range"] {
                -webkit-appearance: none;
                width: 100%;
                height: 8px;
                border-radius: 5px;
                background: #e2e8f0;
                outline: none;
            }
            
            input[type="range"]::-webkit-slider-thumb {
                -webkit-appearance: none;
                appearance: none;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
                cursor: pointer;
                box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
                transition: all 0.2s ease;
            }
            
            input[type="range"]::-webkit-slider-thumb:hover {
                transform: scale(1.2);
                box-shadow: 0 4px 12px rgba(59, 130, 246, 0.6);
            }
            
            /* Canvas Container */
            .canvas-wrapper {
                background: white;
                
                box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.15);
                display: inline-block;
            }
            
            /* Enhanced Select */
            select {
                appearance: none;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
                background-position: right 12px center;
                background-repeat: no-repeat;
                background-size: 20px;
            }
            
            /* Smooth Loader */
            .loader-spinner {
                width: 48px;
                height: 48px;
                border: 4px solid #e2e8f0;
                border-top-color: #3b82f6;
                border-radius: 50%;
                animation: spin 0.8s linear infinite;
            }
            
            @keyframes spin {
                to { transform: rotate(360deg); }
            }
            
            /* Floating Animation */
            @keyframes float {
                0%, 100% { transform: translateY(0px); }
                50% { transform: translateY(-10px); }
            }
            
            .float-animation {
                animation: float 3s ease-in-out infinite;
            }
            
            /* Scrollbar */
            ::-webkit-scrollbar { width: 8px; }
            ::-webkit-scrollbar-track { background: #f1f5f9; }
            ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
            ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
            
            /* Pulse Effect */
            @keyframes pulse {
                0%, 100% { opacity: 1; }
                50% { opacity: 0.5; }
            }
            
            .pulse {
                animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }
            
            /* Mobile Responsive */
            @media (max-width: 768px) {
                .step-circle { width: 40px; height: 40px; }
                .hero-gradient h1 { font-size: 2rem; }
            }
            
            upper-canvas  {
            width: auto !important;
            height: 500px !important;
            align-content: center !important;
            
            }