.vs {
  --vs-bg:#1e1e1e; --vs-side:#252526; --vs-bar:#323233; --vs-tabbg:#2d2d2d; --vs-border:#3c3c3c;
  --vs-text:#d4d4d4; --vs-dim:#858585; --vs-blue:#007acc; --vs-sel:#37373d;
  width:100%; max-width:1100px; height:min(640px, 78vh); min-height:420px;
  display:flex; flex-direction:column; background:var(--vs-bg); color:var(--vs-text);
  border:1px solid #000; border-radius:10px; overflow:hidden; text-align:left;
  box-shadow:0 18px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06);
  font:13px/1.55 ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  image-rendering:auto;
}
.vs button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
.vs-titlebar { display:flex; align-items:center; gap:10px; height:36px; padding:0 10px; background:var(--vs-bar); border-bottom:1px solid #000; flex:none; }
.vs-dots { display:flex; gap:7px; }
.vs-dots i { width:12px; height:12px; border-radius:50%; background:#ff5f57; }
.vs-dots i:nth-child(2) { background:#febc2e; } .vs-dots i:nth-child(3) { background:#28c840; }
.vs-name { flex:1; text-align:center; color:#cccccc; font:12px system-ui, -apple-system, "Segoe UI", sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vs-menu { display:none; padding:4px 8px; border-radius:4px; }
.vs-zip { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:4px; background:var(--vs-blue); color:#fff; text-decoration:none; font:600 12px system-ui, -apple-system, "Segoe UI", sans-serif; white-space:nowrap; }
.vs-zip:hover { background:#0e639c; }
.vs-body { flex:1; display:flex; min-height:0; position:relative; }
.vs-explorer { width:250px; flex:none; display:flex; flex-direction:column; background:var(--vs-side); border-right:1px solid #000; min-height:0; }
.vs-exp-head { padding:9px 12px 6px; font:600 11px system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing:.06em; color:#bbbbbb; }
.vs-search { margin:0 10px 6px; padding:5px 8px; background:#3c3c3c; color:var(--vs-text); border:1px solid transparent; border-radius:3px; font:12px system-ui, -apple-system, "Segoe UI", sans-serif; outline:none; }
.vs-search:focus { border-color:var(--vs-blue); }
.vs-tree { flex:1; overflow:auto; padding-bottom:8px; }
.vs-item { display:flex; align-items:center; gap:6px; width:100%; padding:2px 8px; text-align:left; white-space:nowrap; font:13px system-ui, -apple-system, "Segoe UI", sans-serif !important; color:#cccccc !important; }
.vs-item:hover { background:#2a2d2e !important; }
.vs-item.active { background:var(--vs-sel) !important; color:#fff !important; }
.vs-item:focus-visible, .vs-tab button:focus-visible, .vs-file-dl:focus-visible, .vs-menu:focus-visible { outline:1px solid var(--vs-blue); outline-offset:-1px; }
.vs-arrow { width:10px; color:#c5c5c5; font-size:11px; }
.vs-icon { display:inline-block; min-width:18px; font:700 9px ui-monospace, Menlo, Consolas, monospace; text-align:center; color:#9da5b4; }
.i-js { color:#e8d44d; } .i-sql { color:#4ec9b0; } .i-css { color:#569cd6; } .i-html { color:#e37933; }
.i-json { color:#cbcb41; } .i-md { color:#6a9fb5; } .i-sh { color:#89e051; } .i-img { color:#a074c4; }
.vs-editor { flex:1; display:flex; flex-direction:column; min-width:0; }
.vs-tabs-row { display:flex; background:var(--vs-side); flex:none; min-height:35px; }
.vs-tabs { flex:1; display:flex; overflow-x:auto; scrollbar-width:thin; }
.vs-tab { display:flex; align-items:center; background:var(--vs-tabbg); border-right:1px solid #252526; color:#969696; flex:none; }
.vs-tab.active { background:var(--vs-bg); color:#fff; box-shadow:inset 0 1px 0 var(--vs-blue); }
.vs-tab-name { display:flex; align-items:center; gap:6px; padding:8px 4px 8px 12px; font:13px system-ui, -apple-system, "Segoe UI", sans-serif !important; white-space:nowrap; }
.vs-tab-x { padding:2px 8px; margin-right:4px; border-radius:4px; opacity:.7; font-size:15px !important; }
.vs-tab-x:hover { background:#3c3c3c !important; opacity:1; }
.vs-file-dl { flex:none; padding:0 12px; color:#c5c5c5; font-size:15px !important; }
.vs-file-dl:hover { color:#fff; background:#2a2d2e !important; }
.vs-path { padding:3px 14px; color:#a9a9a9; font:12px system-ui, -apple-system, "Segoe UI", sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:none; min-height:22px; }
.vs-sep { margin:0 5px; color:#6e6e6e; } .vs-path-end { color:#e0e0e0; }
.vs-code { flex:1; overflow:auto; min-height:0; }
.vs-lines { display:table; min-width:100%; padding:2px 0 24px; }
.vs-line { display:table-row; }
.vs-line:hover .vs-text { background:rgba(255,255,255,.035); }
.vs-num { display:table-cell; width:var(--num, 4ch); padding:0 18px 0 14px; text-align:right; color:#6e7681; user-select:none; }
.vs-text { display:table-cell; white-space:pre; padding-right:24px; tab-size:2; }
.tk-c { color:#6a9955; } .tk-s { color:#ce9178; } .tk-n { color:#b5cea8; } .tk-k { color:#569cd6; }
.tk-f { color:#dcdcaa; } .tk-p { color:#9cdcfe; }
.vs-binary { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; height:100%; padding:20px; color:var(--vs-dim); text-align:center; font:13px system-ui, -apple-system, "Segoe UI", sans-serif; }
.vs-binary img { max-width:min(320px, 80%); max-height:60%; min-width:64px; image-rendering:pixelated; background:repeating-conic-gradient(#2b2b2b 0 25%, #333 0 50%) 0 0/16px 16px; padding:8px; border-radius:4px; }
.vs-status { display:flex; justify-content:space-between; gap:12px; height:24px; padding:0 10px; align-items:center; background:var(--vs-blue); color:#fff; font:12px system-ui, -apple-system, "Segoe UI", sans-serif; flex:none; white-space:nowrap; overflow:hidden; }
.vs-status-left, .vs-status-right { overflow:hidden; text-overflow:ellipsis; }
.vs ::-webkit-scrollbar { width:12px; height:12px; }
.vs ::-webkit-scrollbar-thumb { background:rgba(121,121,121,.4); }
.vs ::-webkit-scrollbar-thumb:hover { background:rgba(100,100,100,.7); }
.vs ::-webkit-scrollbar-corner { background:transparent; }

@media (max-width:720px) {
  .vs { height:72vh; font-size:12px; border-radius:8px; }
  .vs-menu { display:inline-block; }
  .vs-dots { display:none; }
  .vs-name { text-align:left; }
  .vs-zip span { display:none; }
  .vs-explorer { position:absolute; inset:0 auto 0 0; width:min(260px, 85%); z-index:2; transform:translateX(-105%); transition:transform .18s ease; box-shadow:8px 0 24px rgba(0,0,0,.5); }
  .vs.explorer-open .vs-explorer { transform:none; }
  .vs-num { padding:0 10px 0 8px; }
  .vs-status-right { display:none; }
}
@media (prefers-reduced-motion: reduce) { .vs-explorer { transition:none; } }