gh-here 3.1.0 → 3.2.0

package/public/styles.css

@@ -1,4480 +0,0 @@
-:root {
-  /* Elite Dark Theme - Beyond GitHub */
-  --bg-primary: #0a0e14;
-  --bg-secondary: #13171d;
-  --bg-tertiary: #1a1f26;
-  --bg-elevated: #1f252d;
-  --bg-card: #161b22;
-  --border-primary: #2d333b;
-  --border-secondary: #21262d;
-  --border-subtle: #1c2128;
-  --text-primary: #eef2f6;
-  --text-secondary: #9ca3af;
-  --text-tertiary: #6b7280;
-  --text-accent: #f8fafc;
-  --link-color: #60a5fa;
-  --link-hover: #93c5fd;
-  --hover-bg: #1e242b;
-  --hover-bg-strong: #252b33;
-  
-  /* Accent colors for status */
-  --accent-success: #10b981;
-  --accent-warning: #f59e0b;
-  --accent-error: #ef4444;
-  --accent-info: #3b82f6;
-  
-  /* Shadows - Enhanced depth system */
-  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
-  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
-  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
-  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.25);
-  --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.3);
-  --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-  --shadow-glow: 0 0 20px rgba(96, 165, 250, 0.15);
-  
-  /* Transitions - Refined timing */
-  --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-  
-  /* Border radius - More generous */
-  --radius-xs: 3px;
-  --radius-sm: 6px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
-  --radius-xl: 16px;
-  --radius-2xl: 20px;
-  --radius-full: 9999px;
-  
-  /* Spacing scale - More generous */
-  --space-xs: 4px;
-  --space-sm: 8px;
-  --space-md: 16px;
-  --space-lg: 24px;
-  --space-xl: 32px;
-  --space-2xl: 48px;
-  --space-3xl: 64px;
-}
-
-[data-theme="light"] {
-  /* Elite Light Theme - Beyond GitHub */
-  --bg-primary: #ffffff;
-  --bg-secondary: #f8fafc;
-  --bg-tertiary: #f1f5f9;
-  --bg-elevated: #ffffff;
-  --bg-card: #ffffff;
-  --border-primary: #e2e8f0;
-  --border-secondary: #cbd5e1;
-  --border-subtle: #e2e8f0;
-  --text-primary: #0f172a;
-  --text-secondary: #64748b;
-  --text-tertiary: #94a3b8;
-  --text-accent: #020617;
-  --link-color: #2563eb;
-  --link-hover: #1d4ed8;
-  --hover-bg: #f1f5f9;
-  --hover-bg-strong: #e2e8f0;
-  
-  /* Accent colors */
-  --accent-success: #059669;
-  --accent-warning: #d97706;
-  --accent-error: #dc2626;
-  --accent-info: #2563eb;
-  
-  /* Shadows - Softer for light theme */
-  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
-  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
-  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
-  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
-  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
-  --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.15);
-  --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.03);
-  --shadow-glow: 0 0 20px rgba(37, 99, 235, 0.1);
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-html {
-  /* Set background on html to prevent flash during navigation */
-  background-color: var(--bg-primary);
-  color-scheme: dark;
-}
-
-html[data-theme="light"] {
-  background-color: var(--bg-primary);
-  color-scheme: light;
-}
-
-/* View Transitions API animations */
-::view-transition-old(root),
-::view-transition-new(root) {
-  animation-duration: 0.2s;
-}
-
-::view-transition-old(root) {
-  animation-name: fade-out;
-}
-
-::view-transition-new(root) {
-  animation-name: fade-in;
-}
-
-@keyframes fade-out {
-  to {
-    opacity: 0;
-  }
-}
-
-@keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-}
-
-body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-  background-color: var(--bg-primary);
-  color: var(--text-primary);
-  line-height: 1.6;
-  min-height: 100vh;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
-}
-
-/* Smooth content fades for navigation */
-.main-content-wrapper {
-  transition: opacity 160ms ease;
-  will-change: opacity;
-}
-
-/* During navigation transition: fade out and disable clicks to prevent race conditions */
-.main-content-wrapper.navigating {
-  opacity: 0.5;
-  pointer-events: none; /* Prevents clicks during transition - will be removed when navigation completes */
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .main-content-wrapper {
-    transition: none;
-  }
-}
-
-header {
-  background: linear-gradient(180deg, 
-    rgba(19, 23, 29, 0.95) 0%, 
-    rgba(19, 23, 29, 0.85) 100%);
-  border-bottom: 1px solid var(--border-subtle);
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  backdrop-filter: blur(20px) saturate(180%);
-  -webkit-backdrop-filter: blur(20px) saturate(180%);
-  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, var(--shadow-md);
-  transition: all var(--transition-base);
-}
-
-header:hover {
-  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, var(--shadow-lg);
-}
-
-[data-theme="light"] header {
-  background: linear-gradient(180deg, 
-    rgba(248, 250, 252, 0.95) 0%, 
-    rgba(248, 250, 252, 0.85) 100%);
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, var(--shadow-md);
-}
-
-[data-theme="light"] header:hover {
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, var(--shadow-lg);
-}
-
-.header-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 32px;
-  max-width: 100%;
-  gap: var(--space-lg);
-}
-
-.header-left {
-  flex: 0 0 auto;
-}
-
-.header-left h1 {
-  font-size: 22px;
-  font-weight: 700;
-  margin: 0;
-  color: var(--text-primary);
-  letter-spacing: -0.02em;
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-  background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  transition: all var(--transition-base);
-}
-
-.header-left h1::before {
-  content: '$';
-  color: var(--link-color);
-  margin-right: 10px;
-  opacity: 1;
-  font-weight: 500;
-  display: inline-block;
-  transform: scale(1.1);
-  filter: drop-shadow(0 0 4px rgba(96, 165, 250, 0.4));
-}
-
-.header-path {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-left: auto;
-}
-
-/* Elite Canvas Section - Beyond GitHub */
-.repo-canvas {
-  background-color: var(--bg-primary);
-  flex: 1;
-  min-width: 0;
-  position: relative;
-}
-
-.repo-canvas-content {
-  padding: var(--space-2xl) var(--space-3xl);
-  max-width: 1400px;
-  margin: 0 auto;
-  position: relative;
-  z-index: 1;
-}
-
-@media (max-width: 1200px) {
-  .repo-canvas-content {
-    padding: var(--space-xl) var(--space-2xl);
-  }
-}
-
-@media (max-width: 768px) {
-  .repo-canvas-content {
-    padding: var(--space-lg) var(--space-md);
-  }
-}
-
-.breadcrumb-section {
-  font-size: 22px;
-  font-weight: 700;
-  color: var(--text-primary);
-  margin: 0 0 var(--space-lg) 0;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: var(--space-sm);
-  letter-spacing: -0.01em;
-  line-height: 1.4;
-}
-
-.repo-name {
-  font-size: 20px;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin: 0 0 12px 0;
-}
-
-.repo-divider {
-  border: none;
-  border-top: 1px solid var(--border-primary);
-  margin: 0 0 12px 0;
-}
-
-.repo-controls {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 40px;
-  margin-bottom: var(--space-lg);
-  padding: 8px 16px;
-  background: var(--bg-card);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-sm);
-  transition: all var(--transition-base);
-  gap: var(--space-md);
-  overflow: hidden;
-}
-
-.repo-controls-left {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex-shrink: 0;
-  min-width: 0;
-}
-
-.repo-controls-right {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-left: auto;
-  flex-shrink: 1;
-  min-width: 0;
-  max-width: 320px;
-}
-
-.repo-controls:hover {
-  box-shadow: var(--shadow-md);
-  border-color: var(--border-primary);
-  transform: translateY(-1px);
-}
-
-.repo-controls-left:empty {
-  display: none;
-}
-
-.branch-button {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%);
-  border: 1px solid var(--border-primary);
-  border-radius: var(--radius-lg);
-  color: var(--text-primary);
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all var(--transition-base);
-  box-shadow: var(--shadow-sm);
-  position: relative;
-  overflow: hidden;
-}
-
-.branch-button::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
-  transition: left var(--transition-slow);
-}
-
-.branch-button:hover::before {
-  left: 100%;
-}
-
-.branch-button:hover {
-  background: linear-gradient(135deg, var(--hover-bg) 0%, var(--bg-elevated) 100%);
-  border-color: var(--link-color);
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-md), var(--shadow-glow);
-}
-
-.branch-button:active {
-  transform: translateY(0);
-  box-shadow: var(--shadow-sm);
-}
-
-.branch-count,
-.tag-count {
-  color: var(--text-secondary);
-  font-size: 14px;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.octicon-branch {
-  width: 16px;
-  height: 16px;
-  fill: var(--text-secondary);
-}
-
-.octicon-small {
-  width: 14px;
-  height: 14px;
-  fill: var(--text-secondary);
-}
-
-.branch-name {
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-  font-weight: 600;
-  font-size: 12px;
-}
-
-.octicon-chevron {
-  width: 12px;
-  height: 12px;
-  fill: var(--text-secondary);
-}
-
-.search-container {
-  position: relative;
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  min-width: 0;
-}
-
-.search-input {
-  background: linear-gradient(135deg, 
-    var(--bg-card) 0%, 
-    var(--bg-elevated) 100%);
-  border: 1.5px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  padding: 8px 38px 8px 36px;
-  color: var(--text-primary);
-  font-size: 14px;
-  width: 280px;
-  min-width: 280px;
-  flex-shrink: 0;
-  transition: all var(--transition-base);
-  box-shadow: var(--shadow-sm);
-  backdrop-filter: blur(10px);
-  font-weight: 500;
-}
-
-.search-input:hover {
-  border-color: var(--border-primary);
-  background: linear-gradient(135deg, 
-    var(--bg-elevated) 0%, 
-    var(--bg-card) 100%);
-  box-shadow: var(--shadow-md);
-  transform: translateY(-1px);
-}
-
-.search-input:focus {
-  outline: none;
-  border-color: var(--link-color);
-  background: linear-gradient(135deg, 
-    var(--bg-card) 0%, 
-    var(--bg-elevated) 100%);
-  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2), 
-              var(--shadow-md),
-              var(--shadow-glow);
-  transform: translateY(-1px);
-}
-
-[data-theme="light"] .search-input:focus {
-  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15), 
-              var(--shadow-md);
-}
-
-/* Search results overlay - Enhanced */
-.search-results-overlay {
-  position: absolute;
-  top: calc(100% + 10px);
-  left: 0;
-  right: 0;
-  z-index: 1000;
-  min-width: 400px;
-  animation: slideDown 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-@keyframes slideDown {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.search-results-container {
-  background: var(--bg-elevated);
-  border: 1px solid var(--border-primary);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-xl);
-  max-height: 400px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  backdrop-filter: blur(20px);
-  background-color: rgba(28, 33, 40, 0.98);
-}
-
-[data-theme="light"] .search-results-container {
-  background-color: rgba(255, 255, 255, 0.98);
-}
-
-.search-results-header {
-  padding: 10px 16px;
-  border-bottom: 1px solid var(--border-subtle);
-  background: var(--bg-secondary);
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-secondary);
-  letter-spacing: 0.01em;
-}
-
-.search-results-count {
-  color: var(--text-secondary);
-}
-
-.search-results-list {
-  overflow-y: auto;
-  max-height: 350px;
-}
-
-.search-result-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 16px;
-  border-bottom: 1px solid var(--border-subtle);
-  text-decoration: none;
-  color: var(--text-primary);
-  transition: all var(--transition-base);
-  cursor: pointer;
-  position: relative;
-}
-
-.search-result-item::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 3px;
-  background: var(--link-color);
-  opacity: 0;
-  transition: opacity var(--transition-base);
-}
-
-.search-result-item:last-child {
-  border-bottom: none;
-}
-
-.search-result-item:hover {
-  background: linear-gradient(90deg, var(--hover-bg) 0%, transparent 100%);
-  padding-left: 20px;
-}
-
-.search-result-item:hover::before {
-  opacity: 1;
-}
-
-.search-result-item .result-icon {
-  flex-shrink: 0;
-  fill: var(--text-secondary);
-}
-
-.search-result-item .result-icon.file-icon {
-  opacity: 0.7;
-}
-
-.search-result-content {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.search-result-path {
-  font-size: 13px;
-  color: var(--text-primary);
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.search-highlight {
-  background: linear-gradient(120deg, rgba(255, 200, 50, 0.35) 0%, rgba(255, 200, 50, 0.25) 100%);
-  color: var(--text-accent);
-  border-radius: 3px;
-  padding: 1px 3px;
-  font-weight: 600;
-  box-shadow: 0 1px 2px rgba(255, 200, 50, 0.2);
-}
-
-[data-theme="light"] .search-highlight {
-  background: linear-gradient(120deg, rgba(255, 200, 50, 0.45) 0%, rgba(255, 200, 50, 0.35) 100%);
-  box-shadow: 0 1px 2px rgba(255, 200, 50, 0.25);
-}
-
-.search-icon {
-  position: absolute;
-  left: 8px;
-  width: 16px;
-  height: 16px;
-  fill: var(--text-secondary);
-  pointer-events: none;
-}
-
-.search-hotkey {
-  position: absolute;
-  right: 12px;
-  background: linear-gradient(135deg, 
-    var(--bg-elevated) 0%, 
-    var(--bg-tertiary) 100%);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-sm);
-  padding: 2px 6px;
-  font-size: 11px;
-  color: var(--text-secondary);
-  font-family: ui-monospace, SFMono-Regular, monospace;
-  font-weight: 600;
-  box-shadow: var(--shadow-xs);
-  transition: all var(--transition-base);
-}
-
-.search-input:focus ~ .search-hotkey {
-  border-color: var(--link-color);
-  color: var(--link-color);
-  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.2);
-}
-
-/* Elite Buttons - Beyond GitHub */
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 8px 18px;
-  border-radius: var(--radius-lg);
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all var(--transition-base);
-  border: 1px solid;
-  position: relative;
-  overflow: hidden;
-  box-shadow: var(--shadow-sm);
-  letter-spacing: -0.01em;
-  backdrop-filter: blur(10px);
-}
-
-.btn::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 0;
-  height: 0;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.1);
-  transform: translate(-50%, -50%);
-  transition: width 0.4s, height 0.4s;
-}
-
-.btn:hover::before {
-  width: 300px;
-  height: 300px;
-}
-
-.btn-primary {
-  background: linear-gradient(135deg, 
-    var(--bg-elevated) 0%, 
-    var(--bg-card) 100%);
-  border-color: var(--border-primary);
-  color: var(--text-primary);
-}
-
-.btn-primary:hover {
-  background: linear-gradient(135deg, 
-    var(--hover-bg) 0%, 
-    var(--bg-elevated) 100%);
-  border-color: var(--link-color);
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-md), var(--shadow-glow);
-}
-
-.btn-primary:active {
-  transform: translateY(0);
-  box-shadow: var(--shadow-sm);
-}
-
-.btn-outline {
-  background: linear-gradient(135deg, 
-    var(--bg-card) 0%, 
-    var(--bg-elevated) 100%);
-  border-color: var(--border-primary);
-  color: var(--text-primary);
-}
-
-.btn-outline:hover {
-  background: linear-gradient(135deg, 
-    var(--hover-bg) 0%, 
-    var(--bg-elevated) 100%);
-  border-color: var(--link-color);
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-md), var(--shadow-glow);
-}
-
-.btn-success {
-  background: linear-gradient(135deg, 
-    var(--accent-success) 0%, 
-    #10b981 100%);
-  border-color: rgba(255, 255, 255, 0.1);
-  color: #ffffff;
-  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3),
-              0 0 0 1px rgba(16, 185, 129, 0.1);
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-}
-
-.btn-success:hover {
-  background: linear-gradient(135deg, 
-    #10b981 0%, 
-    #34d399 100%);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4),
-              0 0 0 1px rgba(16, 185, 129, 0.2),
-              0 0 20px rgba(16, 185, 129, 0.2);
-}
-
-.btn-success:active {
-  transform: translateY(0);
-  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
-}
-
-.btn-icon,
-.btn-chevron {
-  width: 16px;
-  height: 16px;
-  fill: currentColor;
-}
-
-.theme-toggle,
-.gitignore-toggle,
-.edit-btn {
-  background: linear-gradient(135deg, 
-    var(--bg-card) 0%, 
-    var(--bg-elevated) 100%);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  padding: 8px 14px;
-  cursor: pointer;
-  transition: all var(--transition-base);
-  box-shadow: var(--shadow-sm);
-  color: var(--text-primary);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 36px;
-  min-width: 36px;
-  margin: 0;
-  font-size: 14px;
-  position: relative;
-  overflow: hidden;
-  backdrop-filter: blur(10px);
-}
-
-.theme-toggle:hover,
-.gitignore-toggle:hover,
-.edit-btn:hover {
-  background: linear-gradient(135deg, 
-    var(--hover-bg) 0%, 
-    var(--bg-elevated) 100%);
-  border-color: var(--link-color);
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-md), var(--shadow-glow);
-}
-
-.theme-toggle:active,
-.gitignore-toggle:active,
-.edit-btn:active {
-  background: linear-gradient(135deg, 
-    var(--hover-bg-strong) 0%, 
-    var(--hover-bg) 100%);
-  transform: translateY(0) scale(0.98);
-  box-shadow: var(--shadow-sm);
-}
-
-.gitignore-toggle.showing-ignored {
-  color: var(--link-color);
-  border-color: var(--link-color);
-  background: linear-gradient(135deg, rgba(88, 166, 255, 0.12) 0%, rgba(88, 166, 255, 0.08) 100%);
-  box-shadow: 0 0 0 1px rgba(88, 166, 255, 0.2);
-}
-
-.gitignore-toggle.showing-ignored:hover {
-  background: linear-gradient(135deg, rgba(88, 166, 255, 0.18) 0%, rgba(88, 166, 255, 0.12) 100%);
-  box-shadow: 0 0 0 1px rgba(88, 166, 255, 0.3), var(--shadow-md);
-}
-
-.theme-icon,
-.gitignore-icon,
-.edit-icon {
-  width: 16px;
-  height: 16px;
-  fill: currentColor;
-}
-
-.view-toggle {
-  display: inline-flex;
-  border: 1px solid var(--border-primary);
-  border-radius: var(--radius-md);
-  overflow: hidden;
-  background: var(--bg-primary);
-  box-shadow: var(--shadow-sm);
-  transition: all var(--transition-base);
-}
-
-.view-toggle:hover {
-  box-shadow: var(--shadow-md);
-  border-color: var(--border-secondary);
-}
-
-.view-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 7px 14px;
-  background: transparent;
-  border: none;
-  color: var(--text-secondary);
-  text-decoration: none;
-  font-size: 13px;
-  font-weight: 500;
-  transition: all var(--transition-base);
-  white-space: nowrap;
-  cursor: pointer;
-  position: relative;
-}
-
-.view-btn::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: var(--hover-bg);
-  opacity: 0;
-  transition: opacity var(--transition-base);
-}
-
-.view-btn:hover {
-  color: var(--text-primary);
-}
-
-.view-btn:hover::before {
-  opacity: 1;
-}
-
-.view-btn.active {
-  background: linear-gradient(135deg, var(--link-color) 0%, var(--link-hover) 100%);
-  color: white;
-  box-shadow: 0 2px 4px rgba(88, 166, 255, 0.3);
-}
-
-.view-btn.active::before {
-  display: none;
-}
-
-.view-btn.active:hover {
-  background: linear-gradient(135deg, var(--link-hover) 0%, var(--link-color) 100%);
-  box-shadow: 0 4px 8px rgba(88, 166, 255, 0.4);
-  transform: translateY(-1px);
-}
-
-.view-btn + .view-btn {
-  border-left: 1px solid var(--border-primary);
-}
-
-.view-icon {
-  width: 16px;
-  height: 16px;
-  fill: currentColor;
-  flex-shrink: 0;
-}
-
-.breadcrumb-item {
-  display: inline-flex;
-  align-items: center;
-}
-
-.breadcrumb-item a {
-  color: var(--link-color);
-  text-decoration: none;
-  font-weight: 600;
-  padding: 6px 12px;
-  border-radius: var(--radius-md);
-  transition: all var(--transition-base);
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  position: relative;
-  overflow: hidden;
-}
-
-.breadcrumb-item a::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(135deg, 
-    rgba(96, 165, 250, 0.1) 0%, 
-    rgba(96, 165, 250, 0.05) 100%);
-  opacity: 0;
-  transition: opacity var(--transition-base);
-}
-
-.breadcrumb-item a:hover {
-  text-decoration: none;
-  color: var(--link-hover);
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-sm), var(--shadow-glow);
-}
-
-.breadcrumb-item a:hover::before {
-  opacity: 1;
-}
-
-.breadcrumb-separator {
-  color: var(--text-secondary);
-  margin: 0 4px;
-  opacity: 0.7;
-}
-
-/* File Header - Elite Design */
-.file-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 20px 28px;
-  margin-bottom: var(--space-xl);
-  background: linear-gradient(135deg, 
-    var(--bg-card) 0%, 
-    var(--bg-elevated) 100%);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-xl);
-  gap: var(--space-lg);
-  flex-wrap: wrap;
-  box-shadow: var(--shadow-md);
-  transition: all var(--transition-base);
-  backdrop-filter: blur(10px);
-  position: relative;
-  overflow: visible;
-}
-
-.file-header::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: linear-gradient(90deg, 
-    transparent 0%, 
-    var(--link-color) 50%, 
-    transparent 100%);
-  opacity: 0;
-  transition: opacity var(--transition-base);
-  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
-}
-
-.file-header:hover {
-  box-shadow: var(--shadow-xl);
-  border-color: var(--border-primary);
-  transform: translateY(-2px);
-}
-
-.file-header:hover::before {
-  opacity: 1;
-}
-
-.file-header-main {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.file-path-info {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-}
-
-.file-path-text {
-  color: var(--link-color);
-  font-weight: 500;
-  word-break: break-all;
-}
-
-.file-path-copy-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 5px;
-  background: transparent;
-  border: none;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  color: var(--text-secondary);
-  transition: all var(--transition-base);
-  flex-shrink: 0;
-  opacity: 0.7;
-  width: 24px;
-  height: 24px;
-}
-
-.file-path-copy-btn:hover {
-  background-color: var(--hover-bg);
-  color: var(--link-color);
-  opacity: 1;
-  transform: scale(1.1);
-}
-
-.file-path-copy-btn:active {
-  transform: scale(0.95);
-}
-
-.octicon-copy {
-  fill: currentColor;
-}
-
-.file-stats {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 12px;
-  color: var(--text-secondary);
-}
-
-.file-stat {
-  color: var(--text-secondary);
-}
-
-.file-stat-separator {
-  color: var(--text-secondary);
-  opacity: 0.5;
-}
-
-.file-header-actions {
-  flex-shrink: 0;
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.file-action-group {
-  display: inline-flex;
-  background-color: var(--bg-primary);
-  border: 1px solid var(--border-primary);
-  border-radius: var(--radius-md);
-  overflow: hidden;
-  box-shadow: var(--shadow-sm);
-  transition: all var(--transition-base);
-}
-
-.file-action-group:hover {
-  box-shadow: var(--shadow-md);
-  border-color: var(--border-secondary);
-}
-
-.file-action-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 7px 14px;
-  background: transparent;
-  border: none;
-  color: var(--text-secondary);
-  text-decoration: none;
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all var(--transition-base);
-  white-space: nowrap;
-  gap: 6px;
-  border-right: 1px solid var(--border-primary);
-  position: relative;
-}
-
-.file-action-btn:last-child {
-  border-right: none;
-}
-
-.file-action-btn:hover {
-  background: linear-gradient(180deg, var(--hover-bg) 0%, var(--bg-tertiary) 100%);
-  color: var(--text-primary);
-  transform: translateY(-1px);
-}
-
-.file-action-btn:active {
-  transform: translateY(0);
-  background: var(--hover-bg-strong);
-}
-
-.file-action-btn .file-action-label {
-  color: inherit;
-}
-
-.file-action-icon {
-  fill: currentColor;
-  flex-shrink: 0;
-}
-
-.copy-raw-btn {
-  padding: 6px;
-}
-
-.file-action-btn:first-child {
-  border-radius: 6px 0 0 6px;
-}
-
-.file-action-btn:last-child {
-  border-radius: 0 6px 6px 0;
-}
-
-/* Single button case */
-.file-action-group:has(.file-action-btn:only-child) .file-action-btn {
-  border-radius: 6px;
-  border-right: none;
-}
-
-main {
-  padding: 0;
-  display: flex;
-  min-height: calc(100vh - 57px);
-  background: var(--bg-primary);
-}
-
-/* File Tree Sidebar - Elite Design */
-.file-tree-sidebar {
-  width: 300px;
-  min-width: 300px;
-  max-width: 300px;
-  flex-shrink: 0;
-  border-right: 1px solid var(--border-subtle);
-  overflow-y: auto;
-  overflow-x: hidden;
-  background: linear-gradient(180deg, 
-    var(--bg-secondary) 0%, 
-    var(--bg-primary) 100%);
-  position: sticky;
-  top: 0;
-  height: 100vh;
-  max-height: 100vh;
-  align-self: stretch;
-  transition: all var(--transition-base);
-  display: flex;
-  flex-direction: column;
-  scrollbar-width: thin;
-  scrollbar-color: var(--border-primary) transparent;
-  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
-}
-
-[data-theme="light"] .file-tree-sidebar {
-  background: linear-gradient(180deg, 
-    var(--bg-secondary) 0%, 
-    var(--bg-primary) 100%);
-  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
-}
-
-.file-tree-sidebar::-webkit-scrollbar {
-  width: 6px;
-}
-
-.file-tree-sidebar::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.file-tree-sidebar::-webkit-scrollbar-thumb {
-  background: var(--border-primary);
-  border-radius: 3px;
-}
-
-.file-tree-sidebar::-webkit-scrollbar-thumb:hover {
-  background: var(--text-secondary);
-}
-
-.file-tree-sidebar.hidden {
-  display: none;
-}
-
-.file-tree-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 18px 24px;
-  border-bottom: 1px solid var(--border-subtle);
-  background: linear-gradient(180deg, 
-    rgba(19, 23, 29, 0.95) 0%, 
-    rgba(19, 23, 29, 0.85) 100%);
-  backdrop-filter: blur(10px);
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  font-size: 15px;
-  font-weight: 700;
-  color: var(--text-primary);
-  letter-spacing: -0.01em;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-[data-theme="light"] .file-tree-header {
-  background: linear-gradient(180deg, 
-    rgba(248, 250, 252, 0.95) 0%, 
-    rgba(248, 250, 252, 0.85) 100%);
-}
-
-.files-icon {
-  fill: var(--text-secondary);
-  flex-shrink: 0;
-}
-
-.sidebar-controls {
-  padding: var(--space-lg) var(--space-lg) var(--space-md);
-  border-bottom: 1px solid var(--border-subtle);
-  background: linear-gradient(180deg, 
-    rgba(19, 23, 29, 0.4) 0%, 
-    transparent 100%);
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-md);
-  backdrop-filter: blur(5px);
-}
-
-[data-theme="light"] .sidebar-controls {
-  background: linear-gradient(180deg, 
-    rgba(248, 250, 252, 0.6) 0%, 
-    transparent 100%);
-}
-
-.sidebar-branch {
-  width: 100%;
-  justify-content: flex-start;
-  font-size: 12px;
-}
-
-.btn-sidebar {
-  width: 100%;
-  padding: 5px 12px;
-  background: var(--bg-primary);
-  border: 1px solid var(--border-primary);
-  border-radius: 6px;
-  cursor: pointer;
-  color: var(--text-primary);
-  transition: all 0.15s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 28px;
-  font-size: 14px;
-}
-
-.btn-sidebar:hover {
-  background-color: var(--bg-tertiary);
-  border-color: var(--text-secondary);
-}
-
-.sidebar-search {
-  width: 100%;
-  flex-shrink: 0;
-}
-
-.sidebar-search .search-input {
-  width: 100%;
-  font-size: 12px;
-  padding: 6px 32px 6px 30px;
-  height: 32px;
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-inner);
-  transition: all var(--transition-base);
-  min-width: 0;
-}
-
-/* Search in repo-controls (not sidebar) */
-.repo-controls .search-container:not(.sidebar-search) {
-  flex: 1;
-  min-width: 150px;
-  max-width: 300px;
-}
-
-.repo-controls .search-container:not(.sidebar-search) .search-input {
-  width: 100%;
-}
-
-.sidebar-search .search-input:hover {
-  border-color: var(--border-secondary);
-  background: var(--bg-elevated);
-}
-
-.sidebar-search .search-input:focus {
-  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15), var(--shadow-inner);
-}
-
-.sidebar-search .search-hotkey {
-  font-size: 10px;
-  padding: 2px 5px;
-  border-radius: var(--radius-sm);
-  font-weight: 500;
-  box-shadow: var(--shadow-sm);
-}
-
-.file-tree-container {
-  padding: 8px 0;
-  background: var(--bg-secondary);
-}
-
-.tree-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 14px;
-  margin: 2px 6px;
-  cursor: pointer;
-  font-size: 13px;
-  line-height: 22px;
-  color: var(--text-primary);
-  transition: all var(--transition-base);
-  user-select: none;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
-  border-radius: var(--radius-md);
-  position: relative;
-  font-weight: 500;
-}
-
-.tree-item::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 3px;
-  height: 0;
-  background: linear-gradient(180deg, var(--link-color) 0%, var(--link-hover) 100%);
-  border-radius: 0 3px 3px 0;
-  transition: all var(--transition-base);
-  box-shadow: 0 0 8px rgba(96, 165, 250, 0.4);
-}
-
-.tree-item:hover {
-  background: rgba(96, 165, 250, 0.08);
-  border-left: 2px solid var(--link-color);
-  padding-left: 14px;
-}
-
-.tree-item:hover::before {
-  display: none;
-}
-
-.tree-item.active {
-  background: rgba(96, 165, 250, 0.12);
-  border-left: 2px solid var(--link-color);
-  font-weight: 600;
-  padding-left: 14px;
-}
-
-.tree-item.active::before {
-  height: 85%;
-  opacity: 1;
-  box-shadow: 0 0 12px rgba(96, 165, 250, 0.6);
-}
-
-[data-theme="light"] .tree-item.active {
-  background: linear-gradient(90deg, 
-    rgba(37, 99, 235, 0.1) 0%, 
-    rgba(37, 99, 235, 0.03) 100%);
-  border-color: rgba(37, 99, 235, 0.15);
-}
-
-.tree-toggle {
-  font-size: 10px;
-  color: var(--text-secondary);
-  width: 12px;
-  display: inline-block;
-  text-align: center;
-  flex-shrink: 0;
-}
-
-.tree-spacer {
-  width: 12px;
-  flex-shrink: 0;
-}
-
-.tree-icon {
-  flex-shrink: 0;
-  fill: var(--text-secondary);
-}
-
-.tree-icon.file-icon {
-  fill: var(--text-secondary);
-  opacity: 0.7;
-}
-
-.tree-item .tree-icon:not(.file-icon) {
-  fill: #7dd3fc;
-}
-
-[data-theme="light"] .tree-item .tree-icon:not(.file-icon) {
-  fill: #54adf5;
-}
-
-.tree-label {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-weight: 400;
-  letter-spacing: normal;
-}
-
-.tree-children {
-  transition: none;
-}
-
-/* File tree loading skeleton */
-.tree-skeleton {
-  padding: 8px;
-}
-
-.skeleton-item {
-  height: 28px;
-  background: linear-gradient(
-    90deg,
-    var(--bg-secondary) 0%,
-    var(--hover-bg) 50%,
-    var(--bg-secondary) 100%
-  );
-  background-size: 200% 100%;
-  animation: skeleton-loading 1.5s ease-in-out infinite;
-  border-radius: 4px;
-  margin-bottom: 4px;
-}
-
-.skeleton-indent {
-  margin-left: 20px;
-  width: calc(100% - 20px);
-}
-
-@keyframes skeleton-loading {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
-
-.main-content-wrapper {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  transition: opacity 0.15s ease;
-}
-
-.main-content-wrapper.no-sidebar {
-  width: 100%;
-  max-width: 1280px;
-  margin: 0 auto;
-}
-
-.main-content-wrapper.no-sidebar .repo-canvas-content {
-  max-width: 980px;
-}
-
-.main-content {
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: var(--space-xl) var(--space-2xl);
-  width: 100%;
-}
-
-.directory-actions {
-  display: flex;
-  gap: 8px;
-  margin-bottom: 24px;
-}
-
-.btn-icon {
-  width: 14px;
-  height: 14px;
-  fill: currentColor;
-  margin-right: 6px;
-  vertical-align: text-bottom;
-}
-
-.file-table {
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
-  background: var(--bg-card);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-xl);
-  overflow: hidden;
-  box-shadow: var(--shadow-md);
-  transition: all var(--transition-base);
-  margin-top: 0;
-  backdrop-filter: blur(10px);
-}
-
-.file-table:hover {
-  box-shadow: var(--shadow-xl);
-  border-color: var(--border-primary);
-  transform: translateY(-2px);
-}
-
-.file-table thead {
-  background: linear-gradient(180deg, 
-    rgba(19, 23, 29, 0.6) 0%, 
-    rgba(19, 23, 29, 0.4) 100%);
-  backdrop-filter: blur(10px);
-  position: sticky;
-  top: 0;
-  z-index: 10;
-}
-
-[data-theme="light"] .file-table thead {
-  background: linear-gradient(180deg, 
-    rgba(248, 250, 252, 0.8) 0%, 
-    rgba(248, 250, 252, 0.6) 100%);
-}
-
-/* Base header cell styling */
-.file-table th {
-  padding: 12px 16px;
-  text-align: left;
-  font-weight: 600;
-  font-size: 12px;
-  color: var(--text-secondary);
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-/* Column-specific styles for both th and td */
-.file-table .col-icon {
-  width: 52px;
-  padding-left: 16px;
-  padding-right: 0;
-  text-align: center;
-}
-
-.file-table .col-name {
-  text-align: left;
-}
-
-.file-table .col-size {
-  width: 100px;
-  text-align: right;
-}
-
-.file-table .col-modified {
-  width: 120px;
-  text-align: right;
-  padding-right: 16px;
-}
-
-.file-table tbody tr {
-  border-bottom: 1px solid var(--border-subtle);
-  transition: all var(--transition-base);
-  position: relative;
-}
-
-.file-table tbody tr::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 3px;
-  background: var(--link-color);
-  opacity: 0;
-  transition: opacity var(--transition-base);
-  border-radius: 0 2px 2px 0;
-}
-
-.file-table tbody tr:hover {
-  background: linear-gradient(90deg, 
-    var(--hover-bg) 0%, 
-    rgba(30, 36, 43, 0.5) 50%,
-    transparent 100%);
-  transform: translateX(4px);
-  box-shadow: -4px 0 12px rgba(96, 165, 250, 0.1);
-}
-
-.file-table tbody tr:hover::before {
-  opacity: 1;
-}
-
-[data-theme="light"] .file-table tbody tr:hover {
-  background: linear-gradient(90deg, 
-    var(--hover-bg) 0%, 
-    rgba(241, 245, 249, 0.8) 50%,
-    transparent 100%);
-  box-shadow: -4px 0 12px rgba(37, 99, 235, 0.08);
-}
-
-.file-table tbody tr:last-child {
-  border-bottom: none;
-}
-
-.file-table tbody tr:first-child td {
-  padding-top: 16px;
-}
-
-.file-table tbody tr:last-child td {
-  padding-bottom: 16px;
-}
-
-.file-table td {
-  padding: 10px 16px;
-  font-size: 14px;
-  vertical-align: middle;
-  transition: all var(--transition-base);
-}
-
-/* Icon cell with git status */
-.file-table td.col-icon {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.file-table td.col-icon svg {
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-}
-
-.file-table td.col-size,
-.file-table td.col-modified {
-  white-space: nowrap;
-  color: var(--text-muted);
-}
-
-.octicon-file,
-.octicon-directory,
-.octicon-breadcrumb,
-.octicon-separator,
-.octicon-home,
-.theme-icon,
-.view-icon,
-.edit-icon {
-  width: 16px;
-  height: 16px;
-  fill: currentColor;
-  vertical-align: text-bottom;
-}
-
-/* Brighter, meaningful colors */
-/* Folders: GitHub-style baby blue */
-.octicon-directory {
-  fill: #7dd3fc;
-  color: #7dd3fc;
-}
-[data-theme="dark"] .file-row--added .icon .octicon-directory,
-[data-theme="dark"] .file-row--added .icon .octicon-file { color: #2ea043; fill: #2ea043; }
-[data-theme="dark"] .file-row--deleted .icon .octicon-directory,
-[data-theme="dark"] .file-row--deleted .icon .octicon-file { color: #f85149; fill: #f85149; }
-[data-theme="dark"] .file-row--modified .icon .octicon-directory,
-[data-theme="dark"] .file-row--modified .icon .octicon-file { color: #d29922; fill: #d29922; }
-[data-theme="dark"] .file-row--renamed .icon .octicon-directory,
-[data-theme="dark"] .file-row--renamed .icon .octicon-file { color: #1f6feb; fill: #1f6feb; }
-[data-theme="dark"] .file-row--untracked .icon .octicon-directory,
-[data-theme="dark"] .file-row--untracked .icon .octicon-file { color: #a371f7; fill: #a371f7; }
-[data-theme="dark"] .file-row--mixed .icon .octicon-directory,
-[data-theme="dark"] .file-row--mixed .icon .octicon-file { color: #db6d28; fill: #db6d28; }
-
-[data-theme="light"] .file-row--added .icon .octicon-directory,
-[data-theme="light"] .file-row--added .icon .octicon-file { color: #1a7f37; fill: #1a7f37; }
-[data-theme="light"] .file-row--deleted .icon .octicon-directory,
-[data-theme="light"] .file-row--deleted .icon .octicon-file { color: #cf222e; fill: #cf222e; }
-[data-theme="light"] .file-row--modified .icon .octicon-directory,
-[data-theme="light"] .file-row--modified .icon .octicon-file { color: #bf8700; fill: #bf8700; }
-[data-theme="light"] .file-row--renamed .icon .octicon-directory,
-[data-theme="light"] .file-row--renamed .icon .octicon-file { color: #0969da; fill: #0969da; }
-[data-theme="light"] .file-row--untracked .icon .octicon-directory,
-[data-theme="light"] .file-row--untracked .icon .octicon-file { color: #8250df; fill: #8250df; }
-[data-theme="light"] .file-row--mixed .icon .octicon-directory,
-[data-theme="light"] .file-row--mixed .icon .octicon-file { color: #9a6700; fill: #9a6700; }
-
-[data-theme="light"] .octicon-directory {
-  fill: #54adf5;
-  color: #54adf5;
-}
-
-.octicon-home {
-  margin-right: 8px;
-}
-
-.octicon-separator {
-  width: 12px;
-  height: 12px;
-  margin: 0 4px;
-  opacity: 0.7;
-}
-
-.text-yellow { 
-  color: #f9c513; 
-  fill: #f9c513; 
-}
-.text-blue { 
-  color: #0969da; 
-  fill: #0969da; 
-}
-.text-green { 
-  color: #1a7f37; 
-  fill: #1a7f37; 
-}
-.text-red { 
-  color: #cf222e; 
-  fill: #cf222e; 
-}
-.text-orange { 
-  color: #fb8500; 
-  fill: #fb8500; 
-}
-.text-purple { 
-  color: #8250df; 
-  fill: #8250df; 
-}
-.text-gray { 
-  color: var(--text-secondary); 
-  fill: var(--text-secondary); 
-}
-
-[data-theme="light"] .text-yellow { 
-  color: #dbab09; 
-  fill: #dbab09; 
-}
-[data-theme="light"] .text-blue { 
-  color: #0550ae; 
-  fill: #0550ae; 
-}
-[data-theme="light"] .text-green { 
-  color: #116329; 
-  fill: #116329; 
-}
-[data-theme="light"] .text-red { 
-  color: #82071e; 
-  fill: #82071e; 
-}
-[data-theme="light"] .text-orange { 
-  color: #bc4c00; 
-  fill: #bc4c00; 
-}
-[data-theme="light"] .text-purple { 
-  color: #6f42c1; 
-  fill: #6f42c1; 
-}
-
-/* Old search styles removed - using new GitHub-style search */
-
-/* Language stats in control bar */
-.language-stats {
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-  margin-left: var(--space-lg);
-  max-width: 400px;
-  padding: var(--space-sm) var(--space-md);
-  background: linear-gradient(135deg, 
-    var(--bg-card) 0%, 
-    var(--bg-elevated) 100%);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-sm);
-  transition: all var(--transition-base);
-  position: relative;
-  overflow: visible;
-  white-space: nowrap;
-  backdrop-filter: blur(10px);
-  flex-shrink: 1;
-  min-width: 0;
-}
-
-.language-stats:hover {
-  overflow: visible;
-  z-index: 10;
-  box-shadow: var(--shadow-md);
-  border-color: var(--border-primary);
-  transform: translateY(-1px);
-}
-
-.language-stats:hover::before {
-  content: '';
-  position: absolute;
-  top: -6px;
-  left: -10px;
-  right: -10px;
-  bottom: -6px;
-  background: linear-gradient(135deg, 
-    var(--bg-elevated) 0%, 
-    var(--bg-card) 100%);
-  border: 1px solid var(--border-primary);
-  border-radius: var(--radius-xl);
-  box-shadow: var(--shadow-lg);
-  z-index: -1;
-  pointer-events: none;
-}
-
-.lang-stat {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 12px;
-  color: var(--text-secondary);
-  white-space: nowrap;
-  flex-shrink: 0;
-  padding: 4px 8px;
-  border-radius: var(--radius-sm);
-  transition: all var(--transition-base);
-  position: relative;
-}
-
-.lang-stat:hover {
-  background: var(--hover-bg);
-  color: var(--text-primary);
-  transform: scale(1.05);
-}
-
-.lang-dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  display: inline-block;
-  flex-shrink: 0;
-  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 
-              0 2px 4px rgba(0, 0, 0, 0.2);
-  transition: all var(--transition-base);
-}
-
-.lang-stat:hover .lang-dot {
-  transform: scale(1.2);
-  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15), 
-              0 4px 8px rgba(0, 0, 0, 0.3);
-}
-
-.lang-name {
-  font-weight: 600;
-  color: var(--text-primary);
-  letter-spacing: -0.01em;
-}
-
-.lang-percent {
-  color: var(--text-secondary);
-  font-weight: 500;
-  font-variant-numeric: tabular-nums;
-}
-
-/* File table improvements */
-.file-table-container {
-  margin-top: 0;
-  margin-bottom: 24px;
-}
-
-.file-row {
-  transition: all 0.15s ease;
-  cursor: pointer;
-}
-
-.file-row:hover {
-  background-color: var(--hover-bg);
-  transform: translateX(2px);
-}
-
-.file-row.focused {
-  background-color: var(--link-color);
-  color: white;
-}
-
-.file-row.focused a {
-  color: white;
-}
-
-.file-row.focused .text-yellow,
-.file-row.focused .text-blue,
-.file-row.focused .text-green,
-.file-row.focused .text-red,
-.file-row.focused .text-orange,
-.file-row.focused .text-purple,
-.file-row.focused .text-gray {
-  color: rgba(255, 255, 255, 0.9);
-}
-
-.file-row.hidden,
-.tree-item.hidden,
-.tree-children.hidden {
-  display: none;
-}
-
-/* README preview - GitHub style */
-.readme-section {
-  margin-top: 32px;
-  border: 1px solid var(--border-primary);
-  border-radius: 8px;
-  overflow: hidden;
-  background: var(--bg-primary);
-}
-
-.readme-header {
-  background: var(--bg-secondary);
-  border-bottom: 1px solid var(--border-primary);
-  padding: 12px 16px;
-}
-
-.readme-header h2 {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--text-accent);
-  display: flex;
-  align-items: center;
-  margin: 0;
-}
-
-.readme-icon {
-  width: 16px;
-  height: 16px;
-  fill: currentColor;
-  margin-right: 8px;
-}
-
-.readme-content {
-  padding: 32px;
-  max-height: none;
-  overflow-y: visible;
-}
-
-.readme-content .markdown {
-  padding: 0;
-}
-
-/* Enhanced animations */
-
-
-/* Loading states */
-
-/* Quick actions */
-.name {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  flex-wrap: nowrap;
-}
-
-.quick-actions {
-  opacity: 0;
-  display: flex;
-  gap: 4px;
-  position: absolute;
-  right: 8px;
-  top: 50%;
-  transform: translateY(-50%);
-  transition: all var(--transition-base);
-  z-index: 10;
-  background: var(--bg-secondary);
-  padding: 2px;
-  border-radius: var(--radius-sm);
-  backdrop-filter: blur(8px);
-}
-
-.file-row:hover .quick-actions {
-  opacity: 1;
-  transform: translateY(-50%) scale(1);
-}
-
-.quick-btn {
-  background: var(--bg-primary);
-  border: 1px solid var(--border-primary);
-  border-radius: var(--radius-sm);
-  padding: 5px 7px;
-  cursor: pointer;
-  color: var(--text-secondary);
-  transition: all var(--transition-base);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none;
-  box-shadow: var(--shadow-sm);
-  width: 28px;
-  height: 28px;
-}
-
-.quick-btn:hover {
-  background: var(--hover-bg);
-  color: var(--text-primary);
-  border-color: var(--border-secondary);
-  transform: translateY(-2px) scale(1.05);
-  box-shadow: var(--shadow-md);
-}
-
-.quick-btn:active {
-  transform: translateY(0) scale(1);
-  box-shadow: var(--shadow-sm);
-}
-
-.quick-icon {
-  width: 12px;
-  height: 12px;
-  fill: currentColor;
-}
-
-/* Name column styling */
-.file-table .col-name {
-  padding-right: 80px;
-  min-width: 200px;
-}
-
-.file-table .col-name a {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding-right: 8px;
-  color: var(--link-color);
-  text-decoration: none;
-  font-weight: 500;
-}
-
-.file-table .col-name a:hover {
-  text-decoration: underline;
-}
-
-.file-content {
-  background: var(--bg-card);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-xl);
-  overflow: auto;
-  box-shadow: var(--shadow-lg);
-  transition: all var(--transition-base);
-  backdrop-filter: blur(10px);
-  position: relative;
-}
-
-.file-content::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background: linear-gradient(90deg, 
-    transparent 0%, 
-    var(--link-color) 50%, 
-    transparent 100%);
-  opacity: 0.3;
-}
-
-.file-content:hover {
-  box-shadow: var(--shadow-xl);
-  border-color: var(--border-primary);
-  transform: translateY(-1px);
-}
-
-.file-content pre {
-  margin: 0;
-  padding: 16px 0;
-  overflow-x: auto;
-  font-size: 13px;
-  line-height: 22px;
-  background-color: var(--bg-primary);
-}
-
-.file-content code {
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-  font-size: 12px;
-  font-weight: 400;
-}
-
-/* Image viewing styles */
-.image-container {
-  padding: 20px;
-  text-align: center;
-  background-color: var(--bg-primary);
-  border-radius: 6px;
-}
-
-.image-display {
-  max-width: 100%;
-  max-height: 80vh;
-  height: auto;
-  border-radius: 6px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-  background: var(--bg-secondary);
-}
-
-[data-theme="light"] .image-display {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
-}
-
-.image-info {
-  margin-top: 16px;
-  padding-top: 16px;
-  border-top: 1px solid var(--border-primary);
-}
-
-.image-filename {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--text-primary);
-}
-
-/* Binary file viewing styles */
-.binary-file-container {
-  padding: 40px 20px;
-  text-align: center;
-  background-color: var(--bg-primary);
-  border-radius: 6px;
-  border: 1px solid var(--border-primary);
-}
-
-.binary-file-info h3 {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin-bottom: 12px;
-}
-
-.binary-file-info p {
-  font-size: 14px;
-  color: var(--text-secondary);
-  margin-bottom: 20px;
-}
-
-.binary-file-info .btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  border-radius: 6px;
-  font-size: 14px;
-  font-weight: 500;
-  text-decoration: none;
-  border: 1px solid transparent;
-  cursor: pointer;
-}
-
-.binary-file-info .btn-primary {
-  background-color: var(--link-color);
-  color: white;
-}
-
-.binary-file-info .btn-primary:hover {
-  opacity: 0.9;
-}
-
-/* Line numbers for code viewing */
-.with-line-numbers {
-  counter-reset: line;
-  display: block;
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-  font-weight: 400;
-}
-
-.line-container {
-  display: block;
-  position: relative;
-  transition: all var(--transition-base);
-  padding: 0;
-  line-height: 20px;
-  min-height: 20px;
-  border-left: 2px solid transparent;
-}
-
-.line-container:hover {
-  background-color: rgba(110, 118, 129, 0.08);
-  border-left-color: var(--border-primary);
-}
-
-.line-container.selected {
-  background: linear-gradient(90deg, rgba(255, 251, 221, 0.4) 0%, rgba(255, 251, 221, 0.2) 100%);
-  border-left-color: rgba(255, 235, 59, 0.6);
-}
-
-[data-theme="dark"] .line-container.selected {
-  background: linear-gradient(90deg, rgba(187, 128, 9, 0.2) 0%, rgba(187, 128, 9, 0.1) 100%);
-  border-left-color: rgba(255, 235, 59, 0.5);
-}
-
-/* Editor */
-.editor-container {
-  border: 1px solid var(--border-primary);
-  border-radius: 6px;
-  margin: 0;
-  background: var(--bg-primary);
-  box-shadow: 0 1px 3px rgba(27, 31, 36, 0.12);
-}
-
-.editor-header {
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--border-primary);
-  background: var(--bg-secondary);
-  border-radius: 6px 6px 0 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.editor-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--text-accent);
-  display: flex;
-  align-items: center;
-  margin: 0;
-}
-
-.editor-actions {
-  display: flex;
-  gap: 6px;
-}
-
-.btn {
-  padding: 6px 12px;
-  border-radius: 6px;
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  border: 1px solid var(--border-primary);
-  transition: all 0.15s ease;
-  white-space: nowrap;
-}
-
-.btn-primary {
-  background: #2da44e;
-  color: white;
-  border-color: #1b6b32;
-  box-shadow: 0 1px 0 rgba(27, 31, 36, 0.04);
-}
-
-.btn-primary:hover {
-  background: #2c974b;
-  border-color: #1a5d2e;
-}
-
-.btn-secondary {
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  border-color: var(--border-primary);
-  box-shadow: 0 1px 0 rgba(27, 31, 36, 0.04);
-}
-
-.btn-secondary:hover {
-  background: var(--hover-bg);
-  border-color: var(--text-secondary);
-}
-
-
-
-
-/* Monaco editor container (current) */
-#file-editor.monaco-editor {
-  height: 100% !important;
-  width: 100% !important;
-  padding: 0 !important;
-  border: none !important;
-  background: transparent !important;
-  flex: none !important;
-}
-
-.editor-with-line-numbers:focus-within {
-  border-color: #0969da;
-  box-shadow: 0 0 0 0.2em rgba(9, 105, 218, 0.3);
-}
-
-[data-theme="dark"] .editor-with-line-numbers:focus-within {
-  border-color: #58a6ff;
-  box-shadow: 0 0 0 0.2em rgba(88, 166, 255, 0.3);
-}
-
-/* New file interface */
-.new-file-container {
-  border: 1px solid var(--border-primary);
-  border-radius: 6px;
-  background: var(--bg-primary);
-  box-shadow: 0 1px 3px rgba(27, 31, 36, 0.12);
-}
-
-.new-file-header {
-  padding: 16px;
-  border-bottom: 1px solid var(--border-primary);
-  background: var(--bg-secondary);
-  border-radius: 6px 6px 0 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 16px;
-}
-
-.filename-section {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex: 1;
-}
-
-.filename-label {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--text-primary);
-  white-space: nowrap;
-}
-
-.new-filename-input {
-  flex: 1;
-  padding: 8px 12px;
-  font-size: 14px;
-  border: 1px solid var(--border-primary);
-  border-radius: 6px;
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  outline: none;
-  transition: border-color 0.15s ease;
-}
-
-.new-filename-input:focus {
-  border-color: #0969da;
-  box-shadow: 0 0 0 0.2em rgba(9, 105, 218, 0.3);
-}
-
-[data-theme="dark"] .new-filename-input:focus {
-  border-color: #58a6ff;
-  box-shadow: 0 0 0 0.2em rgba(88, 166, 255, 0.3);
-}
-
-.new-file-actions {
-  display: flex;
-  gap: 8px;
-}
-
-
-
-.line-number {
-  display: inline-block;
-  width: 56px;
-  text-align: right;
-  margin-right: 0;
-  padding: 0 10px;
-  color: var(--text-secondary);
-  background: transparent;
-  border-right: 1px solid var(--border-primary);
-  font-size: 12px;
-  line-height: 20px;
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-  font-weight: 400;
-  user-select: none;
-  -webkit-user-select: none;
-  text-decoration: none;
-  cursor: pointer;
-  transition: all var(--transition-base);
-  opacity: 0.7;
-}
-
-.line-number:hover {
-  color: var(--link-color);
-  text-decoration: none;
-  opacity: 1;
-  background: rgba(88, 166, 255, 0.08);
-  border-right-color: var(--link-color);
-}
-
-.line-content {
-  white-space: pre;
-  display: inline;
-  padding: 0 10px;
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-  font-size: 12px;
-  line-height: 20px;
-  font-weight: 400;
-  letter-spacing: normal;
-}
-
-/* Code folding now handled by Monaco Editor - removed custom implementation */
-
-/* GitHub syntax highlighting - Dark theme */
-.hljs-comment,
-.hljs-quote {
-  font-style: normal !important;
-  color: #8b949e;
-}
-
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-literal,
-.hljs-doctag {
-  color: #ff7b72;
-}
-
-.hljs-number {
-  color: #79c0ff;
-}
-
-.hljs-string,
-.hljs-regexp {
-  color: #a5d6ff;
-}
-
-.hljs-title,
-.hljs-section {
-  color: #d2a8ff;
-}
-
-.hljs-name,
-.hljs-attribute {
-  color: #ffa657;
-}
-
-.hljs-variable,
-.hljs-template-variable {
-  color: #ffa657;
-}
-
-.hljs-type,
-.hljs-class .hljs-title {
-  color: #ffa657;
-}
-
-.hljs-symbol,
-.hljs-bullet,
-.hljs-built_in,
-.hljs-builtin-name {
-  color: #ff7b72;
-}
-
-.hljs-function,
-.hljs-function .hljs-title {
-  color: #d2a8ff;
-}
-
-/* Enhanced semantic highlighting */
-.hljs-title.function_ {
-  color: #d2a8ff;
-}
-
-.hljs-title.class_ {
-  color: #ffa657;
-}
-
-.hljs-title.method_ {
-  color: #79c0ff;
-}
-
-.hljs-tag {
-  color: #7ee787;
-}
-
-.hljs-meta {
-  color: #79c0ff;
-}
-
-.hljs-deletion {
-  color: #ffa198;
-  background-color: #490202;
-}
-
-.hljs-addition {
-  color: #aff5b4;
-  background-color: #033a16;
-}
-
-.hljs-emphasis {
-  font-style: italic;
-}
-
-.hljs-strong {
-  font-weight: bold;
-}
-
-/* GitHub syntax highlighting - Light theme */
-[data-theme="light"] .hljs-comment,
-[data-theme="light"] .hljs-quote {
-  color: #656d76;
-}
-
-[data-theme="light"] .hljs-keyword,
-[data-theme="light"] .hljs-selector-tag,
-[data-theme="light"] .hljs-literal,
-[data-theme="light"] .hljs-doctag {
-  color: #cf222e;
-}
-
-[data-theme="light"] .hljs-number {
-  color: #0550ae;
-}
-
-[data-theme="light"] .hljs-string,
-[data-theme="light"] .hljs-regexp {
-  color: #0a3069;
-}
-
-[data-theme="light"] .hljs-title,
-[data-theme="light"] .hljs-section {
-  color: #8250df;
-}
-
-[data-theme="light"] .hljs-name,
-[data-theme="light"] .hljs-attribute {
-  color: #953800;
-}
-
-[data-theme="light"] .hljs-variable,
-[data-theme="light"] .hljs-template-variable {
-  color: #953800;
-}
-
-[data-theme="light"] .hljs-type,
-[data-theme="light"] .hljs-class .hljs-title {
-  color: #953800;
-}
-
-[data-theme="light"] .hljs-symbol,
-[data-theme="light"] .hljs-bullet,
-[data-theme="light"] .hljs-built_in,
-[data-theme="light"] .hljs-builtin-name {
-  color: #cf222e;
-}
-
-[data-theme="light"] .hljs-function {
-  color: #8250df;
-}
-
-[data-theme="light"] .hljs-tag {
-  color: #116329;
-}
-
-[data-theme="light"] .hljs-meta {
-  color: #0550ae;
-}
-
-[data-theme="light"] .hljs-deletion {
-  color: #82071e;
-  background-color: #ffebe9;
-}
-
-[data-theme="light"] .hljs-addition {
-  color: #116329;
-  background-color: #dafbe1;
-}
-
-/* Beautiful markdown rendering for all contexts */
-.markdown {
-  padding: 32px;
-  max-width: 100%;
-  font-size: 16px;
-  line-height: 1.6;
-}
-
-/* Headings with proper hierarchy */
-.markdown h1 {
-  font-size: 2rem;
-  font-weight: 600;
-  margin: 0 0 24px 0;
-  padding-bottom: 12px;
-  border-bottom: 1px solid var(--border-primary);
-  color: var(--text-accent);
-  line-height: 1.25;
-}
-
-.markdown h2 {
-  font-size: 1.5rem;
-  font-weight: 600;
-  margin: 32px 0 16px 0;
-  color: var(--text-accent);
-  border-bottom: 1px solid var(--border-secondary);
-  padding-bottom: 8px;
-  line-height: 1.25;
-}
-
-.markdown h3 {
-  font-size: 1.25rem;
-  font-weight: 600;
-  margin: 24px 0 16px 0;
-  color: var(--text-accent);
-  border: none;
-  line-height: 1.25;
-}
-
-.markdown h4 {
-  font-size: 1rem;
-  font-weight: 600;
-  margin: 24px 0 16px 0;
-  color: var(--text-accent);
-  border: none;
-  line-height: 1.25;
-}
-
-.markdown h5,
-.markdown h6 {
-  font-size: 0.875rem;
-  font-weight: 600;
-  margin: 20px 0 12px 0;
-  color: var(--text-accent);
-  border: none;
-  line-height: 1.25;
-}
-
-/* Paragraphs and text */
-.markdown p {
-  margin-bottom: 16px;
-  color: var(--text-primary);
-  line-height: 1.6;
-  font-size: 16px;
-}
-
-/* Lists with custom styling */
-.markdown ul,
-.markdown ol {
-  margin-bottom: 16px;
-  padding-left: 0;
-  list-style: none;
-}
-
-.markdown li {
-  margin-bottom: 8px;
-  color: var(--text-primary);
-  line-height: 1.6;
-  font-size: 16px;
-  position: relative;
-  padding-left: 24px;
-}
-
-.markdown ul li:before {
-  content: "•";
-  color: var(--text-secondary);
-  font-size: 18px;
-  position: absolute;
-  left: 0;
-  top: 0;
-}
-
-.markdown ol {
-  counter-reset: item;
-}
-
-.markdown ol li {
-  counter-increment: item;
-  padding-left: 32px;
-}
-
-.markdown ol li:before {
-  content: counter(item) ".";
-  color: var(--text-secondary);
-  font-weight: 600;
-  position: absolute;
-  left: 0;
-  top: 0;
-}
-
-.markdown li strong {
-  color: var(--text-accent);
-  font-weight: 600;
-}
-
-/* Code styling */
-.markdown code {
-  background-color: var(--bg-secondary);
-  padding: 3px 6px;
-  border-radius: 6px;
-  font-size: 85%;
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-  color: var(--text-accent);
-  border: 1px solid var(--border-primary);
-}
-
-.markdown pre {
-  background-color: var(--bg-primary);
-  padding: 16px;
-  border-radius: 6px;
-  overflow-x: auto;
-  margin: 16px 0;
-  border: 1px solid var(--border-primary);
-}
-
-.markdown pre code {
-  background: none;
-  padding: 0;
-  border: none;
-  font-size: 12px;
-  line-height: 20px;
-  color: var(--text-primary);
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-}
-
-/* Other elements */
-.markdown blockquote {
-  border-left: 4px solid var(--border-primary);
-  padding-left: 16px;
-  margin: 16px 0;
-  color: var(--text-secondary);
-  font-style: italic;
-}
-
-.markdown a {
-  color: var(--link-color);
-  text-decoration: none;
-}
-
-.markdown a:hover {
-  text-decoration: underline;
-}
-
-.markdown table {
-  border-collapse: collapse;
-  margin-bottom: 16px;
-  width: 100%;
-}
-
-.markdown table th,
-.markdown table td {
-  border: 1px solid var(--border-primary);
-  padding: 8px 12px;
-  text-align: left;
-}
-
-.markdown table th {
-  background-color: var(--bg-secondary);
-  font-weight: 600;
-  color: var(--text-accent);
-}
-
-.markdown hr {
-  border: none;
-  border-top: 1px solid var(--border-primary);
-  margin: 24px 0;
-}
-
-
-@media (max-width: 768px) {
-  .main-content {
-    padding: 12px 16px;
-  }
-
-  .repo-canvas-content {
-    padding: 12px 16px;
-  }
-
-  .header-content {
-    padding: 8px 16px;
-  }
-
-  .header-left h1 {
-    font-size: 14px;
-  }
-
-  .file-table .col-size,
-  .file-table .col-modified {
-    display: none;
-  }
-
-  .repo-controls {
-    flex-direction: column;
-    gap: 12px;
-    align-items: stretch;
-  }
-
-  .repo-controls-right {
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  .keyboard-help-content {
-    margin: 20px;
-    max-width: calc(100% - 40px);
-  }
-
-  .keyboard-shortcuts-grid {
-    grid-template-columns: 1fr;
-    gap: 24px;
-  }
-
-  .keyboard-help-body {
-    padding: 20px;
-  }
-}
-
-/* Notification System */
-.notification {
-  position: fixed;
-  top: 20px;
-  right: 20px;
-  padding: 12px 16px;
-  border-radius: 6px;
-  color: white;
-  font-size: 14px;
-  font-weight: 500;
-  z-index: 10000;
-  max-width: 400px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  transition: opacity 0.3s ease;
-}
-
-.notification-success {
-  background: rgba(46, 160, 67, 0.9);
-  border-color: rgba(46, 160, 67, 0.5);
-}
-
-.notification-error {
-  background: rgba(248, 81, 73, 0.9);
-  border-color: rgba(248, 81, 73, 0.5);
-}
-
-.notification-info {
-  background: rgba(88, 166, 255, 0.9);
-  border-color: rgba(88, 166, 255, 0.5);
-}
-
-
-
-/* Keyboard Help Overlay */
-.keyboard-help-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.8);
-  backdrop-filter: blur(4px);
-  z-index: 99999;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  animation: fadeIn 0.2s ease-out;
-}
-
-.keyboard-help-content {
-  background: var(--bg-primary);
-  border: 1px solid var(--border-primary);
-  border-radius: 8px;
-  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
-  max-width: 800px;
-  max-height: 80vh;
-  overflow-y: auto;
-  margin: 20px;
-  animation: slideUp 0.3s ease-out;
-}
-
-.keyboard-help-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 24px 30px 16px;
-  border-bottom: 1px solid var(--border-primary);
-  background: var(--bg-secondary);
-  border-radius: 8px 8px 0 0;
-}
-
-.keyboard-help-header h2 {
-  color: var(--text-primary);
-  font-size: 24px;
-  font-weight: 600;
-  margin: 0;
-}
-
-.keyboard-help-close {
-  background: none;
-  border: none;
-  color: var(--text-secondary);
-  font-size: 24px;
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 4px;
-  transition: color 0.2s ease;
-}
-
-.keyboard-help-close:hover {
-  color: var(--text-primary);
-  background: var(--hover-bg);
-}
-
-.keyboard-help-body {
-  padding: 0;
-}
-
-.shortcuts-container {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 0;
-}
-
-.shortcut-section {
-  border-right: 1px solid var(--border-primary);
-  padding: 40px 50px;
-}
-
-.shortcut-section:last-child {
-  border-right: none;
-}
-
-
-.shortcut-section h3 {
-  color: var(--text-primary);
-  font-size: 16px;
-  font-weight: 600;
-  margin: 0 0 24px 0;
-}
-
-.shortcut-list {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.shortcut-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0;
-  border-radius: 0;
-  transition: none;
-}
-
-
-.shortcut-keys {
-  display: flex;
-  gap: 6px;
-  align-items: center;
-}
-
-.shortcut-keys kbd {
-  background: var(--bg-tertiary);
-  border: 1px solid var(--border-secondary);
-  border-radius: 4px;
-  padding: 4px 8px;
-  font-size: 11px;
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-  color: var(--text-primary);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-  white-space: nowrap;
-  min-width: 20px;
-  text-align: center;
-}
-
-.shortcut-desc {
-  color: var(--text-primary);
-  flex: 1;
-  text-align: left;
-  font-size: 14px;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes slideUp {
-  from {
-    opacity: 0;
-    transform: translateY(30px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Git Integration */
-
-.git-status {
-  display: inline;
-  margin-left: 8px;
-  padding: 0;
-  border-radius: 4px;
-  opacity: 0.8;
-  vertical-align: middle;
-  line-height: inherit;
-}
-
-.git-status-icon {
-  width: 10px;
-  height: 10px;
-  fill: currentColor;
-  display: inline;
-  vertical-align: middle;
-}
-
-/* Git status colors - brighter palette */
-.git-status-M {
-  color: #d29922; /* modified - amber */
-}
-
-.git-status-A {
-  color: #2ea043; /* added - green */
-}
-
-.git-status-D {
-  color: #f85149; /* deleted - red */
-}
-
-.git-status-R {
-  color: #1f6feb; /* renamed - blue */
-}
-
-.git-status-\?\? {
-  color: #a371f7; /* untracked - purple */
-}
-
-.git-status-MM,
-.git-status-AM,
-.git-status-AD {
-  color: #db6d28; /* mixed - orange */
-}
-
-[data-theme="light"] .git-status-M {
-  color: #bf8700;
-}
-
-[data-theme="light"] .git-status-A {
-  color: #1a7f37;
-}
-
-[data-theme="light"] .git-status-D {
-  color: #cf222e;
-}
-
-[data-theme="light"] .git-status-R {
-  color: #0969da;
-}
-
-[data-theme="light"] .git-status-MM,
-[data-theme="light"] .git-status-AM,
-[data-theme="light"] .git-status-AD {
-  color: #9a6700;
-}
-
-/* Git Diff Viewer */
-.diff-viewer-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.8);
-  backdrop-filter: blur(4px);
-  z-index: 99999;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  animation: fadeIn 0.2s ease-out;
-}
-
-.diff-viewer-modal {
-  background: var(--bg-primary);
-  border: 1px solid var(--border-primary);
-  border-radius: 8px;
-  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
-  width: 90vw;
-  max-width: 1200px;
-  height: 80vh;
-  display: flex;
-  flex-direction: column;
-  animation: slideUp 0.3s ease-out;
-}
-
-.diff-viewer-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--border-primary);
-  background: var(--bg-secondary);
-  border-radius: 8px 8px 0 0;
-}
-
-.diff-viewer-title {
-  color: var(--text-primary);
-  font-size: 16px;
-  font-weight: 600;
-  margin: 0;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.diff-close-btn {
-  background: none;
-  border: none;
-  color: var(--text-secondary);
-  font-size: 24px;
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 4px;
-  transition: color 0.2s ease;
-}
-
-.diff-close-btn:hover {
-  color: var(--text-primary);
-  background: var(--hover-bg);
-}
-
-.diff-viewer-content {
-  flex: 1;
-  overflow: auto;
-  padding: 0;
-}
-
-.diff-container {
-  display: flex;
-  height: 100%;
-}
-
-.diff-side {
-  flex: 1;
-  border-right: 1px solid var(--border-primary);
-  display: flex;
-  flex-direction: column;
-}
-
-.diff-side:last-child {
-  border-right: none;
-}
-
-.diff-side-header {
-  background: var(--bg-secondary);
-  padding: 8px 16px;
-  border-bottom: 1px solid var(--border-primary);
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-secondary);
-}
-
-.diff-side-content {
-  flex: 1;
-  overflow: auto;
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-  font-size: 12px;
-  line-height: 20px;
-  font-weight: 400;
-}
-
-.diff-line {
-  display: flex;
-  white-space: pre;
-  min-height: 1.4em;
-}
-
-.diff-line-number {
-  background: var(--bg-secondary);
-  color: var(--text-secondary);
-  text-align: right;
-  padding: 0 8px;
-  border-right: 1px solid var(--border-primary);
-  min-width: 50px;
-  user-select: none;
-  flex-shrink: 0;
-}
-
-.diff-line-content {
-  padding: 0 8px;
-  flex: 1;
-  overflow-x: auto;
-}
-
-.diff-line-added {
-  background: #0f5132;
-  color: #75b798;
-}
-
-.diff-line-added .diff-line-number {
-  background: #0a4027;
-}
-
-.diff-line-removed {
-  background: #67060c;
-  color: #f8d7da;
-}
-
-.diff-line-removed .diff-line-number {
-  background: #4a0409;
-}
-
-.diff-line-context {
-  background: var(--bg-primary);
-  color: var(--text-primary);
-}
-
-[data-theme="light"] .diff-line-added {
-  background: #d1e7dd;
-  color: #055160;
-}
-
-[data-theme="light"] .diff-line-added .diff-line-number {
-  background: #badbcc;
-}
-
-[data-theme="light"] .diff-line-removed {
-  background: #f8d7da;
-  color: #721c24;
-}
-
-[data-theme="light"] .diff-line-removed .diff-line-number {
-  background: #f1aeb5;
-}
-
-.diff-stats {
-  display: flex;
-  gap: 16px;
-  align-items: center;
-  font-size: 12px;
-}
-
-.diff-stat {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.diff-stat-added {
-  color: #28a745;
-}
-
-.diff-stat-removed {
-  color: #dc3545;
-}
-
-/* Clean GitHub-style diff */
-.diff-container {
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  background: var(--bg-primary);
-  overflow-x: auto;
-  overflow-y: visible;
-}
-
-.diff-content {
-  padding: 0;
-  min-width: 100%;
-  display: block;
-}
-
-.raw-diff-container {
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-  font-size: 12px;
-  line-height: 20px;
-  font-weight: 400;
-  min-width: max-content;
-}
-
-/* Diff line with two line number columns + content */
-.diff-line {
-  display: flex;
-  min-height: 20px;
-  line-height: 20px;
-  color: var(--text-primary);
-  transition: background-color 0.1s ease;
-  align-items: stretch;
-}
-
-.diff-line:hover {
-  background-color: var(--hover-bg);
-}
-
-/* Line number columns - two side by side */
-.diff-line-number {
-  display: inline-block;
-  min-width: 50px;
-  max-width: 50px;
-  padding: 0 8px;
-  text-align: right;
-  color: var(--text-secondary);
-  background: var(--bg-secondary);
-  user-select: none;
-  flex-shrink: 0;
-  font-variant-numeric: tabular-nums;
-  border-right: 1px solid var(--border-primary);
-}
-
-.diff-line-number.old {
-  border-right: none;
-}
-
-.diff-line-number.new {
-  border-right: 1px solid var(--border-primary);
-}
-
-/* Empty line numbers for headers/hunks */
-.diff-line-number:empty::before {
-  content: '\00a0'; /* Non-breaking space to maintain height */
-}
-
-/* Content area - takes remaining space */
-.diff-line-content {
-  padding: 0 10px;
-  white-space: pre;
-  overflow-x: auto;
-  flex: 1;
-  min-width: 0;
-}
-
-/* Different line types - GitHub-style subtle backgrounds */
-.diff-line-added {
-  background: rgba(46, 160, 67, 0.15);
-}
-
-.diff-line-added .diff-line-number {
-  background: rgba(46, 160, 67, 0.1);
-}
-
-.diff-line-removed {
-  background: rgba(248, 81, 73, 0.15);
-}
-
-.diff-line-removed .diff-line-number {
-  background: rgba(248, 81, 73, 0.1);
-}
-
-.diff-line-context {
-  background: var(--bg-primary);
-}
-
-.diff-line-hunk {
-  background: rgba(88, 166, 255, 0.1);
-  font-weight: 600;
-  color: #58a6ff;
-}
-
-.diff-line-hunk .diff-line-number {
-  background: rgba(88, 166, 255, 0.05);
-}
-
-.diff-line-header {
-  background: var(--bg-secondary);
-  color: var(--text-secondary);
-  font-weight: 500;
-  opacity: 0.9;
-}
-
-.diff-line-header .diff-line-number {
-  background: var(--bg-secondary);
-}
-
-/* Light theme adjustments */
-[data-theme="light"] .diff-line-added {
-  background: rgba(46, 160, 67, 0.1);
-}
-
-[data-theme="light"] .diff-line-added .diff-line-number {
-  background: rgba(46, 160, 67, 0.08);
-}
-
-[data-theme="light"] .diff-line-removed {
-  background: rgba(248, 81, 73, 0.1);
-}
-
-[data-theme="light"] .diff-line-removed .diff-line-number {
-  background: rgba(248, 81, 73, 0.08);
-}
-
-[data-theme="light"] .diff-line-hunk {
-  background: rgba(9, 105, 218, 0.1);
-  color: #0969da;
-}
-
-[data-theme="light"] .diff-line-hunk .diff-line-number {
-  background: rgba(9, 105, 218, 0.05);
-}
-
-.no-changes {
-  padding: 40px;
-  text-align: center;
-  color: var(--text-secondary);
-  font-style: italic;
-}
-
-/* Git status indicator in icon cell */
-.file-table .col-icon .git-status {
-  font-size: 12px;
-}
-
-/* Untracked file status styling */
-.git-status-untracked {
-  color: #7c3aed !important;
-}
-
-[data-theme="light"] .git-status-untracked {
-  color: #8b5cf6 !important;
-}
-
-/* Monaco Editor styling - inner container only */
-.monaco-editor-container {
-  height: 600px !important;
-  width: 100% !important;
-  min-width: 400px !important;
-  overflow: hidden !important;
-  background: var(--bg-primary);
-  position: relative !important;
-  display: block !important;
-  border-radius: 0 0 6px 6px;
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-}
-
-.monaco-editor-container .monaco-editor {
-  height: 600px !important;
-  width: 100% !important;
-  min-width: 400px !important;
-  position: relative !important;
-}
-
-/* Monaco File Viewer - Elite code browsing */
-.monaco-file-viewer {
-  width: 100%;
-  height: 100%;
-  min-height: 400px;
-  background: var(--bg-primary);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  position: relative;
-}
-
-.monaco-file-viewer .monaco-editor {
-  background: var(--bg-primary) !important;
-}
-
-.monaco-file-viewer .monaco-editor .margin {
-  background: var(--bg-primary) !important;
-}
-
-.monaco-file-viewer .monaco-editor .monaco-editor-background {
-  background: var(--bg-primary) !important;
-}
-
-/* Match GitHub-style line number colors */
-.monaco-file-viewer .monaco-editor .margin-view-overlays .line-numbers {
-  color: var(--text-secondary) !important;
-  opacity: 0.7;
-  transition: all var(--transition-base);
-}
-
-.monaco-file-viewer .monaco-editor .margin-view-overlays .line-numbers:hover {
-  color: var(--link-color) !important;
-  opacity: 1;
-}
-
-/* Folding controls styling */
-.monaco-file-viewer .monaco-editor .folding {
-  color: var(--text-secondary) !important;
-  transition: color var(--transition-base);
-}
-
-.monaco-file-viewer .monaco-editor .folding:hover {
-  color: var(--link-color) !important;
-}
-
-/* Selection and highlight colors */
-.monaco-file-viewer .monaco-editor .selected-text {
-  background-color: rgba(88, 166, 255, 0.2) !important;
-}
-
-.monaco-file-viewer .monaco-editor .current-line {
-  background-color: rgba(110, 118, 129, 0.08) !important;
-}
-
-/* Bracket matching */
-.monaco-file-viewer .monaco-editor .bracket-match {
-  background-color: rgba(110, 118, 129, 0.2) !important;
-  border: 1px solid var(--border-primary) !important;
-}
-
-/* Breadcrumbs styling */
-.monaco-file-viewer .monaco-breadcrumbs {
-  background: var(--bg-secondary) !important;
-  border-bottom: 1px solid var(--border-subtle) !important;
-}
-
-.monaco-file-viewer .monaco-breadcrumb-item {
-  color: var(--text-secondary) !important;
-}
-
-.monaco-file-viewer .monaco-breadcrumb-item:hover {
-  color: var(--link-color) !important;
-  background: var(--hover-bg) !important;
-}
-
-/* Minimap styling */
-.monaco-file-viewer .minimap {
-  background: var(--bg-secondary) !important;
-}
-
-.monaco-file-viewer .minimap .minimap-slider {
-  background: var(--border-primary) !important;
-}
-
-.monaco-file-viewer .minimap .minimap-slider:hover {
-  background: var(--text-secondary) !important;
-}
-
-/* Find widget styling */
-.monaco-file-viewer .find-widget {
-  background: var(--bg-elevated) !important;
-  border: 1px solid var(--border-primary) !important;
-  border-radius: var(--radius-md) !important;
-  box-shadow: var(--shadow-lg) !important;
-}
-
-/* Go to Symbol widget */
-.monaco-file-viewer .quick-input-widget {
-  background: var(--bg-elevated) !important;
-  border: 1px solid var(--border-primary) !important;
-  border-radius: var(--radius-lg) !important;
-  box-shadow: var(--shadow-xl) !important;
-}
-
-/* Scrollbar styling */
-.monaco-file-viewer .monaco-scrollable-element > .scrollbar {
-  background: var(--bg-secondary) !important;
-}
-
-.monaco-file-viewer .monaco-scrollable-element > .scrollbar > .slider {
-  background: var(--border-primary) !important;
-  border-radius: 5px !important;
-}
-
-.monaco-file-viewer .monaco-scrollable-element > .scrollbar > .slider:hover {
-  background: var(--text-secondary) !important;
-}
-
-/* Occurrence highlights */
-.monaco-file-viewer .monaco-editor .word-highlight {
-  background-color: rgba(88, 166, 255, 0.15) !important;
-  border: 1px solid rgba(88, 166, 255, 0.3) !important;
-}
-
-.monaco-file-viewer .monaco-editor .word-highlight.word-highlight-strong {
-  background-color: rgba(88, 166, 255, 0.25) !important;
-  border-color: rgba(88, 166, 255, 0.5) !important;
-}
-
-/* Monaco theme integration - match view/browse UI */
-.monaco-editor .monaco-editor-background {
-  background-color: var(--bg-primary) !important;
-}
-
-.monaco-editor .monaco-editor .margin {
-  background-color: var(--bg-primary) !important;
-}
-
-.monaco-editor .monaco-scrollable-element .scrollbar {
-  background: var(--bg-secondary) !important;
-}
-
-.monaco-editor .monaco-scrollable-element .slider {
-  background: var(--border-primary) !important;
-}
-
-.monaco-editor .monaco-scrollable-element .slider:hover {
-  background: var(--text-secondary) !important;
-}
-
-/* Ensure Monaco editor integrates seamlessly with container */
-.monaco-editor-container .monaco-editor .monaco-editor-background,
-.monaco-editor-container .monaco-editor .margin-view-overlays .current-line {
-  background-color: var(--bg-primary) !important;
-}
-
-/* In-file search overlay - Enhanced */
-.inline-search-overlay {
-  position: fixed;
-  top: 70px;
-  right: 24px;
-  z-index: 1000;
-  background: linear-gradient(135deg, 
-    rgba(28, 33, 40, 0.98) 0%, 
-    rgba(22, 27, 34, 0.95) 100%);
-  border: 1px solid var(--border-primary);
-  border-radius: var(--radius-xl);
-  box-shadow: var(--shadow-2xl), var(--shadow-glow);
-  min-width: 320px;
-  max-width: 520px;
-  backdrop-filter: blur(24px) saturate(180%);
-  -webkit-backdrop-filter: blur(24px) saturate(180%);
-  animation: slideInRight 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-  overflow: hidden;
-}
-
-[data-theme="light"] .inline-search-overlay {
-  background-color: rgba(255, 255, 255, 0.98);
-  box-shadow: var(--shadow-xl);
-}
-
-@keyframes slideInRight {
-  from {
-    opacity: 0;
-    transform: translateX(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-.inline-search-container {
-  display: flex;
-  flex-direction: column;
-}
-
-.inline-search-input-wrapper {
-  display: flex;
-  align-items: center;
-  padding: 12px;
-  gap: 10px;
-  border-bottom: 1px solid var(--border-subtle);
-  background: var(--bg-secondary);
-}
-
-.inline-search-input {
-  flex: 1;
-  padding: 8px 14px;
-  font-size: 13px;
-  border: 1px solid var(--border-primary);
-  border-radius: var(--radius-md);
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  outline: none;
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-  transition: all var(--transition-base);
-  box-shadow: var(--shadow-inner);
-}
-
-.inline-search-input:hover {
-  border-color: var(--border-secondary);
-  background: var(--bg-elevated);
-}
-
-.inline-search-input:focus {
-  border-color: var(--link-color);
-  background: var(--bg-primary);
-  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15), var(--shadow-inner);
-  outline: none;
-}
-
-.inline-search-options {
-  display: flex;
-  gap: 4px;
-}
-
-.inline-search-option {
-  padding: 6px 10px;
-  font-size: 11px;
-  font-weight: 500;
-  border: 1px solid var(--border-primary);
-  border-radius: var(--radius-sm);
-  background: var(--bg-primary);
-  color: var(--text-secondary);
-  cursor: pointer;
-  transition: all var(--transition-base);
-  min-width: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: var(--shadow-sm);
-}
-
-.inline-search-option:hover {
-  background: var(--hover-bg);
-  border-color: var(--border-secondary);
-  color: var(--text-primary);
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-md);
-}
-
-.inline-search-option.active {
-  background: var(--link-color);
-  color: white;
-  border-color: var(--link-color);
-  box-shadow: 0 2px 4px rgba(88, 166, 255, 0.3);
-}
-
-.inline-search-option.active:hover {
-  background: var(--link-hover);
-  border-color: var(--link-hover);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 8px rgba(88, 166, 255, 0.4);
-}
-
-.inline-search-info {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 14px;
-  font-size: 12px;
-  color: var(--text-secondary);
-  background: var(--bg-secondary);
-  border-top: 1px solid var(--border-subtle);
-}
-
-.inline-search-count {
-  flex: 1;
-  font-weight: 500;
-  letter-spacing: 0.01em;
-}
-
-.inline-search-count.error {
-  color: #ff7b72;
-  font-weight: 600;
-}
-
-.inline-search-close {
-  background: none;
-  border: none;
-  color: var(--text-secondary);
-  font-size: 18px;
-  line-height: 1;
-  cursor: pointer;
-  padding: 0;
-  width: 28px;
-  height: 28px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius-sm);
-  transition: all var(--transition-base);
-  opacity: 0.7;
-}
-
-.inline-search-close:hover {
-  background: var(--hover-bg-strong);
-  color: var(--text-primary);
-  opacity: 1;
-  transform: scale(1.1);
-}
-
-.inline-search-close:active {
-  transform: scale(0.95);
-}
-
-/* In-file search match highlighting - Enhanced */
-.inline-search-match {
-  background: linear-gradient(120deg, rgba(255, 235, 59, 0.25) 0%, rgba(255, 235, 59, 0.15) 100%);
-  padding: 2px 2px;
-  border-radius: 3px;
-  font-weight: 500;
-  transition: all var(--transition-base);
-  box-shadow: 0 1px 2px rgba(255, 235, 59, 0.2);
-}
-
-[data-theme="dark"] .inline-search-match {
-  background: linear-gradient(120deg, rgba(255, 235, 59, 0.2) 0%, rgba(255, 235, 59, 0.1) 100%);
-  box-shadow: 0 1px 2px rgba(255, 235, 59, 0.15);
-}
-
-.inline-search-match.active {
-  background: linear-gradient(120deg, rgba(255, 235, 59, 0.5) 0%, rgba(255, 235, 59, 0.35) 100%);
-  outline: 2px solid rgba(255, 235, 59, 0.9);
-  outline-offset: 2px;
-  box-shadow: 0 2px 8px rgba(255, 235, 59, 0.4), 0 0 0 1px rgba(255, 235, 59, 0.2);
-  animation: pulse 1.5s ease-in-out infinite;
-}
-
-[data-theme="dark"] .inline-search-match.active {
-  background: linear-gradient(120deg, rgba(255, 235, 59, 0.4) 0%, rgba(255, 235, 59, 0.25) 100%);
-  box-shadow: 0 2px 8px rgba(255, 235, 59, 0.3), 0 0 0 1px rgba(255, 235, 59, 0.15);
-}
-
-@keyframes pulse {
-  0%, 100% {
-    box-shadow: 0 2px 8px rgba(255, 235, 59, 0.4), 0 0 0 1px rgba(255, 235, 59, 0.2);
-  }
-  50% {
-    box-shadow: 0 2px 12px rgba(255, 235, 59, 0.5), 0 0 0 2px rgba(255, 235, 59, 0.3);
-  }
-}
-
-/* Focus mode - Enhanced */
-body.focus-mode {
-  overflow: hidden;
-}
-
-body.focus-mode header.focus-mode {
-  opacity: 0.25;
-  transition: opacity var(--transition-slow);
-  backdrop-filter: blur(8px);
-}
-
-body.focus-mode header.focus-mode:hover {
-  opacity: 0.9;
-}
-
-.main-content-wrapper.focus-mode {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 48px 32px;
-  animation: focusFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-@keyframes focusFadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-body.focus-mode .main-content-wrapper.focus-mode .main-content {
-  max-width: 100%;
-}
-
-body.focus-mode .file-content {
-  max-width: 100%;
-}
-
-/* Sidebar toggle state */
-.main-content-wrapper.no-sidebar {
-  width: 100%;
-}
-
-/* Content search overlay - Enhanced */
-.content-search-overlay {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 2000;
-  background: linear-gradient(135deg, 
-    rgba(28, 33, 40, 0.98) 0%, 
-    rgba(22, 27, 34, 0.95) 100%);
-  border: 1px solid var(--border-primary);
-  border-radius: var(--radius-2xl);
-  box-shadow: var(--shadow-2xl), 
-              0 0 0 1px rgba(0, 0, 0, 0.1),
-              var(--shadow-glow);
-  width: 90%;
-  max-width: 840px;
-  max-height: 82vh;
-  display: flex;
-  flex-direction: column;
-  backdrop-filter: blur(24px) saturate(180%);
-  -webkit-backdrop-filter: blur(24px) saturate(180%);
-  animation: modalSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  overflow: hidden;
-}
-
-[data-theme="light"] .content-search-overlay {
-  background-color: rgba(255, 255, 255, 0.98);
-  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(0, 0, 0, 0.05);
-}
-
-@keyframes modalSlideIn {
-  from {
-    opacity: 0;
-    transform: translate(-50%, -48%);
-  }
-  to {
-    opacity: 1;
-    transform: translate(-50%, -50%);
-  }
-}
-
-.content-search-container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.content-search-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20px 24px;
-  border-bottom: 1px solid var(--border-subtle);
-  background: var(--bg-secondary);
-}
-
-.content-search-header h3 {
-  margin: 0;
-  font-size: 17px;
-  font-weight: 600;
-  color: var(--text-primary);
-  letter-spacing: -0.01em;
-}
-
-.content-search-close {
-  background: none;
-  border: none;
-  color: var(--text-secondary);
-  font-size: 20px;
-  line-height: 1;
-  cursor: pointer;
-  padding: 0;
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius-md);
-  transition: all var(--transition-base);
-  opacity: 0.7;
-}
-
-.content-search-close:hover {
-  background: var(--hover-bg-strong);
-  color: var(--text-primary);
-  opacity: 1;
-  transform: scale(1.1) rotate(90deg);
-}
-
-.content-search-close:active {
-  transform: scale(0.95) rotate(90deg);
-}
-
-.content-search-input-wrapper {
-  display: flex;
-  align-items: center;
-  padding: 18px 24px;
-  gap: 12px;
-  border-bottom: 1px solid var(--border-subtle);
-  background: var(--bg-secondary);
-}
-
-.content-search-input {
-  flex: 1;
-  padding: 12px 16px;
-  font-size: 14px;
-  border: 1.5px solid var(--border-primary);
-  border-radius: var(--radius-md);
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  outline: none;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
-  transition: all var(--transition-base);
-  box-shadow: var(--shadow-inner);
-}
-
-.content-search-input:hover {
-  border-color: var(--border-secondary);
-  background: var(--bg-elevated);
-}
-
-.content-search-input:focus {
-  border-color: var(--link-color);
-  background: var(--bg-primary);
-  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15), var(--shadow-inner);
-  outline: none;
-}
-
-.content-search-options {
-  display: flex;
-  gap: 6px;
-}
-
-.content-search-option {
-  padding: 8px 12px;
-  font-size: 11px;
-  font-weight: 500;
-  border: 1px solid var(--border-primary);
-  border-radius: var(--radius-sm);
-  background: var(--bg-primary);
-  color: var(--text-secondary);
-  cursor: pointer;
-  transition: all var(--transition-base);
-  min-width: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: var(--shadow-sm);
-}
-
-.content-search-option:hover {
-  background: var(--hover-bg);
-  border-color: var(--border-secondary);
-  color: var(--text-primary);
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-md);
-}
-
-.content-search-option.active {
-  background: var(--link-color);
-  color: white;
-  border-color: var(--link-color);
-  box-shadow: 0 2px 4px rgba(88, 166, 255, 0.3);
-}
-
-.content-search-option.active:hover {
-  background: var(--link-hover);
-  border-color: var(--link-hover);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 8px rgba(88, 166, 255, 0.4);
-}
-
-.content-search-info {
-  padding: 14px 24px;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--text-secondary);
-  border-bottom: 1px solid var(--border-subtle);
-  background: var(--bg-secondary);
-  letter-spacing: 0.01em;
-}
-
-.content-search-status.error {
-  color: #ff7b72;
-  font-weight: 600;
-}
-
-.content-search-results {
-  flex: 1;
-  overflow-y: auto;
-  padding: 4px 0;
-  scrollbar-width: thin;
-  scrollbar-color: var(--border-primary) transparent;
-}
-
-.content-search-results::-webkit-scrollbar {
-  width: 8px;
-}
-
-.content-search-results::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.content-search-results::-webkit-scrollbar-thumb {
-  background: var(--border-primary);
-  border-radius: 4px;
-}
-
-.content-search-results::-webkit-scrollbar-thumb:hover {
-  background: var(--text-secondary);
-}
-
-.content-search-result {
-  padding: 14px 24px;
-  cursor: pointer;
-  transition: all var(--transition-base);
-  border-bottom: 1px solid var(--border-subtle);
-  position: relative;
-}
-
-.content-search-result::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 3px;
-  background: var(--link-color);
-  opacity: 0;
-  transition: opacity var(--transition-base);
-}
-
-.content-search-result:hover {
-  background: var(--hover-bg);
-  padding-left: 28px;
-}
-
-.content-search-result:hover::before {
-  opacity: 1;
-}
-
-.content-search-result-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 10px;
-  gap: 12px;
-}
-
-.result-path {
-  font-weight: 600;
-  color: var(--link-color);
-  font-size: 14px;
-  transition: color var(--transition-base);
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.content-search-result:hover .result-path {
-  color: var(--link-hover);
-  text-decoration: underline;
-}
-
-.result-count {
-  font-size: 11px;
-  font-weight: 500;
-  color: var(--text-secondary);
-  background: var(--bg-tertiary);
-  padding: 2px 8px;
-  border-radius: 10px;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.content-search-matches {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.content-search-match {
-  display: flex;
-  gap: 14px;
-  font-size: 12px;
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-  padding: 3px 0;
-  transition: all var(--transition-base);
-  border-radius: var(--radius-sm);
-}
-
-.content-search-match:hover {
-  background: var(--bg-tertiary);
-  padding-left: 4px;
-}
-
-.match-line-number {
-  color: var(--text-secondary);
-  min-width: 44px;
-  text-align: right;
-  user-select: none;
-  font-weight: 500;
-  opacity: 0.8;
-  transition: all var(--transition-base);
-}
-
-.content-search-match:hover .match-line-number {
-  opacity: 1;
-  color: var(--link-color);
-}
-
-.match-content {
-  color: var(--text-primary);
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-weight: 400;
-}
-
-.content-search-more {
-  font-size: 11px;
-  color: var(--text-secondary);
-  font-style: italic;
-  margin-top: 4px;
-}
-
-.content-search-highlight {
-  background: linear-gradient(120deg, rgba(255, 235, 59, 0.3) 0%, rgba(255, 235, 59, 0.2) 100%);
-  padding: 2px 3px;
-  border-radius: 3px;
-  font-weight: 500;
-  box-shadow: 0 1px 2px rgba(255, 235, 59, 0.2);
-}
-
-[data-theme="dark"] .content-search-highlight {
-  background: linear-gradient(120deg, rgba(255, 235, 59, 0.25) 0%, rgba(255, 235, 59, 0.15) 100%);
-  box-shadow: 0 1px 2px rgba(255, 235, 59, 0.15);
-}
-
-/* Line number styling to match our theme */
-.monaco-editor .margin-view-overlays .line-numbers {
-  color: var(--text-secondary) !important;
-}
-
-.monaco-editor .margin-view-overlays .line-numbers.active-line-number {
-  color: var(--text-primary) !important;
-}
-
-/* Draft dialog styling */
-.draft-modal {
-  max-width: 400px;
-  text-align: center;
-}
-
-.draft-modal h3 {
-  margin: 0 0 12px 0;
-  color: var(--text-accent);
-  font-size: 18px;
-}
-
-.draft-modal p {
-  margin: 0 0 20px 0;
-  color: var(--text-secondary);
-  line-height: 1.5;
-}
-
-.draft-actions {
-  display: flex;
-  gap: 8px;
-  justify-content: center;
-}
-
-.draft-actions .btn {
-  flex: 1;
-  max-width: 120px;
-}
-
-/* ========================================
-   Symbol Outline Panel
-   ======================================== */
-
-.symbol-outline-btn {
-  position: relative;
-}
-
-.symbol-outline-btn.active {
-  background: var(--hover-bg);
-  color: var(--link-color);
-}
-
-.symbol-outline-panel {
-  position: fixed;
-  width: 300px;
-  max-height: 400px;
-  background: var(--bg-card);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-xl);
-  z-index: 99999;
-  display: none;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.symbol-outline-panel.open {
-  display: flex;
-}
-
-.symbol-outline-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--border-subtle);
-  background: var(--bg-secondary);
-}
-
-.symbol-outline-title {
-  font-weight: 600;
-  font-size: 13px;
-  color: var(--text-primary);
-}
-
-.symbol-outline-count {
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-.symbol-outline-search {
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.symbol-search-input {
-  width: 100%;
-  padding: 8px 12px;
-  font-size: 13px;
-  background: var(--bg-primary);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-md);
-  color: var(--text-primary);
-  outline: none;
-  transition: border-color var(--transition-base);
-}
-
-.symbol-search-input:focus {
-  border-color: var(--link-color);
-}
-
-.symbol-search-input::placeholder {
-  color: var(--text-muted);
-}
-
-.symbol-outline-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 8px 0;
-}
-
-.symbol-outline-loading,
-.symbol-outline-empty,
-.symbol-outline-error {
-  padding: 24px 16px;
-  text-align: center;
-  color: var(--text-muted);
-  font-size: 13px;
-}
-
-.symbol-outline-error {
-  color: var(--text-danger, #f87171);
-}
-
-/* Symbol Groups */
-.symbol-group {
-  margin-bottom: 4px;
-}
-
-.symbol-group-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 6px 16px;
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.symbol-group-count {
-  font-weight: 400;
-  color: var(--text-muted);
-  opacity: 0.7;
-}
-
-.symbol-group-items {
-  display: flex;
-  flex-direction: column;
-}
-
-/* Symbol Items */
-.symbol-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 16px;
-  cursor: pointer;
-  transition: background var(--transition-fast);
-}
-
-.symbol-item:hover {
-  background: rgba(96, 165, 250, 0.08);
-  border-left: 2px solid var(--link-color);
-  padding-left: 14px;
-}
-
-.symbol-item.selected {
-  background: rgba(96, 165, 250, 0.15);
-  border-left: 2px solid var(--link-color);
-  padding-left: 14px;
-}
-
-.symbol-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  font-size: 10px;
-  font-weight: 700;
-  font-family: ui-monospace, monospace;
-  border-radius: 3px;
-  flex-shrink: 0;
-}
-
-/* Symbol icon colors by type */
-.symbol-icon-function,
-.symbol-icon-method {
-  background: rgba(139, 92, 246, 0.2);
-  color: #a78bfa;
-}
-
-.symbol-icon-class {
-  background: rgba(251, 191, 36, 0.2);
-  color: #fbbf24;
-}
-
-.symbol-icon-interface,
-.symbol-icon-type {
-  background: rgba(34, 211, 238, 0.2);
-  color: #22d3ee;
-}
-
-.symbol-icon-constant,
-.symbol-icon-variable {
-  background: rgba(74, 222, 128, 0.2);
-  color: #4ade80;
-}
-
-.symbol-icon-selector,
-.symbol-icon-mixin,
-.symbol-icon-keyframes,
-.symbol-icon-media {
-  background: rgba(251, 113, 133, 0.2);
-  color: #fb7185;
-}
-
-.symbol-name {
-  flex: 1;
-  font-size: 13px;
-  color: var(--text-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-}
-
-.symbol-line {
-  font-size: 11px;
-  color: var(--text-muted);
-  font-family: ui-monospace, monospace;
-}
-
-/* Line highlight flash animation */
-.line-highlight-flash {
-  animation: lineFlash 2s ease-out;
-}
-
-@keyframes lineFlash {
-  0% {
-    background: rgba(96, 165, 250, 0.3);
-  }
-  100% {
-    background: transparent;
-  }
-}
-
-/* Light theme adjustments */
-[data-theme="light"] .symbol-icon-function,
-[data-theme="light"] .symbol-icon-method {
-  background: rgba(139, 92, 246, 0.15);
-  color: #7c3aed;
-}
-
-[data-theme="light"] .symbol-icon-class {
-  background: rgba(217, 119, 6, 0.15);
-  color: #b45309;
-}
-
-[data-theme="light"] .symbol-icon-interface,
-[data-theme="light"] .symbol-icon-type {
-  background: rgba(6, 182, 212, 0.15);
-  color: #0891b2;
-}
-
-[data-theme="light"] .symbol-icon-constant,
-[data-theme="light"] .symbol-icon-variable {
-  background: rgba(22, 163, 74, 0.15);
-  color: #16a34a;
-}
-
-[data-theme="light"] .symbol-icon-selector,
-[data-theme="light"] .symbol-icon-mixin,
-[data-theme="light"] .symbol-icon-keyframes,
-[data-theme="light"] .symbol-icon-media {
-  background: rgba(225, 29, 72, 0.15);
-  color: #be123c;
-}
-
-[data-theme="light"] .line-highlight-flash {
-  animation: lineFlashLight 2s ease-out;
-}
-
-@keyframes lineFlashLight {
-  0% {
-    background: rgba(37, 99, 235, 0.2);
-  }
-  100% {
-    background: transparent;
-  }
-}