| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
|
|
| * {
|
| margin: 0;
|
| padding: 0;
|
| box-sizing: border-box;
|
| }
|
|
|
| :root {
|
| --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
| --gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
| --gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
| --gradient-4: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
|
|
|
| --primary: #3b82f6;
|
| --secondary: #10b981;
|
| --accent: #f59e0b;
|
| --error: #ef4444;
|
| --warning: #f59e0b;
|
| --success: #10b981;
|
| --info: #3b82f6;
|
|
|
| --blue-500: #3b82f6;
|
| --blue-600: #2563eb;
|
| --blue-700: #1d4ed8;
|
|
|
| --purple-500: #8b5cf6;
|
| --purple-600: #7c3aed;
|
|
|
| --pink-500: #ec4899;
|
| --pink-600: #db2777;
|
|
|
| --text-primary: #1f2937;
|
| --text-secondary: #6b7280;
|
|
|
| --radius-sm: 0.375rem;
|
| --radius-lg: 0.75rem;
|
|
|
| --gray-50: #f9fafb;
|
| --gray-100: #f3f4f6;
|
| --gray-200: #e5e7eb;
|
| --gray-300: #d1d5db;
|
| --gray-400: #9ca3af;
|
| --gray-500: #6b7280;
|
| --gray-600: #4b5563;
|
| --gray-700: #374151;
|
| --gray-800: #1f2937;
|
| --gray-900: #111827;
|
| }
|
|
|
| body {
|
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
| -webkit-font-smoothing: antialiased;
|
| -moz-osx-font-smoothing: grayscale;
|
| background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 50%, #ffffff 100%);
|
| background-attachment: fixed;
|
| min-height: 100vh;
|
| color: #1f2937;
|
| }
|
|
|
| .container {
|
| max-width: 1280px;
|
| margin: 0 auto;
|
| padding: 0 1.5rem;
|
| }
|
|
|
|
|
| .glass-panel {
|
| background: rgba(255, 255, 255, 0.95);
|
| backdrop-filter: blur(30px) saturate(180%);
|
| -webkit-backdrop-filter: blur(30px) saturate(180%);
|
| border-radius: 24px;
|
| border: 1px solid rgba(255, 255, 255, 0.5);
|
| box-shadow:
|
| 0 20px 60px rgba(0, 0, 0, 0.15),
|
| 0 8px 16px rgba(0, 0, 0, 0.1),
|
| inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
| padding: 2.5rem;
|
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
| position: relative;
|
| overflow: hidden;
|
| }
|
|
|
| .glass-panel::before {
|
| content: '';
|
| position: absolute;
|
| top: 0;
|
| left: -100%;
|
| width: 100%;
|
| height: 100%;
|
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
| transition: left 0.7s;
|
| }
|
|
|
| .glass-panel:hover::before {
|
| left: 100%;
|
| }
|
|
|
| .glass-panel:hover {
|
| transform: translateY(-8px);
|
| box-shadow:
|
| 0 30px 80px rgba(0, 0, 0, 0.2),
|
| 0 12px 24px rgba(0, 0, 0, 0.15),
|
| inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
| }
|
|
|
|
|
| .glass-card {
|
| background: rgba(255, 255, 255, 0.9);
|
| backdrop-filter: blur(20px);
|
| border-radius: 16px;
|
| border: 1px solid rgba(255, 255, 255, 0.4);
|
| padding: 1.75rem;
|
| box-shadow:
|
| 0 10px 30px rgba(0, 0, 0, 0.1),
|
| 0 4px 8px rgba(0, 0, 0, 0.05);
|
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
| cursor: pointer;
|
| }
|
|
|
| .glass-card:hover {
|
| transform: translateY(-6px) scale(1.02);
|
| box-shadow:
|
| 0 20px 50px rgba(0, 0, 0, 0.15),
|
| 0 8px 16px rgba(59, 130, 246, 0.2);
|
| border-color: rgba(59, 130, 246, 0.5);
|
| }
|
|
|
|
|
| .btn {
|
| padding: 0.875rem 1.75rem;
|
| border-radius: 12px;
|
| border: none;
|
| font-weight: 600;
|
| font-size: 0.95rem;
|
| cursor: pointer;
|
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
| display: inline-flex;
|
| align-items: center;
|
| gap: 0.625rem;
|
| position: relative;
|
| overflow: hidden;
|
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
| }
|
|
|
| .btn::before {
|
| content: '';
|
| position: absolute;
|
| top: 50%;
|
| left: 50%;
|
| width: 0;
|
| height: 0;
|
| border-radius: 50%;
|
| background: rgba(255, 255, 255, 0.4);
|
| transform: translate(-50%, -50%);
|
| transition: width 0.6s, height 0.6s;
|
| }
|
|
|
| .btn:hover::before {
|
| width: 400px;
|
| height: 400px;
|
| }
|
|
|
| .btn-primary {
|
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
| color: white;
|
| }
|
|
|
| .btn-primary:hover {
|
| transform: translateY(-3px);
|
| box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
|
| }
|
|
|
| .btn-primary:active {
|
| transform: translateY(-1px);
|
| }
|
|
|
| .btn-secondary {
|
| background: rgba(255, 255, 255, 0.95);
|
| color: #667eea;
|
| border: 2px solid rgba(102, 126, 234, 0.3);
|
| }
|
|
|
| .btn-secondary:hover {
|
| background: rgba(102, 126, 234, 0.1);
|
| border-color: #667eea;
|
| transform: translateY(-2px);
|
| }
|
|
|
| .btn:disabled {
|
| opacity: 0.6;
|
| cursor: not-allowed;
|
| transform: none !important;
|
| }
|
|
|
|
|
| .glass-input {
|
| background: rgba(255, 255, 255, 0.95);
|
| border: 2px solid rgba(102, 126, 234, 0.2);
|
| border-radius: 12px;
|
| padding: 0.875rem 1.25rem;
|
| font-size: 1rem;
|
| color: #1f2937;
|
| transition: all 0.3s ease;
|
| width: 100%;
|
| font-family: 'Inter', sans-serif;
|
| }
|
|
|
| .glass-input:focus {
|
| outline: none;
|
| border-color: #667eea;
|
| box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
|
| background: white;
|
| }
|
|
|
|
|
| .upload-area {
|
| border: 3px dashed rgba(102, 126, 234, 0.3);
|
| border-radius: 20px;
|
| padding: 4rem 2rem;
|
| text-align: center;
|
| background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
|
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
| cursor: pointer;
|
| position: relative;
|
| overflow: hidden;
|
| }
|
|
|
| .upload-area::before {
|
| content: '';
|
| position: absolute;
|
| top: -50%;
|
| left: -50%;
|
| width: 200%;
|
| height: 200%;
|
| background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
|
| opacity: 0;
|
| transition: opacity 0.3s;
|
| }
|
|
|
| .upload-area:hover::before {
|
| opacity: 1;
|
| }
|
|
|
| .upload-area:hover {
|
| border-color: #667eea;
|
| background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
|
| transform: scale(1.02);
|
| }
|
|
|
| .upload-area.drag-active {
|
| border-color: #764ba2;
|
| background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
|
| transform: scale(1.05);
|
| }
|
|
|
|
|
| .progress-bar {
|
| width: 100%;
|
| height: 10px;
|
| background: rgba(102, 126, 234, 0.1);
|
| border-radius: 10px;
|
| overflow: hidden;
|
| box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
|
| }
|
|
|
| .progress-fill {
|
| height: 100%;
|
| background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
|
| background-size: 200% 100%;
|
| animation: progressShine 2s linear infinite;
|
| transition: width 0.3s ease;
|
| border-radius: 10px;
|
| }
|
|
|
| @keyframes progressShine {
|
| 0% {
|
| background-position: 200% 0;
|
| }
|
|
|
| 100% {
|
| background-position: -200% 0;
|
| }
|
| }
|
|
|
|
|
| .spinner {
|
| width: 48px;
|
| height: 48px;
|
| border: 5px solid rgba(102, 126, 234, 0.1);
|
| border-top-color: #667eea;
|
| border-radius: 50%;
|
| animation: spin 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
|
| }
|
|
|
| @keyframes spin {
|
| to {
|
| transform: rotate(360deg);
|
| }
|
| }
|
|
|
|
|
| .alert {
|
| padding: 1.25rem 1.75rem;
|
| border-radius: 12px;
|
| margin-bottom: 1.25rem;
|
| border-left: 5px solid;
|
| backdrop-filter: blur(10px);
|
| font-weight: 500;
|
| }
|
|
|
| .alert-success {
|
| background: rgba(16, 185, 129, 0.1);
|
| border-color: #10b981;
|
| color: #065f46;
|
| }
|
|
|
| .alert-error {
|
| background: rgba(239, 68, 68, 0.1);
|
| border-color: #ef4444;
|
| color: #991b1b;
|
| }
|
|
|
| .alert-info {
|
| background: rgba(59, 130, 246, 0.1);
|
| border-color: #3b82f6;
|
| color: #1e40af;
|
| }
|
|
|
|
|
| .metric-card {
|
| background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
|
| border-radius: 16px;
|
| padding: 2rem;
|
| border: 1px solid rgba(102, 126, 234, 0.2);
|
| text-align: center;
|
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
| position: relative;
|
| overflow: hidden;
|
| }
|
|
|
| .metric-card::before {
|
| content: '';
|
| position: absolute;
|
| top: -50%;
|
| right: -50%;
|
| width: 200%;
|
| height: 200%;
|
| background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
|
| opacity: 0;
|
| transition: opacity 0.3s;
|
| }
|
|
|
| .metric-card:hover::before {
|
| opacity: 1;
|
| }
|
|
|
| .metric-card:hover {
|
| transform: translateY(-8px) scale(1.05);
|
| box-shadow: 0 20px 40px rgba(102, 126, 234, 0.2);
|
| border-color: #667eea;
|
| }
|
|
|
| .metric-value {
|
| font-size: 2.5rem;
|
| font-weight: 800;
|
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
| -webkit-background-clip: text;
|
| -webkit-text-fill-color: transparent;
|
| margin-bottom: 0.5rem;
|
| }
|
|
|
| .metric-label {
|
| font-size: 0.95rem;
|
| color: #6b7280;
|
| font-weight: 600;
|
| text-transform: uppercase;
|
| letter-spacing: 0.5px;
|
| }
|
|
|
|
|
| .flex {
|
| display: flex;
|
| }
|
|
|
| .items-center {
|
| align-items: center;
|
| }
|
|
|
| .justify-between {
|
| justify-content: space-between;
|
| }
|
|
|
| .gap-2 {
|
| gap: 0.5rem;
|
| }
|
|
|
| .gap-3 {
|
| gap: 0.75rem;
|
| }
|
|
|
|
|
| .grid {
|
| display: grid;
|
| }
|
|
|
| .grid-cols-2 {
|
| grid-template-columns: repeat(2, 1fr);
|
| }
|
|
|
| .grid-cols-4 {
|
| grid-template-columns: repeat(4, 1fr);
|
| }
|
|
|
| .gap-4 {
|
| gap: 1rem;
|
| }
|
|
|
|
|
| .mb-4 {
|
| margin-bottom: 1rem;
|
| }
|
|
|
| @media (max-width: 768px) {
|
|
|
| .grid-cols-2,
|
| .grid-cols-4 {
|
| grid-template-columns: 1fr;
|
| }
|
| }
|
|
|
|
|
| ::-webkit-scrollbar {
|
| width: 12px;
|
| }
|
|
|
| ::-webkit-scrollbar-track {
|
| background: rgba(255, 255, 255, 0.1);
|
| border-radius: 10px;
|
| }
|
|
|
| ::-webkit-scrollbar-thumb {
|
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
| border-radius: 10px;
|
| border: 2px solid rgba(255, 255, 255, 0.2);
|
| }
|
|
|
| ::-webkit-scrollbar-thumb:hover {
|
| background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
|
| } |
