codex-lens 0.1.13 → 0.1.15

package/src/global.css

@@ -1,20 +1,24 @@
-@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700|Fira+Sans:wght@300;400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');
 
 :root {
-  --bg-primary: #0F172A;
-  --bg-secondary: #1E293B;
-  --bg-tertiary: #334155;
+  --bg-primary: #000000;
+  --bg-secondary: #0A0A0A;
+  --bg-tertiary: #141414;
+  --bg-elevated: #1A1A1A;
+  --bg-surface: #0F0F0F;
   --text-primary: #F8FAFC;
   --text-secondary: #94A3B8;
   --text-muted: #64748B;
-  --border-color: #475569;
+  --border-color: rgba(148, 163, 184, 0.15);
+  --border-glow: rgba(34, 197, 94, 0.3);
   --accent-color: #22C55E;
   --accent-hover: #16A34A;
-  --accent-glow: rgba(34, 197, 94, 0.3);
-  --diff-add-bg: rgba(34, 197, 94, 0.15);
+  --accent-glow: rgba(34, 197, 94, 0.4);
+  --accent-soft: rgba(34, 197, 94, 0.1);
+  --diff-add-bg: rgba(34, 197, 94, 0.12);
   --diff-add-text: #4ADE80;
   --diff-add-border: #22C55E;
-  --diff-remove-bg: rgba(239, 68, 68, 0.15);
+  --diff-remove-bg: rgba(239, 68, 68, 0.12);
   --diff-remove-text: #F87171;
   --diff-remove-border: #EF4444;
   --danger-color: #EF4444;
@@ -22,18 +26,28 @@
   --success-color: #22C55E;
   --success-hover: #16A34A;
   --warning-color: #F59E0B;
-  --font-family: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  --font-mono: 'Fira Code', 'SF Mono', 'Consolas', 'Monaco', monospace;
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
-  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
-  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
-  --shadow-glow: 0 0 20px var(--accent-glow);
-  --radius-sm: 4px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
-  --transition-fast: 150ms ease;
+  --info-color: #3B82F6;
+  --font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', monospace;
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
+  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
+  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
+  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5);
+  --shadow-glow: 0 0 24px var(--accent-glow);
+  --shadow-glow-sm: 0 0 12px var(--accent-glow);
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+  --radius-xl: 20px;
+  --transition-fast: 120ms ease;
   --transition-normal: 200ms ease;
   --transition-slow: 300ms ease;
