:root {
  --sidebar: #18181c; --editor: #1e1e24; --panel: #21222c; --border: #2d2d34;
  --fg: #f8f8f2; --muted: #a0a8b0; --hover: #26262e; --sel: #3a3d45;
  --k-keyword: #ff79c6; --k-type: #8be9fd; --k-string: #f1fa8c; --k-number: #ffb86c;
  --k-comment: #6272a4; --k-error: #ff5555; --gutter: #5a5a66; --accent: #8be9fd;
}
html, body { margin: 0; height: 100%; overflow: hidden; }
body { background: var(--editor); color: var(--fg); font-family: system-ui, sans-serif; display: flex; flex-direction: column; }
* { box-sizing: border-box; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--scrollbar, #3a3a44); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }
#menubar { display: flex; background: var(--panel); border-bottom: 1px solid var(--border); flex: none; }
.menu { position: relative; padding: 5px 12px; font-size: 13px; cursor: pointer; user-select: none; }
.menu:hover { background: var(--hover); }
.dropdown { display: none; position: absolute; top: 100%; left: 0; background: var(--sidebar);
  border: 1px solid var(--border); border-radius: 6px; min-width: 190px; z-index: 50; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.menu:hover .dropdown { display: block; }
.mi { padding: 7px 14px; font-size: 13px; }
.mi:hover { background: var(--sel); }
.submenu { display: none; position: absolute; left: 100%; top: 0; background: var(--sidebar);
  border: 1px solid var(--border); border-radius: 6px; min-width: 150px; }
#mi-template:hover .submenu { display: block; }
#mi-template { position: relative; }
#app { display: flex; flex: 1; min-height: 0; }
#activity { width: 46px; background: var(--panel); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 6px; flex: none; }
.abtn { background: transparent; border: none; color: var(--activity-fg, var(--gutter)); cursor: pointer;
  padding: 6px; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.abtn:hover { color: var(--fg); background: var(--hover); }
.abtn.active { color: var(--fg); border-left: 2px solid var(--activity-active, var(--accent)); border-radius: 0; }
#gitpanel .panel-title { padding: 10px 10px 4px; font-size: 12px; text-transform: uppercase;
  color: var(--muted); letter-spacing: .5px; }
#gitpanel .panel-row { display: flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 13px; }
#gitpanel .panel-row.muted { color: var(--muted); font-size: 12px; line-height: 1.4; }
#minimap { width: 56px; background: var(--minimap-bg, var(--editor)); border-left: 1px solid var(--border);
  overflow: hidden; position: relative; flex: none; }
#minimap .mm-line { position: absolute; left: 8px; height: 3px; border-radius: 1px; }
#sidebar { width: 260px; min-width: 180px; max-width: min(480px, 40vw); background: var(--sidebar);
  border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: auto; flex-shrink: 1; }
#side-grip { width: 4px; cursor: ew-resize; background: transparent; flex: none; }
#side-grip:hover, #side-grip.dragging { background: var(--accent); }
#dirbar { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 10px 6px; flex: none; }
#dirinput, #searchinput { flex: 1 1 120px; min-width: 0; box-sizing: border-box; background: var(--input-bg, var(--editor)); color: var(--fg); border: 1px solid var(--input-border, var(--border));
  border-radius: 5px; padding: 6px 10px; outline: none; height: 30px; }
#dirinput:focus, #searchinput:focus { border-color: var(--accent); }
#dirbtn, #searchbtn { background: var(--sel); color: var(--fg); border: 1px solid var(--border); white-space: nowrap; flex: none;
  border-radius: 5px; padding: 6px 12px; cursor: pointer; height: 30px; font-size: 13px; flex: none; }
