Update index.html

index.html

@@ -4,73 +4,20 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Neon Exam Countdown</title>
-    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
-        
-        :root {
-            --neon-pink: #FF006E;
-            --neon-blue: #00D9FF;
-            --neon-purple: #8B39FF;
-            --neon-green: #39FF14;
-            --neon-yellow: #FFFF00;
-            --dark-bg: #0A0A0F;
-        }
-
         body { 
-            font-family: 'Space Grotesk', sans-serif; 
-            background: var(--dark-bg);
+            font-family: 'Inter', sans-serif; 
+            background: radial-gradient(circle at 50% 0%, rgba(10, 10, 15, 0.8) 0%, #0A0A0B 40%, #141419 100%); 
             min-height: 100vh; 
             color: #fff; 
             overflow-x: hidden; 
-            position: relative;
-        }
-
-        /* Animated gradient background */
-        body::before {
-            content: '';
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: 
-                radial-gradient(circle at 20% 80%, rgba(255, 0, 110, 0.1) 0%, transparent 50%),
-                radial-gradient(circle at 80% 20%, rgba(0, 217, 255, 0.1) 0%, transparent 50%),
-                radial-gradient(circle at 40% 40%, rgba(139, 57, 255, 0.1) 0%, transparent 50%),
-                radial-gradient(circle at 90% 70%, rgba(57, 255, 20, 0.05) 0%, transparent 50%);
-            animation: gradientShift 15s ease infinite;
-            z-index: 0;
-        }
-
-        @keyframes gradientShift {
-            0%, 100% { transform: rotate(0deg) scale(1); }
-            33% { transform: rotate(120deg) scale(1.1); }
-            66% { transform: rotate(240deg) scale(1.05); }
-        }
-
-        /* Grid background */
-        body::after {
-            content: '';
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-image: 
-                linear-gradient(rgba(0, 217, 255, 0.03) 1px, transparent 1px),
-                linear-gradient(90deg, rgba(0, 217, 255, 0.03) 1px, transparent 1px);
-            background-size: 50px 50px;
-            animation: gridMove 10s linear infinite;
-            z-index: 0;
-        }
-
-        @keyframes gridMove {
-            0% { transform: translate(0, 0); }
-            100% { transform: translate(50px, 50px); }
-        }
-
-        /* Enhanced particles */
+            position: relative; 
+            padding: 20px;
+        }
+
+        /* --- PARTICLE EFFECTS --- */
         .particles { 
             position: fixed; 
             top: 0; 
@@ -79,347 +26,167 @@
             height: 100%; 
             overflow: hidden; 
             z-index: 1; 
+            pointer-events: none; /* Ensures particles don't interfere with clicks */
         }
-
         .particle { 
             position: absolute; 
+            width: 4px; 
+            height: 4px; 
+            background: radial-gradient(circle, rgba(0, 212, 255, 0.4) 0%, transparent 70%); 
             border-radius: 50%; 
-            pointer-events: none;
-        }
-
-        .particle.orb {
-            width: 6px;
-            height: 6px;
-            background: radial-gradient(circle, var(--neon-blue) 0%, transparent 70%);
-            box-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue);
-            animation: floatOrb 20s infinite linear;
-        }
-
-        .particle.star {
-            width: 2px;
-            height: 2px;
-            background: white;
-            box-shadow: 0 0 6px white;
-            animation: twinkle 3s infinite;
-        }
-
-        @keyframes floatOrb { 
-            from { 
-                transform: translateY(100vh) translateX(0) scale(0); 
-                opacity: 0; 
-            } 
-            10% { 
-                opacity: 1; 
-                transform: translateY(90vh) translateX(10px) scale(1);
-            } 
-            90% { 
-                opacity: 1; 
-                transform: translateY(10vh) translateX(-10px) scale(1);
-            } 
-            to { 
-                transform: translateY(-100vh) translateX(100px) scale(0); 
-                opacity: 0; 
-            } 
-        }
-
-        @keyframes twinkle {
-            0%, 100% { opacity: 0; transform: scale(0.5); }
-            50% { opacity: 1; transform: scale(1); }
-        }
-
-        .container { 
-            max-width: 1400px; 
-            margin: 0 auto; 
-            padding: 2rem; 
-            position: relative; 
-            z-index: 2; 
+            animation: float 25s infinite linear; 
+            box-shadow: 0 0 5px rgba(0, 212, 255, 0.3);
+            /* --x is set by JS */
+        }
+        @keyframes float { 
+            from { transform: translate(var(--x), 100vh); opacity: 0; } 
+            5% { opacity: 0.6; }
+            95% { opacity: 0.6; }
+            to { transform: translate(var(--x), -100vh); opacity: 0; } 
         }
 
-        /* Enhanced header */
+        /* --- MAIN LAYOUT --- */
+        .container { max-width: 1400px; margin: 0 auto; padding: 1rem 0; position: relative; z-index: 2; }
         .header { 
             display: flex; 
             justify-content: space-between; 
             align-items: center; 
-            margin-bottom: 4rem; 
-            padding: 2rem 0;
-            position: relative;
+            margin-bottom: 3rem;
+            padding: 0 1rem;
         }
