redesign

frontend/src/App.css

@@ -34,47 +34,108 @@
   transition: color 0.2s;
 }
 
-.nav-link:hover, .nav-link.active {
-  color: var(--accent-color);
+.nav-link.active {
+  color: var(--text-color);
+  border-bottom: 2px solid var(--accent-color);
 }
 
-.form-group {
+/* Toast Styles */
+.toast-container {
+  position: fixed;
+  top: 2rem;
+  right: 2rem;
+  z-index: 1000;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
+  gap: 1rem;
 }
 
-.form-group label {
-  font-size: 0.9rem;
+.toast {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem 1.5rem;
+  border-radius: 12px;
+  background-color: var(--secondary-bg);
+  border: 1px solid var(--border-color);
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+  min-width: 300px;
+  animation: slideInRight 0.3s ease forwards;
+}
+
+.toast-success { border-left: 4px solid #4caf50; }
+.toast-error { border-left: 4px solid #f44336; }
+.toast-info { border-left: 4px solid var(--accent-color); }
+
+.toast-icon { font-size: 1.2rem; }
+.toast-message { flex: 1; font-weight: 500; }
+.toast-close {
+  background: none;
+  border: none;
   color: var(--text-muted);
+  cursor: pointer;
+  font-size: 1.5rem;
+  padding: 0;
+  line-height: 1;
 }
 
-.btn-secondary {
-  background-color: var(--secondary-alt-bg);
+@keyframes slideInRight {
+  from { transform: translateX(100%); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+
+/* Loading Bar */
+.loading-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 3px;
+  background: linear-gradient(90deg, var(--accent-color), #4da3ff);
+  z-index: 2000;
+  transition: width 0.3s ease;
+}
+
+/* Theme Switcher */
+.theme-switcher {
+  display: flex;
+  gap: 0.5rem;
+  background: var(--secondary-alt-bg);
+  padding: 0.25rem;
+  border-radius: 20px;
   border: 1px solid var(--border-color);
 }
 
-.btn-secondary:hover {
-  background-color: var(--border-color);
-}
-
-.list-item {
-  background-color: var(--secondary-alt-bg);
-  padding: 1rem;
-  border-radius: 8px;
-  margin-bottom: 1rem;
-  border: 1px solid var(--border-color);
+.theme-btn:not(.game-btn) {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  cursor: pointer;
   transition: transform 0.2s;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.list-item:hover {
-  transform: translateY(-2px);
-  border-color: var(--accent-color);
+.theme-btn:hover { transform: scale(1.1); }
+.theme-btn.active { border-color: var(--text-color); }
+
+.theme-default { background: #23283d; }
+.theme-blackhole { background: #000000; }
+.theme-star { background: #0a0a2a; }
+.theme-ball { background: #1a1a1a; }
+.theme-reflect { background: #333333; }
+.theme-clouds { background: #23283d; }
+
+.game-entry {
+  gap: 0.5rem;
+  background-color: var(--secondary-alt-bg);
+  margin-bottom: 10px;
+  border-radius: 5px;
+  padding: 1rem;
 }
 
-.grid-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 1.5rem;
+.game-entry:hover {
+  background-color: var(--primary-bg);
 }