gh-here 3.0.3 → 3.2.0

package/public/styles.css

@@ -1,2727 +0,0 @@
-:root {
-  /* GitHub Dark */
-  --bg-primary: #0d1117;
-  --bg-secondary: #161b22;
-  --bg-tertiary: #21262d;
-  --border-primary: #30363d;
-  --border-secondary: #21262d;
-  --text-primary: #e6edf3;
-  --text-secondary: #8b949e;
-  --text-accent: #f0f6fc;
-  --link-color: #58a6ff;
-  --hover-bg: #161b22;
-}
-
-[data-theme="light"] {
-  /* GitHub Light */
-  --bg-primary: #ffffff;
-  --bg-secondary: #f6f8fa;
-  --bg-tertiary: #f1f3f4;
-  --border-primary: #d1d9e0;
-  --border-secondary: #d8dee4;
-  --text-primary: #1f2328;
-  --text-secondary: #656d76;
-  --text-accent: #1f2328;
-  --link-color: #0969da;
-  --hover-bg: #f6f8fa;
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-html {
-  /* Set background on html to prevent flash during navigation */
-  background-color: #0d1117; /* Default dark theme background */
-  color-scheme: dark;
-}
-
-html[data-theme="light"] {
-  background-color: #ffffff; /* Light theme background */
-  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.5;
-  min-height: 100vh;
-}
-
-/* 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-color: var(--bg-secondary);
-  border-bottom: 1px solid var(--border-primary);
-  position: sticky;
-  top: 0;
-  z-index: 100;
-}
-
-.header-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 32px;
-  max-width: 100%;
-}
-
-.header-left {
-  flex: 0 0 auto;
-}
-
-.header-left h1 {
-  font-size: 20px;
-  font-weight: 600;
-  margin: 0;
-  color: var(--text-primary);
-  letter-spacing: 0.02em;
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-}
-
-.header-left h1::before {
-  content: '$';
-  color: var(--link-color);
-  margin-right: 8px;
-  opacity: 0.8;
-  font-weight: 400;
-}
-
-.header-path {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-left: auto;
-}
-
-/* GitHub-style White Canvas Section */
-.repo-canvas {
-  background-color: var(--bg-primary);
-  flex: 1;
-  min-width: 0;
-}
-
-.repo-canvas-content {
-  padding: 16px 24px;
-  max-width: 1280px;
-  margin: 0 auto;
-}
-
-.breadcrumb-section {
-  font-size: 20px;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin: 0 0 12px 0;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.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;
-}
-
-.repo-controls-left {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.repo-controls-left:empty {
-  display: none;
-}
-
-.repo-controls-right {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-left: auto;
-}
-
-.branch-button {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 5px 12px;
-  background: var(--bg-primary);
-  border: 1px solid var(--border-primary);
-  border-radius: 6px;
-  color: var(--text-primary);
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.branch-button:hover {
-  background: var(--bg-secondary);
-  border-color: var(--text-secondary);
-}
-
-.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;
-}
-
-.search-input {
-  background: var(--bg-primary);
-  border: 1px solid var(--border-primary);
-  border-radius: 6px;
-  padding: 6px 40px 6px 32px;
-  color: var(--text-primary);
-  font-size: 14px;
-  width: 300px;
-}
-
-.search-input:focus {
-  outline: none;
-  border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.3);
-}
-
-/* Search results overlay */
-.search-results-overlay {
-  position: absolute;
-  top: calc(100% + 8px);
-  left: 0;
-  right: 0;
-  z-index: 1000;
-  min-width: 400px;
-}
-
-.search-results-container {
-  background: var(--bg-primary);
-  border: 1px solid var(--border-primary);
-  border-radius: 6px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
-  max-height: 400px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.search-results-header {
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--border-primary);
-  background: var(--bg-secondary);
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-secondary);
-}
-
-.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: 10px;
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--border-secondary);
-  text-decoration: none;
-  color: var(--text-primary);
-  transition: background-color 0.15s ease;
-  cursor: pointer;
-}
-
-.search-result-item:last-child {
-  border-bottom: none;
-}
-
-.search-result-item:hover {
-  background-color: var(--hover-bg);
-}
-
-.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-color: rgba(255, 200, 50, 0.3);
-  color: var(--text-accent);
-  border-radius: 2px;
-  padding: 0 2px;
-  font-weight: 600;
-}
-
-[data-theme="light"] .search-highlight {
-  background-color: rgba(255, 200, 50, 0.4);
-}
-
-.search-icon {
-  position: absolute;
-  left: 8px;
-  width: 16px;
-  height: 16px;
-  fill: var(--text-secondary);
-  pointer-events: none;
-}
-
-.search-hotkey {
-  position: absolute;
-  right: 8px;
-  background: var(--bg-tertiary);
-  border: 1px solid var(--border-primary);
-  border-radius: 3px;
-  padding: 2px 6px;
-  font-size: 12px;
-  color: var(--text-secondary);
-  font-family: ui-monospace, SFMono-Regular, monospace;
-}
-
-/* GitHub-style Buttons */
-.btn {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 5px 12px;
-  border-radius: 6px;
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  border: 1px solid;
-}
-
-.btn-primary {
-  background: var(--bg-primary);
-  border-color: var(--border-primary);
-  color: var(--text-primary);
-}
-
-.btn-primary:hover {
-  background: var(--bg-secondary);
-}
-
-.btn-outline {
-  background: var(--bg-primary);
-  border-color: var(--border-primary);
-  color: var(--text-primary);
-}
-
-.btn-outline:hover {
-  background: var(--bg-secondary);
-}
-
-.btn-success {
-  background: #238636;
-  border-color: rgba(240, 246, 252, 0.1);
-  color: #ffffff;
-}
-
-.btn-success:hover {
-  background: #2ea043;
-}
-
-.btn-icon,
-.btn-chevron {
-  width: 16px;
-  height: 16px;
-  fill: currentColor;
-}
-
-.theme-toggle,
-.gitignore-toggle,
-.edit-btn {
-  background: var(--bg-primary);
-  border: 1px solid var(--border-primary);
-  border-radius: 6px;
-  padding: 5px 12px;
-  cursor: pointer;
-  color: var(--text-primary);
-  transition: all 0.15s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 32px;
-  min-width: 32px;
-  margin: 0;
-  font-size: 14px;
-}
-
-.theme-toggle:hover,
-.gitignore-toggle:hover,
-.edit-btn:hover {
-  background-color: var(--bg-tertiary);
-  border-color: var(--text-secondary);
-}
-
-.theme-toggle:active,
-.gitignore-toggle:active,
-.edit-btn:active {
-  background-color: var(--hover-bg);
-  transform: scale(0.97);
-}
-
-.gitignore-toggle.showing-ignored {
-  color: var(--link-color);
-  border-color: var(--link-color);
-  background: rgba(88, 166, 255, 0.1);
-}
-
-.gitignore-toggle.showing-ignored:hover {
-  background-color: rgba(88, 166, 255, 0.15);
-}
-
-.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: 6px;
-  overflow: hidden;
-  background: var(--bg-primary);
-}
-
-.view-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 12px;
-  background: transparent;
-  border: none;
-  color: var(--text-secondary);
-  text-decoration: none;
-  font-size: 13px;
-  font-weight: 500;
-  transition: all 0.15s ease;
-  white-space: nowrap;
-  cursor: pointer;
-}
-
-.view-btn:hover {
-  background-color: var(--hover-bg);
-  color: var(--text-primary);
-}
-
-.view-btn.active {
-  background-color: var(--link-color);
-  color: white;
-}
-
-.view-btn.active:hover {
-  background-color: var(--link-color);
-  opacity: 0.9;
-}
-
-.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: 500;
-  padding: 2px 6px;
-  border-radius: 4px;
-  transition: all 0.15s ease;
-}
-
-.breadcrumb-item a:hover {
-  text-decoration: none;
-  color: var(--text-accent);
-  background-color: var(--hover-bg);
-}
-
-.breadcrumb-separator {
-  color: var(--text-secondary);
-  margin: 0 4px;
-  opacity: 0.7;
-}
-
-/* File Header */
-.file-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 16px;
-  margin-bottom: 12px;
-  background-color: var(--bg-secondary);
-  border: 1px solid var(--border-primary);
-  border-radius: 6px;
-  gap: 16px;
-  flex-wrap: wrap;
-}
-
-.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: 4px;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  color: var(--text-secondary);
-  transition: all 0.15s ease;
-  flex-shrink: 0;
-}
-
-.file-path-copy-btn:hover {
-  background-color: var(--hover-bg);
-  color: var(--text-primary);
-}
-
-.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: 6px;
-  overflow: hidden;
-}
-
-.file-action-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 6px 12px;
-  background: transparent;
-  border: none;
-  color: var(--text-secondary);
-  text-decoration: none;
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.15s ease;
-  white-space: nowrap;
-  gap: 6px;
-  border-right: 1px solid var(--border-primary);
-}
-
-.file-action-btn:last-child {
-  border-right: none;
-}
-
-.file-action-btn:hover {
-  background-color: var(--hover-bg);
-  color: var(--text-primary);
-}
-
-.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 */
-.file-tree-sidebar {
-  width: 280px;
-  min-width: 280px;
-  max-width: 280px;
-  flex-shrink: 0;
-  border-right: 1px solid var(--border-primary);
-  overflow-y: auto;
-  overflow-x: hidden;
-  background: var(--bg-secondary);
-  position: sticky;
-  top: 0;
-  height: 100vh;
-  max-height: 100vh;
-  align-self: stretch;
-  transition: opacity 0.2s ease, visibility 0.2s ease;
-  display: flex;
-  flex-direction: column;
-}
-
-.file-tree-sidebar.hidden {
-  display: none;
-}
-
-.file-tree-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--border-primary);
-  background: var(--bg-secondary);
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--text-primary);
-}
-
-.files-icon {
-  fill: var(--text-secondary);
-  flex-shrink: 0;
-}
-
-.sidebar-controls {
-  padding: 12px 12px 8px;
-  border-bottom: 1px solid var(--border-primary);
-  background: var(--bg-secondary);
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.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%;
-}
-
-.sidebar-search .search-input {
-  width: 100%;
-  font-size: 12px;
-  padding: 5px 32px 5px 28px;
-  height: 28px;
-}
-
-.sidebar-search .search-hotkey {
-  font-size: 10px;
-  padding: 2px 4px;
-}
-
-.file-tree-container {
-  padding: 8px 0;
-  background: var(--bg-secondary);
-}
-
-.tree-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 8px;
-  cursor: pointer;
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--text-primary);
-  transition: background-color 0.1s ease;
-  user-select: none;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
-}
-
-.tree-item:hover {
-  background-color: var(--hover-bg);
-}
-
-.tree-item.active {
-  background-color: var(--bg-tertiary);
-  font-weight: 600;
-}
-
-.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: 1200px;
-  margin: 0 auto;
-  padding: 16px 24px;
-  width: 100%;
-}
-
-.directory-actions {
-  display: flex;
-  gap: 8px;
-  margin-bottom: 16px;
-}
-
-.btn-icon {
-  width: 14px;
-  height: 14px;
-  fill: currentColor;
-  margin-right: 6px;
-  vertical-align: text-bottom;
-}
-
-.file-table {
-  width: 100%;
-  border-collapse: collapse;
-  background-color: var(--bg-primary);
-  border: 1px solid var(--border-primary);
-  border-radius: 6px;
-  overflow: hidden;
-}
-
-.file-table thead {
-  background-color: var(--bg-secondary);
-}
-
-.file-table th {
-  padding: 8px 16px;
-  text-align: left;
-  font-weight: 600;
-  font-size: 12px;
-  color: var(--text-accent);
-  border-bottom: 1px solid var(--border-primary);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.file-table tbody tr {
-  border-bottom: 1px solid var(--border-secondary);
-}
-
-.file-table tbody tr:hover {
-  background-color: var(--hover-bg);
-}
-
-.file-table td {
-  padding: 6px 16px;
-  font-size: 14px;
-  vertical-align: middle;
-}
-
-.file-table .icon {
-  width: 24px;
-  text-align: center;
-  font-size: 16px;
-}
-
-.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; }
-.text-blue { color: #0969da; }
-.text-green { color: #1a7f37; }
-.text-red { color: #cf222e; }
-.text-orange { color: #fb8500; }
-.text-purple { color: #8250df; }
-.text-gray { color: var(--text-secondary); }
-
-[data-theme="light"] .text-yellow { color: #dbab09; }
-[data-theme="light"] .text-blue { color: #0550ae; }
-[data-theme="light"] .text-green { color: #116329; }
-[data-theme="light"] .text-red { color: #82071e; }
-[data-theme="light"] .text-orange { color: #bc4c00; }
-[data-theme="light"] .text-purple { color: #6f42c1; }
-
-/* Old search styles removed - using new GitHub-style search */
-
-/* Language stats in control bar */
-.language-stats {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-left: 16px;
-  max-width: none; /* allow full content */
-  overflow: visible; /* avoid clipping at edges */
-  position: relative;
-  white-space: nowrap; /* keep in a single row like GitHub */
-}
-
-.language-stats:hover {
-  overflow: visible;
-  z-index: 10;
-}
-
-.language-stats:hover::before {
-  content: '';
-  position: absolute;
-  top: -4px;
-  left: -8px;
-  right: -8px;
-  bottom: -4px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-primary);
-  border-radius: 6px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  z-index: -1;
-  pointer-events: none;
-}
-
-.lang-stat {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 11px;
-  color: var(--text-secondary);
-  white-space: nowrap;
-  flex-shrink: 0;
-  padding: 2px 0;
-}
-
-.lang-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  display: inline-block;
-  flex-shrink: 0;
-}
-
-.lang-name {
-  font-weight: 500;
-  color: var(--text-primary);
-}
-
-.lang-percent {
-  color: var(--text-secondary);
-}
-
-/* File table improvements */
-.file-table-container {
-  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: opacity 0.2s ease;
-  z-index: 10;
-}
-
-.file-row:hover .quick-actions {
-  opacity: 1;
-}
-
-.quick-btn {
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-primary);
-  border-radius: 4px;
-  padding: 4px 6px;
-  cursor: pointer;
-  color: var(--text-secondary);
-  transition: all 0.15s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.quick-btn:hover {
-  background: var(--hover-bg);
-  color: var(--text-primary);
-  border-color: var(--text-secondary);
-  transform: translateY(-1px);
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
-}
-
-.quick-icon {
-  width: 12px;
-  height: 12px;
-  fill: currentColor;
-}
-
-/* Improve name column to accommodate quick actions */
-.file-table .name {
-  padding-right: 80px;
-  min-width: 200px;
-}
-
-.file-table .name a {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding-right: 8px;
-}
-
-.file-table .name a {
-  color: var(--link-color);
-  text-decoration: none;
-  font-weight: 600;
-}
-
-.file-table .name a:hover {
-  text-decoration: underline;
-}
-
-.file-table .size,
-.file-table .modified {
-  color: var(--text-secondary);
-  font-size: 12px;
-  white-space: nowrap;
-}
-
-.file-content {
-  background-color: var(--bg-primary);
-  border: 1px solid var(--border-primary);
-  border-radius: 6px;
-  overflow: auto;
-}
-
-.file-content pre {
-  margin: 0;
-  padding: 0;
-  overflow-x: auto;
-  font-size: 12px;
-  line-height: 20px;
-  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: background-color 0.12s ease;
-  padding: 0;
-  line-height: 20px;
-  min-height: 20px;
-}
-
-/* Remove pseudo-newline that created extra blank lines */
-
-.line-container:hover {
-  background-color: rgba(110, 118, 129, 0.1); /* subtle hover like GH */
-}
-
-.line-container.selected {
-  background-color: #fffbdd; /* GH light selection */
-}
-
-[data-theme="dark"] .line-container.selected {
-  background-color: rgba(187, 128, 9, 0.18); /* GH-ish dark yellow */
-}
-
-/* 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;
-}
-
-.line-number:hover {
-  color: var(--link-color);
-  text-decoration: none;
-}
-
-.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;
-}
-
-/* Keep gutter simple: only border-right, no per-line background */
-
-/* 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 {
-  color: #d2a8ff;
-}
-
-.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-secondary);
-  padding: 16px;
-  border-radius: 8px;
-  overflow-x: auto;
-  margin: 16px 0;
-  border: 1px solid var(--border-primary);
-}
-
-.markdown pre code {
-  background: none;
-  padding: 0;
-  border: none;
-  font-size: 14px;
-  color: var(--text-primary);
-}
-
-/* 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 .size,
-  .file-table .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 column - minimal spacing */
-.file-table .git-status-col {
-  width: 10px;
-  text-align: center;
-  padding: 0;
-  font-size: 16px;
-  vertical-align: middle;
-}
-
-/* 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 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;
-}
-
-/* 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;
-}