Update style.css

style.css

@@ -1,26 +1,32 @@
+/* ===== Global Layout ===== */
 body {
   background: #111;
   color: #eee;
   font-family: Arial, sans-serif;
   padding: 40px;
+  margin: 0;
 }
 
 .container {
-  width: 700px;
+  width: 750px;
   margin: auto;
-  background: #222;
+  background: #1e1e1e;
   border-radius: 12px;
-  padding: 25px;
+  padding: 30px;
+  box-shadow: 0 0 20px rgba(0,0,0,0.5);
 }
 
+/* ===== Buttons ===== */
 .btn {
-  padding: 12px 20px;
+  padding: 10px 20px;
   background: #444;
   border: none;
   border-radius: 6px;
   cursor: pointer;
-  margin: 5px;
+  margin: 6px;
   color: white;
+  font-weight: bold;
+  transition: 0.2s;
 }
 
 .btn:hover {
@@ -31,24 +37,63 @@ body {
   background: #555;
 }
 
+.btn-secondary:hover {
+  background: #777;
+}
+
 .btn-green {
   background: #28a745;
 }
 
 .btn-green:hover {
-  background: #218838;
+  background: #1f8f36;
 }
 
+/* ===== Highlighting ===== */
 .disfluency {
-  color: #ff6b6b;
+  color: #ff4d4d;
+  font-weight: bold;
+}
+
+.interim {
+  color: #aaaaaa;
+  opacity: 0.6;
+}
+
+.pause {
+  color: #ffa500;
+  padding: 0 4px;
   font-weight: bold;
 }
 
+/* ===== Transcription Box ===== */
 #transcriptionOutput {
   margin-top: 20px;
-  padding: 15px;
+  padding: 18px;
   background: #000;
-  border-radius: 8px;
-  min-height: 120px;
+  border-radius: 10px;
+  min-height: 160px;
+  max-height: 380px;
+  overflow-y: auto;
   white-space: pre-wrap;
+  line-height: 1.5;
+  font-size: 17px;
+  border: 1px solid #333;
+}
+
+/* ===== Status Message ===== */
+#statusMessage {
+  margin-top: 10px;
+  font-size: 15px;
+  color: #aaa;
+}
+
+/* ===== Dropdown ===== */
+#languageSelect {
+  padding: 8px;
+  background: #333;
+  color: white;
+  border-radius: 6px;
+  border: 1px solid #555;
+  font-size: 14px;
 }