Feature: Simplify lobby home screen to a minimal clean layout

frontend/static/index.html

@@ -57,38 +57,29 @@ body {
   position: fixed; inset: 0; z-index: 200;
   display: flex; align-items: center; justify-content: center;
   gap: 0;
-  background: radial-gradient(ellipse 80% 70% at 50% 30%, #1a0e2a, var(--bg) 75%);
+  background: var(--bg);
   transition: opacity 0.8s cubic-bezier(0.4,0,0.2,1), transform 0.8s cubic-bezier(0.4,0,0.2,1);
 }
 #lobby.hidden { opacity: 0; transform: scale(0.96); pointer-events: none; }
-#lobbyParticles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
+#lobbyParticles { display: none; }
 
 .lobby-inner {
   position: relative; z-index: 1;
-  display: flex; flex-direction: column; align-items: center; gap: 2.5rem;
+  display: flex; flex-direction: column; align-items: center; gap: 2.0rem;
 }
 .lobby-brand {
   text-align: center;
 }
 .lobby-title {
-  font-family: 'Instrument Serif', serif;
-  font-size: clamp(52px, 9vw, 96px);
-  letter-spacing: -3px; line-height: 0.95;
-  background: linear-gradient(145deg, #fff 0%, #c8c0ff 50%, #ff4655 100%);
-  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
-  background-clip: text;
-  filter: drop-shadow(0 0 40px rgba(180,74,255,0.25));
-  animation: titleBreath 5s ease-in-out infinite alternate;
-}
-@keyframes titleBreath {
-  from { filter: drop-shadow(0 0 30px rgba(180,74,255,0.2)); }
-  to   { filter: drop-shadow(0 0 60px rgba(255,70,85,0.35)); }
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: clamp(36px, 6vw, 56px);
+  font-weight: 500;
+  letter-spacing: -1px; line-height: 1.0;
+  color: var(--text);
 }
 .lobby-title em {
-  font-style: italic;
-  background: linear-gradient(135deg, #ff4655, #b44aff);
-  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
-  background-clip: text;
+  font-style: normal;
+  color: var(--text-dim);
 }
 .lobby-eyebrow {
   margin-top: 10px;
@@ -100,11 +91,9 @@ body {
 
 .lobby-panel {
   width: 380px;
-  background: rgba(15,15,26,0.7);
-  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
-  border: 1px solid rgba(45,45,82,0.7);
-  border-radius: 20px; padding: 2rem 1.75rem;
-  box-shadow: 0 32px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px; padding: 2rem 1.75rem;
 }
 .lobby-section-label {
   font-family: 'JetBrains Mono', monospace;
@@ -131,18 +120,17 @@ body {
 }
 .lobby-row input[type=range]::-webkit-slider-runnable-track {
   height: 2px;
-  background: linear-gradient(90deg, var(--purple), var(--accent), var(--border));
+  background: var(--border2);
   border-radius: 1px;
 }
 .lobby-row input[type=range]::-webkit-slider-thumb {
-  -webkit-appearance: none; width: 14px; height: 14px;
-  border-radius: 50%; background: #fff; border: 2px solid var(--accent);
-  cursor: pointer; margin-top: -6px;
-  box-shadow: 0 0 12px var(--accent-glow);
-  transition: box-shadow 0.2s, transform 0.2s;
+  -webkit-appearance: none; width: 12px; height: 12px;
+  border-radius: 50%; background: var(--text); border: none;
+  cursor: pointer; margin-top: -5px;
+  transition: transform 0.2s;
 }
 .lobby-row input[type=range]:hover::-webkit-slider-thumb {
-  box-shadow: 0 0 24px var(--accent-glow); transform: scale(1.2);
+  transform: scale(1.15);
 }
 .range-val {
   font-family: 'JetBrains Mono', monospace;
@@ -171,8 +159,7 @@ body {
   transition: border-color 0.2s, box-shadow 0.2s;
 }
 #systemPromptInput:focus {
-  border-color: var(--active-tab-color, var(--accent));
-  box-shadow: 0 0 10px var(--active-tab-glow, var(--accent-glow));
+  border-color: var(--text-muted);
 }
 
 .lobby-prompt-tabs {
@@ -201,10 +188,9 @@ body {
   color: var(--text);
 }
 .lobby-tab.active {
-  background: var(--surface);
-  border-color: var(--tab-color, var(--accent));
-  color: var(--tab-color, var(--accent));
-  box-shadow: 0 0 8px var(--tab-glow, var(--accent-glow));
+  background: var(--surface2);
+  border-color: var(--text);
+  color: var(--text);
 }
 
 .lobby-agent-edit-row {
@@ -221,15 +207,13 @@ body {
   transition: border-color 0.2s, box-shadow 0.2s;
 }
 .lobby-agent-edit-row:focus-within {
-  border-color: var(--active-tab-color, var(--accent));
-  box-shadow: 0 0 10px var(--active-tab-glow, var(--accent-glow));
+  border-color: var(--text-muted);
 }
 .lobby-agent-color-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: var(--accent);
-  box-shadow: 0 0 8px var(--accent-glow);
   flex-shrink: 0;
   transition: all 0.2s ease;
 }
@@ -250,31 +234,21 @@ body {
 
 .lobby-deploy {
   width: 100%; margin-top: 24px;
-  padding: 15px; border: none; border-radius: 12px;
-  background: linear-gradient(135deg, #b44aff 0%, #ff4655 100%);
-  color: #fff;
+  padding: 14px; border: 1px solid var(--border); border-radius: 8px;
+  background: var(--surface2);
+  color: var(--text);
   font-family: 'Space Grotesk', sans-serif;
-  font-size: 13px; font-weight: 700;
-  text-transform: uppercase; letter-spacing: 0.2em;
-  cursor: pointer; position: relative; overflow: hidden;
-  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
-  box-shadow: 0 4px 24px rgba(180,74,255,0.4);
+  font-size: 12px; font-weight: 600;
+  text-transform: uppercase; letter-spacing: 0.15em;
+  cursor: pointer;
+  transition: all 0.2s ease;
 }
 .lobby-deploy:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 40px rgba(255,70,85,0.5);
-}
-.lobby-deploy:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
-.lobby-deploy::after {
-  content: ''; position: absolute; inset: 0;
-  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
-  transform: translateX(-100%);
-  animation: deployShine 3s ease-in-out infinite;
-}
-@keyframes deployShine {
-  0% { transform: translateX(-100%); }
-  35%, 100% { transform: translateX(100%); }
+  background: var(--text);
+  color: var(--bg);
+  border-color: var(--text);
 }
+.lobby-deploy:disabled { opacity: 0.4; cursor: not-allowed; }
 
 .ctrl-btn.warming {
   border-color: var(--accent);
@@ -1293,46 +1267,7 @@ const AGENT_COLORS = {
 
 /* ═══════════ LOBBY PARTICLES ═══════════ */
 (function initLobbyParticles() {
-  const canvas = document.getElementById('lobbyParticles');
-  const ctx = canvas.getContext('2d');
-  let particles = [];
-  const COUNT = 90;
-  function resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }
-  resize();
-  window.addEventListener('resize', resize);
-  const COLORS = ['#b44aff','#ff4655','#4a9eff','#00e5cc'];
-  for (let i = 0; i < COUNT; i++) {
-    particles.push({
-      x: Math.random() * canvas.width,
-      y: Math.random() * canvas.height,
-      vx: (Math.random()-0.5)*0.3,
-      vy: -Math.random()*0.5 - 0.1,
-      size: Math.random()*2+0.5,
-      alpha: Math.random()*0.35+0.05,
-      color: COLORS[Math.floor(Math.random()*COLORS.length)],
-    });
-  }
-  function animate() {
-    if (document.getElementById('lobby').classList.contains('hidden')) return;
-    requestAnimationFrame(animate);
-    ctx.clearRect(0,0,canvas.width,canvas.height);
-    particles.forEach(p => {
-      p.x += p.vx; p.y += p.vy;
-      if (p.y < -10) { p.y = canvas.height+10; p.x = Math.random()*canvas.width; }
-      if (p.x < -10 || p.x > canvas.width+10) p.x = Math.random()*canvas.width;
-      ctx.beginPath();
-      ctx.arc(p.x, p.y, p.size, 0, Math.PI*2);
-      ctx.fillStyle = p.color;
-      ctx.globalAlpha = p.alpha;
-      ctx.fill();
-      const g = ctx.createRadialGradient(p.x,p.y,0,p.x,p.y,p.size*4);
-      g.addColorStop(0, p.color); g.addColorStop(1,'transparent');
-      ctx.beginPath(); ctx.arc(p.x,p.y,p.size*4,0,Math.PI*2);
-      ctx.fillStyle = g; ctx.globalAlpha = p.alpha*0.25; ctx.fill();
-    });
-    ctx.globalAlpha = 1;
-  }
-  animate();
+  // Disabled for minimal, clean design
 })();
 
 const BOT_NAMES = ["Vex", "Nyx", "Kael", "Zara", "Cypher", "Helix", "Apex", "Blaze"];