-
-        .header::after {
-            content: '';
-            position: absolute;
-            bottom: 0;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 100%;
-            height: 1px;
-            background: linear-gradient(90deg, 
-                transparent, 
-                var(--neon-blue) 20%, 
-                var(--neon-pink) 50%, 
-                var(--neon-purple) 80%, 
-                transparent);
-            animation: lineGlow 3s ease-in-out infinite;
-        }
-
-        @keyframes lineGlow {
-            0%, 100% { opacity: 0.3; }
-            50% { opacity: 1; }
-        }
-
         h1 { 
-            font-family: 'Orbitron', monospace;
-            font-size: 3.5rem; 
-            font-weight: 900; 
-            text-transform: uppercase;
+            font-size: 3rem; 
+            font-weight: 700; 
             letter-spacing: 3px;
-            background: linear-gradient(135deg, 
-                var(--neon-blue) 0%, 
-                var(--neon-pink) 25%, 
-                var(--neon-purple) 50%, 
-                var(--neon-green) 75%,
-                var(--neon-blue) 100%);
-            background-size: 300% 300%;
+            background: linear-gradient(135deg, #00D4FF 0%, #FF0080 50%, #00FF88 100%); 
             -webkit-background-clip: text; 
             -webkit-text-fill-color: transparent; 
-            background-clip: text;
-            animation: gradientFlow 4s ease infinite;
-            filter: drop-shadow(0 0 30px rgba(0, 217, 255, 0.5))
-                    drop-shadow(0 0 60px rgba(255, 0, 110, 0.3));
-        }
-
-        @keyframes gradientFlow {
-            0% { background-position: 0% 50%; }
-            50% { background-position: 100% 50%; }
-            100% { background-position: 0% 50%; }
+            background-clip: text; 
+            text-shadow: 0 0 15px rgba(0, 212, 255, 0.7), 0 0 30px rgba(255, 0, 128, 0.3);
         }
 
-        /* Enhanced settings button */
+        /* --- SETTINGS BUTTON (Neon Glow Focus) --- */
         .settings-btn { 
-            width: 60px; 
-            height: 60px; 
-            background: linear-gradient(135deg, 
-                rgba(0, 217, 255, 0.1) 0%, 
-                rgba(255, 0, 110, 0.1) 100%);
-            backdrop-filter: blur(20px);
-            border: 2px solid transparent;
-            background-origin: border-box;
-            background-clip: padding-box, border-box;
-            border-image: linear-gradient(135deg, var(--neon-blue), var(--neon-pink)) 1;
-            border-radius: 16px; 
+            width: 50px; 
+            height: 50px; 
+            background: rgba(255, 255, 255, 0.08); 
+            backdrop-filter: blur(15px); 
+            border: 1px solid rgba(0, 212, 255, 0.3); 
+            border-radius: 15px; 
             display: flex; 
             align-items: center; 
             justify-content: center; 
             cursor: pointer; 
-            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-            position: relative;
-            overflow: hidden;
-        }
-
-        .settings-btn::before {
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            width: 100%;
-            height: 100%;
-            background: radial-gradient(circle, var(--neon-blue) 0%, transparent 70%);
-            transform: translate(-50%, -50%) scale(0);
-            transition: transform 0.5s ease;
-            z-index: -1;
+            transition: all 0.3s ease; 
+            box-shadow: 0 0 10px rgba(0, 212, 255, 0.4);
         }
-
         .settings-btn:hover { 
-            transform: scale(1.1) rotate(90deg);
-            box-shadow: 
-                0 0 30px rgba(0, 217, 255, 0.6),
-                0 0 60px rgba(255, 0, 110, 0.4),
-                inset 0 0 20px rgba(0, 217, 255, 0.2);
-        }
-
-        .settings-btn:hover::before {
-            transform: translate(-50%, -50%) scale(2);
+            background: rgba(0, 212, 255, 0.15); 
+            border-color: #00FF88; 
+            box-shadow: 0 0 30px rgba(0, 255, 136, 0.8), 0 0 10px rgba(0, 212, 255, 0.6);
+            transform: scale(1.05); 
         }
-
         .settings-btn svg { 
-            width: 28px; 
-            height: 28px; 
-            fill: url(#iconGradient);
-            filter: drop-shadow(0 0 10px var(--neon-blue));
-            transition: transform 0.4s ease;
+            width: 26px; 
+            height: 26px; 
+            fill: #00D4FF; 
+            filter: drop-shadow(0 0 5px rgba(0, 212, 255, 0.9));
         }
 
-        .settings-btn:hover svg {
-            transform: rotate(-90deg);
-        }
-
-        /* Enhanced exam grid */
+        /* --- EXAM GRID --- */
         .exams-grid { 
             display: grid; 
-            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); 
-            gap: 2.5rem;
-            padding: 2rem 0;
+            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); 
+            gap: 2rem; 
+            padding: 0 1rem;
         }
