Upload index.css

src/index.css

@@ -0,0 +1,158 @@
+/* Base Font Definitions */
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Inter:wght@400;500;600;700&display=swap');
+
+.font-orbitron { font-family: 'Orbitron', sans-serif; }
+.font-inter { font-family: 'Inter', sans-serif; }
+
+/* NEW: Quantum Flux Animation for Header (Professional, Dynamic Motion, Deep Neon Gradient) */
+@keyframes quantum-flux {
+    0% {
+        background-position: 0% 50%;
+        text-shadow: 0 0 15px #00FFFF, 0 0 30px #FF00FF, 0 0 45px #00FFFF; /* Deep Cyan, Deep Magenta */
+        transform: translateY(0px) scale(1);
+    }
+    25% {
+        background-position: 25% 75%;
+        text-shadow: 0 0 18px #FF00FF, 0 0 35px #00FFFF, 0 0 50px #FF00FF;
+        transform: translateY(-3px) scale(1.008); /* More pronounced lift */
+    }
+    50% {
+        background-position: 50% 100%;
+        text-shadow: 0 0 20px #00FF00, 0 0 40px #A020F0, 0 0 60px #00FF00; /* Deep Green, Deep Purple */
+        transform: translateY(0px) scale(1);
+    }
+    75% {
+        background-position: 75% 25%;
+        text-shadow: 0 0 18px #A020F0, 0 0 35px #00FF00, 0 0 50px #A020F0;
+        transform: translateY(3px) scale(0.992); /* More pronounced dip */
+    }
+    100% {
+        background-position: 100% 50%;
+        text-shadow: 0 0 15px #00FFFF, 0 0 30px #FF00FF, 0 0 45px #00FFFF;
+        transform: translateY(0px) scale(1);
+    }
+}
+.animate-quantum-flux {
+    /* Define the gradient that will be clipped to text and animated */
+    background-image: linear-gradient(90deg, #00FFFF, #FF00FF, #00FF00, #A020F0, #00FFFF);
+    background-size: 400% 400%; /* Larger background size for smoother shift */
+    animation: quantum-flux 10s ease infinite; /* Quicker, more dynamic shift */
+}
+
+/* Light theme header glow (using a lighter version of the quantum-flux idea) */
+@keyframes quantum-flux-light {
+    0% {
+        background-position: 0% 50%;
+        text-shadow: 0 0 8px rgba(0, 180, 180, 0.6), 0 0 15px rgba(180, 0, 180, 0.4);
+        transform: translateY(0px) scale(1);
+    }
+    50% {
+        background-position: 100% 50%;
+        text-shadow: 0 0 12px rgba(180, 0, 180, 0.7), 0 0 20px rgba(0, 180, 180, 0.5);
+        transform: translateY(-1.5px) scale(1.004);
+    }
+    100% {
+        background-position: 0% 50%;
+        text-shadow: 0 0 8px rgba(0, 180, 180, 0.6), 0 0 15px rgba(180, 0, 180, 0.4);
+        transform: translateY(0px) scale(1);
+    }
+}
+.animate-quantum-flux-light {
+    background-image: linear-gradient(90deg, #00CCCC, #CC00CC, #00CC00, #AA00AA, #00CCCC);
+    background-size: 400% 400%;
+    animation: quantum-flux-light 10s ease infinite; /* Quicker */
+}
+
+
+/* Subtle pulse glow for UI elements */
+@keyframes pulse-glow {
+    0%, 100% { box-shadow: 0 0 5px rgba(0, 255, 255, 0.3), 0 0 10px rgba(0, 255, 255, 0.1); }
+    50% { box-shadow: 0 0 8px rgba(0, 255, 255, 0.5), 0 0 15px rgba(0, 255, 255, 0.2); }
+}
+.animate-pulse-glow {
+    animation: pulse-glow 3s ease-in-out infinite alternate;
+}
+
+/* Scan line effect for QR preview */
+@keyframes scan-light {
+    0% {
+        transform: translateX(-100%);
+    }
+    100% {
+        transform: translateX(100%);
+    }
+}
+.scan-line {
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    width: 100%;
+    height: 2px;
+    animation: scan-light 3s infinite linear;
+}
+
+/* Custom scrollbar styles */
+.custom-scrollbar::-webkit-scrollbar {
+    width: 8px;
+}
+.custom-scrollbar::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 10px;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 10px;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.4);
+}
+
+/* Custom style for select dropdown arrow */
+select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 0.75rem center;
+    background-size: 1.5em 1.5em;
+}
+
+/* Animated background gradient - Cyberpunk style for general background */
+@keyframes cyberpunk-gradient-shift {
+    0% { background-position: 0% 0%; background-color: #1a0033; }
+    25% { background-position: 25% 50%; background-color: #001a33; }
+    50% { background-position: 50% 100%; background-color: #33001a; }
+    75% { background-position: 75% 50%; background-color: #003333; }
+    100% { background-position: 100% 0%; background-color: #1a0033; }
+}
+.animate-gradient-shift {
+    background-size: 400% 400%;
+    animation: cyberpunk-gradient-shift 20s ease infinite;
+}
+
+/* Light theme animated background gradient */
+@keyframes gradient-shift-light {
+    0% { background-position: 0% 0%; }
+    25% { background-position: 25% 50%; }
+    50% { background-position: 50% 100%; }
+    75% { background-position: 75% 50%; }
+    100% { background-position: 100% 0%; }
+}
+.animate-gradient-shift-light {
+    background-size: 400% 400%;
+    animation: gradient-shift-light 15s ease infinite;
+}
+
+/* Custom fade-in-up animation for alert modal */
+@keyframes fade-in-up {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+.animate-fade-in-up {
+    animation: fade-in-up 0.3s ease-out forwards;
+}