/* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } .dark ::-webkit-scrollbar-thumb { background: #475569; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } .dark ::-webkit-scrollbar-thumb:hover { background: #64748b; } /* Glassmorphism Utilities */ .glass { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); } .dark .glass { background: rgba(30, 41, 59, 0.7); border: 1px solid rgba(255, 255, 255, 0.1); } /* Gradient Text */ .gradient-text { background: linear-gradient(135deg, #4f46e5 0%, #14b8a6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Animations */ @keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } } .animate-shimmer { animation: shimmer 2s infinite linear; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%); background-size: 1000px 100%; } /* Input Autofill Fix */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-text-fill-color: inherit; -webkit-box-shadow: 0 0 0px 1000px transparent inset; transition: background-color 5000s ease-in-out 0s; } /* Custom Range Slider */ input[type=range] { -webkit-appearance: none; background: transparent; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%; background: #4f46e5; cursor: pointer; margin-top: -8px; box-shadow: 0 2px 6px rgba(79, 70, 229, 0.4); } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; background: #e2e8f0; border-radius: 2px; } .dark input[type=range]::-webkit-slider-runnable-track { background: #334155; } /* Loading Spinner */ .spinner { border: 3px solid rgba(255,255,255,0.3); border-radius: 50%; border-top: 3px solid white; width: 20px; height: 20px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Card Hover Effects */ .card-hover { transition: all 0.3s ease; } .card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.1); } .dark .card-hover:hover { box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5); } /* Chart Bars Animation */ .chart-bar { transition: height 1s ease-out, opacity 0.3s ease; } .chart-bar:hover { opacity: 0.8; } /* Modal Backdrop Blur */ .modal-backdrop { backdrop-filter: blur(8px); }