-
-        /* Ultra enhanced exam cards */
         .exam-card { 
-            background: linear-gradient(135deg, 
-                rgba(0, 217, 255, 0.05) 0%, 
-                rgba(255, 0, 110, 0.05) 100%);
-            backdrop-filter: blur(40px) saturate(150%);
-            border: 1px solid transparent;
-            background-origin: border-box;
-            background-clip: padding-box, border-box;
-            border-image: linear-gradient(135deg, 
-                rgba(0, 217, 255, 0.3), 
-                rgba(255, 0, 110, 0.3)) 1;
-            border-radius: 24px; 
+            background: rgba(10, 10, 15, 0.7); /* Darker base */
+            backdrop-filter: blur(10px); 
+            border: 1px solid rgba(0, 255, 136, 0.2); /* Subtle green-cyan border */
+            border-radius: 25px; 
             padding: 2.5rem; 
             text-align: center; 
-            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 
             position: relative; 
             overflow: hidden;
-            transform-style: preserve-3d;
-            perspective: 1000px;
-        }
-
-        .exam-card::before {
-            content: '';
-            position: absolute;
-            top: -50%;
-            left: -50%;
-            width: 200%;
-            height: 200%;
-            background: radial-gradient(circle, 
-                rgba(0, 217, 255, 0.1) 0%, 
-                transparent 40%);
-            animation: cardPulse 4s ease-in-out infinite;
-            pointer-events: none;
-        }
-
-        .exam-card::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: linear-gradient(105deg, 
-                transparent 40%, 
-                rgba(255, 255, 255, 0.05) 45%, 
-                rgba(255, 255, 255, 0.1) 50%, 
-                rgba(255, 255, 255, 0.05) 55%, 
-                transparent 60%);
-            transform: translateX(-100%);
-            transition: transform 0.6s;
-            pointer-events: none;
-        }
-
-        @keyframes cardPulse {
-            0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.5; }
-            50% { transform: scale(1.2) rotate(180deg); opacity: 0.8; }
+            box-shadow: 
+                0 4px 15px rgba(0, 0, 0, 0.5), /* Outer shadow for depth */
+                inset 0 0 15px rgba(0, 255, 136, 0.1); /* Subtle inner glow */
         }
 
