Update index.html

index.html

@@ -4,50 +4,73 @@
     <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=Inter:wght@300;400;600;700;800&family=Orbitron:wght@400;600;700;900&display=swap" rel="stylesheet">
+    <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">
     <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: 'Inter', sans-serif; 
-            background: #000000;
+            font-family: 'Space Grotesk', sans-serif; 
+            background: var(--dark-bg);
             min-height: 100vh; 
             color: #fff; 
             overflow-x: hidden; 
-            position: relative; 
+            position: relative;
         }
 
-        /* Animated Background */
-        .animated-bg {
+        /* 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;
-            background: radial-gradient(ellipse at top, #1a0a2e 0%, #0a0a0f 50%, #000000 100%);
         }
 
-        .animated-bg::before {
+        @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: absolute;
-            width: 200%;
-            height: 200%;
-            top: -50%;
-            left: -50%;
-            background: 
-                radial-gradient(circle at 20% 50%, rgba(0, 212, 255, 0.15) 0%, transparent 50%),
-                radial-gradient(circle at 80% 80%, rgba(255, 0, 128, 0.15) 0%, transparent 50%),
-                radial-gradient(circle at 40% 20%, rgba(0, 255, 136, 0.1) 0%, transparent 50%);
-            animation: bgRotate 20s linear infinite;
+            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 bgRotate {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
+        @keyframes gridMove {
+            0% { transform: translate(0, 0); }
+            100% { transform: translate(50px, 50px); }
         }
 
-        /* Enhanced Particles */
+        /* Enhanced particles */
         .particles { 
             position: fixed; 
             top: 0; 
@@ -56,114 +79,134 @@
             height: 100%; 
             overflow: hidden; 
             z-index: 1; 
-            pointer-events: none;
         }
 
         .particle { 
             position: absolute; 
             border-radius: 50%; 
-            animation: float linear infinite;
-            filter: blur(1px);
-        }
-
-        .particle:nth-child(3n) {
-            background: radial-gradient(circle, rgba(0, 212, 255, 0.8) 0%, transparent 70%);
-            box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
+            pointer-events: none;
         }
 
-        .particle:nth-child(3n+1) {
-            background: radial-gradient(circle, rgba(255, 0, 128, 0.8) 0%, transparent 70%);
-            box-shadow: 0 0 10px rgba(255, 0, 128, 0.5);
+        .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:nth-child(3n+2) {
-            background: radial-gradient(circle, rgba(0, 255, 136, 0.8) 0%, transparent 70%);
-            box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
+        .particle.star {
+            width: 2px;
+            height: 2px;
+            background: white;
+            box-shadow: 0 0 6px white;
+            animation: twinkle 3s infinite;
         }
 
-        @keyframes float { 
+        @keyframes floatOrb { 
             from { 
                 transform: translateY(100vh) translateX(0) scale(0); 
                 opacity: 0; 
             } 
             10% { 
                 opacity: 1; 
-                transform: translateY(90vh) translateX(20px) scale(1);
+                transform: translateY(90vh) translateX(10px) scale(1);
             } 
             90% { 
                 opacity: 1; 
+                transform: translateY(10vh) translateX(-10px) scale(1);
             } 
             to { 
-                transform: translateY(-10vh) translateX(100px) scale(0); 
+                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: 3rem 2rem; 
+            padding: 2rem; 
             position: relative; 
             z-index: 2; 
         }
 
-        /* Enhanced Header */
+        /* Enhanced header */
         .header { 
             display: flex; 
             justify-content: space-between; 
             align-items: center; 
-            margin-bottom: 4rem;
-            padding: 2rem;
-            background: rgba(255, 255, 255, 0.03);
-            backdrop-filter: blur(20px);
-            border-radius: 25px;
-            border: 1px solid rgba(255, 255, 255, 0.1);
+            margin-bottom: 4rem; 
+            padding: 2rem 0;
             position: relative;
-            overflow: hidden;
         }
 
-        .header::before {
+        .header::after {
             content: '';
             position: absolute;
-            top: 0;
-            left: -100%;
+            bottom: 0;
+            left: 50%;
+            transform: translateX(-50%);
             width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
-            animation: shimmer 3s infinite;
+            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 shimmer {
-            0% { left: -100%; }
-            100% { left: 100%; }
+        @keyframes lineGlow {
+            0%, 100% { opacity: 0.3; }
+            50% { opacity: 1; }
         }
 
         h1 { 
-            font-family: 'Orbitron', sans-serif;
+            font-family: 'Orbitron', monospace;
             font-size: 3.5rem; 
             font-weight: 900; 
-            background: linear-gradient(135deg, #00D4FF 0%, #FF0080 25%, #7928FF 50%, #00FF88 75%, #00D4FF 100%);
-            background-size: 300% 100%;
+            text-transform: uppercase;
+            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%;
             -webkit-background-clip: text; 
             -webkit-text-fill-color: transparent; 
             background-clip: text;
-            animation: gradientShift 5s ease infinite;
-            filter: drop-shadow(0 0 30px rgba(0, 212, 255, 0.5));
-            position: relative;
+            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 gradientShift {
-            0%, 100% { background-position: 0% 50%; }
+        @keyframes gradientFlow {
+            0% { background-position: 0% 50%; }
             50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
         }
 
+        /* Enhanced settings button */
         .settings-btn { 
             width: 60px; 
             height: 60px; 
-            background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(255, 0, 128, 0.2) 100%);
-            backdrop-filter: blur(10px); 
-            border: 2px solid rgba(0, 212, 255, 0.5);
-            border-radius: 18px; 
+            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; 
             display: flex; 
             align-items: center; 
             justify-content: center; 
@@ -178,247 +221,187 @@
             position: absolute;
             top: 50%;
             left: 50%;
-            width: 0;
-            height: 0;
-            background: radial-gradient(circle, rgba(0, 212, 255, 0.4) 0%, transparent 70%);
-            border-radius: 50%;
-            transform: translate(-50%, -50%);
-            transition: width 0.6s, height 0.6s;
+            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;
         }
 
-        .settings-btn:hover::before {
-            width: 200px;
-            height: 200px;
+        .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 { 
-            background: linear-gradient(135deg, rgba(0, 212, 255, 0.4) 0%, rgba(255, 0, 128, 0.4) 100%);
-            border-color: #00D4FF; 
-            box-shadow: 0 0 40px rgba(0, 212, 255, 0.8), 0 0 80px rgba(255, 0, 128, 0.4);
-            transform: scale(1.15) rotate(90deg); 
+        .settings-btn:hover::before {
+            transform: translate(-50%, -50%) scale(2);
         }
 
         .settings-btn svg { 
             width: 28px; 
             height: 28px; 
-            fill: #00D4FF;
-            filter: drop-shadow(0 0 5px rgba(0, 212, 255, 0.8));
-            position: relative;
-            z-index: 1;
+            fill: url(#iconGradient);
+            filter: drop-shadow(0 0 10px var(--neon-blue));
+            transition: transform 0.4s ease;
+        }
+
+        .settings-btn:hover svg {
+            transform: rotate(-90deg);
         }
 
-        /* Enhanced Grid */
+        /* Enhanced exam grid */
         .exams-grid { 
             display: grid; 
             grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); 
-            gap: 2.5rem; 
+            gap: 2.5rem;
+            padding: 2rem 0;
         }
 
-        /* Enhanced Exam Card */
+        /* Ultra enhanced exam cards */
         .exam-card { 
-            background: rgba(255, 255, 255, 0.03);
-            backdrop-filter: blur(30px); 
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            border-radius: 30px; 
+            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; 
             padding: 2.5rem; 
             text-align: center; 
             transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
             position: relative; 
             overflow: hidden;
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+            transform-style: preserve-3d;
+            perspective: 1000px;
         }
 
         .exam-card::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(255, 0, 128, 0.1) 100%);
-            opacity: 0;
-            transition: opacity 0.5s;
-        }
-
-        .exam-card:hover::before {
-            opacity: 1;
-        }
-
-        .exam-card::after {
             content: '';
             position: absolute;
             top: -50%;
             left: -50%;
             width: 200%;
             height: 200%;
-            background: conic-gradient(
-                transparent,
-                rgba(0, 212, 255, 0.3),
-                transparent 30%
-            );
-            animation: rotate 4s linear infinite;
-            opacity: 0;
-        }
-
-        .exam-card:hover::after {
-            opacity: 1;
+            background: radial-gradient(circle, 
+                rgba(0, 217, 255, 0.1) 0%, 
+                transparent 40%);
+            animation: cardPulse 4s ease-in-out infinite;
+            pointer-events: none;
         }
 
-        @keyframes rotate {
-            100% { transform: rotate(360deg); }
+        .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;
         }
 
-        .exam-card-inner {
-            position: relative;
-            z-index: 1;
-            background: rgba(10, 10, 15, 0.8);
-            border-radius: 25px;
-            padding: 2rem;
+        @keyframes cardPulse {
+            0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.5; }
+            50% { transform: scale(1.2) rotate(180deg); opacity: 0.8; }
         }
 
         .exam-card:hover { 
-            transform: translateY(-10px) scale(1.02);
-            border-color: rgba(0, 212, 255, 0.5);
-            box-shadow: 
-                0 20px 60px rgba(0, 212, 255, 0.4),
-                0 0 100px rgba(255, 0, 128, 0.2),
-                inset 0 0 50px rgba(0, 212, 255, 0.1);
-        }
-
-        .exam-card.urgent {
-            border-color: rgba(255, 0, 128, 0.5);
-        }
-
-        .exam-card.urgent:hover {
+            transform: translateY(-10px) rotateX(5deg) scale(1.02);
             box-shadow: 
-                0 20px 60px rgba(255, 0, 128, 0.4),
-                0 0 100px rgba(255, 0, 128, 0.3);
+                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-icon {
-            width: 80px;
-            height: 80px;
-            margin: 0 auto 1.5rem;
-            background: linear-gradient(135deg, #00D4FF 0%, #FF0080 100%);
-            border-radius: 20px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 2.5rem;
-            animation: pulse 2s ease-in-out infinite;
-            box-shadow: 0 10px 30px rgba(0, 212, 255, 0.4);
-        }
-
-        @keyframes pulse {
-            0%, 100% { transform: scale(1); }
-            50% { transform: scale(1.05); }
+        .exam-card:hover::after {
+            transform: translateX(100%);
         }
 
         .exam-name { 
-            font-family: 'Orbitron', sans-serif;
             font-size: 1.8rem; 
             font-weight: 700; 
             margin-bottom: 1.5rem; 
-            color: #fff;
-            text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
-            letter-spacing: 1px;
-        }
-
-        /* Detailed Countdown */
-        .countdown-wrapper {
-            display: grid;
-            grid-template-columns: repeat(4, 1fr);
-            gap: 1rem;
-            margin: 2rem 0;
-        }
-
-        .countdown-item {
-            background: rgba(255, 255, 255, 0.05);
-            border-radius: 15px;
-            padding: 1rem 0.5rem;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            transition: all 0.3s;
-        }
-
-        .countdown-item:hover {
-            background: rgba(255, 255, 255, 0.08);
-            transform: translateY(-3px);
-        }
-
-        .countdown-number {
-            font-family: 'Orbitron', sans-serif;
-            font-size: 2.5rem;
-            font-weight: 900;
-            background: linear-gradient(135deg, #00D4FF 0%, #00FF88 100%);
+            background: linear-gradient(135deg, #fff 0%, #00D9FF 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
-            text-shadow: 0 0 30px rgba(0, 212, 255, 0.8);
-            line-height: 1;
-            margin-bottom: 0.5rem;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            filter: drop-shadow(0 2px 10px rgba(0, 217, 255, 0.5));
         }
 
-        .exam-card.urgent .countdown-number {
-            background: linear-gradient(135deg, #FF0080 0%, #FF6B35 100%);
+        .countdown { 
+            font-family: 'Orbitron', monospace;
+            font-size: 4rem; 
+            font-weight: 900; 
+            background: linear-gradient(135deg, 
+                var(--neon-blue) 0%, 
+                var(--neon-pink) 50%, 
+                var(--neon-purple) 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
+            text-shadow: 
+                0 0 40px currentColor,
+                0 0 80px currentColor;
+            margin-bottom: 0.5rem;
+            animation: countdownPulse 2s ease-in-out infinite;
+            letter-spacing: 3px;
         }
 
-        .countdown-label { 
-            font-size: 0.75rem; 
-            color: rgba(255, 255, 255, 0.6);
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            font-weight: 600;
-        }
-
-        /* Progress Bar */
-        .progress-container {
-            width: 100%;
-            height: 8px;
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 10px;
-            overflow: hidden;
-            margin: 1.5rem 0;
-            position: relative;
-        }
-
-        .progress-bar {
-            height: 100%;
-            background: linear-gradient(90deg, #00D4FF 0%, #FF0080 50%, #00FF88 100%);
-            background-size: 200% 100%;
-            border-radius: 10px;
-            transition: width 1s ease;
-            animation: progressShimmer 2s linear infinite;
-            box-shadow: 0 0 20px rgba(0, 212, 255, 0.6);
+        @keyframes countdownPulse {
+            0%, 100% { transform: scale(1); filter: brightness(1); }
+            50% { transform: scale(1.05); filter: brightness(1.2); }
         }
 
-        @keyframes progressShimmer {
-            0% { background-position: 0% 50%; }
-            100% { background-position: 200% 50%; }
+        .countdown-label { 
+            font-size: 1.1rem; 
+            color: rgba(255, 255, 255, 0.9);
+            text-transform: uppercase;
+            letter-spacing: 4px;
+            font-weight: 300;
         }
 
         .exam-date { 
-            font-size: 1rem; 
-            color: rgba(255, 255, 255, 0.6);
+            font-size: 0.95rem; 
+            color: rgba(0, 217, 255, 0.7);
             margin-top: 1.5rem;
-            padding: 0.8rem;
-            background: rgba(255, 255, 255, 0.05);
-            border-radius: 10px;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            font-weight: 600;
+            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);
         }
 
+        /* Enhanced delete button */
         .delete-btn { 
             position: absolute; 
             top: 1.5rem; 
             right: 1.5rem; 
-            width: 40px; 
-            height: 40px; 
-            background: rgba(255, 0, 80, 0.2);
-            backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 0, 80, 0.5);
+            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; 
             display: flex; 
             align-items: center; 
@@ -426,26 +409,23 @@
             cursor: pointer; 
             transition: all 0.3s ease; 
             opacity: 0;
-            z-index: 10;
+            transform: scale(0.8);
         }
 
         .exam-card:hover .delete-btn { 
-            opacity: 1; 
+            opacity: 1;
+            transform: scale(1);
         }
 
         .delete-btn:hover { 
-            background: rgba(255, 0, 80, 0.6);
+            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, 80, 0.8);
+            box-shadow: 0 0 20px rgba(255, 0, 110, 0.6);
         }
 
-        .delete-btn svg {
-            width: 20px;
-            height: 20px;
-            fill: #fff;
-        }
-
-        /* Enhanced Modal */
+        /* Enhanced modal */
         .modal { 
             display: none; 
             position: fixed; 
@@ -459,10 +439,10 @@
             align-items: center; 
             justify-content: center; 
             padding: 2rem;
-            animation: fadeIn 0.3s ease;
+            animation: modalFadeIn 0.3s ease;
         }
 
-        @keyframes fadeIn {
+        @keyframes modalFadeIn {
             from { opacity: 0; }
             to { opacity: 1; }
         }
@@ -472,17 +452,22 @@
         }
 
         .modal-content { 
-            background: linear-gradient(135deg, rgba(20, 20, 30, 0.95) 0%, rgba(10, 10, 20, 0.95) 100%);
-            backdrop-filter: blur(30px); 
-            border: 2px solid rgba(0, 212, 255, 0.3);
+            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;
             border-radius: 30px; 
             padding: 3rem; 
             width: 100%; 
             max-width: 500px; 
             box-shadow: 
-                0 30px 60px rgba(0, 0, 0, 0.8),
-                0 0 100px rgba(0, 212, 255, 0.3),
-                inset 0 0 50px rgba(0, 212, 255, 0.05);
+                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;
@@ -495,23 +480,20 @@
             left: -50%;
             width: 200%;
             height: 200%;
-            background: conic-gradient(
-                transparent,
-                rgba(0, 212, 255, 0.1),
-                transparent 30%
-            );
-            animation: rotate 4s linear infinite;
+            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(-100px);
-                opacity: 0;
-            }
-            to {
-                transform: translateY(0);
-                opacity: 1;
-            }
+            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); }
         }
 
         .modal-header { 
@@ -524,20 +506,21 @@
         }
 
         .modal-title { 
-            font-family: 'Orbitron', sans-serif;
             font-size: 2rem; 
             font-weight: 700;
-            background: linear-gradient(135deg, #00D4FF 0%, #FF0080 100%);
+            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;
         }
 
         .close-btn { 
             width: 40px; 
             height: 40px; 
-            background: rgba(255, 0, 80, 0.2);
-            border: 1px solid rgba(255, 0, 80, 0.5);
+            background: rgba(255, 0, 110, 0.1);
+            border: 2px solid rgba(255, 0, 110, 0.3);
             border-radius: 12px;
             cursor: pointer; 
             display: flex; 
@@ -548,170 +531,233 @@
 
         .close-btn:hover { 
             transform: rotate(90deg) scale(1.1);
-            background: rgba(255, 0, 80, 0.4);
-            box-shadow: 0 0 20px rgba(255, 0, 80, 0.6);
-        }
-
-        /* Enhanced Form */
-        #addExamForm {
-            position: relative;
-            z-index: 1;
+            background: rgba(255, 0, 110, 0.2);
+            box-shadow: 0 0 20px rgba(255, 0, 110, 0.5);
         }
 
+        /* Enhanced form */
         .form-group {
             margin-bottom: 2rem;
             position: relative;
+            z-index: 1;
         }
 
         .form-group label {
             display: block;
-            margin-bottom: 0.8rem;
-            font-weight: 600;
-            color: rgba(255, 255, 255, 0.8);
+            margin-bottom: 0.75rem;
             font-size: 0.95rem;
+            color: var(--neon-blue);
             text-transform: uppercase;
-            letter-spacing: 1px;
+            letter-spacing: 2px;
+            font-weight: 500;
         }
 
         .form-group input {
             width: 100%;
-            padding: 1.2rem 1.5rem;
-            background: rgba(255, 255, 255, 0.05);
-            border: 2px solid rgba(255, 255, 255, 0.1);
-            border-radius: 15px;
+            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;
-            font-family: 'Inter', sans-serif;
             transition: all 0.3s ease;
-            backdrop-filter: blur(10px);
+            font-family: 'Space Grotesk', sans-serif;
         }
 
         .form-group input:focus {
             outline: none;
-            border-color: #00D4FF;
-            background: rgba(255, 255, 255, 0.08);
+            border-color: var(--neon-blue);
+            background: rgba(0, 217, 255, 0.1);
             box-shadow: 
-                0 0 0 4px rgba(0, 212, 255, 0.1),
-                0 0 30px rgba(0, 212, 255, 0.3);
-            transform: translateY(-2px);
+                0 0 20px rgba(0, 217, 255, 0.3),
+                inset 0 0 10px rgba(0, 217, 255, 0.1);
         }
 
         .form-group input::placeholder {
             color: rgba(255, 255, 255, 0.3);
         }
 
+        /* Enhanced add button */
         .add-btn { 
             width: 100%; 
-            padding: 1.3rem; 
-            background: linear-gradient(135deg, #00D4FF 0%, #FF0080 50%, #00FF88 100%);
-            background-size: 200% 100%;
+            padding: 1.5rem; 
+            background: linear-gradient(135deg, var(--neon-blue) 0%, var(--neon-pink) 100%);
             border: none; 
-            border-radius: 15px; 
+            border-radius: 16px; 
             color: #fff; 
-            font-size: 1.1rem; 
+            font-size: 1.2rem; 
             font-weight: 700; 
             cursor: pointer; 
-            transition: all 0.4s ease;
+            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
             text-transform: uppercase;
             letter-spacing: 2px;
-            font-family: 'Orbitron', sans-serif;
             position: relative;
             overflow: hidden;
-            box-shadow: 0 10px 30px rgba(0, 212, 255, 0.4);
+            z-index: 1;
         }
 
         .add-btn::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.5s;
-        }
-
-        .add-btn:hover::before {
-            left: 100%;
+            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;
         }
 
         .add-btn:hover { 
-            transform: translateY(-3px);
+            transform: translateY(-3px) scale(1.02);
             box-shadow: 
-                0 15px 40px rgba(0, 212, 255, 0.6),
-                0 0 60px rgba(255, 0, 128, 0.4);
-            background-position: 100% 0;
+                0 10px 30px rgba(0, 217, 255, 0.5),
+                0 20px 60px rgba(255, 0, 110, 0.3);
         }
 
-        .add-btn:active {
-            transform: translateY(-1px);
+        .add-btn:hover::before {
+            width: 300px;
+            height: 300px;
         }
 
-        /* Empty State */
+        /* Enhanced empty state */
         .empty-state { 
             text-align: center; 
             padding: 6rem 2rem;
-            background: rgba(255, 255, 255, 0.03);
-            backdrop-filter: blur(20px);
-            border-radius: 30px;
-            border: 2px dashed rgba(255, 255, 255, 0.2);
+            position: relative;
         }
 
-        .empty-state-icon {
-            font-size: 5rem;
+        .empty-state::before {
+            content: '📚';
+            font-size: 6rem;
+            display: block;
             margin-bottom: 2rem;
-            animation: float-icon 3s ease-in-out infinite;
+            animation: bounce 2s ease-in-out infinite;
         }
 
-        @keyframes float-icon {
-            0%, 100% { transform: translateY(0px); }
+        @keyframes bounce {
+            0%, 100% { transform: translateY(0); }
             50% { transform: translateY(-20px); }
         }
 
         .empty-state p { 
-            font-size: 1.3rem; 
-            color: rgba(255, 255, 255, 0.5);
-            line-height: 1.8;
+            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;
+        }
+
+        /* Loading animation */
+        @keyframes shimmer {
+            0% { background-position: -1000px 0; }
+            100% { background-position: 1000px 0; }
         }
 
         /* Responsive */
         @media (max-width: 768px) {
-            h1 { font-size: 2.5rem; }
+            h1 { font-size: 2rem; }
+            .countdown { font-size: 3rem; }
             .exams-grid { grid-template-columns: 1fr; }
-            .countdown-wrapper { grid-template-columns: repeat(2, 1fr); }
-            .countdown-number { font-size: 2rem; }
-            .header { padding: 1.5rem; }
-        }
-
-        /* Color Input */
-        input[type="color"] {
-            width: 100%;
-            height: 60px;
-            border: none;
-            border-radius: 15px;
-            cursor: pointer;
         }
     </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><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></div></div>
+        <div class="header">
+            <h1>Exam Countdown</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>
+            </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></div>
+        
+        <div class="empty-state" id="emptyState" style="display: none;">
+            <p>No exams scheduled yet. Click the + button to add your first exam!</p>
+        </div>
     </div>
+    
     <div class="modal" id="modal">
         <div class="modal-content">
-            <div class="modal-header"><h2 class="modal-title">Add New Exam</h2><button class="close-btn" id="closeModalBtn"><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>
+            <div class="modal-header">
+                <h2 class="modal-title">Add New Exam</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>
+                </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"></div>
-                <div class="form-group"><label for="examDate">Exam Date</label><input type="date" id="examDate" required></div>
+                <div class="form-group">
+                    <label for="examName">Exam Name</label>
+                    <input type="text" id="examName" required placeholder="e.g., Physics Final">
+                </div>
+                <div class="form-group">
+                    <label for="examDate">Exam Date</label>
+                    <input type="date" id="examDate" required>
+                </div>
                 <button type="submit" class="add-btn">Add Exam</button>
             </form>
         </div>
     </div>
 
     <script>
+        // Enhanced particle system
+        function createParticles() {
+            const particlesContainer = document.getElementById('particles');
+            
+            // 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';
+                
+                // Random colors for orbs
+                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}`;
+                
+                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';
+                particlesContainer.appendChild(star);
+            }
+        }
+
+        // Initialize particles
+        createParticles();
+
         // Create particles
         const particlesContainer = document.getElementById('particles');
         for (let i = 0; i < 50; i++) {