* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #0b0f0c; --panel: #11161300; --panel2: #0f1411; --line: #1d2a20;
  --grn: #39ff14; --grn-dim: #2bbf12; --txt: #cfeac4; --muted: #6f8a6a;
}
html, body { height: 100%; background: var(--bg); color: var(--txt);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
#app { display: flex; height: 100vh; }

#sidebar { width: 230px; min-width: 230px; background: #0d120f; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; }
.side-head { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 12px; border-bottom: 1px solid var(--line); }
.brand { color: var(--grn); text-shadow: 0 0 8px var(--grn); font-weight: 700; letter-spacing: .03em; }
#newBtn { background: transparent; color: var(--grn); border: 1px solid var(--grn-dim);
  border-radius: 6px; width: 28px; height: 28px; cursor: pointer; font-size: 16px; }
#newBtn:hover { background: var(--grn); color: #000; }
#fileList { list-style: none; flex: 1; overflow-y: auto; padding: 6px; }
#fileList li { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 6px;
  cursor: pointer; color: var(--txt); font-size: 13px; }
#fileList li:hover { background: #14201700; background: #13201688; }
#fileList li.active { background: #15251a; color: var(--grn); }
#fileList li .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#fileList li .ren, #fileList li .del { color: var(--muted); border: none; background: none; cursor: pointer; visibility: hidden; font-size: 13px; padding: 0 2px; }
#fileList li:hover .ren, #fileList li:hover .del { visibility: visible; }
#fileList li .ren:hover { color: var(--grn); }
#fileList li .del:hover { color: #ff5a5a; }
.side-foot { border-top: 1px solid var(--line); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.side-foot button { background: transparent; color: var(--muted); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px; cursor: pointer; font-size: 12px; text-align: left; }
.side-foot button:hover { color: var(--grn); border-color: var(--grn-dim); }

#main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#topbar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
#curName { color: var(--grn); font-weight: 600; }
#saveState { color: var(--muted); font-size: 12px; }
.spacer { flex: 1; }
#runBtn { background: var(--grn); color: #000; border: none; border-radius: 6px; padding: 8px 18px;
  font-weight: 700; cursor: pointer; box-shadow: 0 0 12px var(--grn); }
#runBtn:hover { box-shadow: 0 0 22px var(--grn); }
#runBtn:disabled { opacity: .5; cursor: wait; box-shadow: none; }

#editorWrap { flex: 1; min-height: 0; }
.CodeMirror { height: 100% !important; font-size: 14px; }
#console { height: 34%; border-top: 1px solid var(--line); display: flex; flex-direction: column; background: #080b09; }
#consoleHead { display: flex; justify-content: space-between; padding: 6px 12px; color: var(--muted);
  font-size: 12px; border-bottom: 1px solid var(--line); }
#consoleHead button { background: none; border: none; color: var(--muted); cursor: pointer; }
#consoleHead button:hover { color: var(--grn); }
#output { flex: 1; overflow: auto; padding: 10px 12px; white-space: pre-wrap; font-size: 13px; line-height: 1.45; }
#output .err { color: #ff7a7a; }
#output .meta { color: var(--muted); }

#stopBtn { background: transparent; color: #ff7a7a; border: 1px solid #ff7a7a; border-radius: 6px;
  padding: 8px 14px; font-weight: 700; cursor: pointer; }
#stopBtn:hover { background: #ff7a7a; color: #000; }

#stdinBar { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-top: 1px solid var(--line); background: #0a0e0b; }
#stdinBar .prompt { color: var(--grn); font-weight: 700; }
#stdinLine { flex: 1; background: transparent; border: none; outline: none; color: var(--txt);
  font-family: inherit; font-size: 13px; padding: 4px 0; }
#stdinLine:disabled { opacity: .4; }
#stdinLine::placeholder { color: var(--muted); }

.overlay { position: fixed; inset: 0; background: #000; display: flex; align-items: center; justify-content: center; }
.overlay.hidden { display: none; }
.overlay form { display: flex; flex-direction: column; gap: 10px; width: 240px; }
.overlay input { background: #0d120f; border: 1px solid var(--grn-dim); color: var(--grn); padding: 12px;
  border-radius: 8px; font-family: inherit; text-align: center; letter-spacing: .2em; }
.overlay button { background: transparent; border: 1px solid var(--grn-dim); color: var(--grn); padding: 10px;
  border-radius: 8px; cursor: pointer; }
.overlay button:hover { background: var(--grn); color: #000; }
#lockMsg { color: #ff7a7a; font-size: 12px; text-align: center; min-height: 14px; }