/* ===================== Editor base ===================== */
.ce { --fg: #cccccc; --gut: #6e7681; --gut-on: #cccccc; --caret: #aeafad; --sel: rgba(38, 79, 120, .85); --curline: #282828;
  position: relative; display: flex; height: 100%; overflow: hidden; }
.ce-gutter { flex: none; width: 58px; overflow: hidden; padding-top: 8px; text-align: right; color: var(--gut); font: 14px/20px Consolas, 'Cascadia Mono', 'JetBrains Mono', monospace; user-select: none; }
.ce-gut-in div { height: 20px; padding-right: 16px; }
.ce-gut-in .on { color: var(--gut-on); }
.ce-scroll { flex: 1; position: relative; overflow: auto; }
.ce-inner { position: relative; min-width: 100%; width: max-content; min-height: 100%; }
.ce-hl, .ce-ta { margin: 0; padding: 8px 60px 80px 4px; border: 0; font: 14px/20px Consolas, 'Cascadia Mono', 'JetBrains Mono', monospace; tab-size: 4; white-space: pre; letter-spacing: 0; word-spacing: 0; font-variant-ligatures: none; }
.ce-hl { color: var(--fg); pointer-events: none; min-height: 100%; position: relative; z-index: 1; }
.ce-ta { position: absolute; inset: 0; width: 100%; height: 100%; resize: none; background: transparent; color: transparent; -webkit-text-fill-color: transparent; caret-color: var(--caret); outline: none; overflow: hidden; z-index: 2; }
.ce-ta::selection { background: var(--sel); }
.ce-cur { position: absolute; left: 0; right: 0; top: 8px; height: 20px; border: 1px solid var(--curline); pointer-events: none; }