+        /* Card Hover Effect: More dramatic lift and glow */
         .exam-card:hover { 
-            transform: translateY(-10px) rotateX(5deg) scale(1.02);
+            transform: translateY(-8px) scale(1.01); 
             box-shadow: 
-                0 20px 40px rgba(0, 217, 255, 0.3),
-                0 40px 80px rgba(255, 0, 110, 0.2),
-                inset 0 0 30px rgba(0, 217, 255, 0.1);
-            border-image: linear-gradient(135deg, 
-                var(--neon-blue), 
-                var(--neon-pink)) 1;
-        }
-
-        .exam-card:hover::after {
-            transform: translateX(100%);
+                0 15px 40px rgba(0, 212, 255, 0.5), 
+                0 0 50px rgba(0, 255, 136, 0.3),
+                inset 0 0 20px rgba(255, 0, 128, 0.2);
+            border-color: #00FF88;
         }
 
         .exam-name { 
-            font-size: 1.8rem; 
-            font-weight: 700; 
+            font-size: 1.6rem; 
+            font-weight: 600; 
             margin-bottom: 1.5rem; 
-            background: linear-gradient(135deg, #fff 0%, #00D9FF 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
+            color: #00D4FF; 
             text-transform: uppercase;
-            letter-spacing: 2px;
-            filter: drop-shadow(0 2px 10px rgba(0, 217, 255, 0.5));
+            letter-spacing: 1px;
         }
 
-        .countdown-wrapper {
-            display: flex;
-            justify-content: center;
-            gap: 1.5rem;
-            margin-bottom: 2rem;
-        }
-        .countdown-item {
-            display: flex;
-            flex-direction: column;
-        }
-        .countdown-number { 
-            font-family: 'Orbitron', monospace;
-            font-size: 3rem; 
-            font-weight: 900; 
-            color: var(--neon-blue);
-            text-shadow: 0 0 20px var(--neon-blue);
+        /* Countdown Numbers: Brightest element */
+        .countdown { 
+            font-size: 4.5rem; 
+            font-weight: 700; 
+            text-shadow: 
+                0 0 25px rgba(255, 0, 128, 1), 
+                0 0 50px rgba(255, 0, 128, 0.7);
+            margin-bottom: 0.75rem; 
             line-height: 1;
+            color: #fff;
         }
         .countdown-label { 
-            font-size: 0.8rem; 
-            color: rgba(255, 255, 255, 0.7);
+            font-size: 1.1rem; 
+            color: rgba(255, 255, 255, 0.8); 
             text-transform: uppercase;
-            letter-spacing: 2px;
-            font-weight: 300;
+            letter-spacing: 1px;
         }
-
         .exam-date { 
             font-size: 0.95rem; 
-            color: rgba(0, 217, 255, 0.7);
+            color: rgba(0, 212, 255, 0.6); 
             margin-top: 1.5rem;
-            padding: 0.5rem 1rem;
-            background: rgba(0, 217, 255, 0.1);
-            border-radius: 20px;
-            display: inline-block;
-            border: 1px solid rgba(0, 217, 255, 0.3);
+            border-top: 1px dashed rgba(0, 212, 255, 0.1);
+            padding-top: 1rem;
         }
 
-        /* Enhanced delete button */
+        /* Delete Button (Danger Neon) */
         .delete-btn { 
             position: absolute; 
-            top: 1.5rem; 
-            right: 1.5rem; 
-            width: 36px; 
-            height: 36px; 
-            background: linear-gradient(135deg, 
-                rgba(255, 0, 110, 0.2) 0%, 
-                rgba(255, 0, 0, 0.2) 100%);
-            border: 2px solid rgba(255, 0, 110, 0.5);
-            border-radius: 12px; 
+            top: 1.2rem; 
+            right: 1.2rem; 
+            width: 35px; 
+            height: 35px; 
+            background: rgba(255, 0, 128, 0.25); 
+            border: 1px solid rgba(255, 0, 128, 0.6); 
+            border-radius: 10px; 
             display: flex; 
             align-items: center; 
             justify-content: center; 
             cursor: pointer; 
             transition: all 0.3s ease; 
-            opacity: 0;
-            transform: scale(0.8);
-        }
-
-        .exam-card:hover .delete-btn { 
-            opacity: 1;
-            transform: scale(1);
+            opacity: 0; 
+            z-index: 10;
+            box-shadow: 0 0 10px rgba(255, 0, 128, 0.5);
         }
-
+        .exam-card:hover .delete-btn { opacity: 1; }
         .delete-btn:hover { 
-            background: linear-gradient(135deg, 
-                rgba(255, 0, 110, 0.4) 0%, 
-                rgba(255, 0, 0, 0.4) 100%);
-            transform: scale(1.2) rotate(90deg);
-            box-shadow: 0 0 20px rgba(255, 0, 110, 0.6);
+            background: rgba(255, 0, 128, 0.6); 
+            box-shadow: 0 0 25px rgba(255, 0, 128, 1);
+            transform: scale(1.15); 
         }
+        .delete-btn svg { width: 18px; height: 18px; fill: #fff; pointer-events: none; }
 
-        /* Enhanced modal */
+        /* --- MODAL STYLES (Holographic Look) --- */
         .modal { 
             display: none; 
             position: fixed; 
@@ -427,287 +194,164 @@
             left: 0; 
             width: 100%; 
             height: 100%; 
-            background: rgba(0, 0, 0, 0.9);
-            backdrop-filter: blur(10px);
+            background: rgba(0, 0, 0, 0.75); 
             z-index: 1000; 
             align-items: center; 
             justify-content: center; 
             padding: 2rem;
-            animation: modalFadeIn 0.3s ease;
-        }
-
-        @keyframes modalFadeIn {
-            from { opacity: 0; }
-            to { opacity: 1; }
+            animation: fadeIn 0.3s ease-out;
         }
+        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
 
-        .modal.active { 
-            display: flex; 
+        .modal.active {
+            display: flex;
         }
 
         .modal-content { 
-            background: linear-gradient(135deg, 
-                rgba(20, 20, 30, 0.98) 0%, 
-                rgba(30, 20, 40, 0.98) 100%);
-            backdrop-filter: blur(40px) saturate(150%);
-            border: 2px solid transparent;
-            background-origin: border-box;
-            background-clip: padding-box, border-box;
-            border-image: linear-gradient(135deg, var(--neon-blue), var(--neon-pink)) 1;
+            background: rgba(15, 15, 20, 0.97); 
+            backdrop-filter: blur(30px); 
+            border: 2px solid;
+            border-image: linear-gradient(45deg, #00D4FF, #FF0080, #00FF88) 1;
             border-radius: 30px; 
-            padding: 3rem; 
+            padding: 2.5rem; 
             width: 100%; 
-            max-width: 500px; 
-            box-shadow: 
-                0 30px 60px rgba(0, 0, 0, 0.5),
-                0 0 100px rgba(0, 217, 255, 0.2),
-                inset 0 0 30px rgba(0, 217, 255, 0.05);
-            animation: modalSlideIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-            position: relative;
-            overflow: hidden;
-        }
-
-        .modal-content::before {
-            content: '';
-            position: absolute;
-            top: -50%;
-            left: -50%;
-            width: 200%;
-            height: 200%;
-            background: radial-gradient(circle, 
-                rgba(0, 217, 255, 0.1) 0%, 
-                transparent 40%);
-            animation: modalGlow 4s ease-in-out infinite;
-        }
-
-        @keyframes modalSlideIn {
-            from { transform: translateY(-50px) scale(0.9); opacity: 0; }
-            to { transform: translateY(0) scale(1); opacity: 1; }
-        }
-
-        @keyframes modalGlow {
-            0%, 100% { transform: rotate(0deg); }
-            50% { transform: rotate(180deg); }
+            max-width: 450px; 
+            box-shadow: 0 10px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 212, 255, 0.2);
+            animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
         }
+        @keyframes popIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
 
         .modal-header { 
             display: flex; 
             justify-content: space-between; 
             align-items: center; 
-            margin-bottom: 2.5rem;
-            position: relative;
-            z-index: 1;
+            margin-bottom: 2rem;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            padding-bottom: 1rem;
         }
-
         .modal-title { 
-            font-size: 2rem; 
-            font-weight: 700;
-            background: linear-gradient(135deg, var(--neon-blue) 0%, var(--neon-pink) 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            text-transform: uppercase;
-            letter-spacing: 2px;
+            font-size: 1.75rem; 
+            font-weight: 600; 
+            color: #00D4FF;
+            text-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
         }
-
         .close-btn { 
-            width: 40px; 
-            height: 40px; 
-            background: rgba(255, 0, 110, 0.1);
-            border: 2px solid rgba(255, 0, 110, 0.3);
-            border-radius: 12px;
+            width: 35px; 
+            height: 35px; 
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 0, 128, 0.5);
+            border-radius: 50%;
             cursor: pointer; 
+            transition: all 0.3s ease; 
             display: flex; 
             align-items: center; 
             justify-content: center; 
-            transition: all 0.3s ease;
         }
-
         .close-btn:hover { 
-            transform: rotate(90deg) scale(1.1);
-            background: rgba(255, 0, 110, 0.2);
-            box-shadow: 0 0 20px rgba(255, 0, 110, 0.5);
+            transform: rotate(180deg); 
+            background: rgba(255, 0, 128, 0.3);
+            box-shadow: 0 0 15px rgba(255, 0, 128, 0.8);
         }
+        .close-btn svg { fill: #FF0080; pointer-events: none;}
 
-        /* Enhanced form */
-        .form-group {
+        /* --- EMPTY STATE --- */
+        .empty-state { 
+            text-align: center; 
+            padding: 6rem 2rem; 
+            border: 2px dashed rgba(0, 212, 255, 0.2);
+            border-radius: 20px;
+            margin: 2rem;
+        }
+        .empty-state p { 
+            font-size: 1.4rem; 
+            color: rgba(0, 212, 255, 0.6); 
             margin-bottom: 2rem;
-            position: relative;
-            z-index: 1;
+            text-shadow: 0 0 5px rgba(0, 212, 255, 0.3);
         }
-
-        .form-group label {
-            display: block;
-            margin-bottom: 0.75rem;
-            font-size: 0.95rem;
-            color: var(--neon-blue);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            font-weight: 500;
+        #openModalForEmpty {
+             padding: 0.9rem 2rem;
+             font-size: 1rem;
         }
 
-        .form-group input {
-            width: 100%;
-            padding: 1.2rem;
-            background: rgba(0, 217, 255, 0.05);
-            border: 2px solid rgba(0, 217, 255, 0.2);
-            border-radius: 12px;
-            color: #fff;
-            font-size: 1.1rem;
-            transition: all 0.3s ease;
-            font-family: 'Space Grotesk', sans-serif;
+        /* --- FORM STYLING --- */
+        .form-group { margin-bottom: 1.25rem; }
+        .form-group label { display: block; margin-bottom: 0.5rem; font-size: 0.9rem; font-weight: 400; color: #ddd; }
+        
+        input[type="text"], input[type="date"] {
+            width: 100%; 
+            padding: 0.85rem; 
+            border-radius: 8px; 
+            border: 1px solid rgba(255, 255, 255, 0.15); 
+            background: rgba(0, 0, 0, 0.6); 
+            color: #fff; 
+            font-family: inherit; 
+            font-size: 1rem;
+            transition: border-color 0.3s, box-shadow 0.3s;
         }
-
-        .form-group input:focus {
+        input[type="text"]:focus, input[type="date"]:focus {
             outline: none;
-            border-color: var(--neon-blue);
-            background: rgba(0, 217, 255, 0.1);
-            box-shadow: 
-                0 0 20px rgba(0, 217, 255, 0.3),
-                inset 0 0 10px rgba(0, 217, 255, 0.1);
+            border-color: #FF0080;
+            box-shadow: 0 0 15px rgba(255, 0, 128, 0.6);
         }
 
-        .form-group input::placeholder {
-            color: rgba(255, 255, 255, 0.3);
-        }
-
-        /* Enhanced add button */
         .add-btn { 
             width: 100%; 
-            padding: 1.5rem; 
-            background: linear-gradient(135deg, var(--neon-blue) 0%, var(--neon-pink) 100%);
+            padding: 1rem; 
+            background: linear-gradient(135deg, #00D4FF 0%, #FF0080 100%); 
             border: none; 
-            border-radius: 16px; 
+            border-radius: 12px; 
             color: #fff; 
-            font-size: 1.2rem; 
+            font-size: 1.1rem; 
             font-weight: 700; 
             cursor: pointer; 
-            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            position: relative;
-            overflow: hidden;
-            z-index: 1;
-        }
-
-        .add-btn::before {
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            width: 0;
-            height: 0;
-            background: radial-gradient(circle, 
-                rgba(255, 255, 255, 0.3) 0%, 
-                transparent 70%);
-            transform: translate(-50%, -50%);
-            transition: width 0.6s, height 0.6s;
+            transition: all 0.3s ease; 
+            box-shadow: 0 5px 20px rgba(0, 212, 255, 0.4);
+            letter-spacing: 0.5px;
         }
-
         .add-btn:hover { 
-            transform: translateY(-3px) scale(1.02);
-            box-shadow: 
-                0 10px 30px rgba(0, 217, 255, 0.5),
-                0 20px 60px rgba(255, 0, 110, 0.3);
-        }
-
-        .add-btn:hover::before {
-            width: 300px;
-            height: 300px;
+            transform: translateY(-3px); 
+            box-shadow: 0 8px 30px rgba(255, 0, 128, 0.8), 0 0 15px #00D4FF;
         }
 
-        /* Enhanced empty state */
-        .empty-state { 
-            text-align: center; 
-            padding: 6rem 2rem;
-            position: relative;
-        }
-
-        .empty-state::before {
-            content: '📚';
-            font-size: 6rem;
-            display: block;
-            margin-bottom: 2rem;
-            animation: bounce 2s ease-in-out infinite;
-        }
-
-        @keyframes bounce {
-            0%, 100% { transform: translateY(0); }
-            50% { transform: translateY(-20px); }
-        }
-
-        .empty-state p { 
-            font-size: 1.4rem; 
-            background: linear-gradient(135deg, 
-                rgba(255, 255, 255, 0.8) 0%, 
-                rgba(0, 217, 255, 0.8) 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 2rem;
-            font-weight: 500;
-        }
-        
-        /* Responsive */
         @media (max-width: 768px) {
-            h1 { font-size: 2.5rem; }
-            .countdown-number { font-size: 2rem; }
-            .exams-grid { grid-template-columns: 1fr; }
-            .header { flex-direction: column; gap: 1rem; text-align: center;}
-            .modal-content { padding: 2rem; }
+            h1 { font-size: 2rem; }
+            .header { flex-direction: column; gap: 1rem; text-align: center; }
         }
     </style>
 </head>
 <body>
-    <svg width="0" height="0">
-        <defs>
-            <linearGradient id="iconGradient" x1="0%" y1="0%" x2="100%" y2="100%">
-                <stop offset="0%" style="stop-color:#00D9FF;stop-opacity:1" />
-                <stop offset="100%" style="stop-color:#FF006E;stop-opacity:1" />
-            </linearGradient>
-        </defs>
-    </svg>
-    
     <div class="particles" id="particles"></div>
-    
     <div class="container">
         <div class="header">
-            <h1>Exam Countdown</h1>
+            <h1>NEON CHRONOS</h1>
             <div class="settings-btn" id="openModalBtn">
-                <svg viewBox="0 0 24 24">
-                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/>
-                </svg>
+                <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></svg>
             </div>
         </div>
-        
         <div class="exams-grid" id="examsGrid"></div>
-        
         <div class="empty-state" id="emptyState" style="display: none;">
-            <p>No exams scheduled yet. Click the + button to add your first exam!</p>
+            <p>SYSTEM OFFLINE: Input target dates below.</p>
+            <button id="openModalForEmpty" class="add-btn" style="max-width: 300px; margin: 1rem auto;">INITIATE NEW TARGET</button>
         </div>
     </div>
-    
     <div class="modal" id="modal">
         <div class="modal-content">
             <div class="modal-header">
-                <h2 class="modal-title">Add New Exam</h2>
+                <h2 class="modal-title">Add New Target</h2>
                 <button class="close-btn" id="closeModalBtn">
-                    <svg width="24" height="24" viewBox="0 0 24 24" fill="#FF006E">
-                        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
-                    </svg>
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="#fff"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
                 </button>
             </div>
-            
             <form id="addExamForm">
                 <div class="form-group">
-                    <label for="examName">Exam Name</label>
-                    <input type="text" id="examName" required placeholder="e.g., Physics Final">
+                    <label for="examName">Designation</label>
+                    <input type="text" id="examName" required placeholder="e.g., Quantum Dynamics Final">
                 </div>
                 <div class="form-group">
-                    <label for="examDate">Exam Date & Time</label>
-                    <input type="datetime-local" id="examDate" required>
+                    <label for="examDate">Execute Date</label>
+                    <input type="date" id="examDate" required>
                 </div>
-                <button type="submit" class="add-btn">Add Exam</button>
+                <button type="submit" class="add-btn">Activate Countdown</button>
             </form>
         </div>
     </div>
@@ -728,16 +372,17 @@
             appId: "1:241970333280:web:704e8930bd591c138d6505"
         };
 
-        // Initialize Firebase and Database
+        // Initialize Firebase
         const app = initializeApp(firebaseConfig);
         const database = getDatabase(app);
         const examsRef = ref(database, 'exams');
 
-        // DOM Element References
+        // DOM Elements
         const elements = {
+            modal: document.getElementById('modal'),
             openModalBtn: document.getElementById('openModalBtn'),
+            openModalForEmpty: document.getElementById('openModalForEmpty'),
             closeModalBtn: document.getElementById('closeModalBtn'),
-            modal: document.getElementById('modal'),
             addExamForm: document.getElementById('addExamForm'),
             examNameInput: document.getElementById('examName'),
             examDateInput: document.getElementById('examDate'),
@@ -745,175 +390,121 @@
             emptyState: document.getElementById('emptyState'),
             particlesContainer: document.getElementById('particles')
         };
-        
-        let exams = []; // This will hold our exams from Firebase
-
-        // --- Enhanced Particle System ---
-        function createParticles() {
-            if (elements.particlesContainer.children.length > 0) return;
-            // Create orbs
-            for (let i = 0; i < 15; i++) {
-                const particle = document.createElement('div');
-                particle.classList.add('particle', 'orb');
-                particle.style.left = Math.random() * 100 + '%';
-                particle.style.animationDelay = Math.random() * 20 + 's';
-                particle.style.animationDuration = (15 + Math.random() * 10) + 's';
-                
-                const colors = ['#00D9FF', '#FF006E', '#8B39FF', '#39FF14'];
-                const color = colors[Math.floor(Math.random() * colors.length)];
-                particle.style.background = `radial-gradient(circle, ${color} 0%, transparent 70%)`;
-                particle.style.boxShadow = `0 0 10px ${color}, 0 0 20px ${color}`;
-                
-                elements.particlesContainer.appendChild(particle);
-            }
-            
-            // Create stars
-            for (let i = 0; i < 30; i++) {
-                const star = document.createElement('div');
-                star.classList.add('particle', 'star');
-                star.style.left = Math.random() * 100 + '%';
-                star.style.top = Math.random() * 100 + '%';
-                star.style.animationDelay = Math.random() * 3 + 's';
-                elements.particlesContainer.appendChild(star);
-            }
-        }
 
-        // --- Modal & Form Logic ---
+        // --- Core Functions ---
         const openModal = () => elements.modal.classList.add('active');
-        const closeModal = () => {
-            elements.modal.classList.remove('active');
-            elements.addExamForm.reset();
-        };
+        const closeModal = () => elements.modal.classList.remove('active');
 
         const addExam = (event) => {
             event.preventDefault();
-            const examIcons = ['📚', '📖', '✏️', '📝', '🎓', '📊', '🧮', '🔬', '💻', '🎨'];
+            // *** FIX: Save the new date as a number (timestamp) for future consistency ***
             const newExam = {
                 name: elements.examNameInput.value,
-                date: new Date(elements.examDateInput.value).getTime(),
-                icon: examIcons[Math.floor(Math.random() * examIcons.length)]
+                date: new Date(elements.examDateInput.value).getTime()
             };
-            push(examsRef, newExam).catch(err => console.error("Failed to add exam:", err));
+            push(examsRef, newExam);
             closeModal();
         };
 
-        const deleteExam = (id) => {
-            if (!id) return;
-            remove(ref(database, `exams/${id}`)).catch(err => console.error("Failed to delete exam:", err));
-        };
+        const deleteExam = (id) => remove(ref(database, `exams/${id}`));
 
         // --- Rendering Logic ---
-        function getCountdown(targetDate) {
-            const now = new Date().getTime();
-            const distance = targetDate - now;
-            
-            if (distance < 0) {
-                return { days: 0, hours: 0, minutes: 0, seconds: 0, isPast: true };
-            }
-            
-            return {
-                days: Math.floor(distance / (1000 * 60 * 60 * 24)),
-                hours: Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
-                minutes: Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)),
-                seconds: Math.floor((distance % (1000 * 60)) / 1000),
-                isPast: false
-            };
-        }
 
-        function renderExams() {
-            if (exams.length === 0) {
-                elements.examsGrid.innerHTML = '';
-                elements.emptyState.style.display = 'block';
-                return;
-            }
+        // *** FIX: This function now handles both old string dates and new number dates ***
+        const calculateDaysUntil = (examDate) => {
+            const now = new Date();
+            now.setHours(0, 0, 0, 0); // Set to midnight for accurate day comparison
+
+            // The new Date() constructor can handle both numbers (timestamps) and "YYYY-MM-DD" strings.
+            const targetDate = new Date(examDate);
+            targetDate.setHours(0, 0, 0, 0);
             
-            elements.emptyState.style.display = 'none';
-            // Sort by date so the soonest is first
-            const sortedExams = [...exams].sort((a, b) => a.date - b.date);
+            const diff = targetDate.getTime() - now.getTime();
+            return Math.ceil(diff / (1000 * 60 * 60 * 24));
+        };
+
+        const renderExams = (exams) => {
+            const hasExams = exams && exams.length > 0;
+            elements.emptyState.style.display = hasExams ? 'none' : 'block';
+            elements.examsGrid.style.display = hasExams ? 'grid' : 'none';
+
+            if (!hasExams) return;
 
-            elements.examsGrid.innerHTML = sortedExams.map(exam => {
-                const countdown = getCountdown(exam.date);
-                const examDate = new Date(exam.date);
+            exams.sort((a, b) => a.date - b.date);
+
+            elements.examsGrid.innerHTML = exams.map(exam => {
+                const daysUntil = calculateDaysUntil(exam.date);
+                const color = daysUntil <= 3 ? '#FF0080' : (daysUntil <= 7 ? '#00FF88' : '#00D4FF');
                 
-                let content;
-                if(countdown.isPast){
-                    content = `<div style="font-size: 2rem; color: var(--neon-pink); font-family: 'Orbitron', monospace;">EXAM COMPLETE</div>`;
+                // Create a clean date object that works for both old and new data
+                const dateObject = new Date(exam.date);
+
+                // Handle completed exams
+                let countdownContent;
+                if (daysUntil < 0) {
+                    countdownContent = `
+                        <div class="countdown" style="font-size: 1.8rem; color: #aaa;">COMPLETE</div>
+                        <div class="countdown-label">on</div>
+                    `;
                 } else {
-                    content = `
-                        <div class="countdown-wrapper">
-                            <div class="countdown-item">
-                                <div class="countdown-number">${String(countdown.days).padStart(2, '0')}</div>
-                                <div class="countdown-label">Days</div>
-                            </div>
-                            <div class="countdown-item">
-                                <div class="countdown-number">${String(countdown.hours).padStart(2, '0')}</div>
-                                <div class="countdown-label">Hours</div>
-                            </div>
-                            <div class="countdown-item">
-                                <div class="countdown-number">${String(countdown.minutes).padStart(2, '0')}</div>
-                                <div class="countdown-label">Minutes</div>
-                            </div>
-                            <div class="countdown-item">
-                                <div class="countdown-number">${String(countdown.seconds).padStart(2, '0')}</div>
-                                <div class="countdown-label">Seconds</div>
-                            </div>
-                        </div>`;
+                     countdownContent = `
+                        <div class="countdown" style="color: ${color};">${daysUntil}</div>
+                        <div class="countdown-label">days remaining</div>
+                    `;
                 }
-
+                
                 return `
-                    <div class="exam-card" data-id="${exam.id}">
+                    <div class="exam-card">
                         <div class="delete-btn" data-delete-id="${exam.id}">
-                            <svg width="20" height="20" viewBox="0 0 24 24" fill="#fff" style="pointer-events: none;">
-                                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
-                            </svg>
+                            <svg viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
                         </div>
-                        <div class="exam-name">${exam.icon} ${exam.name}</div>
-                        ${content}
-                        <div class="exam-date">
-                            📅 ${examDate.toLocaleDateString('en-US', { 
-                                weekday: 'long', month: 'long', day: 'numeric',
-                                hour: '2-digit', minute: '2-digit'
-                            })}
-                        </div>
-                    </div>
-                `;
+                        <h3 class="exam-name">${exam.name || 'Unnamed Target'}</h3>
+                        ${countdownContent}
+                        <div class="exam-date">${dateObject.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}</div>
+                    </div>`;
             }).join('');
-        }
+        };
         
-        // --- Event Delegation for Delete Buttons ---
-        elements.examsGrid.addEventListener('click', (event) => {
-            if(event.target.matches('.delete-btn')) {
-                const idToDelete = event.target.dataset.deleteId;
-                deleteExam(idToDelete);
+        // --- Particle Effect ---
+        const createParticles = () => {
+            let particleHtml = '';
+            for (let i = 0; i < 50; i++) {
+                const style = `
+                    --x: ${Math.random() * 100}vw;
+                    animation-delay: ${Math.random() * 20}s;
+                    animation-duration: ${15 + Math.random() * 10}s;
+                `;
+                particleHtml += `<div class="particle" style="${style}"></div>`;
             }
-        });
-
-
-        // --- App Initialization ---
+            elements.particlesContainer.innerHTML = particleHtml;
+        };
+        
+        // --- App Initialization & Event Listeners ---
         createParticles();
-        elements.examDateInput.min = new Date().toISOString().slice(0, 16);
+        elements.examDateInput.min = new Date().toISOString().split('T')[0];
 
-        // Event Listeners for Modal
+        // Modal Listeners
         elements.openModalBtn.addEventListener('click', openModal);
+        elements.openModalForEmpty.addEventListener('click', openModal);
         elements.closeModalBtn.addEventListener('click', closeModal);
         elements.addExamForm.addEventListener('submit', addExam);
         window.addEventListener('click', e => { if (e.target === elements.modal) closeModal(); });
+        
+        // Delete button listener (using event delegation)
+        elements.examsGrid.addEventListener('click', (event) => {
+            const deleteBtn = event.target.closest('.delete-btn');
+            if (deleteBtn) {
+                deleteExam(deleteBtn.dataset.deleteId);
+            }
+        });
 
         // Firebase real-time data listener
         onValue(examsRef, (snapshot) => {
             const data = snapshot.val();
-            // Convert Firebase object to an array and store it
-            exams = data ? Object.entries(data).map(([id, value]) => ({ id, ...value })) : [];
-            // Do an initial render as soon as data is received
-            renderExams();
-        }, (error) => {
-            console.error("Firebase read failed:", error);
-            alert("Could not connect to the database. Check console for errors and verify database rules.");
+            const examList = data ? Object.entries(data).map(([id, value]) => ({ id, ...value })) : [];
+            renderExams(examList);
         });
 
-        // Set an interval to update the countdowns every second
-        // This makes the timers tick without re-fetching from Firebase
-        setInterval(renderExams, 1000);
     </script>
 </body>
 </html>