/* 
  Arquivo: style.css
  Pasta: /vscode-clone/
*/

    :root {
      --bg-primary: #1e1e1e;
      --bg-secondary: #252526;
      --bg-tertiary: #2d2d30;
      --bg-hover: #37373d;
      --bg-active: #094771;
      --border-color: #3c3c3c;
      --text-primary: #cccccc;
      --text-secondary: #969696;
      --text-muted: #6e6e6e;
      --accent: #007acc;
      --accent-hover: #1c97ea;
      --scrollbar-bg: #1e1e1e;
      --scrollbar-thumb: #424242;
      --tab-active-border: #007acc;
      --modified: #e2c08d;
      --error: #f14c4c;
      --warning: #cca700;
      --success: #89d185;
      --minimap-bg: #1e1e1e;
      --line-number: #858585;
      --line-number-active: #c6c6c6;
      --selection-bg: #264f78;
      --current-line: #282828;
      --find-match: #515c6a;
      --find-match-current: #613214;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
      background: var(--bg-primary);
      color: var(--text-primary);
      height: 100vh;
      overflow: hidden;
      font-size: 13px;
    }

    /* Title Bar */
    .title-bar {
      height: 30px;
      background: var(--bg-tertiary);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      -webkit-app-region: drag;
      border-bottom: 1px solid var(--border-color);
    }

    .title-bar-left {
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .app-icon {
      width: 16px;
      height: 16px;
      background: linear-gradient(135deg, #007acc 0%, #0098ff 100%);
      border-radius: 2px;
    }

    .menu-bar {
      display: flex;
      gap: 2px;
      -webkit-app-region: no-drag;
    }

    .menu-item {
      padding: 4px 8px;
      cursor: pointer;
      border-radius: 3px;
      font-size: 12px;
    }

    .menu-item:hover {
      background: var(--bg-hover);
    }

    .title-text {
      font-size: 12px;
      color: var(--text-secondary);
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    .window-controls {
      display: flex;
      -webkit-app-region: no-drag;
    }

    .window-btn {
      width: 46px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 10px;
    }

    .window-btn:hover {
      background: var(--bg-hover);
    }

    .window-btn.close:hover {
      background: #e81123;
    }

    /* Main Container */
    .main-container {
      display: flex;
      height: calc(100vh - 30px - 22px);
    }

    /* Activity Bar */
    .activity-bar {
      width: 48px;
      background: var(--bg-tertiary);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 4px;
      border-right: 1px solid var(--border-color);
    }

    .activity-item {
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--text-secondary);
      position: relative;
      font-size: 24px;
    }

    .activity-item:hover {
      color: var(--text-primary);
    }

    .activity-item.active {
      color: var(--text-primary);
    }

    .activity-item.active::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 2px;
      background: var(--accent);
    }

    .activity-bottom {
      margin-top: auto;
      padding-bottom: 8px;
    }

    /* Sidebar */
    .sidebar {
      width: 250px;
      background: var(--bg-secondary);
      display: flex;
      flex-direction: column;
      border-right: 1px solid var(--border-color);
    }

    .sidebar.hidden {
      display: none;
    }

    .sidebar-header {
      height: 35px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px 0 10px;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-secondary);
    }

    .sidebar-actions {
      display: flex;
      gap: 4px;
    }

    .sidebar-action {
      width: 22px;
      height: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: 3px;
      font-size: 14px;
    }

    .sidebar-action:hover {
      background: var(--bg-hover);
    }

    .file-tree {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
    }

    .tree-item {
      display: flex;
      align-items: center;
      padding: 4px 8px;
      cursor: pointer;
      white-space: nowrap;
      font-size: 13px;
    }

    .tree-item:hover {
      background: var(--bg-hover);
    }

    .tree-item.selected {
      background: var(--bg-active);
    }

    .tree-item .icon {
      width: 16px;
      height: 16px;
      margin-right: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      flex-shrink: 0;
    }

    .tree-item .chevron {
      width: 16px;
      margin-right: 2px;
      font-size: 10px;
      transition: transform 0.1s;
      flex-shrink: 0;
    }

    .tree-item .chevron.expanded {
      transform: rotate(90deg);
    }

    .tree-item .name {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .tree-children {
      display: none;
    }

    .tree-children.expanded {
      display: block;
    }

    /* Editor Area */
    .editor-area {
      flex: 1;
      display: flex;
      flex-direction: column;
      background: var(--bg-primary);
      min-width: 0;
    }

    /* Tabs */
    .tabs-container {
      height: 35px;
      background: var(--bg-secondary);
      display: flex;
      overflow-x: auto;
      border-bottom: 1px solid var(--border-color);
    }

    .tabs-container::-webkit-scrollbar {
      height: 3px;
    }

    .tab {
      min-width: 120px;
      max-width: 200px;
      height: 35px;
      display: flex;
      align-items: center;
      padding: 0 10px;
      background: var(--bg-tertiary);
      border-right: 1px solid var(--border-color);
      cursor: pointer;
      position: relative;
      font-size: 13px;
    }

    .tab:hover {
      background: var(--bg-hover);
    }

    .tab.active {
      background: var(--bg-primary);
      border-top: 1px solid var(--tab-active-border);
      margin-top: -1px;
    }

    .tab .icon {
      margin-right: 6px;
      font-size: 14px;
    }

    .tab .name {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .tab .modified {
      width: 8px;
      height: 8px;
      background: var(--modified);
      border-radius: 50%;
      margin-left: 6px;
      display: none;
    }

    .tab.modified .modified {
      display: block;
    }

    .tab .close {
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 3px;
      margin-left: 4px;
      font-size: 12px;
      opacity: 0;
    }

    .tab:hover .close,
    .tab.active .close {
      opacity: 1;
    }

    .tab .close:hover {
      background: var(--bg-hover);
    }

    /* Breadcrumb */
    .breadcrumb {
      height: 22px;
      background: var(--bg-primary);
      display: flex;
      align-items: center;
      padding: 0 10px;
      font-size: 12px;
      color: var(--text-secondary);
      border-bottom: 1px solid var(--border-color);
    }

    .breadcrumb-item {
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .breadcrumb-item:hover {
      color: var(--text-primary);
    }

    .breadcrumb-separator {
      margin: 0 4px;
      font-size: 10px;
    }

    /* Editor */
    .editor-container {
      flex: 1;
      display: flex;
      overflow: hidden;
      position: relative;
    }

    .line-numbers {
      width: 60px;
      background: var(--bg-primary);
      text-align: right;
      padding-right: 15px;
      padding-top: 4px;
      font-family: 'Fira Code', 'Consolas', monospace;
      font-size: 14px;
      line-height: 20px;
      color: var(--line-number);
      user-select: none;
      overflow: hidden;
    }

    .line-number {
      height: 20px;
    }

    .line-number.active {
      color: var(--line-number-active);
    }

    .editor-content {
      flex: 1;
      position: relative;
      overflow: hidden;
    }

    .editor-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
    }

    .editor-highlights {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      font-family: 'Fira Code', 'Consolas', monospace;
      font-size: 14px;
      line-height: 20px;
      padding: 4px 10px;
      pointer-events: none;
      white-space: pre;
      overflow: hidden;
      z-index: 0;
    }

    .editor-syntax {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      font-family: 'Fira Code', 'Consolas', monospace;
      font-size: 14px;
      line-height: 20px;
      padding: 4px 10px;
      pointer-events: none;
      white-space: pre;
      overflow: hidden;
      z-index: 1;
      color: var(--text-primary);
    }

    .editor-textarea {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background: transparent;
      border: none;
      outline: none;
      resize: none;
      font-family: 'Fira Code', 'Consolas', monospace;
      font-size: 14px;
      line-height: 20px;
      /* Correção: Inicialmente definimos cor para garantir visibilidade em caso de erro */
      color: var(--text-primary); 
      caret-color: #aeafad;
      padding: 4px 10px;
      tab-size: 2;
      white-space: pre;
      overflow: auto;
      z-index: 2;
    }

    .editor-textarea::selection {
      background: var(--selection-bg);
    }

    /* Syntax Highlighting - VS Code Theme */
    .token-keyword { color: #569cd6; }
    .token-string { color: #ce9178; }
    .token-string-template { color: #ce9178; }
    .token-number { color: #b5cea8; }
    .token-comment { color: #6a9955; font-style: italic; }
    .token-function { color: #dcdcaa; }
    .token-class { color: #4ec9b0; }
    .token-interface { color: #4ec9b0; }
    .token-type { color: #4ec9b0; }
    .token-operator { color: #d4d4d4; }
    .token-punctuation { color: #d4d4d4; }
    .token-property { color: #9cdcfe; }
    .token-variable { color: #9cdcfe; }
    .token-parameter { color: #9cdcfe; }
    .token-tag { color: #569cd6; }
    .token-tag-name { color: #569cd6; }
    .token-attribute { color: #9cdcfe; }
    .token-attribute-value { color: #ce9178; }
    .token-entity { color: #569cd6; }
    .token-meta { color: #569cd6; }
    .token-selector { color: #d7ba7d; }
    .token-selector-class { color: #d7ba7d; }
    .token-selector-id { color: #d7ba7d; }
    .token-css-property { color: #9cdcfe; }
    .token-css-value { color: #ce9178; }
    .token-unit { color: #b5cea8; }
    .token-important { color: #569cd6; }
    .token-regex { color: #d16969; }
    .token-escape { color: #d7ba7d; }
    .token-constant { color: #4fc1ff; }
    .token-boolean { color: #569cd6; }
    .token-null { color: #569cd6; }
    .token-this { color: #569cd6; }
    .token-super { color: #569cd6; }
    .token-decorator { color: #dcdcaa; }
    .token-annotation { color: #dcdcaa; }
    .token-namespace { color: #4ec9b0; }
    .token-module { color: #4ec9b0; }
    .token-json-key { color: #9cdcfe; }
    .token-json-value { color: #ce9178; }
    .token-python-builtin { color: #4ec9b0; }
    .token-python-decorator { color: #dcdcaa; }
    .token-php-variable { color: #9cdcfe; }
    .token-php-tag { color: #569cd6; }
    .token-html-doctype { color: #808080; }

    /* Find/Replace Widget */
    .find-widget {
      position: absolute;
      top: 0;
      right: 20px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 0 0 4px 4px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
      z-index: 100;
      display: none;
      min-width: 420px;
    }

    .find-widget.visible {
      display: block;
    }

    .find-widget.expanded {
      min-width: 420px;
    }

    .find-row {
      display: flex;
      align-items: center;
      padding: 4px 8px;
      gap: 4px;
    }

    .find-toggle {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: 3px;
      color: var(--text-secondary);
      font-size: 10px;
      transition: transform 0.2s;
    }

    .find-toggle:hover {
      background: var(--bg-hover);
      color: var(--text-primary);
    }

    .find-toggle.expanded {
      transform: rotate(90deg);
    }

    .find-input-container {
      flex: 1;
      position: relative;
      display: flex;
      align-items: center;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      border-radius: 3px;
    }

    .find-input-container:focus-within {
      border-color: var(--accent);
    }

    .find-input {
      flex: 1;
      background: transparent;
      border: none;
      padding: 4px 8px;
      color: var(--text-primary);
      font-size: 13px;
      outline: none;
      min-width: 150px;
    }

    .find-input::placeholder {
      color: var(--text-muted);
    }

    .find-options {
      display: flex;
      padding-right: 4px;
      gap: 2px;
    }

    .find-option {
      width: 22px;
      height: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: 3px;
      color: var(--text-secondary);
      font-size: 12px;
      border: 1px solid transparent;
    }

    .find-option:hover {
      background: var(--bg-hover);
      color: var(--text-primary);
    }

    .find-option.active {
      background: var(--accent);
      color: white;
      border-color: var(--accent);
    }

    .find-actions {
      display: flex;
      gap: 2px;
    }

    .find-action {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: 3px;
      color: var(--text-secondary);
      font-size: 12px;
    }

    .find-action:hover {
      background: var(--bg-hover);
      color: var(--text-primary);
    }

    .find-action:disabled,
    .find-action.disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    .find-count {
      color: var(--text-secondary);
      font-size: 12px;
      padding: 0 8px;
      white-space: nowrap;
    }

    .find-count.no-results {
      color: var(--error);
    }

    .find-close {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: 3px;
      color: var(--text-secondary);
      margin-left: 4px;
    }

    .find-close:hover {
      background: var(--bg-hover);
      color: var(--text-primary);
    }

    .replace-row {
      display: none;
    }

    .find-widget.expanded .replace-row {
      display: flex;
    }

    .replace-actions {
      display: flex;
      gap: 2px;
    }

    /* Find Highlights */
    .find-match {
      background: var(--find-match);
      border-radius: 2px;
    }

    .find-match-current {
      background: var(--find-match-current);
      border: 1px solid var(--accent);
      border-radius: 2px;
    }

    /* Minimap */
    .minimap {
      width: 100px;
      background: var(--minimap-bg);
      border-left: 1px solid var(--border-color);
      position: relative;
      overflow: hidden;
    }

    .minimap-content {
      transform: scale(0.15);
      transform-origin: top left;
      font-family: 'Fira Code', monospace;
      font-size: 14px;
      line-height: 20px;
      white-space: pre;
      padding: 4px;
      width: 666%;
    }

    .minimap-viewport {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 50px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* Welcome Screen */
    .welcome-screen {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px;
      color: var(--text-secondary);
    }

    .welcome-logo {
      width: 150px;
      height: 150px;
      background: linear-gradient(135deg, #007acc 0%, #0066aa 100%);
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 30px;
      box-shadow: 0 10px 40px rgba(0, 122, 204, 0.3);
    }

    .welcome-logo i {
      font-size: 80px;
      color: white;
    }

    .welcome-title {
      font-size: 28px;
      font-weight: 300;
      margin-bottom: 10px;
      color: var(--text-primary);
    }

    .welcome-subtitle {
      font-size: 14px;
      margin-bottom: 40px;
    }

    .welcome-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 280px;
    }

    .welcome-btn {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      cursor: pointer;
      color: var(--text-primary);
      font-size: 14px;
      transition: all 0.2s;
    }

    .welcome-btn:hover {
      background: var(--bg-hover);
      border-color: var(--accent);
    }

    .welcome-btn i {
      font-size: 18px;
      color: var(--accent);
      width: 24px;
    }

    .welcome-shortcuts {
      margin-top: 40px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px 30px;
      font-size: 12px;
    }

    .shortcut {
      display: flex;
      justify-content: space-between;
      gap: 20px;
    }

    .shortcut kbd {
      background: var(--bg-tertiary);
      padding: 2px 6px;
      border-radius: 3px;
      font-family: 'Fira Code', monospace;
      font-size: 11px;
    }

    /* Status Bar */
    .status-bar {
      height: 22px;
      background: var(--accent);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      font-size: 12px;
      color: white;
    }

    .status-left,
    .status-right {
      display: flex;
      align-items: center;
      gap: 2px;
    }

    .status-item {
      padding: 0 8px;
      height: 22px;
      display: flex;
      align-items: center;
      gap: 4px;
      cursor: pointer;
    }

    .status-item:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    /* Search Panel */
    .search-panel {
      display: none;
      padding: 10px;
      background: var(--bg-secondary);
    }

    .search-panel.visible {
      display: block;
    }

    .search-input-container {
      display: flex;
      gap: 4px;
      margin-bottom: 8px;
    }

    .search-input {
      flex: 1;
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      padding: 6px 10px;
      color: var(--text-primary);
      font-size: 13px;
      outline: none;
    }

    .search-input:focus {
      border-color: var(--accent);
    }

    .search-results {
      max-height: 300px;
      overflow-y: auto;
    }

    .search-result-item {
      padding: 4px 8px;
      cursor: pointer;
      font-size: 12px;
    }

    .search-result-item:hover {
      background: var(--bg-hover);
    }

    /* Context Menu */
    .context-menu {
      position: fixed;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      padding: 4px 0;
      min-width: 180px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
      z-index: 1000;
      display: none;
    }

    .context-menu.visible {
      display: block;
    }

    .context-menu-item {
      padding: 6px 20px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      font-size: 13px;
    }

    .context-menu-item:hover {
      background: var(--bg-active);
    }

    .context-menu-item.disabled {
      opacity: 0.5;
      pointer-events: none;
    }

    .context-menu-separator {
      height: 1px;
      background: var(--border-color);
      margin: 4px 0;
    }

    .context-menu-shortcut {
      color: var(--text-secondary);
      font-size: 12px;
    }

    /* Command Palette */
    .command-palette {
      position: fixed;
      top: 80px;
      left: 50%;
      transform: translateX(-50%);
      width: 600px;
      max-width: 90%;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
      z-index: 1001;
      display: none;
    }

    .command-palette.visible {
      display: block;
    }

    .command-palette-input {
      width: 100%;
      padding: 12px 16px;
      background: transparent;
      border: none;
      border-bottom: 1px solid var(--border-color);
      color: var(--text-primary);
      font-size: 14px;
      outline: none;
    }

    .command-palette-results {
      max-height: 300px;
      overflow-y: auto;
    }

    .command-palette-item {
      padding: 8px 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .command-palette-item:hover,
    .command-palette-item.selected {
      background: var(--bg-active);
    }

    .command-palette-item i {
      width: 20px;
      color: var(--text-secondary);
    }

    /* Scrollbars */
    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    ::-webkit-scrollbar-track {
      background: var(--scrollbar-bg);
    }

    ::-webkit-scrollbar-thumb {
      background: var(--scrollbar-thumb);
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #555;
    }

    /* File Icons */
    .file-icon-js { color: #f7df1e; }
    .file-icon-ts { color: #3178c6; }
    .file-icon-html { color: #e34c26; }
    .file-icon-css { color: #264de4; }
    .file-icon-json { color: #cbcb41; }
    .file-icon-md { color: #519aba; }
    .file-icon-py { color: #3776ab; }
    .file-icon-php { color: #777bb4; }
    .file-icon-vue { color: #42b883; }
    .file-icon-react { color: #61dafb; }
    .file-icon-folder { color: #dcb67a; }
    .file-icon-folder-open { color: #dcb67a; }
    .file-icon-default { color: #6e6e6e; }

    /* Resize Handle */
    .resize-handle {
      width: 4px;
      cursor: col-resize;
      background: transparent;
      position: relative;
    }

    .resize-handle:hover,
    .resize-handle.active {
      background: var(--accent);
    }

    /* Notification */
    .notification {
      position: fixed;
      bottom: 40px;
      right: 20px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
      z-index: 1002;
      animation: slideIn 0.3s ease;
    }

    @keyframes slideIn {
      from {
        transform: translateX(100%);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    .notification.success i { color: var(--success); }
    .notification.error i { color: var(--error); }
    .notification.warning i { color: var(--warning); }

    /* Panel (Terminal, Problems, etc) */
    .bottom-panel {
      height: 200px;
      background: var(--bg-secondary);
      border-top: 1px solid var(--border-color);
      display: none;
      flex-direction: column;
    }

    .bottom-panel.visible {
      display: flex;
    }

    .panel-tabs {
      display: flex;
      background: var(--bg-tertiary);
      border-bottom: 1px solid var(--border-color);
    }

    .panel-tab {
      padding: 8px 16px;
      cursor: pointer;
      font-size: 12px;
      text-transform: uppercase;
      border-bottom: 2px solid transparent;
    }

    .panel-tab:hover {
      background: var(--bg-hover);
    }

    .panel-tab.active {
      border-bottom-color: var(--accent);
    }

    .panel-content {
      flex: 1;
      overflow: auto;
      padding: 10px;
      font-family: 'Fira Code', monospace;
      font-size: 13px;
    }

    .terminal-line {
      display: flex;
      gap: 8px;
      line-height: 1.6;
    }

    .terminal-prompt {
      color: var(--success);
    }

    .terminal-input {
      flex: 1;
      background: transparent;
      border: none;
      outline: none;
      color: var(--text-primary);
      font-family: inherit;
      font-size: inherit;
    }

    /* Dropdown Menus */
    .menu-item {
      padding: 4px 8px;
      cursor: pointer;
      border-radius: 3px;
      font-size: 12px;
      position: relative;
    }

    .dropdown-menu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 220px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
      z-index: 1000;
      padding: 4px 0;
    }

    .dropdown-menu.visible {
      display: block;
    }

    .dropdown-item {
      padding: 6px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      font-size: 13px;
      white-space: nowrap;
    }

    .dropdown-item:hover {
      background: var(--bg-active);
    }

    .dropdown-item .shortcut {
      color: var(--text-secondary);
      font-size: 11px;
      margin-left: 30px;
    }

    .dropdown-separator {
      height: 1px;
      background: var(--border-color);
      margin: 4px 0;
    }

    /* Extensions Panel */
    .extensions-panel {
      display: none;
      padding: 10px;
      flex-direction: column;
      height: 100%;
    }

    .extensions-panel.visible {
      display: flex;
    }

    .extensions-search {
      margin-bottom: 10px;
    }

    .extensions-list {
      flex: 1;
      overflow-y: auto;
    }

    .extension-item {
      display: flex;
      align-items: flex-start;
      padding: 10px;
      border-radius: 4px;
      cursor: pointer;
      gap: 10px;
    }

    .extension-item:hover {
      background: var(--bg-hover);
    }

    .extension-icon {
      width: 42px;
      height: 42px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
    }

    .extension-info {
      flex: 1;
      min-width: 0;
    }

    .extension-name {
      font-weight: 500;
      font-size: 13px;
      margin-bottom: 2px;
    }

    .extension-publisher {
      font-size: 11px;
      color: var(--text-secondary);
      margin-bottom: 4px;
    }

    .extension-description {
      font-size: 12px;
      color: var(--text-muted);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .extension-install-btn {
      background: var(--accent);
      color: white;
      border: none;
      padding: 4px 10px;
      border-radius: 3px;
      font-size: 11px;
      cursor: pointer;
    }

    .extension-install-btn:hover {
      background: var(--accent-hover);
    }

    .extension-install-btn.installed {
      background: var(--success);
    }

    /* Settings Panel */
    .settings-panel {
      display: none;
      padding: 10px;
      flex-direction: column;
      height: 100%;
    }

    .settings-panel.visible {
      display: flex;
    }

    .settings-search {
      margin-bottom: 10px;
    }

    .settings-list {
      flex: 1;
      overflow-y: auto;
    }

    .setting-item {
      padding: 12px;
      border-bottom: 1px solid var(--border-color);
    }

    .setting-item:last-child {
      border-bottom: none;
    }

    .setting-label {
      font-size: 13px;
      margin-bottom: 4px;
    }

    .setting-description {
      font-size: 12px;
      color: var(--text-secondary);
      margin-bottom: 8px;
    }

    .setting-control {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .setting-checkbox {
      width: 16px;
      height: 16px;
      cursor: pointer;
    }

    .setting-select {
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      color: var(--text-primary);
      padding: 4px 8px;
      border-radius: 3px;
      font-size: 12px;
    }

    .setting-input {
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      color: var(--text-primary);
      padding: 4px 8px;
      border-radius: 3px;
      font-size: 12px;
      width: 60px;
    }

    /* Modal */
    .modal-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.6);
      z-index: 2000;
      align-items: center;
      justify-content: center;
    }

    .modal-overlay.visible {
      display: flex;
    }

    .modal-content {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      min-width: 400px;
      max-width: 90%;
      max-height: 80vh;
      overflow: hidden;
      box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
    }

    .modal-content.modal-large {
      min-width: 700px;
    }

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 20px;
      border-bottom: 1px solid var(--border-color);
    }

    .modal-header h2 {
      font-size: 16px;
      font-weight: 500;
    }

    .modal-close {
      font-size: 24px;
      cursor: pointer;
      color: var(--text-secondary);
      line-height: 1;
    }

    .modal-close:hover {
      color: var(--text-primary);
    }

    .modal-body {
      padding: 20px;
      overflow-y: auto;
      max-height: 60vh;
    }

    .about-body {
      text-align: center;
    }

    .about-logo {
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, #007acc 0%, #0098ff 100%);
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
    }

    .about-logo i {
      font-size: 40px;
      color: white;
    }

    .about-body h3 {
      font-size: 20px;
      margin-bottom: 5px;
    }

    /* Shortcuts Modal */
    .shortcuts-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 25px;
    }

    .shortcuts-section h4 {
      font-size: 14px;
      margin-bottom: 12px;
      color: var(--accent);
      border-bottom: 1px solid var(--border-color);
      padding-bottom: 6px;
    }

    .shortcut-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 4px 0;
      font-size: 12px;
    }

    .shortcut-item kbd {
      background: var(--bg-tertiary);
      padding: 3px 8px;
      border-radius: 3px;
      font-family: 'Fira Code', monospace;
      font-size: 11px;
      border: 1px solid var(--border-color);
    }