.ide-root { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; font: 13px/1.4 'Segoe UI', system-ui, sans-serif; user-select: none; }
.ide-root .ic { width: 20px; height: 20px; flex: none; }
.ide-root button { background: none; border: 0; padding: 0; color: inherit; }
.winbtns { display: flex; height: 100%; margin-left: 6px; }
.winbtns span { width: 44px; display: grid; place-items: center; font-size: 12px; color: #aaa; }
.winbtns span:hover { background: rgba(255, 255, 255, .08); }
.winbtns .x:hover { background: #c42b1c; color: #fff; }
.fbadge { display: inline-block; min-width: 20px; font: 700 9.5px/1 Consolas, monospace; text-align: center; letter-spacing: -.3px; flex: none; }
.grow { flex: 1; }

/* menus suspensos e paleta */
.ddmenu { position: absolute; z-index: 60; min-width: 260px; padding: 4px; border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.ddmenu button { display: flex; width: 100%; justify-content: space-between; gap: 24px; padding: 5px 22px; border-radius: 4px; text-align: left; font-size: 13px; }
.ddmenu kbd { background: none; border: 0; font: 12px 'Segoe UI', sans-serif; opacity: .7; padding: 0; }
.ddmenu hr { border: 0; height: 1px; margin: 4px 8px; }
.vsc-dd { background: #1f1f1f; border: 1px solid #454545; color: #ccc; }
.vsc-dd button:hover { background: #0078d4; color: #fff; }
.vsc-dd hr { background: #454545; }
.vs-dd { background: #1f1f1f; border: 1px solid #3f3f46; color: #f1f1f1; border-radius: 0; }
.vs-dd button { border-radius: 0; }
.vs-dd button:hover { background: #3e3e40; }
.vs-dd hr { background: #3f3f46; }
.palette { position: absolute; inset: 0; z-index: 70; display: none; justify-content: center; align-items: flex-start; padding-top: 44px; }
.palette.on { display: flex; }
.pal-box { width: min(600px, 92%); background: #222222; border: 1px solid #454545; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, .6); padding: 6px; }
.pal-box input { width: 100%; padding: 6px 10px; background: #313131; color: #ccc; border: 1px solid #0078d4; border-radius: 4px; outline: none; font: 13px 'Segoe UI', sans-serif; }
.pal-box ul { list-style: none; margin: 6px 0 0; padding: 0; max-height: 360px; overflow: auto; color: #ccc; }
.pal-box li { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 4px; cursor: pointer; }
.pal-box li small { color: #8b8b8b; margin-left: 6px; }
.pal-box li kbd { margin-left: auto; background: #3a3a3a; border: 1px solid #555; color: #ccc; font-size: 11px; }
.pal-box li.sel { background: #04395e; color: #fff; }
.pal-box li.empty { color: #8b8b8b; cursor: default; }

/* ===================== VS CODE ===================== */
.vsc { --tb: #181818; --act: #181818; --side: #181818; --ed: #1f1f1f; --tabs: #181818; --tab-on: #1f1f1f; --bord: #2b2b2b; --fg: #cccccc; --dim: #9d9d9d; --hover: #2a2d2e; --selrow: #37373d; --blue: #0078d4; --panel: #181818; --status: #181818; --input: #313131;
  background: var(--ed); color: var(--fg); }
.vsc.theme-light { --tb: #f8f8f8; --act: #f8f8f8; --side: #f8f8f8; --ed: #ffffff; --tabs: #f8f8f8; --tab-on: #ffffff; --bord: #e5e5e5; --fg: #3b3b3b; --dim: #6f6f6f; --hover: #f0f0f0; --selrow: #e4e6f1; --panel: #f8f8f8; --status: #f8f8f8; --input: #ffffff; }
.vsc .ce { --fg: #cccccc; --gut: #6e7681; --gut-on: #cccccc; --caret: #aeafad; --curline: #282828; }
.vsc.theme-light .ce { --fg: #3b3b3b; --gut: #6e7681; --gut-on: #171184; --caret: #000; --sel: #add6ff; --curline: #eeeeee; }
.vsc .t-kw { color: #569cd6; } .vsc .t-str { color: #ce9178; } .vsc .t-num { color: #b5cea8; } .vsc .t-com { color: #6a9955; font-style: normal; }
.vsc .t-fn { color: #dcdcaa; } .vsc .t-type { color: #4ec9b0; } .vsc .t-pre { color: #c586c0; } .vsc .t-reg { color: #9cdcfe; }
.vsc.theme-light .t-kw { color: #0000ff; } .vsc.theme-light .t-str { color: #a31515; } .vsc.theme-light .t-num { color: #098658; } .vsc.theme-light .t-com { color: #008000; }
.vsc.theme-light .t-fn { color: #795e26; } .vsc.theme-light .t-type { color: #267f99; } .vsc.theme-light .t-pre { color: #af00db; } .vsc.theme-light .t-reg { color: #001080; }

.vsc-title { display: flex; align-items: center; height: 35px; background: var(--tb); border-bottom: 1px solid var(--bord); flex: none; position: relative; }
.vsc-logo { width: 42px; display: grid; place-items: center; }
.vsc-logo svg { width: 16px; height: 16px; }
.vsc-menu { display: flex; }
.vsc-menu button { padding: 0 8px; height: 26px; border-radius: 4px; font-size: 13px; }
.vsc-menu button:hover, .vsc-menu button.on { background: rgba(128, 128, 128, .2); }
.vsc-cmdcenter { position: absolute; left: 50%; transform: translateX(-50%); display: flex !important; align-items: center; justify-content: center; gap: 6px; width: min(38%, 520px); height: 24px; border: 1px solid var(--bord) !important; background: rgba(128, 128, 128, .1) !important; border-radius: 6px; color: var(--dim) !important; font-size: 12.5px; }
.vsc-cmdcenter .ic { width: 14px; height: 14px; }
.vsc-cmdcenter:hover { background: rgba(128, 128, 128, .18) !important; }
.vsc-titleright { margin-left: auto; display: flex; gap: 2px; }
.vsc-titleright button { width: 28px; height: 24px; border-radius: 4px; font-size: 15px; color: var(--dim); }
.vsc-titleright button:hover { background: rgba(128, 128, 128, .2); }
.vsc-body { flex: 1; display: flex; min-height: 0; position: relative; }
.vsc-act { width: 48px; flex: none; display: flex; flex-direction: column; background: var(--act); border-right: 1px solid var(--bord); }
.vsc-act button { position: relative; height: 48px; display: grid; place-items: center; color: #868686; }
.vsc-act button .ic { width: 24px; height: 24px; }
.vsc-act button:hover { color: var(--fg); }
.vsc-act button.on { color: var(--fg); }
.vsc-act button.on::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--blue); }
.scm-count { position: absolute; right: 7px; bottom: 8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--blue); color: #fff; font: 600 9px/16px 'Segoe UI', sans-serif; font-style: normal; }
.vsc-side { width: 260px; flex: none; background: var(--side); border-right: 1px solid var(--bord); overflow: auto; }
.vsc.noside .vsc-side { display: none; }
.sh { display: flex; justify-content: space-between; align-items: center; height: 35px; padding: 0 8px 0 20px; font-size: 11px; letter-spacing: .3px; color: var(--dim); }
.sh-acts { display: flex; gap: 2px; }
.sh-acts button { width: 24px; height: 22px; display: grid; place-items: center; border-radius: 4px; color: var(--fg); }
.sh-acts button:hover { background: rgba(128, 128, 128, .2); }
.sh-acts .ic { width: 16px; height: 16px; }
.ssec-h { padding: 4px 8px; font-size: 11px; font-weight: 700; letter-spacing: .2px; }
.sempty { padding: 6px 22px; color: var(--dim); font-size: 12.5px; }
.trow { position: relative; display: flex; align-items: center; gap: 5px; height: 22px; padding-left: calc(8px + var(--d) * 12px); padding-right: 8px; cursor: pointer; white-space: nowrap; font-size: 13px; }
.trow:hover { background: var(--hover); }
.trow.on { background: var(--selrow); outline: 1px solid var(--blue); outline-offset: -1px; }
.trow .chev { width: 14px; flex: none; text-align: center; color: var(--dim); font-size: 13px; }
.trow .tname { overflow: hidden; text-overflow: ellipsis; }
.trow small { color: var(--dim); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
.trow .dot { margin-left: auto; font-style: normal; font-size: 10px; }
.trow em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; padding-right: 2px; }
.trow .dot + em { margin-left: 6px; }
.tdel { display: none !important; position: absolute; right: 4px; width: 20px; height: 20px; place-items: center; border-radius: 4px; background: var(--hover) !important; }
.tdel .ic { width: 14px; height: 14px; }
.trow.file:hover .tdel { display: grid !important; }
.g-M { color: #e2c08d; } .g-U { color: #73c991; } .g-D { color: #c74e39; }
.newname, .sinput, .scm-msg { width: 100%; background: var(--input); color: var(--fg); border: 1px solid var(--blue); outline: none; font: 13px 'Segoe UI', sans-serif; padding: 2px 6px; border-radius: 2px; }
.sbox { padding: 0 12px 8px 20px; }
.sinput { border-color: var(--bord); padding: 4px 6px; }
.sinput:focus { border-color: var(--blue); }
.sres-sum { padding: 0 20px 6px; color: var(--dim); font-size: 12px; }
.sres-f { display: flex; align-items: center; gap: 4px; padding: 2px 8px 2px 16px; font-size: 13px; }
.sres-f small { color: var(--dim); }
.sres-f i { margin-left: auto; font-style: normal; font-size: 11px; background: #616161; color: #fff; border-radius: 9px; padding: 0 6px; }
.sres-l { padding: 2px 8px 2px 38px; font-size: 12.5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--dim); }
.sres-l:hover { background: var(--hover); }
.sres-l mark { background: rgba(234, 92, 0, .33); color: var(--fg); border-radius: 2px; }
.scm { padding: 0 12px 10px 12px; }
.scm-msg { min-height: 56px; resize: vertical; border-color: var(--bord); padding: 6px; }
.scm-msg:focus { border-color: var(--blue); }
.scm-btn { display: flex !important; justify-content: center; align-items: center; gap: 6px; width: 100%; height: 28px; margin: 8px 0 10px; background: var(--blue) !important; color: #fff !important; border-radius: 2px; font-size: 13px; }
.scm-btn .ic { width: 16px; height: 16px; }
.scm-btn:hover { filter: brightness(1.1); }
.scm .trow { padding-left: 8px; }
.badge-n { font-style: normal; background: #616161; color: #fff; border-radius: 9px; padding: 0 6px; font-size: 11px; margin-left: 4px; }
.glog { display: flex; align-items: center; gap: 8px; padding: 3px 8px; font-size: 12.5px; }
.glog .gm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.glog small { color: var(--dim); font-family: Consolas, monospace; }
.gdot { width: 9px; height: 9px; border-radius: 50%; border: 2px solid #4d9fe8; flex: none; }
.gdot.head { background: #4d9fe8; }
.runbox { padding: 0 20px; color: var(--dim); font-size: 12.5px; line-height: 1.55; }
.runbox b, .runbox code { color: var(--fg); }
.runbox code { background: rgba(128, 128, 128, .2); }
.exts { padding: 0 8px; }
.extc { display: flex; gap: 10px; padding: 8px 12px; border-radius: 4px; }
.extc:hover { background: var(--hover); }
.ext-ic { width: 38px; height: 38px; border-radius: 6px; display: grid; place-items: center; font-weight: 800; color: #fff; flex: none; font-size: 18px; }
.ext-b { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ext-b b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ext-b small { color: var(--dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ext-b span { font-size: 11.5px; color: var(--dim); }
.ext-btn { align-self: center; background: var(--blue) !important; color: #fff !important; font-size: 11.5px !important; padding: 2px 8px !important; border-radius: 2px; }
.ext-btn.on { background: #3a3d41 !important; }

.vsc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--ed); }
.vsc-tabsrow { display: flex; height: 35px; background: var(--tabs); flex: none; border-bottom: 1px solid var(--bord); }
.vsc-tabs { display: flex; overflow-x: auto; flex: 1; scrollbar-width: thin; }
.vtab { position: relative; display: flex; align-items: center; gap: 6px; padding: 0 8px 0 12px; min-width: fit-content; border-right: 1px solid var(--bord); color: var(--dim); cursor: pointer; font-size: 13px; }
.vtab:hover { background: var(--hover); }
.vtab.on { background: var(--tab-on); color: var(--fg); margin-bottom: -1px; }
.vtab.on::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--blue); }
.vtab .tx { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 4px; visibility: hidden; }
.vtab .tx .ic { width: 14px; height: 14px; }
.vtab.on .tx, .vtab:hover .tx { visibility: visible; }
.vtab .tx:hover { background: rgba(128, 128, 128, .25); }
.vtab.dirty .tx { visibility: visible; }
.vtab.dirty .tx .ic { display: none; }
.vtab.dirty .tx::after { content: '●'; font-size: 11px; }
.vtab.dirty .tx:hover .ic { display: block; }
.vtab.dirty .tx:hover::after { content: none; }
.vsc-tabacts { display: flex; align-items: center; gap: 2px; padding: 0 6px; }
.vsc-tabacts button { width: 26px; height: 24px; display: grid; place-items: center; border-radius: 4px; color: var(--fg); }
.vsc-tabacts button:hover { background: rgba(128, 128, 128, .2); }
.vsc-tabacts .ic { width: 16px; height: 16px; }
.vsc-bread { display: flex; align-items: center; gap: 4px; height: 22px; padding: 0 14px; color: var(--dim); font-size: 12.5px; flex: none; }
.vsc-bread i { font-style: normal; opacity: .7; }
.vsc-edwrap { flex: 1; min-height: 0; position: relative; display: flex; }
.vsc-editor { flex: 1; min-width: 0; background: var(--ed); }
.vsc-mini { width: 90px; flex: none; position: relative; overflow: hidden; cursor: pointer; border-left: 1px solid transparent; }
.vsc-mini pre { position: absolute; left: 6px; top: 0; margin: 0; font: 14px/20px Consolas, monospace; white-space: pre; transform-origin: 0 0; transform: scale(.12); pointer-events: none; opacity: .85; }
.vsc-mini-view { position: absolute; left: 0; right: 0; background: rgba(121, 121, 121, .16); }
.vsc-mini:hover .vsc-mini-view { background: rgba(121, 121, 121, .28); }
.vsc.nominimap .vsc-mini { display: none; }
.vsc-welcome { display: none; position: absolute; inset: 0; overflow: auto; background: var(--ed); }
.vsc.noeditor .vsc-welcome { display: block; }
.vsc.noeditor .vsc-bread { visibility: hidden; }
.wel { max-width: 760px; margin: 0 auto; padding: 48px 32px; }
.wel-logo svg { width: 64px; height: 64px; opacity: .8; }
.wel h1 { font-weight: 400; font-size: 34px; margin: 10px 0 0; }
.wel-sub { color: var(--dim); font-size: 17px; margin: 4px 0 32px; }
.wel-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.wel h3 { font-weight: 400; font-size: 18px; margin: 0 0 10px; }
.wel a { display: flex; align-items: center; gap: 8px; padding: 3px 0; color: #4daafc; cursor: pointer; font-size: 13.5px; }
.wel a .ic { width: 16px; height: 16px; }
.wel a:hover { text-decoration: underline; }
.wel-keys { display: flex; flex-direction: column; gap: 8px; margin-top: 36px; color: var(--dim); }
.wel-keys kbd { background: rgba(128, 128, 128, .17); border: 1px solid rgba(128, 128, 128, .3); color: var(--fg); font-family: 'Segoe UI', sans-serif; }

.vsc-panel { height: 34%; min-height: 150px; flex: none; display: flex; flex-direction: column; border-top: 1px solid var(--bord); background: var(--panel); }
.vsc.nopanel .vsc-panel { display: none; }
.vsc-ptabs { display: flex; align-items: center; gap: 2px; height: 35px; padding: 0 8px 0 10px; flex: none; }
.vsc-ptabs [data-ptab] { padding: 4px 8px; font-size: 11px; letter-spacing: .2px; color: var(--dim); border-bottom: 1px solid transparent; }
.vsc-ptabs [data-ptab]:hover { color: var(--fg); }
.vsc-ptabs [data-ptab].on { color: var(--fg); border-bottom-color: var(--blue); }
.pcount { font-style: normal; background: #616161; color: #fff; border-radius: 9px; padding: 0 5px; margin-left: 3px; }
.pcount:empty { display: none; }
.pshell { font-size: 12px; color: var(--dim); margin-right: 6px; }
.vsc-ptabs > button:not([data-ptab]) { width: 24px; height: 22px; display: grid; place-items: center; border-radius: 4px; }
.vsc-ptabs > button:not([data-ptab]):hover { background: rgba(128, 128, 128, .2); }
.vsc-ptabs .ic { width: 15px; height: 15px; }
.vsc-pbody { flex: 1; min-height: 0; position: relative; }
.pv { display: none; position: absolute; inset: 0; overflow: auto; padding: 4px 20px 10px; font: 13px/1.45 Consolas, 'Cascadia Mono', monospace; user-select: text; }
.pv.on { display: block; }
.term { cursor: text; }
.term-line { display: flex; gap: 6px; }
.term-line input { flex: 1; background: none; border: 0; outline: none; color: inherit; font: inherit; padding: 0; }
.tl { white-space: pre-wrap; word-break: break-word; min-height: 1.45em; }
.tl.err { color: #f14c4c; } .tl.warn { color: #cca700; } .tl.ok { color: #23d18b; } .tl.hint { color: #3b8eea; } .tl.muted { color: var(--dim); }
.vsc.theme-light .tl.ok { color: #0f8a4f; }
.t-y { color: #e5e510; } .t-c { color: #29b8db; } .t-g { color: #23d18b; }
.vsc.theme-light .t-y { color: #949800; }
.t-ps { color: inherit; }
.pgroup { display: flex; gap: 6px; align-items: center; font-family: 'Segoe UI', sans-serif; padding: 2px 0; }
.pgroup i { font-style: normal; background: #616161; color: #fff; border-radius: 9px; padding: 0 6px; font-size: 11px; }
.prob { padding: 2px 0 2px 22px; cursor: pointer; font-family: 'Segoe UI', sans-serif; }
.prob:hover { background: var(--hover); }
.prob small { color: var(--dim); margin-left: 6px; }
.perr { color: #f14c4c; font-style: normal; }
.vsc-status { display: flex; align-items: center; height: 22px; background: var(--status); border-top: 1px solid var(--bord); font-size: 12px; color: var(--dim); flex: none; }
.vsc-status > span { display: flex; align-items: center; gap: 4px; height: 100%; padding: 0 8px; cursor: pointer; white-space: nowrap; }
.vsc-status > span:hover { background: rgba(128, 128, 128, .2); }
.vsc-status .ic { width: 14px; height: 14px; }
.vsc-status .sb-remote { background: var(--blue); color: #fff; padding: 0 10px; font-weight: 700; }
.vsc-status .sb-remote:hover { background: #026ec1; }

/* ===================== VISUAL STUDIO 2022 ===================== */
.vs { --env: #1f1f1f; --tool: #2d2d30; --win: #252526; --ed: #1e1e1e; --bord: #3f3f46; --fg: #f1f1f1; --dim: #a0a0a0; --sel: #3e3e40; --acc: #9a6fdd; --st: #007acc;
  background: var(--env); color: var(--fg); font-family: 'Segoe UI', system-ui, sans-serif; }
.vs .ce { --fg: #dcdcdc; --gut: #2b91af; --gut-on: #ffffff; --caret: #dcdcdc; --sel: #264f78; --curline: #464646; }
.vs .t-kw { color: #569cd6; } .vs .t-str { color: #d69d85; } .vs .t-num { color: #b5cea8; } .vs .t-com { color: #57a64a; font-style: normal; }
.vs .t-fn { color: #dcdcaa; } .vs .t-type { color: #4ec9b0; } .vs .t-pre { color: #9b9b9b; } .vs .t-reg { color: #9cdcfe; }
.vs-title { display: flex; align-items: center; height: 36px; background: var(--env); flex: none; }
.vs-logo { width: 40px; display: grid; place-items: center; }
.vs-logo svg { width: 20px; height: 20px; }
.vs-menu { display: flex; flex-wrap: nowrap; overflow: hidden; }
.vs-menu button { padding: 4px 7px; font-size: 13px; white-space: nowrap; }
.vs-menu button:hover, .vs-menu button.on { background: var(--sel); }
.vs-search { display: flex; align-items: center; gap: 6px; margin-left: 12px; height: 24px; width: 200px; padding: 0 8px; background: #333337; border: 1px solid #434346; color: var(--dim); font-size: 12px; cursor: pointer; flex: none; }
.vs-search .ic { width: 14px; height: 14px; }
.vs-solname { margin-left: 12px; padding: 3px 10px; background: #3a3a3c; border-radius: 3px; font-size: 12px; white-space: nowrap; }
.vs-title .winbtns { margin-left: auto; }
.vs-toolbar { display: flex; align-items: center; gap: 2px; height: 32px; padding: 0 8px; background: var(--env); border-bottom: 1px solid var(--bord); flex: none; font-size: 13px; overflow: hidden; }
.vs-toolbar .tb { display: grid; place-items: center; min-width: 26px; height: 24px; padding: 0 4px; cursor: pointer; color: #c8c8c8; }
.vs-toolbar .tb:hover { background: var(--sel); }
.vs-toolbar .tb.green { color: #3cb371; font-size: 16px; }
.vs-toolbar .sep { width: 1px; height: 18px; background: var(--bord); margin: 0 5px; }
.vs-toolbar .dd { padding: 2px 8px; border: 1px solid #434346; background: #333337; font-size: 12px; margin: 0 2px; white-space: nowrap; }
.vs-run { display: flex !important; align-items: center; gap: 4px; padding: 2px 8px !important; font-size: 12.5px; white-space: nowrap; }
.vs-run svg { width: 16px; height: 16px; }
.vs-run:hover { background: var(--sel) !important; }
.vs-share { font-size: 12px; color: var(--dim); white-space: nowrap; }
.vs-body { flex: 1; display: flex; min-height: 0; }
.vs-docs { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--env); position: relative; }
.vs-tabs { display: flex; height: 28px; flex: none; background: var(--env); overflow-x: auto; scrollbar-width: none; }
.vs-tab { display: flex; align-items: center; gap: 8px; padding: 0 6px 0 10px; font-size: 12.5px; cursor: pointer; color: #d0d0d0; border-top: 2px solid transparent; white-space: nowrap; }
.vs-tab:hover { background: #3e3e42; }
.vs-tab.on { background: var(--ed); color: #fff; border-top-color: var(--acc); }
.vs-tab button { font-size: 11px; opacity: .6; width: 18px; height: 18px; }
.vs-tab button:hover { opacity: 1; background: #555; }
.vs-nav { display: flex; gap: 1px; height: 24px; background: var(--ed); border-bottom: 1px solid #333; flex: none; }
.vs-nav select { flex: 1; min-width: 0; background: var(--ed); color: #d0d0d0; border: 0; border-right: 1px solid #333; font: 12px 'Segoe UI', sans-serif; padding: 0 6px; outline: none; }
.vs-nav select option { background: #252526; }
.vs-editor { flex: 1; min-height: 0; background: var(--ed); }
.vs-empty { display: none; flex: 1; place-items: center; color: var(--dim); text-align: center; background: var(--env); }
.vs-empty h2 { font-weight: 400; margin: 0 0 6px; }
.vs.noeditor .vs-editor, .vs.noeditor .vs-nav { display: none; }
.vs.noeditor .vs-empty { display: grid; }
.vs-bottom { height: 30%; min-height: 120px; flex: none; display: flex; flex-direction: column; background: var(--win); border-top: 1px solid var(--bord); }
.vs-bbody { flex: 1; min-height: 0; position: relative; }
.bv { display: none; position: absolute; inset: 0; overflow: auto; font: 12.5px/1.5 Consolas, monospace; user-select: text; }
.bv.on { display: block; }
.ol { padding: 0 8px; white-space: pre-wrap; }
.ol.hdr { position: sticky; top: 0; background: #2d2d30; font-family: 'Segoe UI', sans-serif; color: var(--dim); padding: 3px 8px; border-bottom: 1px solid var(--bord); }
.ol.err { color: #f48771; }
.ol.muted { color: var(--dim); }
.bv-errors .ol.hdr, .bv-errors .erow { display: grid; grid-template-columns: 110px 1fr 140px 60px; gap: 8px; font-family: 'Segoe UI', sans-serif; }
.bv-errors .erow { padding: 3px 8px; cursor: pointer; }
.bv-errors .erow:hover { background: var(--sel); }
.vs-btabs { display: flex; height: 24px; background: var(--win); border-top: 1px solid var(--bord); flex: none; }
.vs-btabs button { padding: 0 12px; font-size: 12px; color: var(--dim); border-bottom: 2px solid transparent; }
.vs-btabs button.on { color: #fff; border-bottom-color: var(--acc); background: #2d2d30; }
.ecount { font-style: normal; color: #f48771; margin-left: 4px; }
.vs-side { width: 290px; flex: none; display: flex; flex-direction: column; background: var(--win); border-left: 1px solid var(--bord); }
.vs-sh { display: flex; justify-content: space-between; align-items: center; height: 26px; padding: 0 8px; font-size: 12px; background: #2d2d30; flex: none; }
.vs-sh-acts button { width: 22px; height: 20px; font-size: 15px; }
.vs-sh-acts button:hover { background: var(--sel); }
.vs-stool { padding: 4px 6px; flex: none; }
.vs-sq { width: 100%; background: #333337; border: 1px solid #434346; color: var(--fg); font: 12px 'Segoe UI', sans-serif; padding: 3px 6px; outline: none; }
.vs-sq:focus { border-color: #007acc; }
.vs-tree { flex: 1; overflow: auto; padding: 2px 0; }
.vs-row { display: flex; align-items: center; gap: 5px; height: 21px; padding-left: calc(6px + var(--d) * 14px); font-size: 12.5px; white-space: nowrap; cursor: default; }
.vs-row.file { cursor: pointer; }
.vs-row:hover { background: #2a2d2e; }
.vs-row.on { background: #37373d; outline: 1px solid #007acc; outline-offset: -1px; }
.vs-row.bold { font-weight: 700; }
.vs-row .chev { width: 12px; text-align: center; color: var(--dim); }
.vs-ico { width: 16px; text-align: center; font-size: 12px; }
.vs-ico.sol { color: #9a6fdd; } .vs-ico.prj { color: #68b0ff; } .vs-ico.ref { color: #c8c8c8; }
.vs-newname { width: 170px; background: #333337; color: #fff; border: 1px solid #007acc; font: 12.5px 'Segoe UI', sans-serif; outline: none; padding: 1px 4px; }
.vs-props { height: 34%; flex: none; display: flex; flex-direction: column; border-top: 1px solid var(--bord); }
.vs-propbody { flex: 1; overflow: auto; font-size: 12px; }
.vs-propbody div { display: grid; grid-template-columns: 110px 1fr; border-bottom: 1px solid #333; }
.vs-propbody span { padding: 3px 8px; color: var(--dim); background: #2a2a2c; }
.vs-propbody b { padding: 3px 8px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: text; }
.vs-status { display: flex; align-items: center; height: 24px; background: var(--st); color: #fff; font-size: 12px; flex: none; transition: background .3s; }
.vs-status span { padding: 0 9px; white-space: nowrap; }
.vs.st-build .vs-status { background: #ca5100; }
.vs.st-fail .vs-status { background: #c42b1c; }
.vs-console { position: absolute; inset: 0; z-index: 80; display: none; place-items: center; background: rgba(0, 0, 0, .25); }
.vs-console.on { display: grid; }
.vsc-win { width: min(760px, 92%); height: min(420px, 70%); display: flex; flex-direction: column; background: #0c0c0c; border: 1px solid #555; box-shadow: 0 20px 60px rgba(0, 0, 0, .7); animation: pop .25s ease; }
.vsc-wbar { display: flex; align-items: center; gap: 8px; height: 32px; padding-left: 10px; background: #fff; color: #000; font-size: 12px; }
.vsc-wbar .winbtns span { color: #333; height: 32px; }
.vsc-wbar .winbtns .x:hover { color: #fff; }
.cico { font: 700 9px Consolas, monospace; background: #0c0c0c; color: #fff; padding: 2px 3px; }
.vsc-wout { flex: 1; margin: 0; padding: 8px 10px; overflow: auto; color: #cccccc; font: 14px/1.35 Consolas, 'Cascadia Mono', monospace; white-space: pre-wrap; user-select: text; }
@keyframes pop { from { transform: scale(.94); opacity: 0; } }

@media (max-width: 900px) {
  .vsc-side { width: 200px; }
  .vsc-mini, .vsc-cmdcenter, .vsc-menu button:nth-child(n+4) { display: none; }
  .vs-side { width: 200px; }
  .vs-props, .vs-search, .vs-share, .vs-menu button:nth-child(n+5), .vs-toolbar .dd { display: none; }
}
@media (max-width: 640px) {
  .vsc-side { position: absolute; left: 48px; top: 0; bottom: 0; z-index: 20; width: 220px; box-shadow: 8px 0 20px rgba(0, 0, 0, .4); }
  .vs-side { display: none; }
  .ce-gutter { width: 40px; }
  .ce-gut-in div { padding-right: 8px; }
}