diff --git a/src/web/public/index.html b/src/web/public/index.html
index 5bfbfa58..450a4687 100644
--- a/src/web/public/index.html
+++ b/src/web/public/index.html
@@ -30,13 +30,13 @@
   <script>if(window.innerWidth<768||(('ontouchstart' in window||navigator.maxTouchPoints>0)&&window.innerWidth<1024))document.documentElement.classList.add('mobile-init');</script>
   <!-- Inline critical CSS for instant skeleton paint (before styles.css loads) -->
   <style>
-    .loading-skeleton{display:flex;flex-direction:column;height:100vh;height:100dvh;background:#0a0a0a}
-    .skeleton-header{height:40px;background:#111;border-bottom:1px solid #1a1a2e;display:flex;align-items:center;padding:0 12px}
-    .skeleton-brand{color:#60a5fa;font-size:14px;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;opacity:.7}
+    .loading-skeleton{display:flex;flex-direction:column;height:100vh;height:100dvh;background:#09090b}
+    .skeleton-header{height:40px;background:rgba(19,19,22,0.85);border-bottom:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;padding:0 12px}
+    .skeleton-brand{color:#60a5fa;font-size:14px;font-weight:700;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;opacity:.7}
     .skeleton-tabs{display:flex;gap:4px;margin-left:16px}
-    .skeleton-tab{width:80px;height:24px;background:#1a1a2e;border-radius:4px}
+    .skeleton-tab{width:80px;height:24px;background:rgba(255,255,255,0.04);border-radius:6px}
     .skeleton-terminal{flex:1;background:#0d0d0d}
-    .skeleton-toolbar{height:32px;background:#111;border-top:1px solid #1a1a2e}
+    .skeleton-toolbar{height:42px;background:rgba(19,19,22,0.85);border-top:1px solid rgba(255,255,255,0.06)}
     .app-loaded .loading-skeleton{display:none}
   </style>
 </head>
diff --git a/src/web/public/styles.css b/src/web/public/styles.css
index 5a87b455..ec72602b 100644
--- a/src/web/public/styles.css
+++ b/src/web/public/styles.css
@@ -1,22 +1,27 @@
 /* Codeman - Terminal-First UI */
 
 :root {
-  --bg-dark: #0a0a0a;
-  --bg-card: #141414;
-  --bg-input: #1a1a1a;
-  --bg-hover: #222;
-  --border: #2a2a2a;
-  --border-light: #333;
-  --text: #eee;
-  --text-dim: #888;
-  --text-muted: #555;
+  --bg-dark: #09090b;
+  --bg-card: #131316;
+  --bg-input: #1a1a1f;
+  --bg-hover: #1f1f26;
+  --border: #232329;
+  --border-light: #2e2e38;
+  --text: #ececf0;
+  --text-dim: #8b8b97;
+  --text-muted: #52525e;
   --accent: #3b82f6;
   --accent-hover: #60a5fa;
   --green: #22c55e;
   --yellow: #eab308;
   --red: #ef4444;
   --header-height: 36px;
-  --toolbar-height: 40px;
+  --toolbar-height: 42px;
+  --glass-bg: rgba(19, 19, 22, 0.85);
+  --glass-border: rgba(255, 255, 255, 0.06);
+  --subtle-shadow: 0 -1px 3px rgba(0, 0, 0, 0.3), 0 -4px 16px rgba(0, 0, 0, 0.15);
+  --btn-radius: 6px;
+  --transition-smooth: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 
   /* Session color palette */
   --session-red: #ef4444;
@@ -136,8 +141,10 @@ body {
   align-items: flex-start;
   min-height: var(--header-height);
   padding: 0.35rem 0.75rem;
-  background: var(--bg-card);
-  border-bottom: 1px solid var(--border);
+  background: var(--glass-bg);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-bottom: 1px solid var(--glass-border);
   flex-shrink: 0;
   position: relative;
   z-index: 100; /* Above main content so dropdowns work */
@@ -150,7 +157,7 @@ body {
   display: flex;
   align-items: center;
   padding-right: 0.75rem;
-  border-right: 1px solid var(--border);
+  border-right: 1px solid var(--glass-border);
   margin-right: 0.5rem;
   height: var(--header-height);
   flex-shrink: 0;
@@ -158,16 +165,17 @@ body {
 
 .logo {
   font-size: 0.85rem;
-  font-weight: 600;
+  font-weight: 700;
   color: var(--accent-hover);
   letter-spacing: -0.02em;
   cursor: pointer;
-  transition: color 0.15s, text-shadow 0.15s;
+  transition: color var(--transition-smooth), text-shadow var(--transition-smooth), filter var(--transition-smooth);
 }
 
 .logo:hover {
   color: #93c5fd;
-  text-shadow: 0 0 8px rgba(96, 165, 250, 0.5);
+  text-shadow: 0 0 12px rgba(96, 165, 250, 0.5), 0 0 24px rgba(96, 165, 250, 0.2);
+  filter: brightness(1.1);
 }
 
 /* Session Tabs */
@@ -213,34 +221,35 @@ body {
   display: flex;
   align-items: center;
   gap: 0.35rem;
-  padding: 0.35rem 0.5rem;
+  padding: 0.35rem 0.6rem;
   background: transparent;
   border: 1px solid transparent;
-  border-radius: 4px;
+  border-radius: var(--btn-radius);
   color: var(--text-dim);
   font-size: 0.75rem;
   cursor: pointer;
   white-space: nowrap;
-  transition: background 0.05s, border-color 0.05s, color 0.05s, box-shadow 0.05s;
+  transition: background var(--transition-smooth), border-color var(--transition-smooth), color var(--transition-smooth), box-shadow var(--transition-smooth);
 }
 
 .session-tab:hover {
   background: rgba(34, 197, 94, 0.06);
   color: var(--text);
-  box-shadow: 0 0 8px 2px rgba(34, 197, 94, 0.2), inset 0 0 6px 1px rgba(34, 197, 94, 0.08);
-  border-color: rgba(34, 197, 94, 0.2);
+  box-shadow: 0 0 8px 2px rgba(34, 197, 94, 0.18), inset 0 0 6px 1px rgba(34, 197, 94, 0.06);
+  border-color: rgba(34, 197, 94, 0.18);
 }
 
 .session-tab:active {
-  background: rgba(34, 197, 94, 0.15);
-  box-shadow: 0 0 16px 5px rgba(34, 197, 94, 0.5), 0 0 30px 10px rgba(34, 197, 94, 0.2), inset 0 0 10px 2px rgba(34, 197, 94, 0.2);
-  border-color: rgba(34, 197, 94, 0.4);
+  background: rgba(34, 197, 94, 0.12);
+  box-shadow: 0 0 12px 4px rgba(34, 197, 94, 0.35), inset 0 0 8px 2px rgba(34, 197, 94, 0.15);
+  border-color: rgba(34, 197, 94, 0.3);
 }
 
 .session-tab.active {
-  background: var(--bg-dark);
-  border-color: var(--border-light);
+  background: rgba(255, 255, 255, 0.04);
+  border-color: var(--glass-border);
   color: var(--text);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
 }
 
 /* Tab switch feedback: bright green glow on the newly-active tab */
@@ -409,7 +418,7 @@ body {
   gap: 0.5rem;
   margin-left: auto;
   padding-left: 0.75rem;
-  border-left: 1px solid var(--border);
+  border-left: 1px solid var(--glass-border);
 }
 
 /* Connection Indicator */
@@ -460,13 +469,14 @@ body {
   background: transparent;
   border: none;
   cursor: pointer;
-  border-radius: 4px;
+  border-radius: var(--btn-radius);
   padding: 0;
   position: relative;
+  transition: background var(--transition-smooth);
 }
 
 .tunnel-indicator:hover {
-  background: var(--bg-hover);
+  background: rgba(255, 255, 255, 0.06);
 }
 
 .tunnel-dot {
@@ -724,8 +734,8 @@ body {
 
 .stat-bar {
   width: 40px;
-  height: 6px;
-  background: var(--bg-input);
+  height: 5px;
+  background: rgba(255, 255, 255, 0.06);
   border-radius: 3px;
   overflow: hidden;
 }
@@ -775,26 +785,26 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: 26px;
+  height: 26px;
   background: transparent;
   border: none;
-  color: var(--text-dim);
+  color: var(--text-muted);
   font-size: 1rem;
   cursor: pointer;
-  border-radius: 4px;
-  transition: all 0.15s;
+  border-radius: var(--btn-radius);
+  transition: all var(--transition-smooth);
 }
 
 .btn-icon-header:hover {
-  background: var(--bg-hover);
+  background: rgba(255, 255, 255, 0.07);
   color: var(--text);
   transform: rotate(45deg);
 }
 
 .btn-icon-header.btn-settings {
-  width: 32px;
-  height: 32px;
+  width: 30px;
+  height: 30px;
   margin-left: 0;
 }
 
@@ -814,8 +824,9 @@ body {
   align-items: center;
   gap: 0.25rem;
   padding: 0.15rem 0.4rem;
-  background: var(--bg-input);
-  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.04);
+  border-radius: var(--btn-radius);
 }
 
 .header-font-controls .font-size-display {
@@ -876,8 +887,10 @@ body {
   align-items: center;
   gap: 1rem;
   padding: 0.4rem 1rem;
-  background: linear-gradient(90deg, #1e3a5f, #152238);
-  border-bottom: 1px solid rgba(59, 130, 246, 0.3);
+  background: linear-gradient(90deg, rgba(30, 58, 95, 0.8), rgba(21, 34, 56, 0.8));
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border-bottom: 1px solid rgba(59, 130, 246, 0.2);
   flex-shrink: 0;
 }
 
@@ -919,8 +932,10 @@ body {
 .respawn-banner {
   display: flex;
   padding: 0.25rem 0.75rem;
-  background: linear-gradient(90deg, #1e3a1e, #132513);
-  border-bottom: 1px solid rgba(34, 197, 94, 0.3);
+  background: linear-gradient(90deg, rgba(30, 58, 30, 0.8), rgba(19, 37, 19, 0.8));
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border-bottom: 1px solid rgba(34, 197, 94, 0.2);
   font-size: 0.7rem;
   flex-shrink: 0;
 }
@@ -1186,8 +1201,10 @@ body {
 
 /* ===== Enhanced Ralph Wiggum Loop Panel ===== */
 .ralph-panel {
-  background: var(--bg-card);
-  border-bottom: 1px solid var(--border);
+  background: var(--glass-bg);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border-bottom: 1px solid var(--glass-border);
   font-size: 0.75rem;
   flex-shrink: 0;
   overflow: hidden;
@@ -1772,12 +1789,15 @@ body {
   position: absolute;
   top: 100%;
   right: 0;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  min-width: 160px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  background: rgba(22, 22, 28, 0.95);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 10px;
+  min-width: 170px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
   z-index: 1000;
+  padding: 4px;
 }
 
 .ralph-dropdown.show {
@@ -1794,16 +1814,18 @@ body {
   text-align: left;
   font-size: 0.75rem;
   cursor: pointer;
+  border-radius: var(--btn-radius);
+  transition: background var(--transition-smooth);
 }
 
 .ralph-dropdown button:hover {
-  background: var(--bg-hover);
+  background: rgba(255, 255, 255, 0.07);
 }
 
 .ralph-dropdown hr {
-  margin: 0.25rem 0;
+  margin: 0.25rem 4px;
   border: none;
-  border-top: 1px solid var(--border);
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
 }
 
 /* Detached Ralph Panel */
@@ -1818,10 +1840,12 @@ body {
   max-width: 90vw;
   max-height: 80vh;
   z-index: 1000;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
-  background: var(--bg-card);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 12px;
+  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3);
+  background: rgba(19, 19, 22, 0.95);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
   overflow: hidden;
   resize: both;
   display: flex;
@@ -1926,7 +1950,7 @@ body {
   z-index: 10;
   opacity: 0;
   pointer-events: none;
-  transition: opacity 0.2s ease;
+  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .welcome-overlay.visible {
@@ -1936,28 +1960,31 @@ body {
 
 .welcome-content {
   text-align: center;
-  max-width: 500px;
+  max-width: 520px;
   padding: 2rem;
 }
 
 .welcome-title {
   font-size: 3.5rem;
-  font-weight: 700;
-  color: var(--accent-hover);
+  font-weight: 800;
+  background: linear-gradient(135deg, #60a5fa 0%, #93c5fd 50%, #60a5fa 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
   margin-bottom: 1rem;
-  letter-spacing: -0.03em;
+  letter-spacing: -0.04em;
 }
 
 .welcome-desc {
   color: var(--text-dim);
   font-size: 0.9rem;
-  line-height: 1.5;
+  line-height: 1.6;
   margin-bottom: 0.5rem;
 }
 
 .welcome-actions {
   display: flex;
-  gap: 1rem;
+  gap: 0.75rem;
   justify-content: center;
   flex-wrap: wrap;
   margin-top: 2rem;
@@ -1968,66 +1995,78 @@ body {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.75rem 1.25rem;
-  font-size: 0.9rem;
-  font-weight: 500;
-  border-radius: 6px;
+  padding: 0.7rem 1.3rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+  border-radius: 10px;
   border: 1px solid transparent;
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition: all var(--transition-smooth);
+  letter-spacing: 0.01em;
 }
 
 .welcome-btn-claude {
-  background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
-  border-color: #3b82f6;
+  background: linear-gradient(135deg, #1a3358 0%, #1e4fb8 50%, #2563eb 100%);
+  border-color: rgba(59, 130, 246, 0.4);
   color: #e0e7ff;
+  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
 }
 
 .welcome-btn-claude:hover {
-  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
-  box-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
+  background: linear-gradient(135deg, #2454a8 0%, #2d6cf0 50%, #4b8af7 100%);
+  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.35), 0 0 40px rgba(59, 130, 246, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  border-color: rgba(96, 165, 250, 0.5);
   color: #fff;
+  transform: translateY(-1px);
 }
 
 .welcome-btn-opencode {
-  background: linear-gradient(135deg, #0a2e2a 0%, #0d4a40 100%);
-  border-color: #10b981;
+  background: linear-gradient(135deg, #0a2e2a 0%, #0b3d35 50%, #0d4a40 100%);
+  border-color: rgba(16, 185, 129, 0.4);
   color: #6ee7b7;
+  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
 }
 
 .welcome-btn-opencode:hover {
-  background: linear-gradient(135deg, #0d4a40 0%, #116a58 100%);
-  box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
+  background: linear-gradient(135deg, #0d4a40 0%, #116a58 50%, #15856e 100%);
+  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3), 0 0 40px rgba(16, 185, 129, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.08);
+  border-color: rgba(52, 211, 153, 0.5);
   color: #a7f3d0;
+  transform: translateY(-1px);
 }
 
 .welcome-btn-tunnel {
-  background: linear-gradient(135deg, #2a1a3e 0%, #6d28d9 100%);
-  border-color: #7c3aed;
+  background: linear-gradient(135deg, #221538 0%, #3b1a7a 50%, #6d28d9 100%);
+  border-color: rgba(124, 58, 237, 0.4);
   color: #ddd6fe;
+  box-shadow: 0 2px 8px rgba(109, 40, 217, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
 }
 
 .welcome-btn-tunnel:hover {
-  background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%);
-  box-shadow: 0 0 12px rgba(124, 58, 237, 0.4);
+  background: linear-gradient(135deg, #4c1d95 0%, #6d28d9 50%, #7c3aed 100%);
+  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.35), 0 0 40px rgba(124, 58, 237, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  border-color: rgba(139, 92, 246, 0.5);
   color: #fff;
+  transform: translateY(-1px);
 }
 
 .welcome-btn-tunnel.active {
-  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
-  border-color: #34d399;
+  background: linear-gradient(135deg, #047857 0%, #059669 50%, #10b981 100%);
+  border-color: rgba(52, 211, 153, 0.5);
   color: #ecfdf5;
+  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
 }
 
 .welcome-btn-tunnel.active:hover {
-  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
-  box-shadow: 0 0 12px rgba(52, 211, 153, 0.4);
+  background: linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%);
+  box-shadow: 0 4px 20px rgba(52, 211, 153, 0.35), 0 0 40px rgba(52, 211, 153, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
   color: #fff;
+  transform: translateY(-1px);
 }
 
 .welcome-btn-tunnel.connecting {
-  background: linear-gradient(135deg, #1e1e3a 0%, #4338ca 100%);
-  border-color: #6366f1;
+  background: linear-gradient(135deg, #1e1e3a 0%, #312e81 50%, #4338ca 100%);
+  border-color: rgba(99, 102, 241, 0.4);
   color: #c7d2fe;
   cursor: wait;
 }
@@ -2120,18 +2159,19 @@ body {
   display: flex;
   align-items: center;
   gap: 0.75rem;
-  padding: 0.5rem 0.75rem;
-  background: var(--bg-input);
-  border: 1px solid var(--border);
-  border-radius: 6px;
+  padding: 0.55rem 0.8rem;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 8px;
   cursor: pointer;
-  transition: border-color 0.15s, background 0.15s;
+  transition: all var(--transition-smooth);
   text-align: left;
 }
 
 .history-item:hover {
-  border-color: var(--accent);
-  background: var(--bg-hover);
+  border-color: rgba(59, 130, 246, 0.3);
+  background: rgba(255, 255, 255, 0.06);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }
 
 .history-item-text {
@@ -2179,13 +2219,14 @@ body {
 
 .welcome-hint kbd {
   display: inline-block;
-  padding: 0.15rem 0.4rem;
-  background: var(--bg-input);
-  border: 1px solid var(--border);
-  border-radius: 3px;
+  padding: 0.15rem 0.45rem;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 5px;
   font-family: inherit;
   font-size: 0.75rem;
   color: var(--text-dim);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
 }
 
 .welcome-ralph-link {
@@ -2210,9 +2251,12 @@ body {
   justify-content: space-between;
   position: relative;
   height: var(--toolbar-height);
-  padding: 0 0.5rem;
-  background: var(--bg-card);
-  border-top: 1px solid var(--border);
+  padding: 0 0.75rem;
+  background: var(--glass-bg);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-top: 1px solid var(--glass-border);
+  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.2), 0 -4px 12px rgba(0, 0, 0, 0.1);
   flex-shrink: 0;
   /* contain: style only — layout/paint containment clips the case-settings popover
      that extends above the toolbar (popover uses position:absolute + bottom:100%) */
@@ -2236,12 +2280,14 @@ body {
   font-family: 'SF Mono', Monaco, monospace;
   font-size: 0.6rem;
   color: var(--text-muted);
-  padding: 0.15rem 0.4rem;
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: 3px;
+  padding: 0.2rem 0.5rem;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.04);
+  border-radius: var(--btn-radius);
   cursor: default;
   user-select: none;
-  opacity: 0.7;
+  opacity: 0.8;
+  letter-spacing: 0.02em;
 }
 
 .toolbar-group {
@@ -2254,25 +2300,31 @@ body {
   display: flex;
   align-items: center;
   gap: 0.35rem;
-  padding: 0.4rem 0.75rem;
-  background: var(--bg-input);
-  border: 1px solid var(--border);
-  border-radius: 4px;
+  padding: 0.4rem 0.8rem;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  border-radius: var(--btn-radius);
   color: var(--text-dim);
   font-size: 0.75rem;
   cursor: pointer;
-  transition: all 0.15s;
+  transition: all var(--transition-smooth);
   white-space: nowrap;
 }
 
 .btn-toolbar:hover {
-  background: var(--bg-hover);
+  background: rgba(255, 255, 255, 0.09);
   color: var(--text);
-  border-color: var(--border-light);
+  border-color: rgba(255, 255, 255, 0.12);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+}
+
+.btn-toolbar:active {
+  background: rgba(255, 255, 255, 0.06);
+  transform: translateY(0.5px);
 }
 
 .btn-toolbar.btn-sm {
-  padding: 0.3rem 0.5rem;
+  padding: 0.3rem 0.55rem;
   font-size: 0.7rem;
 }
 
@@ -2293,11 +2345,12 @@ body {
 }
 
 .btn-toolbar.btn-run {
-  border-radius: 4px 0 0 4px;
-  border-right: 1px solid rgba(255,255,255,0.15);
-  font-weight: 500;
-  padding: 0.4rem 0.85rem;
-  gap: 0.4rem;
+  border-radius: var(--btn-radius) 0 0 var(--btn-radius);
+  border-right: 1px solid rgba(255,255,255,0.12);
+  font-weight: 600;
+  padding: 0.45rem 0.9rem;
+  gap: 0.45rem;
+  letter-spacing: 0.01em;
 }
 
 .btn-toolbar.btn-run svg {
@@ -2307,36 +2360,40 @@ body {
 }
 
 .btn-toolbar.btn-run-gear {
-  border-radius: 0 4px 4px 0;
-  padding: 0.4rem 0.4rem;
+  border-radius: 0 var(--btn-radius) var(--btn-radius) 0;
+  padding: 0.45rem 0.45rem;
   min-width: unset;
 }
 
 /* Claude mode colors (default) */
 .btn-toolbar.btn-run.mode-claude,
 .btn-toolbar.btn-run-gear.mode-claude {
-  background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
-  border-color: #3b82f6;
+  background: linear-gradient(135deg, #1a3358 0%, #1e4fb8 50%, #2563eb 100%);
+  border-color: rgba(59, 130, 246, 0.5);
   color: #e0e7ff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
 }
 .btn-toolbar.btn-run.mode-claude:hover,
 .btn-toolbar.btn-run-gear.mode-claude:hover {
-  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
-  box-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
+  background: linear-gradient(135deg, #2454a8 0%, #2d6cf0 50%, #4b8af7 100%);
+  box-shadow: 0 0 16px rgba(59, 130, 246, 0.4), 0 2px 8px rgba(59, 130, 246, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  border-color: rgba(96, 165, 250, 0.6);
   color: #fff;
 }
 
 /* OpenCode mode colors */
 .btn-toolbar.btn-run.mode-opencode,
 .btn-toolbar.btn-run-gear.mode-opencode {
-  background: linear-gradient(135deg, #0a2e2a 0%, #0d4a40 100%);
-  border-color: #10b981;
+  background: linear-gradient(135deg, #0a2e2a 0%, #0b3d35 50%, #0d4a40 100%);
+  border-color: rgba(16, 185, 129, 0.5);
   color: #6ee7b7;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
 }
 .btn-toolbar.btn-run.mode-opencode:hover,
 .btn-toolbar.btn-run-gear.mode-opencode:hover {
-  background: linear-gradient(135deg, #0d4a40 0%, #116a58 100%);
-  box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
+  background: linear-gradient(135deg, #0d4a40 0%, #116a58 50%, #15856e 100%);
+  box-shadow: 0 0 12px rgba(16, 185, 129, 0.35), 0 2px 8px rgba(16, 185, 129, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
+  border-color: rgba(52, 211, 153, 0.6);
   color: #a7f3d0;
 }
 
@@ -2346,15 +2403,17 @@ body {
   position: absolute;
   bottom: 100%;
   left: 0;
-  margin-bottom: 4px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: 6px;
+  margin-bottom: 6px;
+  background: rgba(22, 22, 28, 0.95);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 10px;
   padding: 4px;
   z-index: 1000;
-  min-width: 180px;
+  min-width: 190px;
   max-width: 300px;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
 }
 .run-mode-menu.active {
   display: flex;
@@ -2365,20 +2424,21 @@ body {
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 6px 10px;
+  padding: 7px 12px;
   background: none;
   border: none;
-  border-radius: 4px;
-  color: var(--text-primary);
+  border-radius: var(--btn-radius);
+  color: var(--text);
   cursor: pointer;
   font-size: 0.8rem;
   white-space: nowrap;
+  transition: background var(--transition-smooth);
 }
 .run-mode-option:hover {
-  background: var(--bg-hover);
+  background: rgba(255, 255, 255, 0.07);
 }
 .run-mode-option.selected {
-  background: var(--bg-hover);
+  background: rgba(255, 255, 255, 0.08);
   font-weight: 600;
 }
 .run-mode-dot {
@@ -2426,16 +2486,18 @@ body {
 
 /* Shell Button - Special styling */
 .btn-toolbar.btn-shell {
-  background: linear-gradient(135deg, #1a2e1a 0%, #234023 100%);
-  border-color: #2d5a2d;
+  background: linear-gradient(135deg, #1a2e1a 0%, #1e3a1e 50%, #234023 100%);
+  border-color: rgba(45, 90, 45, 0.6);
   color: #8fbc8f;
-  font-weight: 500;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
 }
 
 .btn-toolbar.btn-shell:hover {
-  background: linear-gradient(135deg, #234023 0%, #2d5a2d 100%);
-  border-color: #3d7a3d;
-  box-shadow: 0 0 8px rgba(34, 139, 34, 0.4);
+  background: linear-gradient(135deg, #234023 0%, #2d5a2d 50%, #357035 100%);
+  border-color: rgba(61, 122, 61, 0.7);
+  box-shadow: 0 0 12px rgba(34, 139, 34, 0.3), 0 2px 8px rgba(34, 139, 34, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
   color: #a8d8a8;
 }
 
@@ -2444,16 +2506,17 @@ body {
 /* Stop button - hidden on desktop, shown on mobile */
 .btn-toolbar.btn-stop {
   display: none;
-  background: linear-gradient(135deg, #5a1a1a 0%, #7f1d1d 100%);
-  border-color: #dc2626;
+  background: linear-gradient(135deg, #4a1515 0%, #5a1a1a 50%, #7f1d1d 100%);
+  border-color: rgba(220, 38, 38, 0.5);
   color: #fca5a5;
-  font-weight: 500;
+  font-weight: 600;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
 }
 
 .btn-toolbar.btn-stop:hover {
-  background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
-  border-color: #ef4444;
-  box-shadow: 0 0 8px rgba(220, 38, 38, 0.4);
+  background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 50%, #b91c1c 100%);
+  border-color: rgba(239, 68, 68, 0.6);
+  box-shadow: 0 0 12px rgba(220, 38, 38, 0.35), 0 2px 8px rgba(220, 38, 38, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
   color: #fff;
 }
 
@@ -2527,24 +2590,27 @@ body {
 }
 
 .btn-toolbar.btn-success {
-  background: var(--green);
-  border-color: var(--green);
+  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
+  border-color: rgba(34, 197, 94, 0.5);
   color: white;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
 .btn-toolbar.btn-success:hover {
-  background: #16a34a;
+  background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
+  box-shadow: 0 0 10px rgba(34, 197, 94, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
 .btn-toolbar.btn-danger {
   color: var(--red);
-  border-color: rgba(239, 68, 68, 0.3);
+  border-color: rgba(239, 68, 68, 0.2);
 }
 
 .btn-toolbar.btn-danger:hover {
-  background: var(--red);
+  background: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%);
   color: white;
-  border-color: var(--red);
+  border-color: rgba(239, 68, 68, 0.5);
+  box-shadow: 0 0 10px rgba(239, 68, 68, 0.25);
 }
 
 /* Voice Input Button — desktop only (mobile uses .btn-voice-mobile) */
@@ -2768,16 +2834,16 @@ body {
   width: 24px;
   height: 24px;
   background: transparent;
-  border: 1px solid var(--border);
-  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  border-radius: var(--btn-radius);
   color: var(--text-dim);
   font-size: 0.7rem;
   cursor: pointer;
-  transition: all 0.15s;
+  transition: all var(--transition-smooth);
 }
 
 .btn-icon-only:hover {
-  background: var(--bg-hover);
+  background: rgba(255, 255, 255, 0.07);
   color: var(--text);
 }
 
@@ -2789,29 +2855,32 @@ body {
 }
 
 .toolbar-select {
-  padding: 0.4rem 1.5rem 0.4rem 0.5rem;
-  background: var(--bg-input);
-  border: 1px solid var(--border);
-  border-radius: 4px 0 0 4px;
+  padding: 0.4rem 1.5rem 0.4rem 0.6rem;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  border-radius: var(--btn-radius) 0 0 var(--btn-radius);
   color: var(--text-dim);
   font-size: 0.75rem;
   cursor: pointer;
   appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238b8b97' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 0.4rem center;
   width: fit-content;
   min-width: unset;
   max-width: unset;
+  transition: all var(--transition-smooth);
 }
 
 .toolbar-select:hover {
-  border-color: var(--border-light);
+  border-color: rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.07);
 }
 
 .toolbar-select:focus {
   outline: none;
   border-color: var(--accent);
+  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
 }
 
 .btn-case-add {
@@ -2820,21 +2889,22 @@ body {
   justify-content: center;
   width: 28px;
   height: 28px;
-  background: var(--bg-input);
-  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.07);
   border-left: none;
   border-radius: 0;
   color: var(--green);
   font-size: 1.1rem;
   font-weight: 500;
   cursor: pointer;
-  transition: all 0.15s;
+  transition: all var(--transition-smooth);
 }
 
 .btn-case-add:hover {
   background: var(--green);
   color: white;
   border-color: var(--green);
+  box-shadow: 0 0 8px rgba(34, 197, 94, 0.3);
 }
 
 .btn-case-settings {
@@ -2843,14 +2913,14 @@ body {
   justify-content: center;
   width: 28px;
   height: 28px;
-  background: var(--bg-input);
-  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.07);
   border-left: none;
-  border-radius: 0 4px 4px 0;
+  border-radius: 0 var(--btn-radius) var(--btn-radius) 0;
   color: var(--text-dim);
   font-size: 1rem;
   cursor: pointer;
-  transition: all 0.15s;
+  transition: all var(--transition-smooth);
 }
 
 .btn-case-settings:hover {
@@ -2863,14 +2933,16 @@ body {
   position: absolute;
   bottom: 100%;
   right: 0;
-  margin-bottom: 4px;
-  background: var(--bg-panel);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 0.5rem 0.6rem;
+  margin-bottom: 6px;
+  background: rgba(22, 22, 28, 0.95);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 10px;
+  padding: 0.6rem 0.7rem;
   width: 220px;
   z-index: 1000;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
 }
 
 .case-settings-popover.hidden {
@@ -2897,9 +2969,9 @@ body {
 .tab-count-group {
   display: flex;
   align-items: center;
-  background: var(--bg-input);
-  border: 1px solid var(--border);
-  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  border-radius: var(--btn-radius);
   overflow: hidden;
   margin: 0 0.25rem;
 }
@@ -2916,11 +2988,11 @@ body {
   font-size: 0.85rem;
   font-weight: 500;
   cursor: pointer;
-  transition: all 0.15s;
+  transition: all var(--transition-smooth);
 }
 
 .tab-count-btn:hover {
-  background: var(--bg-hover);
+  background: rgba(255, 255, 255, 0.08);
   color: var(--accent-hover);
 }
 
@@ -3063,12 +3135,13 @@ body {
 .form-select {
   width: 100%;
   padding: 0.5rem 0.75rem;
-  background: var(--bg-input);
-  border: 1px solid var(--border);
-  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: var(--btn-radius);
   color: var(--text);
   font-size: 0.8rem;
   font-family: inherit;
+  transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth);
 }
 
 .form-row input:focus,
@@ -3076,6 +3149,7 @@ body {
 .form-select:focus {
   outline: none;
   border-color: var(--accent);
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
 }
 
 .form-col {
@@ -3212,9 +3286,9 @@ body {
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: var(--bg-input);
-  border: 1px solid var(--border);
-  transition: 0.2s;
+  background-color: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   border-radius: 20px;
 }
 
@@ -3287,11 +3361,12 @@ body {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0.4rem 0.6rem;
-  background: var(--bg-input);
-  border: 1px solid var(--border);
-  border-radius: 4px;
+  padding: 0.45rem 0.7rem;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: var(--btn-radius);
   font-size: 0.75rem;
+  transition: background var(--transition-smooth);
 }
 
 .settings-item-label {
@@ -3464,18 +3539,21 @@ body {
 .modal-backdrop {
   position: absolute;
   inset: 0;
-  background: rgba(0, 0, 0, 0.7);
-  backdrop-filter: blur(2px);
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
 }
 
 .modal-content {
   position: relative;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: 8px;
+  background: rgba(19, 19, 22, 0.95);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 12px;
   width: 90%;
   max-width: 400px;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3);
   /* Performance: isolate modal paint operations */
   contain: layout style paint;
 }
@@ -4250,13 +4328,13 @@ body {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 1rem;
-  border-bottom: 1px solid var(--border);
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
 }
 
 .modal-header h3 {
   font-size: 0.95rem;
-  font-weight: 500;
+  font-weight: 600;
 }
 
 .modal-header-actions {
@@ -4299,11 +4377,12 @@ body {
 
 kbd {
   display: inline-block;
-  padding: 0.15rem 0.4rem;
-  background: var(--bg-input);
-  border: 1px solid var(--border);
-  border-radius: 3px;
+  padding: 0.15rem 0.45rem;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 5px;
   font-family: 'SF Mono', Monaco, monospace;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
   font-size: 0.7rem;
   color: var(--text);
 }
@@ -5141,11 +5220,13 @@ kbd {
   width: 380px;
   max-width: calc(100vw - 1rem);
   max-height: 80vh;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
+  background: rgba(19, 19, 22, 0.95);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.07);
   border-bottom: none;
-  border-radius: 8px 8px 0 0;
-  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
+  border-radius: 10px 10px 0 0;
+  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4), 0 -2px 8px rgba(0, 0, 0, 0.2);
   z-index: 100;
   transform: translateY(100%);
   transition: transform 0.2s ease, width 0.2s ease;
@@ -5316,10 +5397,12 @@ kbd {
   width: 500px;
   max-width: calc(100vw - 1rem);
   max-height: 50vh;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
+  background: rgba(19, 19, 22, 0.95);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.07);
   border-bottom: none;
-  border-radius: 8px 8px 0 0;
+  border-radius: 10px 10px 0 0;
   z-index: 91; /* Above monitor panel */
   transform: translateY(calc(100% - 36px)); /* Collapsed by default, show header */
   transition: transform 0.2s ease, width 0.2s ease;
@@ -6035,10 +6118,12 @@ kbd {
   height: 350px;
   min-width: 300px;
   min-height: 200px;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  box-shadow: var(--shadow-lg);
+  background: rgba(19, 19, 22, 0.95);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  border-radius: 12px;
+  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.2);
   z-index: 1000;
   display: none;
   flex-direction: column;
@@ -6185,10 +6270,12 @@ kbd {
   max-height: 600px;
   min-width: 200px;
   min-height: 300px;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+  background: rgba(19, 19, 22, 0.95);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
   z-index: 100;
   display: none;
   flex-direction: column;
@@ -6370,8 +6457,9 @@ kbd {
 .file-preview-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.7);
-  backdrop-filter: blur(2px);
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
   z-index: 2000;
   display: none;
   align-items: center;
@@ -6387,10 +6475,12 @@ kbd {
   max-width: 900px;
   height: 80vh;
   max-height: 700px;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+  background: rgba(19, 19, 22, 0.95);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 12px;
+  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3);
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -7571,8 +7661,10 @@ kbd {
    ═══════════════════════════════════════════════════════════════ */
 
 .orchestrator-panel {
-  background: var(--bg-card);
-  border-bottom: 1px solid var(--border);
+  background: var(--glass-bg);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border-bottom: 1px solid var(--glass-border);
   font-size: 0.75rem;
   flex-shrink: 0;
   overflow: hidden;