Fixed some small bugs after merge

cmd/web/assets/css/styles.css

@@ -1,5 +1,33 @@
 /* Pure CSS styles for Music Search */
 
+:root {
+    /* Light mode colors (default) */
+    --bg-primary: #f3f4f6;
+    --bg-secondary: #e5e7eb;
+    --bg-tertiary: #dcfce7;
+    --text-primary: #000;
+    --text-secondary: #374151;
+    --border-primary: #9ca3af;
+    --border-focus: #6b7280;
+    --accent-primary: #f97316;
+    --accent-hover: #ea580c;
+    --shadow-color: rgba(0, 0, 0, 0.1);
+}
+
+[data-theme="dark"] {
+    /* Dark mode colors matching frontend */
+    --bg-primary: #555;
+    --bg-secondary: #333;
+    --bg-tertiary: #2a2a2a;
+    --text-primary: #fff;
+    --text-secondary: #ff9c00;
+    --border-primary: #666;
+    --border-focus: #ff9c00;
+    --accent-primary: #ff9c00;
+    --accent-hover: #e68a00;
+    --shadow-color: rgba(0, 0, 0, 0.3);
+}
+
 * {
     box-sizing: border-box;
     margin: 0;
@@ -10,7 +38,9 @@ html, body {
     height: 100%;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
     line-height: 1.5;
-    background-color: #f3f4f6;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 main {
@@ -29,15 +59,15 @@ main {
     max-width: 600px;
     font-size: 1.5rem;
     padding: 0.5rem;
-    border: 1px solid #9ca3af;
+    border: 1px solid var(--border-primary);
     border-radius: 0.5rem;
-    background-color: #e5e7eb;
-    color: #000;
+    background-color: var(--bg-secondary);
+    color: var(--text-primary);
 }
 
 #search_term:focus {
     outline: none;
-    border-color: #6b7280;
+    border-color: var(--border-focus);
 }
 
 #clear {
@@ -45,23 +75,48 @@ main {
     padding: 0.5rem 1rem;
     border: none;
     border-radius: 0.5rem;
-    background-color: #f97316;
-    color: #fff;
+    background-color: var(--accent-primary);
+    color: var(--text-primary);
     cursor: pointer;
     margin-left: 1rem;
 }
 
 #clear:hover {
-    background-color: #ea580c;
+    background-color: var(--accent-hover);
 }
 
 #games-container {
     font-size: 1.5rem;
 }
 
+.game-text {
+    color: var(--text-primary);
+    word-break: break-word;
+}
+
+/* Dark mode toggle */
+#dark-mode-toggle {
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    font-size: 1.2rem;
+    padding: 0.4rem 0.8rem;
+    border: none;
+    border-radius: 0.5rem;
+    background-color: var(--bg-secondary);
+    color: var(--text-primary);
+    cursor: pointer;
+    z-index: 1000;
+    transition: all 0.3s ease;
+}
+
+#dark-mode-toggle:hover {
+    background-color: var(--border-primary);
+}
+
 /* Game result cards */
 .bg-green-100 {
-    background-color: #dcfce7;
+    background-color: var(--bg-tertiary);
 }
 
 .p-4 {
@@ -69,7 +124,7 @@ main {
 }
 
 .shadow-md {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color);
 }
 
 .rounded-lg {