#searchbar { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 10px; flex: none; }
#searchresults { display: none; max-height: 35%; overflow: auto; border-bottom: 1px solid var(--border); flex: none; }
#searchresults .sr { padding: 3px 10px; font-family: monospace; font-size: 12px; cursor: pointer; white-space: nowrap; }
#searchresults .sr:hover { background: var(--sel); }
#tree { flex: 1; overflow: auto; padding: 4px 0 20px; }
.tnode { display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 10px; cursor: pointer; white-space: nowrap; font-size: 13px; }
.tnode:hover { background: var(--hover); }
.tdir { color: var(--k-type); font-weight: 600; }
.tfile { color: var(--fg); }
.tchildren { margin-left: 14px; }
.tarrow { display: inline-block; width: 14px; color: var(--gutter); flex: none; }
main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#crumbs { background: var(--editor); color: var(--gutter); font-size: 12px; padding: 3px 12px;
  border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; }
#crumbs b { color: var(--k-type); }
#tabs { display: flex; background: var(--tab-bg, var(--panel)); overflow-x: auto; flex: none; }
.tab { display: flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 13px; cursor: pointer;
  border-right: 1px solid var(--border); color: var(--tab-fg, var(--muted)); user-select: none; border-top: 2px solid transparent; }
.tab.active { background: var(--tab-active-bg, var(--editor)); color: var(--fg); border-top-color: var(--tab-border, var(--accent)); }
.tab .x { color: var(--gutter); font-weight: 700; padding: 0 4px; border-radius: 4px; }
.tab .x:hover { color: var(--k-error); background: var(--sel); }
#editorwrap { flex: 1; display: flex; min-height: 0; position: relative; }
#gutter { width: 52px; background: var(--editor); color: var(--gutter); font-family: monospace; font-size: 14px;
  text-align: right; padding: 12px 10px 12px 0; overflow: hidden; line-height: 1.6; user-select: none; flex: none; }
#gutter .ln-cur { color: var(--fg); }
#codearea { flex: 1; position: relative; min-width: 0; }
#active-line { position: absolute; left: 0; right: 0; background: rgba(139, 233, 253, 0.06); pointer-events: none; }
#highlight, textarea#code { font-family: monospace; font-size: 14px; line-height: 1.6; padding: 12px 14px; }
#highlight { margin: 0; white-space: pre; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden; pointer-events: none; }
textarea#code { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%;
  background: transparent; color: transparent; caret-color: var(--fg); border: none; outline: none; resize: none;
  white-space: pre; overflow: auto; overscroll-behavior: contain; }
#tree, #problems, #output, #terminal, #gitpanel-body, #searchresults, #palette-list, #minimap {
  overscroll-behavior: contain; }
textarea#code::selection { background: rgba(139, 233, 253, 0.25); }
#welcome { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; background: var(--editor); }
#welcome img { width: 96px; opacity: .9; }
#welcome h1 { font-size: 20px; margin: 0; }
#welcome p { color: var(--muted); font-size: 13px; margin: 0; }
#welcome .kbd { background: var(--panel); border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px; font-size: 12px; }
#problems { background: var(--panel); border-top: 1px solid var(--border); font-family: monospace;
  font-size: 12px; max-height: 120px; overflow: auto; display: none; }
#problems .p { padding: 2px 10px; cursor: pointer; color: var(--k-error); }
#problems .p:hover { background: var(--sel); }
#panel { display: flex; flex-direction: column; background: var(--panel); border-top: 1px solid var(--border);
  height: 30vh; min-height: 100px; max-height: 85vh; overscroll-behavior: contain; flex: none; }
#panel-grip { height: 5px; cursor: ns-resize; background: var(--border); flex: none; }
#panel-grip:hover { background: var(--accent); }
#panel-tabs { display: flex; align-items: center; border-bottom: 1px solid var(--border); font-size: 11px; user-select: none; flex: none; }
.ptab { padding: 5px 12px; color: var(--muted); cursor: pointer; border-right: 1px solid var(--border); }
.ptab.active { color: var(--accent); background: var(--hover); }
.ptab-close { margin-left: auto; padding: 3px 12px; cursor: pointer; color: var(--muted); font-size: 16px; }
.ptab-close:hover { color: var(--k-error); }
#panel .panel-body { flex: 1 1 auto; min-height: 0; overflow: auto; font-family: monospace; font-size: 12px; }
#terminal { padding: 4px 0; }
#term-out { margin: 0; padding: 4px 10px; color: var(--fg); white-space: pre-wrap; }
#term-out .te { color: var(--k-error); }
#term-line { display: flex; align-items: center; gap: 8px; padding: 2px 10px 6px; }
#term-prompt { color: var(--k-number); }
#term-input { flex: 1; background: transparent; color: var(--fg); border: none; outline: none;
  font-family: monospace; font-size: 12px; }
