Update static/style.css

static/style.css

@@ -1,15 +1,15 @@
 :root {
     --bg-base: #0a0a0a;
     --card-bg: rgba(20, 20, 20, 0.65);
-    --card-border: rgba(99, 102, 241, 0.2);
-    --card-border-hover: rgba(99, 102, 241, 0.5);
+    --card-border: rgba(255, 255, 255, 0.2);
+    --card-border-hover: rgba(255, 255, 255, 0.5);
     
     --text-main: #ffffff;
     --text-muted: #a1a1aa;
     
-    --primary: #0ea5e9;
-    --primary-grad: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
-    --primary-grad-hover: linear-gradient(135deg, #38bdf8 0%, #a855f7 100%);
+    --primary: #ffffff;
+    --primary-grad: linear-gradient(135deg, #ffffff 0%, #9ca3af 100%);
+    --primary-grad-hover: linear-gradient(135deg, #f9fafb 0%, #d1d5db 100%);
     
     --error-color: #f87171;
     --error-bg: rgba(239, 68, 68, 0.15);
@@ -17,7 +17,7 @@
     --fail-color: #f87171;
     
     --glass-blur: 20px;
-    --shadow-glow: 0 0 40px rgba(99, 102, 241, 0.2);
+    --shadow-glow: 0 0 40px rgba(255, 255, 255, 0.2);
 }
 
 * {
@@ -55,21 +55,21 @@ body {
 .shape-1 {
     top: -10%; left: -10%;
     width: 50vw; height: 50vw;
-    background: rgba(99, 102, 241, 0.4);
+    background: rgba(255, 255, 255, 0.4);
     animation-delay: 0s;
 }
 
 .shape-2 {
     bottom: -20%; right: -10%;
     width: 60vw; height: 60vw;
-    background: rgba(139, 92, 246, 0.25);
+    background: rgba(209, 213, 219, 0.1);
     animation-delay: -5s;
 }
 
 .shape-3 {
     top: 40%; left: 50%;
     width: 40vw; height: 40vw;
-    background: rgba(236, 72, 153, 0.15);
+    background: rgba(156, 163, 175, 0.1);
     animation-delay: -10s;
     transform: translate(-50%, -50%);
 }
@@ -198,15 +198,15 @@ body {
 .input-group input:focus,
 .input-group input:not(:placeholder-shown) {
     padding: 22px 16px 10px;
-    border-color: rgba(99, 102, 241, 0.5);
-    background: rgba(99, 102, 241, 0.05);
+    border-color: rgba(255, 255, 255, 0.5);
+    background: rgba(255, 255, 255, 0.05);
 }
 
 .input-group input:focus + label,
 .input-group input:not(:placeholder-shown) + label {
     top: 14px;
     font-size: 11px;
-    color: #e0e7ff;
+    color: #ffffff;
     font-weight: 500;
     letter-spacing: 0.05em;
     text-transform: uppercase;
@@ -218,7 +218,7 @@ body {
     background: var(--primary-grad);
     opacity: 0;
     transition: opacity 0.3s ease;
-    box-shadow: 0 -2px 10px rgba(99, 102, 241, 0.8);
+    box-shadow: 0 -2px 10px rgba(255, 255, 255, 0.8);
 }
 
 .input-group input:focus ~ .input-highlight {
@@ -242,7 +242,7 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
-    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3), inset 0 1px 0 rgba(255,255,255,0.2);
+    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3), inset 0 1px 0 rgba(255,255,255,0.2);
 }
 
 .btn-glow::before {
@@ -262,7 +262,7 @@ body {
 
 .btn-glow:hover {
     transform: translateY(-2px);
-    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5), inset 0 1px 0 rgba(255,255,255,0.2);
+    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255,255,255,0.2);
 }
 
 .btn-glow:hover::before {
@@ -437,7 +437,7 @@ body {
 
 .progress-ring__circle {
     transition: stroke-dashoffset 0.3s ease-out;
-    filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.5));
+    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
 }
 
 .percentage-container {
@@ -499,8 +499,8 @@ body {
 
 .course-card:hover {
     transform: translateY(-8px) scale(1.02);
-    border-color: rgba(99, 102, 241, 0.4);
-    box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 20px rgba(99, 102, 241, 0.15);
+    border-color: rgba(255, 255, 255, 0.4);
+    box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 20px rgba(255, 255, 255, 0.15);
 }
 
 .card-header {
@@ -516,16 +516,16 @@ body {
     content: '';
     position: absolute;
     top: 0; left: 0; right: 0; bottom: 0;
-    background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.1), transparent 70%);
+    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1), transparent 70%);
     pointer-events: none;
 }
 
 .course-code {
     display: inline-block;
     padding: 6px 10px;
-    background: rgba(99, 102, 241, 0.15);
-    color: #e0e7ff;
-    border: 1px solid rgba(99, 102, 241, 0.3);
+    background: rgba(255, 255, 255, 0.15);
+    color: #ffffff;
+    border: 1px solid rgba(255, 255, 255, 0.3);
     border-radius: 8px;
     font-size: 12px;
     font-weight: 600;