+  --blur-sm: 8px;
+  --blur-md: 16px;
+  --blur-lg: 24px;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -58,7 +72,7 @@ html, body, #root {
 
 body {
   font-family: var(--font-family);
-  background-color: var(--bg-primary);
+  background: var(--bg-primary);
   color: var(--text-primary);
   font-size: 14px;
   line-height: 1.6;
@@ -68,57 +82,151 @@ body {
 
 .app-container {
   display: flex;
+  flex-direction: column;
   height: 100vh;
   width: 100vw;
+  background: var(--bg-primary);
 }
 
-.panel {
+.top-bar {
   display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background: var(--bg-secondary);
-  border-right: 1px solid var(--border-color);
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 20px;
+  background: linear-gradient(180deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.85) 100%);
+  backdrop-filter: blur(var(--blur-md));
+  border-bottom: 1px solid var(--border-color);
+  min-height: 52px;
+  position: relative;
+  z-index: 100;
 }
 
-.panel:last-child {
-  border-right: none;
+.top-bar::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
+  opacity: 0.3;
 }
 
-.panel-header {
-  padding: 12px 16px;
-  background: linear-gradient(180deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
-  border-bottom: 1px solid var(--border-color);
+.top-bar-left,
+.top-bar-center,
+.top-bar-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.top-bar-left {
+  width: 260px;
+}
+
+.top-bar-center {
+  flex: 1;
+  justify-content: center;
+}
+
+.top-bar-right {
+  width: 40%;
+  justify-content: flex-end;
+}
+
+.top-bar-title {
+  font-family: var(--font-display);
   font-weight: 600;
-  font-size: 11px;
+  font-size: 13px;
   text-transform: uppercase;
-  letter-spacing: 0.5px;
+  letter-spacing: 1px;
   color: var(--text-secondary);
   display: flex;
   align-items: center;
   gap: 8px;
 }
 
+.top-bar-title::before {
+  content: '';
+  display: inline-block;
+  width: 3px;
+  height: 14px;
+  background: var(--accent-color);
+  border-radius: 2px;
+}
+
+.main-content {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  gap: 1px;
+  background: var(--border-color);
+}
+
+.panel {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: linear-gradient(180deg, var(--bg-secondary) 0%, rgba(30, 41, 59, 0.95) 100%);
+}
+
+.left-panel {
+  width: 260px;
+  flex-shrink: 0;
+}
+
+.middle-panel {
+  flex: 1;
+  min-width: 300px;
+}
+
+.right-panel {
+  width: 40%;
+  min-width: 300px;
+  max-width: 60%;
+}
+
 .panel-content {
   flex: 1;
   overflow: auto;
+  padding: 8px;
 }
 
 .file-tree {
-  padding: 8px;
+  padding: 4px;
 }
 
 .file-item {
-  padding: 6px 12px;
+  padding: 8px 12px;
   cursor: pointer;
   border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
-  gap: 8px;
-  transition: background var(--transition-fast), transform var(--transition-fast);
+  gap: 10px;
+  transition: all var(--transition-fast);
+  position: relative;
+  margin: 2px 0;
+}
+
+.file-item::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 0;
+  background: var(--accent-color);
+  border-radius: 0 2px 2px 0;
+  transition: height var(--transition-fast);
 }
 
 .file-item:hover {
-  background: var(--bg-tertiary);
+  background: rgba(148, 163, 184, 0.08);
+}
+
+.file-item:hover::before {
+  height: 60%;
 }
 
 .file-item:active {
@@ -126,18 +234,22 @@ body {
 }
 
 .file-item.active {
-  background: var(--accent-color);
+  background: var(--accent-soft);
   color: var(--text-primary);
-  box-shadow: var(--shadow-glow);
+}
+
+.file-item.active::before {
+  height: 70%;
 }
 
 .file-icon {
-  width: 16px;
-  height: 16px;
+  width: 18px;
+  height: 18px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
+  opacity: 0.9;
 }
 
 .file-name {
@@ -145,15 +257,17 @@ body {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  font-size: 13px;
 }
 
 .diff-line {
   font-family: var(--font-mono);
   font-size: 13px;
-  padding: 2px 16px;
+  padding: 3px 16px 3px 20px;
   white-space: pre;
   border-left: 3px solid transparent;
   transition: background var(--transition-fast);
+  position: relative;
 }
 
 .diff-line.added {
@@ -170,10 +284,11 @@ body {
 
 .diff-line::before {
   display: inline-block;
-  width: 20px;
-  margin-right: 8px;
+  width: 16px;
+  margin-left: -16px;
   text-align: center;
   font-weight: 600;
+  font-size: 12px;
 }
 
 .diff-line.added::before {
@@ -186,194 +301,17 @@ body {
   color: var(--diff-remove-text);
 }
 
-.chat-message {
-  padding: 12px 16px;
-  margin: 8px 12px;
-  border-radius: var(--radius-lg);
-  max-width: 85%;
-  line-height: 1.5;
-}
-
-.chat-message.user {
-  background: var(--accent-color);
-  color: white;
-  margin-left: auto;
-  box-shadow: var(--shadow-md);
-}
-
-.chat-message.codex {
-  background: var(--bg-tertiary);
-  color: var(--text-primary);
-  border: 1px solid var(--border-color);
-}
-
-.chat-input-container {
-  padding: 12px;
-  border-top: 1px solid var(--border-color);
-  background: var(--bg-secondary);
-}
-
-.chat-input {
-  width: 100%;
-  padding: 10px 14px;
-  background: var(--bg-primary);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-md);
-  color: var(--text-primary);
-  font-family: var(--font-family);
-  font-size: 14px;
-  resize: none;
-  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
-}
-
-.chat-input:focus {
-  outline: none;
-  border-color: var(--accent-color);
-  box-shadow: var(--shadow-glow);
-}
-
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: var(--bg-primary);
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--border-color);
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--text-muted);
-}
-
-.ws-status {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  margin-left: 8px;
-  transition: background var(--transition-normal), box-shadow var(--transition-normal);
-}
-
-.ws-status.connected {
-  background: var(--success-color);
-  box-shadow: 0 0 8px var(--success-color);
-}
-
-.ws-status.disconnected {
-  background: var(--danger-color);
-  box-shadow: 0 0 8px var(--danger-color);
-}
-
-.version-info {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-left: auto;
-}
-
-.version-number {
-  font-size: 11px;
-  color: var(--text-muted);
-  font-weight: 500;
-  font-family: var(--font-mono);
-}
-
-.update-badge {
-  font-size: 10px;
-  padding: 3px 8px;
-  background: var(--warning-color);
-  color: var(--bg-primary);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  font-weight: 600;
-  transition: background var(--transition-fast), transform var(--transition-fast);
-}
-
-.update-badge:hover {
-  background: #FBBF24;
-  transform: translateY(-1px);
-}
-
-.terminal-wrapper {
-  flex: 1;
-  overflow: hidden;
-  min-height: 0;
-}
-
-.left-panel {
-  width: 260px;
-  flex-shrink: 0;
-}
-
-.middle-panel {
-  flex: 1;
-  min-width: 300px;
-}
-
-.right-panel {
-  width: 40%;
-  min-width: 300px;
-  max-width: 60%;
-}
-
-.section {
-  margin-bottom: 16px;
-}
-
-.section-title {
-  padding: 12px 16px 8px;
-  font-size: 10px;
-  font-weight: 600;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.empty-state {
-  padding: 32px;
-  text-align: center;
-  color: var(--text-muted);
-  font-size: 13px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-}
-
-.empty-state::before {
-  content: '📄';
-  font-size: 32px;
-  opacity: 0.5;
-}
-
-.code-panel {
-  font-family: var(--font-mono);
-}
-
-.code-content {
-  padding: 16px;
-  white-space: pre-wrap;
-  word-break: break-all;
-  line-height: 1.7;
-}
-
-.diff-container {
-  font-family: var(--font-mono);
-  font-size: 13px;
-  padding: 8px 0;
-}
-
 .tab-bar {
   display: flex;
-  background: var(--bg-primary);
+  background: rgba(15, 23, 42, 0.6);
   border-bottom: 1px solid var(--border-color);
   overflow-x: auto;
   min-height: 40px;
+  scrollbar-width: none;
+}
+
+.tab-bar::-webkit-scrollbar {
+  display: none;
 }
 
 .tab {
@@ -381,25 +319,35 @@ body {
   align-items: center;
   gap: 8px;
   padding: 10px 16px;
-  background: var(--bg-secondary);
+  background: transparent;
   border-right: 1px solid var(--border-color);
   cursor: pointer;
   min-width: 100px;
-  max-width: 200px;
+  max-width: 180px;
   font-size: 13px;
-  color: var(--text-secondary);
-  transition: background var(--transition-fast), color var(--transition-fast);
+  color: var(--text-muted);
+  transition: all var(--transition-fast);
+  position: relative;
 }
 
 .tab:hover {
-  background: var(--bg-tertiary);
-  color: var(--text-primary);
+  background: rgba(148, 163, 184, 0.05);
+  color: var(--text-secondary);
 }
 
 .tab.active {
-  background: var(--bg-primary);
+  background: var(--bg-secondary);
   color: var(--text-primary);
-  border-bottom: 2px solid var(--accent-color);
+}
+
+.tab.active::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: var(--accent-color);
 }
 
 .tab-name {
@@ -413,302 +361,282 @@ body {
   background: none;
   border: none;
   color: var(--text-muted);
-  font-size: 14px;
+  font-size: 16px;
   cursor: pointer;
-  padding: 2px 4px;
-  border-radius: var(--radius-sm);
+  padding: 2px 6px;
+  border-radius: var(--radius-xs);
   line-height: 1;
-  transition: background var(--transition-fast), color var(--transition-fast);
+  transition: all var(--transition-fast);
+  opacity: 0.6;
 }
 
 .tab-close:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: var(--text-primary);
+  background: rgba(239, 68, 68, 0.2);
+  color: var(--danger-color);
+  opacity: 1;
 }
 
 .context-menu {
   position: fixed;
-  background: var(--bg-tertiary);
+  background: linear-gradient(180deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
-  padding: 4px 0;
+  padding: 6px;
   min-width: 160px;
   box-shadow: var(--shadow-lg);
   z-index: 1000;
   animation: contextMenuIn 0.15s ease;
+  backdrop-filter: blur(var(--blur-sm));
 }
 
 @keyframes contextMenuIn {
   from {
     opacity: 0;
-    transform: scale(0.95);
+    transform: scale(0.95) translateY(-4px);
   }
   to {
     opacity: 1;
-    transform: scale(1);
+    transform: scale(1) translateY(0);
   }
 }
 
 .context-menu-item {
-  padding: 10px 16px;
+  padding: 10px 14px;
   cursor: pointer;
   font-size: 13px;
   color: var(--text-primary);
-  transition: background var(--transition-fast), color var(--transition-fast);
+  border-radius: var(--radius-sm);
+  transition: all var(--transition-fast);
 }
 
 .context-menu-item:hover {
-  background: var(--accent-color);
-  color: white;
+  background: var(--accent-soft);
+  color: var(--accent-color);
 }
 
 .file-context-menu {
   position: fixed;
-  background: var(--bg-tertiary);
+  background: linear-gradient(180deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
-  padding: 4px 0;
-  min-width: 180px;
+  padding: 6px;
+  min-width: 200px;
   box-shadow: var(--shadow-lg);
   z-index: 1000;
   animation: contextMenuIn 0.15s ease;
+  backdrop-filter: blur(var(--blur-sm));
 }
 
-.task-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 16px;
-  background: linear-gradient(180deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
-  border-bottom: 1px solid var(--border-color);
-  min-height: 48px;
-}
-
-.task-status {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-size: 13px;
-  font-weight: 500;
-}
-
-.task-status.idle {
-  color: var(--text-muted);
-}
-
-.task-status.running {
-  color: var(--accent-color);
-}
-
-.task-status::before {
-  content: '';
+.ws-status {
   display: inline-block;
   width: 8px;
   height: 8px;
   border-radius: 50%;
+  margin-left: 8px;
+  transition: all var(--transition-normal);
 }
 
-.task-status.idle::before {
-  background: var(--text-muted);
+.ws-status.connected {
+  background: var(--success-color);
+  box-shadow: 0 0 8px var(--success-color);
+  animation: pulse 2s infinite;
 }
 
-.task-status.running::before {
-  background: var(--accent-color);
-  box-shadow: 0 0 8px var(--accent-color);
-  animation: pulse 1.5s infinite;
+.ws-status.disconnected {
+  background: var(--danger-color);
+  box-shadow: 0 0 8px var(--danger-color);
 }
 
 @keyframes pulse {
   0%, 100% { 
     opacity: 1; 
-    box-shadow: 0 0 8px var(--accent-color);
+    box-shadow: 0 0 8px var(--success-color);
   }
   50% { 
-    opacity: 0.6; 
-    box-shadow: 0 0 4px var(--accent-color);
+    opacity: 0.7; 
+    box-shadow: 0 0 4px var(--success-color);
   }
 }
 
-.task-buttons {
+.version-info {
   display: flex;
-  gap: 8px;
+  align-items: center;
+  gap: 10px;
 }
 
-.task-btn {
-  padding: 8px 16px;
-  border: none;
+.version-number {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-weight: 500;
+  font-family: var(--font-mono);
+  padding: 3px 8px;
+  background: rgba(148, 163, 184, 0.1);
+  border-radius: var(--radius-xs);
+}
+
+.update-badge {
+  font-size: 10px;
+  padding: 4px 10px;
+  background: linear-gradient(135deg, var(--warning-color) 0%, #FBBF24 100%);
+  color: var(--bg-primary);
   border-radius: var(--radius-sm);
-  font-size: 12px;
-  font-weight: 600;
   cursor: pointer;
-  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
-  font-family: var(--font-family);
+  font-weight: 600;
+  transition: all var(--transition-fast);
 }
 
-.task-btn:hover {
+.update-badge:hover {
   transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
 }
 
-.task-btn:active {
-  transform: translateY(0);
-}
-
-.task-btn-start {
-  background: var(--accent-color);
-  color: white;
-  box-shadow: var(--shadow-sm);
+.terminal-wrapper {
+  flex: 1;
+  overflow: hidden;
+  min-height: 0;
 }
 
-.task-btn-start:hover {
-  background: var(--accent-hover);
-  box-shadow: var(--shadow-glow);
+.section {
+  margin-bottom: 8px;
 }
 
-.task-btn-start:disabled {
-  background: var(--bg-tertiary);
+.section-title {
+  padding: 10px 12px 6px;
+  font-size: 10px;
+  font-weight: 600;
   color: var(--text-muted);
-  cursor: not-allowed;
-  box-shadow: none;
-}
-
-.task-btn-start:disabled:hover {
-  transform: none;
-}
-
-.task-btn-rollback {
-  background: var(--danger-color);
-  color: white;
-}
-
-.task-btn-rollback:hover {
-  background: var(--danger-hover);
-  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
-}
-
-.task-btn-complete {
-  background: var(--success-color);
-  color: white;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
 }
 
-.task-btn-complete:hover {
-  background: var(--success-hover);
-  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
+.empty-state {
+  padding: 40px 24px;
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 13px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
 }
 
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.7);
-  backdrop-filter: blur(4px);
+.empty-state::before {
+  content: '';
+  width: 48px;
+  height: 48px;
+  background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-elevated) 100%);
+  border-radius: var(--radius-lg);
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 2000;
-  animation: modalOverlayIn 0.2s ease;
 }
 
-@keyframes modalOverlayIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
+.code-panel {
+  font-family: var(--font-mono);
 }
 
-.modal-content {
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-lg);
-  padding: 24px;
-  min-width: 340px;
-  max-width: 420px;
-  box-shadow: var(--shadow-lg);
-  animation: modalContentIn 0.2s ease;
+.code-viewer-codemirror {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
 }
 
-@keyframes modalContentIn {
-  from {
-    opacity: 0;
-    transform: scale(0.95) translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
+.code-viewer-codemirror .cm-editor {
+  height: 100%;
 }
 
-.modal-title {
-  font-size: 18px;
-  font-weight: 600;
-  margin-bottom: 12px;
-  color: var(--text-primary);
+.code-viewer-codemirror .cm-scroller {
+  overflow: auto;
 }
 
-.modal-body {
-  font-size: 14px;
-  color: var(--text-secondary);
-  margin-bottom: 24px;
+.code-content {
+  padding: 16px;
+  white-space: pre-wrap;
+  word-break: break-all;
   line-height: 1.7;
+  font-size: 13px;
 }
 
-.modal-buttons {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
+.diff-container {
+  font-family: var(--font-mono);
+  font-size: 13px;
+  padding: 8px 0;
 }
 
-.modal-btn {
-  padding: 10px 20px;
+.task-btn {
+  padding: 8px 18px;
   border: none;
   border-radius: var(--radius-sm);
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 600;
   cursor: pointer;
-  transition: background var(--transition-fast), transform var(--transition-fast);
+  transition: all var(--transition-fast);
   font-family: var(--font-family);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
 }
 
-.modal-btn:hover {
+.task-btn:hover {
   transform: translateY(-1px);
 }
 
-.modal-btn:active {
+.task-btn:active {
   transform: translateY(0);
 }
 
-.modal-btn-cancel {
-  background: var(--bg-tertiary);
-  color: var(--text-primary);
+.task-btn-clear {
+  background: transparent;
+  color: var(--text-secondary);
   border: 1px solid var(--border-color);
 }
 
-.modal-btn-cancel:hover {
-  background: var(--border-color);
+.task-btn-clear:hover {
+  background: var(--accent-soft);
+  border-color: var(--accent-color);
+  color: var(--accent-color);
+  box-shadow: var(--shadow-glow-sm);
 }
 
-.modal-btn-danger {
-  background: var(--danger-color);
-  color: white;
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
 }
 
-.modal-btn-danger:hover {
-  background: var(--danger-hover);
-  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+::-webkit-scrollbar-track {
+  background: transparent;
 }
 
-@media (max-width: 768px) {
+::-webkit-scrollbar-thumb {
+  background: var(--bg-elevated);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--text-muted);
+}
+
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+@media (max-width: 1024px) {
   .left-panel {
-    width: 200px;
+    width: 220px;
   }
   
   .right-panel {
-    width: 50%;
-    min-width: 200px;
+    width: 45%;
+    min-width: 250px;
+  }
+  
+  .top-bar-left {
+    width: 220px;
   }
 }
 
-@media (max-width: 480px) {
-  .app-container {
+@media (max-width: 768px) {
+  .main-content {
     flex-direction: column;
   }
   
@@ -722,4 +650,24 @@ body {
   .middle-panel {
     min-height: 300px;
   }
+  
+  .top-bar {
+    flex-wrap: wrap;
+    padding: 10px 16px;
+  }
+  
+  .top-bar-left,
+  .top-bar-center,
+  .top-bar-right {
+    width: auto;
+  }
+  
+  .top-bar-center {
+    order: 3;
+    width: 100%;
+    justify-content: flex-start;
+    margin-top: 8px;
+    padding-top: 8px;
+    border-top: 1px solid var(--border-color);
+  }
 }