#output { padding: 6px 10px; color: var(--fg); white-space: pre-wrap; }
#gitpanel-body { padding: 4px 0; }
.grow { padding: 4px 10px; cursor: pointer; white-space: nowrap; }
.grow:hover { background: var(--sel); }
.grow .gm { color: var(--file-modified, var(--k-number)); }
.grow .gd { color: var(--file-deleted, var(--k-error)); }
.grow .gu { color: var(--k-number); }
.gbtn { background: var(--btn, #44475a); color: var(--fg); border: none; border-radius: 4px;
  padding: 3px 10px; cursor: pointer; font-size: 11px; margin: 2px 4px; }
.gbtn:hover { background: var(--sel); }
#git-commit-input { flex: 1; background: var(--input, #282a36); color: var(--fg); border: 1px solid var(--border);
  border-radius: 4px; padding: 3px 8px; font-size: 11px; }
#git-head { display: flex; align-items: center; gap: 6px; padding: 4px 8px; }
footer#status { background: var(--status-bg, var(--panel)); color: var(--status-fg, var(--muted)); font-size: 12px; padding: 3px 10px;
  display: flex; justify-content: space-between; gap: 8px; flex: none; border-top: 1px solid var(--border); }
#status .click { cursor: pointer; padding: 0 6px; border-radius: 4px; }
#status .click:hover { background: var(--sel); color: var(--fg); }
#palette { display: none; position: fixed; top: 80px; left: 50%; transform: translateX(-50%);
  width: 460px; background: var(--sidebar); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,.5); z-index: 100; }
#palette-input { width: 100%; box-sizing: border-box; background: var(--editor); color: var(--fg);
  border: none; border-bottom: 1px solid var(--border); padding: 10px 14px; font-size: 14px; outline: none; }
#palette-list { max-height: 260px; overflow: auto; }
.pc { padding: 7px 14px; font-size: 13px; cursor: pointer; }
.pc:hover { background: var(--sel); }
.k-keyword { color: var(--k-keyword); }
.k-type { color: var(--k-type); }
.k-string, .k-char { color: var(--k-string); }
.k-number { color: var(--k-number); }
.k-comment { color: var(--k-comment); font-style: italic; }
.k-error { color: var(--k-error); text-decoration: underline; }
.k-operator, .k-punctuation, .k-identifier { color: var(--fg); }
#side-toggle { display: none; background: transparent; border: none; color: var(--fg);
  font-size: 18px; cursor: pointer; padding: 6px 10px; flex: none; }
@media (max-width: 900px) {
  #minimap { display: none; }
  #sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: 280px;
    box-shadow: 8px 0 30px rgba(0,0,0,.5); transform: translateX(-100%);
    transition: transform .18s ease; max-width: 85vw; }
  #sidebar.open { transform: translateX(0); }
  #side-grip { display: none; }
  #side-toggle { display: block; }
  #menubar { flex-wrap: wrap; }
  #crumbs { display: none; }
  #palette { width: 92vw; left: 4vw; transform: none; top: 60px; }
  #panel { height: 40vh; }
  .ptab { padding: 7px 9px; font-size: 10px; }
}
@media (max-width: 600px) {
  #sidebar { width: 75vw; }
  #activity { width: 38px; }
  #status { font-size: 11px; flex-wrap: wrap; }
  #panel { height: 45vh; }
  #term-input, #dirinput, #searchinput { font-size: 16px; }
  #gutter { width: 38px; }
}