Update static/style.css

static/style.css

@@ -1,3 +1,4 @@
+/* Global Reset & Fonts  */
 * {
   margin: 0;
   padding: 0;
@@ -6,7 +7,7 @@
 
 body {
   font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  background-color: #0f0a1c; 
+  background-color: #0b0f19; 
   color: #e0e0e0;
   padding: 40px 20px;
   min-height: 100vh;
@@ -15,12 +16,13 @@ body {
   justify-content: center;
 }
 
+/* Main Container  */
 .container {
-  background: #1e1332; 
+  background: #1c1c2e; 
   padding: 30px;
   border-radius: 20px; 
-  box-shadow: 0px 0px 10px rgba(111, 6, 208, 0.5); 
-  border: 1px solid #7c3aed; 
+  box-shadow: 0px 0px 8px rgba(94, 53, 177, 0.3); 
+  border: 1px solid #4527a0; 
   max-width: 1000px;
   width: 100%;
 }
@@ -29,21 +31,23 @@ header {
   text-align: center;
   margin-bottom: 30px;
   padding-bottom: 20px;
-  border-bottom: 1px solid #3b285c;
+  border-bottom: 1px solid #2e2e42;
 }
 
 header h1 { color: #ffffff; font-weight: 700; margin-bottom: 5px; }
-header p { color: #b8a6d9; }
+header p { color: #9ca3af; }
 
+/* Layout Grid  */
 .main-content {
   display: grid;
   grid-template-columns: 1.5fr 1fr; 
   gap: 40px;
 }
 
+/* File Upload Styles  */
 .file-upload-container {
-  background: #140d26;
-  border: 1px solid #4c3080;
+  background: #0b0f19;
+  border: 1px solid #36364c;
   border-radius: 12px;
   padding: 30px 20px;
   margin-bottom: 20px;
@@ -54,22 +58,22 @@ header p { color: #b8a6d9; }
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  border: 2px dashed #6b4c9a;
+  border: 2px dashed #36364c;
   border-radius: 8px;
   padding: 40px 20px;
   transition: all 0.3s ease;
-  background: rgba(45, 27, 78, 0.5);
+  background: rgba(28, 28, 46, 0.5);
 }
 
 .upload-box.dragover {
-  border-color: #a855f7;
-  background: rgba(168, 85, 247, 0.15);
+  border-color: #7e57c2;
+  background: rgba(126, 87, 194, 0.1);
 }
 
 .browse-btn {
   background: transparent;
-  border: 1px solid #a855f7;
-  color: #d8b4fe;
+  border: 1px solid #7e57c2;
+  color: #b39ddb;
   padding: 8px 16px;
   border-radius: 6px;
   cursor: pointer;
@@ -78,15 +82,16 @@ header p { color: #b8a6d9; }
 }
 
 .browse-btn:hover {
-  background: rgba(168, 85, 247, 0.2);
+  background: rgba(126, 87, 194, 0.15);
   color: #ffffff;
 }
 
+/* Submit Button  */
 .submit-btn {
   width: 100%;
   margin-top: 25px;
   padding: 14px;
-  background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);
+  background: linear-gradient(135deg, #5e35b1 0%, #311b92 100%);
   color: #ffffff;
   font-weight: 700;
   border: none;
@@ -98,11 +103,12 @@ header p { color: #b8a6d9; }
 
 .submit-btn:hover:not(:disabled) {
   transform: translateY(-2px);
-  box-shadow: 0 4px 15px rgba(147, 51, 234, 0.4);
+  box-shadow: 0 4px 15px rgba(94, 53, 177, 0.4);
 }
 
+/* Result Section  */
 .result-section {
-  background: #160f29;
+  background: #131320;
   border-radius: 20px; 
   display: flex;
   flex-direction: column;
@@ -110,19 +116,20 @@ header p { color: #b8a6d9; }
   align-items: center;
   text-align: center;
   padding: 20px;
-  border: 1px solid #3b285c;
+  border: 1px solid #2e2e42;
   min-height: 200px;
 }
 
 .placeholder-text h3 { color: #ffffff; margin-bottom: 8px; }
-.placeholder-text p { color: #8b7ca6; font-size: 0.9rem; }
+.placeholder-text p { color: #6b7280; font-size: 0.9rem; }
 
+/* Dynamic Result Styles */
 .result-box { animation: fadeIn 0.5s ease; width: 100%; }
 
 .confidence-bar-bg {
   width: 100%;
   height: 8px;
-  background-color: #3b285c;
+  background-color: #2e2e42;
   border-radius: 4px;
   margin-top: 15px;
   overflow: hidden;
@@ -132,6 +139,7 @@ header p { color: #b8a6d9; }
   height: 100%;
   border-radius: 4px;
   transition: width 1s ease;
+  background-color: #7e57c2;
 }
 
 @keyframes fadeIn {
@@ -139,6 +147,7 @@ header p { color: #b8a6d9; }
   to { opacity: 1; transform: translateY(0); }
 }
 
+/* Mobile Responsive */
 @media (max-width: 768px) {
   .main-content { grid-template-columns: 1fr; }
 }