Spaces:
Running
Running
| /* Import Google Fonts */ | |
| @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"); | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --primary-color: #3b82f6; | |
| --primary-hover: #2563eb; | |
| --primary-light: rgba(59, 130, 246, 0.1); | |
| --secondary-color: #6b7280; | |
| --success-color: #10b981; | |
| --error-color: #ef4444; | |
| --warning-color: #f59e0b; | |
| --bg-primary: #0f172a; | |
| --bg-secondary: #1e293b; | |
| --bg-tertiary: #334155; | |
| --bg-card: #1e293b; | |
| --border-color: #475569; | |
| --border-light: #64748b; | |
| --text-primary: #f8fafc; | |
| --text-secondary: #cbd5e1; | |
| --text-muted: #94a3b8; | |
| --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); | |
| --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); | |
| --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1); | |
| --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); | |
| --gradient-card: linear-gradient(145deg, #1e293b 0%, #334155 100%); | |
| } | |
| .App { | |
| min-height: 100vh; | |
| background: var(--bg-primary); | |
| background-image: radial-gradient( | |
| circle at 20% 20%, | |
| rgba(59, 130, 246, 0.08) 0%, | |
| transparent 50% | |
| ), | |
| radial-gradient( | |
| circle at 80% 80%, | |
| rgba(16, 185, 129, 0.05) 0%, | |
| transparent 50% | |
| ); | |
| font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", | |
| "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", | |
| sans-serif; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| color: var(--text-primary); | |
| } | |
| .app-header { | |
| text-align: left; | |
| padding: 2rem 2.5rem; | |
| border-bottom: 1px solid var(--border-color); | |
| background: var(--bg-card); | |
| backdrop-filter: blur(10px); | |
| box-shadow: var(--shadow-lg); | |
| position: relative; | |
| } | |
| .app-header::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 3px; | |
| background: var(--gradient-primary); | |
| } | |
| .header-content { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| } | |
| .app-header h1 { | |
| font-size: 2.25rem; | |
| font-weight: 700; | |
| margin-bottom: 0.5rem; | |
| color: var(--text-primary); | |
| background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .app-header p { | |
| font-size: 1rem; | |
| color: var(--text-secondary); | |
| font-weight: 500; | |
| } | |
| .status-indicator { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| background: rgba(16, 185, 129, 0.15); | |
| padding: 0.75rem 1.25rem; | |
| border-radius: 12px; | |
| border: 1px solid rgba(16, 185, 129, 0.3); | |
| backdrop-filter: blur(10px); | |
| box-shadow: var(--shadow-md); | |
| transition: all 0.3s ease; | |
| } | |
| .status-indicator:hover { | |
| background: rgba(16, 185, 129, 0.2); | |
| transform: translateY(-1px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .status-dot { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| background: var(--success-color); | |
| box-shadow: 0 0 10px rgba(16, 185, 129, 0.5); | |
| animation: pulse 2s infinite; | |
| } | |
| .status-dot.success { | |
| background: var(--success-color); | |
| box-shadow: 0 0 10px rgba(16, 185, 129, 0.5); | |
| } | |
| .status-dot.error { | |
| background: var(--error-color); | |
| box-shadow: 0 0 10px rgba(239, 68, 68, 0.5); | |
| } | |
| .status-dot.checking { | |
| background: var(--warning-color); | |
| box-shadow: 0 0 10px rgba(245, 158, 11, 0.5); | |
| animation: pulse-checking 1s infinite; | |
| } | |
| .status-indicator { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 0.875rem; | |
| color: var(--text-secondary); | |
| } | |
| .status-refresh-btn { | |
| background: none; | |
| border: none; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| padding: 4px; | |
| border-radius: 4px; | |
| font-size: 0.875rem; | |
| transition: all 0.2s ease; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .status-refresh-btn:hover:not(:disabled) { | |
| color: var(--text-secondary); | |
| background: rgba(255, 255, 255, 0.1); | |
| transform: scale(1.1); | |
| } | |
| .status-refresh-btn:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| from { | |
| transform: rotate(0deg); | |
| } | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| .status-details { | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| margin-top: 2px; | |
| max-width: 200px; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| @keyframes pulse-checking { | |
| 0%, | |
| 100% { | |
| opacity: 0.6; | |
| transform: scale(1); | |
| } | |
| 50% { | |
| opacity: 1; | |
| transform: scale(1.2); | |
| } | |
| } | |
| @keyframes pulse { | |
| 0%, | |
| 100% { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| 50% { | |
| opacity: 0.8; | |
| transform: scale(1.1); | |
| } | |
| } | |
| .status-indicator span { | |
| color: var(--success-color); | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| } | |
| .main-container { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| min-height: calc(100vh - 140px); | |
| gap: 1.5rem; | |
| padding: 1.5rem; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| align-items: start; | |
| } | |
| /* Steps Columns */ | |
| .steps-column { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.5rem; | |
| } | |
| /* Step Content Areas */ | |
| .step-content { | |
| background: var(--bg-card); | |
| background-image: var(--gradient-card); | |
| padding: 2rem; | |
| border-radius: 16px; | |
| border: 1px solid var(--border-color); | |
| box-shadow: var(--shadow-lg); | |
| opacity: 1; | |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| position: relative; | |
| backdrop-filter: blur(10px); | |
| border-color: var(--primary-color); | |
| box-shadow: var(--shadow-xl), 0 0 0 1px var(--primary-color), | |
| 0 0 40px rgba(99, 102, 241, 0.15); | |
| transform: translateY(-2px); | |
| min-height: fit-content; | |
| } | |
| .step-content::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| border-radius: 16px; | |
| padding: 1px; | |
| background: linear-gradient( | |
| 135deg, | |
| transparent, | |
| rgba(99, 102, 241, 0.2), | |
| transparent | |
| ); | |
| mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); | |
| mask-composite: exclude; | |
| opacity: 1; | |
| transition: opacity 0.4s ease; | |
| } | |
| /* Step Components Styling */ | |
| .step-container { | |
| display: flex; | |
| flex-direction: column; | |
| min-height: fit-content; | |
| } | |
| .step-header { | |
| margin-bottom: 2rem; | |
| padding-bottom: 1.5rem; | |
| border-bottom: 1px solid var(--border-color); | |
| position: relative; | |
| } | |
| .step-header::after { | |
| content: ""; | |
| position: absolute; | |
| bottom: -1px; | |
| left: 0; | |
| width: 60px; | |
| height: 2px; | |
| background: var(--gradient-primary); | |
| border-radius: 1px; | |
| } | |
| .step-header h2 { | |
| color: var(--text-primary); | |
| font-size: 1.5rem; | |
| margin-bottom: 0.75rem; | |
| font-weight: 700; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| letter-spacing: -0.025em; | |
| } | |
| .step-number { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 32px; | |
| height: 32px; | |
| background: var(--gradient-primary); | |
| border-radius: 8px; | |
| font-size: 0.875rem; | |
| font-weight: 700; | |
| color: white; | |
| box-shadow: var(--shadow-md); | |
| } | |
| .step-header p { | |
| color: var(--text-secondary); | |
| font-size: 1rem; | |
| line-height: 1.6; | |
| } | |
| .step-body { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.5rem; | |
| } | |
| .step-footer { | |
| margin-top: 2rem; | |
| padding-top: 1.5rem; | |
| border-top: 1px solid var(--border-color); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| /* Form Elements */ | |
| .form-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.75rem; | |
| margin-bottom: 2rem; | |
| } | |
| .form-group:last-child { | |
| margin-bottom: 0; | |
| } | |
| .form-group label { | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| font-size: 0.9rem; | |
| letter-spacing: 0.025em; | |
| margin-bottom: 0.5rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .form-input { | |
| padding: 1rem 1.25rem; | |
| border: 1px solid var(--border-color); | |
| border-radius: 12px; | |
| font-size: 0.875rem; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| background: rgba(15, 23, 42, 0.8); | |
| color: var(--text-primary); | |
| backdrop-filter: blur(10px); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .form-input:focus { | |
| outline: none; | |
| border-color: var(--primary-color); | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1), var(--shadow-md); | |
| transform: translateY(-1px); | |
| } | |
| .form-input::placeholder { | |
| color: var(--text-muted); | |
| } | |
| .btn { | |
| padding: 1rem 1.5rem; | |
| border: none; | |
| border-radius: 12px; | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| text-decoration: none; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| position: relative; | |
| overflow: hidden; | |
| letter-spacing: -0.025em; | |
| box-shadow: var(--shadow-md); | |
| } | |
| .btn::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient( | |
| 90deg, | |
| transparent, | |
| rgba(255, 255, 255, 0.1), | |
| transparent | |
| ); | |
| transition: left 0.5s ease; | |
| } | |
| .btn:hover::before { | |
| left: 100%; | |
| } | |
| .btn-primary { | |
| background: var(--gradient-primary); | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .btn-secondary { | |
| background: var(--bg-tertiary); | |
| color: var(--text-primary); | |
| border: 1px solid var(--border-color); | |
| } | |
| .btn-secondary:hover { | |
| background: var(--border-light); | |
| transform: translateY(-1px); | |
| } | |
| .btn-success { | |
| background: linear-gradient(135deg, var(--success-color) 0%, #059669 100%); | |
| color: white; | |
| } | |
| .btn-success:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .btn:disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| transform: none; | |
| } | |
| .btn:disabled:hover { | |
| transform: none; | |
| } | |
| /* File Upload */ | |
| .file-upload, | |
| .file-upload-area { | |
| border: 2px dashed var(--border-color); | |
| border-radius: 16px; | |
| padding: 3rem 2rem; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| background: rgba(15, 23, 42, 0.5); | |
| color: var(--text-secondary); | |
| position: relative; | |
| overflow: hidden; | |
| margin-top: 1rem; | |
| } | |
| .file-upload::before, | |
| .file-upload-area::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: radial-gradient( | |
| circle at center, | |
| rgba(99, 102, 241, 0.05) 0%, | |
| transparent 70% | |
| ); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .file-upload:hover, | |
| .file-upload-area:hover { | |
| border-color: var(--primary-color); | |
| background: rgba(99, 102, 241, 0.05); | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .file-upload:hover::before, | |
| .file-upload-area:hover::before { | |
| opacity: 1; | |
| } | |
| .file-upload.drag-over, | |
| .file-upload-area.drag-over { | |
| border-color: var(--primary-color); | |
| background: rgba(99, 102, 241, 0.1); | |
| box-shadow: var(--shadow-lg), 0 0 0 1px var(--primary-color); | |
| } | |
| .file-upload input[type="file"], | |
| .file-upload-area input[type="file"] { | |
| display: none; | |
| } | |
| .file-upload-icon { | |
| font-size: 3rem; | |
| margin-bottom: 1rem; | |
| color: var(--primary-color); | |
| } | |
| .file-upload-text { | |
| font-size: 1.125rem; | |
| font-weight: 600; | |
| margin-bottom: 0.5rem; | |
| color: var(--text-primary); | |
| letter-spacing: -0.025em; | |
| } | |
| .file-upload-subtext { | |
| font-size: 0.875rem; | |
| color: var(--text-muted); | |
| } | |
| .file-uploaded { | |
| background: var(--bg-tertiary); | |
| border: 2px solid var(--success-color); | |
| border-radius: 12px; | |
| padding: 1.5rem; | |
| box-shadow: var(--shadow-md), 0 0 20px rgba(16, 185, 129, 0.1); | |
| margin-top: 1rem; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .file-uploaded::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 3px; | |
| background: linear-gradient(90deg, var(--success-color) 0%, #34d399 100%); | |
| } | |
| .file-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| color: var(--success-color); | |
| } | |
| .file-icon { | |
| font-size: 2rem; | |
| background: rgba(16, 185, 129, 0.1); | |
| padding: 0.75rem; | |
| border-radius: 8px; | |
| border: 1px solid rgba(16, 185, 129, 0.3); | |
| } | |
| .file-details { | |
| flex: 1; | |
| } | |
| .file-details h4 { | |
| font-weight: 600; | |
| margin-bottom: 0.5rem; | |
| color: var(--text-primary); | |
| font-size: 1.1rem; | |
| } | |
| .file-details p { | |
| font-size: 0.875rem; | |
| opacity: 0.8; | |
| color: var(--text-secondary); | |
| margin-bottom: 0.25rem; | |
| } | |
| .file-details p:last-child { | |
| margin-bottom: 0; | |
| } | |
| /* Output Options */ | |
| .output-options { | |
| display: flex; | |
| gap: 0.75rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .output-option { | |
| padding: 0.75rem 1rem; | |
| border: 1px solid var(--border-color); | |
| border-radius: 8px; | |
| text-align: left; | |
| cursor: pointer; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| background: var(--bg-tertiary); | |
| color: var(--text-primary); | |
| position: relative; | |
| overflow: hidden; | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .output-option::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: var(--gradient-primary); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .output-option:hover { | |
| border-color: var(--primary-color); | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .output-option.selected { | |
| border-color: var(--primary-color); | |
| background: rgba(99, 102, 241, 0.1); | |
| box-shadow: var(--shadow-md), 0 0 0 1px var(--primary-color); | |
| } | |
| .output-option.selected::before { | |
| opacity: 0.05; | |
| } | |
| .output-option.disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .output-option.disabled:hover { | |
| transform: none; | |
| box-shadow: none; | |
| } | |
| .output-option h4 { | |
| margin-bottom: 0.25rem; | |
| color: var(--text-primary); | |
| font-weight: 600; | |
| position: relative; | |
| z-index: 1; | |
| font-size: 0.875rem; | |
| } | |
| .output-option p { | |
| color: var(--text-secondary); | |
| font-size: 0.75rem; | |
| line-height: 1.4; | |
| position: relative; | |
| z-index: 1; | |
| opacity: 0.8; | |
| } | |
| /* Data Preview */ | |
| .data-preview { | |
| margin-top: 1.5rem; | |
| background: var(--bg-card); | |
| border-radius: 12px; | |
| padding: 1.5rem; | |
| border: 1px solid var(--border-color); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .data-preview h4 { | |
| color: var(--text-primary); | |
| margin-bottom: 1rem; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| } | |
| /* Data table container for Step2 preview - specific class to avoid conflicts */ | |
| .step2-data-table-container { | |
| width: 100%; | |
| max-height: 400px; | |
| overflow: auto; | |
| border: 1px solid var(--border-color); | |
| border-radius: 8px; | |
| box-shadow: var(--shadow-md); | |
| background: var(--bg-secondary); | |
| position: relative; | |
| /* Ensure scrolling works properly */ | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--border-light) var(--bg-tertiary); | |
| } | |
| .data-table-scrollable { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 0.8rem; | |
| min-width: 600px; /* Increased minimum width to ensure horizontal scrolling */ | |
| table-layout: auto; /* Allow flexible column sizing */ | |
| } | |
| .data-table-scrollable th, | |
| .data-table-scrollable td { | |
| padding: 0.75rem 1rem; | |
| text-align: left; | |
| border-bottom: 1px solid var(--border-color); | |
| color: var(--text-primary); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| max-width: 200px; /* Limit column width */ | |
| min-width: 120px; /* Increased minimum column width */ | |
| vertical-align: top; | |
| } | |
| .data-table-scrollable th { | |
| background: var(--bg-primary); | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| position: sticky; | |
| top: 0; | |
| z-index: 2; | |
| border-right: 1px solid var(--border-color); | |
| } | |
| .data-table-scrollable td { | |
| border-right: 1px solid var(--border-color); | |
| } | |
| .data-table-scrollable tr:hover { | |
| background: rgba(59, 130, 246, 0.08); | |
| } | |
| .data-table-scrollable tr:nth-child(even) { | |
| background: rgba(255, 255, 255, 0.02); | |
| } | |
| .preview-note { | |
| margin-top: 0.75rem; | |
| font-size: 0.85rem; | |
| color: var(--text-muted); | |
| text-align: center; | |
| font-style: italic; | |
| } | |
| /* Custom scrollbar for the data table container */ | |
| .data-table-container::-webkit-scrollbar, | |
| .step2-data-table-container::-webkit-scrollbar { | |
| width: 12px; | |
| height: 12px; | |
| } | |
| .data-table-container::-webkit-scrollbar-track, | |
| .step2-data-table-container::-webkit-scrollbar-track { | |
| background: var(--bg-tertiary); | |
| border-radius: 6px; | |
| margin: 2px; | |
| } | |
| .data-table-container::-webkit-scrollbar-thumb, | |
| .step2-data-table-container::-webkit-scrollbar-thumb { | |
| background: var(--border-light); | |
| border-radius: 6px; | |
| border: 2px solid var(--bg-tertiary); | |
| min-height: 20px; | |
| } | |
| .data-table-container::-webkit-scrollbar-thumb:hover, | |
| .step2-data-table-container::-webkit-scrollbar-thumb:hover { | |
| background: var(--primary-color); | |
| } | |
| .data-table-container::-webkit-scrollbar-corner, | |
| .step2-data-table-container::-webkit-scrollbar-corner { | |
| background: var(--bg-tertiary); | |
| } | |
| /* Legacy data-table styles for backward compatibility */ | |
| .data-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 0.8rem; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| } | |
| .data-table th, | |
| .data-table td { | |
| padding: 0.75rem 0.5rem; | |
| text-align: left; | |
| border-bottom: 1px solid var(--border-color); | |
| color: var(--text-primary); | |
| } | |
| .data-table th { | |
| background: var(--bg-primary); | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| position: sticky; | |
| top: 0; | |
| z-index: 1; | |
| } | |
| .data-table tr:hover { | |
| background: rgba(99, 102, 241, 0.05); | |
| } | |
| /* Slider */ | |
| .slider-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.75rem; | |
| } | |
| .slider { | |
| width: 100%; | |
| height: 8px; | |
| border-radius: 4px; | |
| background: var(--bg-tertiary); | |
| outline: none; | |
| -webkit-appearance: none; | |
| appearance: none; | |
| position: relative; | |
| box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); | |
| } | |
| .slider::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 50%; | |
| background: var(--gradient-primary); | |
| cursor: pointer; | |
| box-shadow: var(--shadow-md); | |
| transition: all 0.3s ease; | |
| } | |
| .slider::-webkit-slider-thumb:hover { | |
| transform: scale(1.1); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .slider::-moz-range-thumb { | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 50%; | |
| background: var(--gradient-primary); | |
| cursor: pointer; | |
| border: none; | |
| box-shadow: var(--shadow-md); | |
| transition: all 0.3s ease; | |
| } | |
| slider::-moz-range-thumb:hover { | |
| transform: scale(1.1); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .slider-value { | |
| text-align: center; | |
| font-weight: 600; | |
| color: var(--primary-color); | |
| font-size: 1rem; | |
| background: rgba(99, 102, 241, 0.1); | |
| padding: 0.5rem 1rem; | |
| border-radius: 8px; | |
| border: 1px solid rgba(99, 102, 241, 0.2); | |
| } | |
| /* Status Messages */ | |
| .status-message { | |
| padding: 1rem 1.25rem; | |
| border-radius: 12px; | |
| font-weight: 500; | |
| font-size: 0.875rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| backdrop-filter: blur(10px); | |
| box-shadow: var(--shadow-md); | |
| font-family: "Inter", sans-serif; | |
| } | |
| .status-message.success { | |
| background: rgba(16, 185, 129, 0.15); | |
| color: var(--success-color); | |
| border: 1px solid rgba(16, 185, 129, 0.3); | |
| } | |
| .status-message.error { | |
| background: rgba(248, 113, 113, 0.15); | |
| color: var(--error-color); | |
| border: 1px solid rgba(248, 113, 113, 0.3); | |
| } | |
| .status-message.info { | |
| background: rgba(99, 102, 241, 0.15); | |
| color: var(--primary-color); | |
| border: 1px solid rgba(99, 102, 241, 0.3); | |
| } | |
| .status-message.warning { | |
| background: rgba(245, 158, 11, 0.15); | |
| color: var(--warning-color); | |
| border: 1px solid rgba(245, 158, 11, 0.3); | |
| } | |
| .status-message-icon { | |
| font-size: 1.25rem; | |
| display: flex; | |
| align-items: center; | |
| flex-shrink: 0; | |
| } | |
| .status-message-content h4 { | |
| margin-bottom: 0.5rem; | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| } | |
| .status-message-content ul { | |
| margin: 0; | |
| color: inherit; | |
| opacity: 0.9; | |
| } | |
| /* Status Summary List */ | |
| .status-summary { | |
| margin-top: 0.75rem; | |
| background: rgba(15, 23, 42, 0.3); | |
| border: 1px solid var(--border-color); | |
| border-radius: 6px; | |
| padding: 0.75rem; | |
| backdrop-filter: blur(5px); | |
| } | |
| .status-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 0.4rem 0; | |
| border-bottom: 1px solid rgba(71, 85, 105, 0.2); | |
| font-size: 0.8rem; | |
| } | |
| .status-row:last-child { | |
| border-bottom: none; | |
| margin-bottom: 0; | |
| padding-bottom: 0; | |
| } | |
| .status-row:first-child { | |
| padding-top: 0; | |
| } | |
| .status-label { | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| min-width: 80px; | |
| font-size: 0.8rem; | |
| } | |
| .status-badge { | |
| padding: 0.15rem 0.5rem; | |
| border-radius: 12px; | |
| font-size: 0.65rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.025em; | |
| border: 1px solid; | |
| backdrop-filter: blur(10px); | |
| transition: all 0.2s ease; | |
| } | |
| .status-badge.success { | |
| background: rgba(16, 185, 129, 0.15); | |
| color: var(--success-color); | |
| border-color: rgba(16, 185, 129, 0.3); | |
| } | |
| .status-badge.warning { | |
| background: rgba(245, 158, 11, 0.15); | |
| color: var(--warning-color); | |
| border-color: rgba(245, 158, 11, 0.3); | |
| } | |
| .status-badge.info { | |
| background: rgba(99, 102, 241, 0.15); | |
| color: var(--primary-color); | |
| border-color: rgba(99, 102, 241, 0.3); | |
| } | |
| /* Step wrapper states */ | |
| .step-wrapper.disabled { | |
| opacity: 0.5; | |
| pointer-events: none; | |
| position: relative; | |
| } | |
| .step-wrapper.disabled::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: rgba(0, 0, 0, 0.1); | |
| z-index: 1; | |
| border-radius: 12px; | |
| } | |
| .step-wrapper.enabled { | |
| opacity: 1; | |
| pointer-events: auto; | |
| } | |
| /* Disabled step content */ | |
| .step-wrapper.disabled .btn { | |
| pointer-events: none; | |
| opacity: 0.6; | |
| } | |
| .step-wrapper.disabled input, | |
| .step-wrapper.disabled select, | |
| .step-wrapper.disabled textarea { | |
| pointer-events: none; | |
| opacity: 0.6; | |
| } | |
| .step-wrapper.disabled .file-upload-zone { | |
| pointer-events: none; | |
| opacity: 0.6; | |
| } | |
| /* Results Section Styles */ | |
| .results-section { | |
| margin-top: 2rem; | |
| } | |
| .generate-new-section { | |
| border-top: 1px solid var(--border-color); | |
| padding-top: 1.5rem; | |
| margin-top: 2rem; | |
| } | |
| .success-details { | |
| display: flex; | |
| gap: 1rem; | |
| flex-wrap: wrap; | |
| margin-top: 0.75rem; | |
| } | |
| .success-stat { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| font-size: 0.875rem; | |
| } | |
| .success-label { | |
| color: var(--text-secondary); | |
| font-weight: 500; | |
| } | |
| .success-value { | |
| color: var(--text-primary); | |
| font-weight: 600; | |
| padding: 0.25rem 0.5rem; | |
| background: rgba(16, 185, 129, 0.1); | |
| border-radius: 4px; | |
| border: 1px solid rgba(16, 185, 129, 0.2); | |
| } | |
| .download-actions { | |
| display: flex; | |
| justify-content: center; | |
| gap: 1rem; | |
| flex-wrap: wrap; | |
| } | |
| .download-btn-primary { | |
| font-size: 1rem; | |
| padding: 0.875rem 2rem; | |
| font-weight: 600; | |
| background: linear-gradient(135deg, var(--success-color) 0%, #059669 100%); | |
| border: none; | |
| color: white; | |
| } | |
| .download-btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .btn-outline { | |
| background: transparent; | |
| border: 2px solid var(--border-color); | |
| color: var(--text-secondary); | |
| padding: 0.75rem 1.5rem; | |
| border-radius: 8px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| text-decoration: none; | |
| } | |
| .btn-outline:hover { | |
| border-color: var(--primary-color); | |
| color: var(--primary-color); | |
| background: rgba(59, 130, 246, 0.05); | |
| } | |
| /* Error Section Improvements */ | |
| .error-section { | |
| margin-top: 2rem; | |
| } | |
| .error-details { | |
| margin-top: 0.75rem; | |
| padding: 0.75rem; | |
| background: rgba(239, 68, 68, 0.1); | |
| border: 1px solid rgba(239, 68, 68, 0.2); | |
| border-radius: 8px; | |
| font-size: 0.875rem; | |
| } | |
| .error-help { | |
| color: var(--text-secondary); | |
| } | |
| .error-help ul { | |
| color: var(--text-secondary); | |
| opacity: 0.9; | |
| } | |
| .error-help li { | |
| margin-bottom: 0.25rem; | |
| } | |
| /* Generation section improvements */ | |
| .generation-progress { | |
| text-align: center; | |
| padding: 2rem; | |
| background: var(--bg-card); | |
| border-radius: 12px; | |
| border: 1px solid var(--border-color); | |
| } | |
| .generation-progress .spinner { | |
| margin: 0 auto 1rem; | |
| } | |
| .progress-bar { | |
| width: 100%; | |
| height: 8px; | |
| background: var(--bg-tertiary); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| margin: 1rem 0; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: linear-gradient( | |
| 90deg, | |
| var(--primary-color), | |
| var(--success-color) | |
| ); | |
| border-radius: 4px; | |
| transition: width 0.3s ease; | |
| } | |