.explorer-folder-bar {
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr) 28px 28px;
      align-items: center;
      gap: 7px;
      margin: 2px 3px 8px;
      padding: 4px;
      border: 1px solid var(--border-soft);
      border-radius: 9px;
      background: rgba(255,255,255,.035);
    }
    .explorer-up-btn,
    .explorer-folder-action-btn {
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      border-radius: 7px;
      color: #c4b5fd;
      background: rgba(139,92,246,.11);
      border: 1px solid rgba(139,92,246,.22);
    }
    .explorer-up-btn:hover:not(:disabled),
    .explorer-folder-action-btn:hover:not(:disabled) { color: #fff; background: rgba(139,92,246,.22); }
    .explorer-folder-action-btn.danger { color: #fb7185; background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.24); }
    .explorer-folder-action-btn.danger:hover:not(:disabled) { background: rgba(239,68,68,.22); color: #fecaca; }
    .explorer-up-btn:disabled,
    .explorer-folder-action-btn:disabled { opacity: .35; cursor: default; }
    .explorer-up-btn svg,
    .explorer-folder-action-btn svg { width: 16px; height: 16px; }
    .explorer-folder-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #dbe1ee; font: 11px JetBrains Mono, monospace; }
    .explorer-search {
      display: grid;
      grid-template-columns: 22px minmax(0, 1fr) 24px;
      align-items: center;
      gap: 5px;
      margin: 6px 3px 8px;
      padding: 5px 6px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: rgba(0,0,0,.22);
    }
    .explorer-search:focus-within { border-color: rgba(139,92,246,.65); box-shadow: 0 0 0 2px rgba(139,92,246,.12); }
    .explorer-search-icon { color: var(--muted); text-align: center; }
    .explorer-search input {
      min-width: 0;
      border: 0;
      outline: 0;
      padding: 4px 0;
      color: var(--text);
      background: transparent;
      font-size: 12px;
    }
    .explorer-search-clear {
      width: 22px;
      height: 22px;
      border-radius: 6px;
      color: var(--dim);
      display: grid;
      place-items: center;
    }
    .explorer-search-clear:hover { color: #fff; background: rgba(255,255,255,.08); }
    .tree-item {
      display: flex; align-items: center; gap: 7px;
      min-height: 28px;
      padding: 5px 7px;
      border-radius: 7px;
      color: #c9ceda;
      white-space: nowrap;
    }
    .tree-item:hover, .tree-item.active { background: rgba(255,255,255,.06); color: #fff; }
    .tree-item .muted { margin-left: auto; color: var(--dim); font: 11px JetBrains Mono, monospace; }
    .file-tree { display: grid; gap: 1px; font-family: Inter, system-ui, sans-serif; }
    .tree-node-btn {
      width: 100%;
      min-height: 26px;
      display: grid;
      grid-template-columns: 16px 20px minmax(0, 1fr) auto;
      align-items: center;
      gap: 4px;
      padding: 3px 7px 3px calc(7px + var(--depth, 0) * 14px);
      border-radius: 6px;
      color: #c9ceda;
      text-align: left;
      white-space: nowrap;
      transition: transform .18s ease, background .18s ease, color .18s ease;
    }
    .tree-node-btn:hover,
    .tree-node.selected .tree-node-btn { background: rgba(255,255,255,.07); color: #fff; }
    .tree-node.is-hidden-node .tree-node-btn {
      color: #8b90a3;
    }
    .tree-node.is-hidden-node .tree-icon,
    .tree-node.is-hidden-node .tree-label { opacity: .62; }
    .tree-node.is-hidden-node .tree-meta { color: #73798c; }
    .tree-node.is-hidden-node.selected .tree-node-btn,
    .tree-node.is-hidden-node .tree-node-btn:hover { color: #d7dbea; }
    .tree-node.git-changed .tree-node-btn {
      background: linear-gradient(90deg, rgba(245,158,11,.18), rgba(245,158,11,.055));
      color: #fff8e7;
      box-shadow: inset 3px 0 0 rgba(245,158,11,.92), inset 0 0 0 1px rgba(245,158,11,.12);
    }
    .tree-node.git-changed.git-added .tree-node-btn {
      background: linear-gradient(90deg, rgba(34,197,94,.18), rgba(34,197,94,.055));
      box-shadow: inset 3px 0 0 rgba(34,197,94,.9), inset 0 0 0 1px rgba(34,197,94,.12);
    }
    .tree-node.git-changed.git-deleted .tree-node-btn {
      background: linear-gradient(90deg, rgba(239,68,68,.18), rgba(239,68,68,.055));
      box-shadow: inset 3px 0 0 rgba(239,68,68,.86), inset 0 0 0 1px rgba(239,68,68,.12);
    }
    .tree-node.git-change-descendant .tree-node-btn {
      background: linear-gradient(90deg, rgba(139,92,246,.15), rgba(139,92,246,.045));
      box-shadow: inset 3px 0 0 rgba(139,92,246,.72);
    }
    .tree-node.git-changed .tree-meta { color: #fcd34d; }
    .tree-node.git-added .tree-meta { color: #86efac; }
    .tree-node.git-deleted .tree-meta { color: #fca5a5; }
    .tree-node-btn.folder { font-weight: 600; }
    @media (hover: hover) and (pointer: fine) {
      .tree-node-btn.folder:hover { scale: 1; }
    }
    .tree-node-btn.file { font-weight: 400; }
    .tree-node {
      position: relative;
      overflow: hidden;
      border-radius: 6px;
    }
    @media (prefers-reduced-motion: reduce) {
      .tree-node-btn { transition: none; }
    }
    .tree-chevron { color: var(--dim); font-size: 11px; text-align: center; }
    .tree-icon { width: 18px; text-align: center; opacity: .95; }
    .tree-label { overflow: hidden; text-overflow: ellipsis; }
    .tree-meta { color: var(--dim); font: 10px JetBrains Mono, monospace; }
    .tree-empty, .tree-error {
      margin: 8px 6px;
      padding: 10px;
      border: 0;
      border-radius: 0;
      color: var(--muted);
      line-height: 1.45;
    }
    .tree-error { color: #fecaca; }
    .main.no-tabs { grid-template-rows: minmax(0, 1fr); }
    .tabs.hidden { display: none; }
    .editor.no-gutter { grid-template-columns: minmax(0, 1fr); }
    .editor.no-gutter .gutter { display: none; }
    .editor.no-gutter .editor-body { padding-left: 18px; }
    .file-preview-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin: -2px 0 12px;
      padding: 9px 10px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: rgba(15,17,23,.94);
      color: #fff;
      font-family: Inter, system-ui, sans-serif;
      font-weight: 700;
      position: sticky;
      top: 0;
      left: 0;
      z-index: 8;
      box-sizing: border-box;
      will-change: transform, width;
      backdrop-filter: blur(12px);
    }
    .file-preview-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .file-preview-actions { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
    .file-preview-head span { color: var(--muted); font: 11px JetBrains Mono, monospace; font-weight: 500; }
    .file-preview-head .file-change-badge { color: #fcd34d; margin-left: 6px; }
    .file-preview-head.editing {
      border-color: rgba(59,130,246,.58);
      background: linear-gradient(135deg, rgba(37,99,235,.20), rgba(139,92,246,.12));
      box-shadow: 0 0 0 1px rgba(59,130,246,.20), 0 12px 28px rgba(37,99,235,.12);
    }
    .file-edit-mode-pill {
      color: #bfdbfe;
      font: 10px Inter, system-ui, sans-serif;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      border: 1px solid rgba(147,197,253,.34);
      border-radius: 999px;
      padding: 3px 6px;
      background: rgba(37,99,235,.16);
    }
    .file-header-action-btn {
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      color: #cbd5e1;
      background: rgba(255,255,255,.055);
      border: 1px solid rgba(255,255,255,.10);
      transition: background .16s ease, color .16s ease, scale .16s ease;
    }
    .file-header-action-btn svg { width: 15px; height: 15px; }
    .file-header-action-btn:hover { background: rgba(139,92,246,.22); color: #fff; }
    .file-header-rename-btn { color: #c4b5fd; }
    .file-header-edit-btn { color: #93c5fd; }
    .file-header-save-btn { color: #86efac; background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.28); }
    .file-header-cancel-btn { color: #fca5a5; background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.20); }
    .file-header-download-btn { color: #86efac; }
    .file-header-delete-btn { color: #fb7185; background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.24); }
    .file-header-delete-btn:hover { background: rgba(239,68,68,.22); color: #fecaca; }
    #codeBlock { min-height: 100%; }
    .image-preview-wrap {
      min-height: calc(100% - 64px);
      display: grid;
      place-items: center;
      padding: 18px;
      box-sizing: border-box;
    }
    .image-preview {
      max-width: 100%;
      max-height: min(72vh, 720px);
      object-fit: contain;
      border-radius: 12px;
      background: repeating-conic-gradient(rgba(255,255,255,.08) 0% 25%, rgba(255,255,255,.035) 0% 50%) 50% / 22px 22px;
      box-shadow: 0 18px 48px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.08);
    }
    .file-edit-wrap { display: grid; gap: 10px; min-width: 100%; }
    .file-edit-area { width: 100%; min-width: 100%; min-height: 420px; box-sizing: border-box; padding: 12px; overflow: hidden; resize: none; border: 1px solid rgba(59,130,246,.58); border-right: 1px solid rgba(96,165,250,.82); border-bottom: 1px solid rgba(96,165,250,.72); border-radius: 10px; color: #cbd5e1; background: rgba(15,23,42,.34); white-space: pre; font: 12px/1.75 JetBrains Mono, ui-monospace, monospace; box-shadow: inset 0 0 0 1px rgba(59,130,246,.12); }
    .file-edit-area:focus { border-color: rgba(96,165,250,.82); box-shadow: inset 0 0 0 1px rgba(59,130,246,.20), 0 0 0 1px rgba(59,130,246,.16); }
    .empty-editor {
      min-height: 100%;
      display: grid;
      place-items: center;
      color: var(--muted);
      text-align: center;
      font-family: Inter, system-ui, sans-serif;
      line-height: 1.6;
    }
    body.explorer-mode .workbench { grid-template-columns: 48px clamp(220px, 32vw, 340px) minmax(0, 1fr); }
    body.explorer-mode.explorer-files-collapsed .workbench { grid-template-columns: 48px 0 minmax(0, 1fr); }
    body.explorer-mode .rightbar { display: none; }
    body.git-mode .main { display: none; }
    body.git-mode .workbench { grid-template-columns: 48px clamp(220px, 32vw, 340px) minmax(0, 1fr); }
    body.git-mode .rightbar { border-left: 1px solid var(--border); }
    .pill {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,.03); color: var(--muted);
      margin: 4px 3px 0 0;
      font-size: 12px;
    }

    .main {
      min-width: 0;
      background: var(--editor);
      display: grid;
      grid-template-rows: 38px minmax(0, 1fr);
      overflow: hidden;
    }
    .tabs {
      display: flex;
      align-items: end;
      overflow-x: auto;
      background: #10131a;
      border-bottom: 1px solid var(--border);
    }
    .tab {
      height: 38px;
      min-width: 156px;
      display: flex; align-items: center; gap: 8px;
      padding: 0 12px;
      border-right: 1px solid var(--border);
      background: var(--tab);
      color: var(--muted);
      font-size: 12px;
    }
    .tab.active { background: var(--editor); color: var(--text); border-top: 1px solid var(--accent); }
    .editor {
      min-height: 0;
      position: relative;
      display: block;
      overflow: hidden;
      font-family: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
    }
    .gutter {
      padding: 0;
      text-align: right;
      color: #3f4657;
      background: #0a0c11;
      border-right: 1px solid rgba(255,255,255,.04);
      user-select: none;
      line-height: 1.75;
      font-size: 12px;
      overflow: hidden;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 46px;
      z-index: 0;
    }
    .gutter-lines { padding: 16px 0; will-change: transform; }
    .gutter-lines div { padding-right: 10px; }
    .gutter-lines div.git-line-changed { color: #fcd34d; background: linear-gradient(90deg, rgba(245,158,11,.16), rgba(245,158,11,.04)); border-right: 2px solid rgba(245,158,11,.75); }
    .gutter-spacer { padding-right: 0 !important; }
    .editor-body { position: absolute; inset: 0; z-index: 1; overflow: auto; padding: 16px 18px 16px 64px; line-height: 1.75; font-size: 12px; }
    .code-line { white-space: pre; color: #cbd5e1; min-width: max-content; border-radius: 6px; padding: 0 8px; margin-left: -8px; border-left: 2px solid transparent; }
    .code-line.git-line-changed { color: #fff7d6; background: linear-gradient(90deg, rgba(245,158,11,.22), rgba(245,158,11,.06) 68%, transparent); border-left-color: rgba(245,158,11,.85); box-shadow: inset 0 0 0 1px rgba(245,158,11,.08); }
    .kw { color: #c084fc; } .str { color: #86efac; } .fn { color: #7dd3fc; } .cm { color: #64748b; } .num { color: #fbbf24; }
    .focus-card {
      margin-top: 14px;
      max-width: 860px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
      box-shadow: var(--shadow);
      overflow: hidden;
      font-family: Inter, system-ui, sans-serif;
    }
    .focus-head { padding: 12px 14px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
    .focus-title { font-weight: 700; }
    .focus-body { padding: 14px; display: grid; gap: 10px; color: #d8dce7; line-height: 1.5; }