:root {
  --bg:#0f1216; --panel:#171c23; --panel2:#1e242d; --line:#2a323d;
  --fg:#e6edf3; --muted:#8b98a5; --accent:#f0b429; --ok:#3fb950; --err:#f85149;
}
* { box-sizing:border-box; }
html,body { height:100%; margin:0; }
body { background:var(--bg); color:var(--fg); font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
.muted{color:var(--muted);} .small{font-size:.85rem;} .err{color:var(--err);min-height:1.2em;margin-top:.4rem;}

/* Login */
.login{ display:flex; align-items:center; justify-content:center; height:100vh; }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:1.6rem 1.8rem; width:340px; display:flex; flex-direction:column; }
.card h1{ margin:.1rem 0 .2rem; font-size:1.3rem; }
.card label{ font-size:.8rem; color:var(--muted); margin:.7rem 0 .2rem; }
.card input{ padding:.5rem .6rem; background:var(--panel2); border:1px solid var(--line); border-radius:7px; color:var(--fg); font:inherit; }
.btn{ padding:.5rem .9rem; border-radius:8px; border:1px solid var(--line); background:var(--accent); color:#1a1200; font-weight:650; cursor:pointer; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn.ghost{ background:transparent; color:var(--fg); }
.card .btn{ margin-top:1rem; }

/* IDE layout */
.ide{ display:flex; flex-direction:column; height:100vh; }
.topbar{ display:flex; align-items:center; gap:.6rem; padding:.5rem .8rem; background:var(--panel); border-bottom:1px solid var(--line); }
.brand{ font-weight:650; }
.spacer{ flex:1; }
.pill{ background:var(--panel2); border:1px solid var(--line); border-radius:999px; padding:.1rem .6rem; font-size:.82rem; }
.status{ font-size:.85rem; min-width:1em; }
.status.ok{ color:var(--ok); } .status.err{ color:var(--err); } .status.busy{ color:var(--accent); }
.main{ flex:1; display:flex; min-height:0; }
.tree{ width:250px; background:var(--panel); border-right:1px solid var(--line); display:flex; flex-direction:column; }
.tree-bar{ display:flex; align-items:center; gap:.4rem; padding:.35rem .6rem; border-bottom:1px solid var(--line); }
.tree-title{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); flex:1; }
.iconbtn{ background:var(--panel2); border:1px solid var(--line); color:var(--fg); border-radius:6px; min-width:24px; height:22px; cursor:pointer; line-height:1; }
.iconbtn:hover{ background:#2a3a2a; }
.tree-body{ flex:1; overflow:auto; padding:.3rem 0; }
.row{ display:flex; align-items:center; gap:.3rem; padding:.2rem .5rem; cursor:pointer; white-space:nowrap; font-size:.88rem; color:var(--fg); user-select:none; }
.row:hover{ background:var(--panel2); }
.row.file.active{ background:#243; color:#cfe; }
.row .chev{ width:.8em; display:inline-block; color:var(--muted); font-size:.7rem; }
.row .ico{ font-size:.85rem; }
.row .label{ flex:1; overflow:hidden; text-overflow:ellipsis; }
.row .acts{ display:none; gap:.1rem; }
.row:hover .acts{ display:flex; }
.actbtn{ background:transparent; border:none; color:var(--muted); cursor:pointer; padding:0 .15rem; font-size:.82rem; }
.actbtn:hover{ color:var(--fg); }
.actbtn.disabled{ opacity:.25; cursor:not-allowed; }
.editor{ flex:1; min-width:0; }
.output{ height:170px; overflow:auto; background:#0b0e12; border-top:1px solid var(--line); padding:.5rem .8rem; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.82rem; white-space:pre-wrap; }
.output .ok{ color:var(--ok);} .output .err{ color:var(--err);} .output .info{ color:var(--muted);}