:root {
  --bg-deepest:#090c12; --bg-deep:#0d1117; --bg-mid:#161b24;
  --bg-surface:#1c2230; --bg-raised:#212840; --bg-hover:#252d42;
  --border-dim:#252d42; --border-mid:#2e3a50; --border-hi:#3d4f6a;
  --text-primary:#e2e8f4; --text-secondary:#8896b0;
  --text-muted:#4a5568; --text-hint:#3d4a60;
  --green:#3dffa0; --green-dim:#1a6645; --green-muted:#0d3322;
  --blue:#58a6ff;  --blue-dim:#1a4a80;  --blue-muted:#0d2540;
  --purple:#c792ea; --purple-dim:#5a2d80;
  --amber:#ffd080; --amber-dim:#6b4a10;
  --red:#ff7b7b;   --red-dim:#5a1a1a;
  --teal:#4dd9d9;  --cyan:#79c0ff;
  --font-mono:'JetBrains Mono',monospace;
  --font-ui:'Outfit',sans-serif;
  --r-sm:4px; --r-md:8px; --r-lg:12px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;background:var(--bg-deepest);color:var(--text-primary);font-family:var(--font-ui);overflow:hidden}
#app{display:flex;flex-direction:column;width:100vw;height:100vh;overflow:hidden}

/* TOP BAR */
#topbar{display:flex;align-items:center;padding:0 20px;height:48px;background:var(--bg-deep);border-bottom:1px solid var(--border-dim);flex-shrink:0;gap:14px;user-select:none}
.topbar-logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;letter-spacing:.04em;color:var(--text-primary)}
.logo-icon{width:26px;height:26px;border-radius:6px;background:var(--green-muted);border:1px solid var(--green-dim);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:13px;color:var(--green);font-weight:700;flex-shrink:0}
.topbar-sep{width:1px;height:20px;background:var(--border-dim)}
.badge{font-size:11px;font-weight:500;padding:2px 8px;border-radius:20px;font-family:var(--font-mono)}
.badge-green{background:var(--green-muted);color:var(--green);border:1px solid var(--green-dim)}
.badge-blue{background:var(--blue-muted);color:var(--blue);border:1px solid var(--blue-dim)}

/* MAIN — desktop area */
#main{
  display:flex;flex:1;overflow:hidden;min-height:0;
  gap:12px;padding:12px;
  background:var(--bg-deepest) url('bg.png') center/cover no-repeat;
}

/* WINDOW FRAMES */
.window{
  display:flex;flex-direction:column;
  flex:1;
  background: rgba(0, 0, 0, 0.85);
  border:1px solid var(--border-mid);
  border-radius:var(--r-lg);
  box-shadow:0 4px 24px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.3);
  overflow:hidden;
  min-width:240px;
}
.window:focus-within{
  box-shadow:0 8px 40px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4);
  border-color:var(--border-hi);
}

/* PANE TITLEBARS — window title bar */
.pane-titlebar{
  display:flex;align-items:center;
  padding:0 10px;height:36px;
  background:linear-gradient(180deg, var(--bg-mid) 0%, var(--bg-surface) 100%);
  border-bottom:1px solid var(--border-dim);
  gap:8px;flex-shrink:0;user-select:none;
}
.window-controls{display:flex;gap:6px;flex-shrink:0}
.win-dot{
  width:12px;height:12px;border-radius:50%;flex-shrink:0;
  border:1px solid rgba(0,0,0,.2);
  transition:filter .15s;
}
.win-dot:hover{filter:brightness(1.3)}
.win-dot-r{background:#ff5f56}.win-dot-y{background:#ffbd2e}.win-dot-g{background:#27c93f}
.pane-icon{width:18px;height:18px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;margin-left:4px}
.pane-title{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);flex:1;text-align:center;margin-right:4px}

/* TERMINAL PANE */
#terminal-pane{display:flex;flex-direction:column;flex:1;overflow:hidden}

/* SHELL VIEW */
#shell-view{display:flex;flex-direction:column;flex:1;overflow:hidden}
#term-output{flex:1;overflow-y:auto;padding:14px 18px 6px;font-family:var(--font-mono);font-size:13px;line-height:1.75;scrollbar-width:thin;scrollbar-color:var(--border-mid) transparent}
#term-output::-webkit-scrollbar{width:4px}
#term-output::-webkit-scrollbar-thumb{background:var(--border-mid);border-radius:2px}

/* terminal text classes */
.t-prompt{color:var(--green)} .t-path{color:var(--teal)} .t-dollar{color:var(--text-muted)}
.t-cmd{color:var(--text-primary)} .t-out{color:var(--text-secondary)} .t-err{color:var(--red)}
.t-info{color:var(--blue)} .t-success{color:var(--green)} .t-dir{color:var(--cyan);font-weight:500}
.t-file{color:var(--text-primary)} .t-muted{color:var(--text-muted);font-style:italic}
.t-key{color:var(--purple)} .t-amber{color:var(--amber)}
.t-section{color:var(--amber);font-weight:700;letter-spacing:.03em}
.t-flag{color:var(--purple)} .t-synopsis{color:var(--cyan)} .t-hidden{opacity:.4}
.t-perm{color:#6aadcc} .t-size{color:#9eb8d0;text-align:right}
.t-date{color:var(--text-muted)} .t-exec{color:var(--green);font-weight:500}
.ls-long-row{display:flex;gap:10px;align-items:baseline}

#term-input-row{display:flex;align-items:center;padding:10px 18px;flex-shrink:0;position:relative}
#input-prompt{font-family:var(--font-mono);font-size:13px;white-space:nowrap;flex-shrink:0}
#term-input{flex:1;background:transparent;border:none;outline:none;font-family:var(--font-mono);font-size:13px;color:var(--text-primary);caret-color:var(--green);min-width:0;padding:0}

/* AUTOCOMPLETE */
#autocomplete{position:absolute;bottom:calc(100% + 4px);left:18px;right:18px;background:var(--bg-surface);border:1px solid var(--border-mid);border-radius:var(--r-md);display:none;z-index:100;box-shadow:0 -8px 32px rgba(0,0,0,.5);max-height:200px;overflow-y:auto}
#autocomplete.visible{display:block}
.ac-item{display:flex;align-items:center;padding:7px 12px;cursor:pointer;gap:10px;border-bottom:1px solid var(--border-dim);transition:background .08s}
.ac-item:last-child{border-bottom:none}
.ac-item:hover,.ac-item.selected{background:var(--bg-hover)}
.ac-icon{width:18px;height:18px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}
.ac-icon-dir{background:var(--amber-dim);color:var(--amber)} .ac-icon-file{background:var(--blue-muted);color:var(--blue)}
.ac-icon-cmd{background:var(--green-muted);color:var(--green)} .ac-icon-flag{background:var(--purple-dim);color:var(--purple)}
.ac-name{font-family:var(--font-mono);font-size:12px;color:var(--text-primary);flex:1}
.ac-desc{font-size:11px;color:var(--text-muted);font-family:var(--font-mono)}

/* NANO VIEW */
#nano-view{display:none;flex-direction:column;flex:1;overflow:hidden;background:var(--bg-deepest)}
#nano-view.active{display:flex}
#nano-topbar{background:#0e2030;color:#7aaecc;font-family:var(--font-mono);font-size:12px;padding:3px 14px;display:flex;align-items:center;gap:12px;flex-shrink:0;border-bottom:1px solid #1a3a50}
.nano-label{color:#4a7a9a} #nano-filename{color:#79c0ff;font-weight:700} #nano-modified{margin-left:auto;color:var(--amber);font-size:11px}
#nano-body{flex:1;display:flex;overflow:hidden}
#nano-gutters{padding:6px 8px 6px 6px;background:#0a1825;border-right:1px solid #1a3a50;font-family:var(--font-mono);font-size:13px;line-height:1.6;color:#2a4a60;text-align:right;min-width:42px;flex-shrink:0;overflow:hidden;pointer-events:none;user-select:none;white-space:pre}
#nano-textarea{flex:1;background:var(--bg-deepest);border:none;outline:none;resize:none;font-family:var(--font-mono);font-size:13px;line-height:1.6;color:var(--text-primary);caret-color:var(--green);padding:6px 12px;overflow:auto;white-space:pre;tab-size:4;scrollbar-width:thin;scrollbar-color:var(--border-mid) transparent}
#nano-textarea::-webkit-scrollbar{width:4px}
#nano-textarea::-webkit-scrollbar-thumb{background:var(--border-mid);border-radius:2px}
#nano-statusbar{background:#0e2030;color:#4a7a9a;font-family:var(--font-mono);font-size:11px;padding:3px 14px;display:flex;align-items:center;border-top:1px solid #1a3a50;border-bottom:1px solid #1a3a50;flex-shrink:0}
#nano-status-msg{flex:1} #nano-pos{color:#79c0ff}
#nano-keybinds{background:#071018;display:grid;grid-template-columns:repeat(2,1fr);flex-shrink:0}
.nk{display:flex;align-items:center;gap:5px;padding:4px 10px;font-family:var(--font-mono);font-size:11px;color:#3a6080;border-top:1px solid #0f2030}
.nk:first-child{border-right:1px solid #0f2030}
.nk-key{background:#0e2535;color:#79c0ff;padding:1px 5px;border-radius:3px;font-weight:700;font-size:10px;white-space:nowrap;flex-shrink:0;border:1px solid #1a4060}

/* NANO SAVE PROMPT overlay */
#nano-save-prompt{display:none;position:absolute;bottom:0;left:0;right:0;background:#0a1a28;border-top:2px solid var(--amber);padding:8px 14px;font-family:var(--font-mono);font-size:12px;color:#c8d8f0;z-index:20;align-items:center;gap:10px}
#nano-save-prompt.visible{display:flex}
#nano-save-prompt .nsp-msg{flex:1}
#nano-save-prompt .nsp-key{background:#0e2535;color:#79c0ff;padding:2px 7px;border-radius:3px;font-weight:700;font-size:11px;border:1px solid #1a4060;cursor:pointer;transition:background .1s}
#nano-save-prompt .nsp-key:hover{background:#1a3550}

/* DIVIDER — draggable resize handle */
#divider{width:0;flex-shrink:0;position:relative;cursor:col-resize;z-index:10}
#divider::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2px;height:56px;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.25) 0px,rgba(255,255,255,.25) 2px,transparent 2px,transparent 5px);border-radius:1px;pointer-events:none}
#divider::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:60px;cursor:col-resize;border-radius:4px;transition:background .15s}
#divider:hover::before{background:repeating-linear-gradient(to bottom,rgba(255,255,255,.4) 0px,rgba(255,255,255,.4) 2px,transparent 2px,transparent 5px)}
#divider:hover::after{background:rgba(255,255,255,.06)}
#divider.dragging::before{background:repeating-linear-gradient(to bottom,var(--green-dim) 0px,var(--green-dim) 2px,transparent 2px,transparent 5px)}
#divider.dragging::after{background:rgba(255,255,255,.1)}

/* GUI PANE */
#gui-pane{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:180px}
#gui-path-bar{
  flex:1;font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);
  background:var(--bg-deepest);border:1px solid var(--border-dim);border-radius:var(--r-sm);
  padding:4px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}


/* FILE GRID */
.file-grid{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start}
.file-item{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 8px 8px;border-radius:var(--r-md);cursor:default;width:78px;border:1px solid transparent;transition:background .1s,border-color .1s}
.file-item:hover{background:var(--bg-surface);border-color:var(--border-dim)}
.file-item.hidden-file{opacity:.35}
.file-item.new-anim{animation:fileappear .25s ease-out}
@keyframes fileappear{0%{opacity:0;transform:scale(.7) translateY(6px)}100%{opacity:1;transform:scale(1) translateY(0)}}

/* Highlight pulse — briefly glows when a file/folder is created or modified */
.file-item.highlight-pulse{animation:highlightPulse 1.6s ease-out forwards}
@keyframes highlightPulse{
  0%  {background:rgba(61,255,160,.18);border-color:rgba(61,255,160,.55);box-shadow:0 0 0 2px rgba(61,255,160,.2)}
  40% {background:rgba(61,255,160,.12);border-color:rgba(61,255,160,.3)}
  100%{background:transparent;border-color:transparent;box-shadow:none}
}
.file-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.fi-folder{background:linear-gradient(145deg,#2a2010,#3a2e0f);border:1px solid #5a4510}
.fi-file{background:linear-gradient(145deg,#0d1e30,#132540);border:1px solid #1e3e60}
.fi-text{background:linear-gradient(145deg,#0d2010,#102a15);border:1px solid #1a4820}
.fi-image{background:linear-gradient(145deg,#2a0d20,#351228);border:1px solid #5a1a40}
.file-name{font-size:11px;color:var(--text-secondary);text-align:center;word-break:break-all;line-height:1.3;max-width:74px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.file-grid-empty{font-size:12px;color:var(--text-hint);font-family:var(--font-mono);font-style:italic;padding:6px 2px}

/* EDITOR PREVIEW */
.ep-wrap{display:flex;flex-direction:column;height:100%}
.ep-titlebar{display:flex;align-items:center;padding:0 14px;height:34px;background:var(--bg-surface);border-bottom:1px solid var(--border-dim);gap:8px;flex-shrink:0}
.ep-fname{color:var(--text-primary);font-family:var(--font-mono);font-weight:500;font-size:12px}
.ep-badge{font-size:10px;padding:1px 7px;border-radius:20px;margin-left:auto;font-family:var(--font-mono)}
.ep-live{background:var(--green-muted);color:var(--green);border:1px solid var(--green-dim)}
.ep-ro{background:var(--bg-raised);color:var(--text-muted);border:1px solid var(--border-dim)}
.ep-body{flex:1;overflow-y:auto;padding:12px 16px;font-family:var(--font-mono);font-size:12.5px;line-height:1.9;color:var(--text-primary);background:var(--bg-deep);white-space:pre;scrollbar-width:thin;scrollbar-color:var(--border-mid) transparent}
.ep-body::-webkit-scrollbar{width:4px}
.ep-body::-webkit-scrollbar-thumb{background:var(--border-mid)}
.ep-line{display:flex;gap:16px}
.ep-ln{color:var(--text-hint);text-align:right;min-width:24px;user-select:none;flex-shrink:0}
.ep-lc{flex:1} .ep-empty{color:var(--text-hint);font-style:italic}

/* STATUS / LESSON */
#gui-statusbar{display:flex;align-items:center;padding:0 14px;height:26px;background:linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-mid) 100%);border-top:1px solid var(--border-dim);gap:16px;flex-shrink:0}
.statusbar-item{font-size:11px;color:var(--text-muted);font-family:var(--font-mono)}

/* GUI content area — relative so the editor overlay can be positioned inside */
#gui-content{flex:1;overflow-y:auto;padding:14px;scrollbar-width:thin;scrollbar-color:var(--border-mid) transparent;position:relative}
#gui-content::-webkit-scrollbar{width:4px}
#gui-content::-webkit-scrollbar-thumb{background:var(--border-mid);border-radius:2px}

/* Floating editor overlay — stacked window on top of file grid */
#editor-overlay{
  display:none;
  position:absolute;
  top:16px; left:16px; right:16px; bottom:16px;
  background:var(--bg-deep);
  border:1px solid var(--border-mid);
  border-radius:var(--r-lg);
  box-shadow:0 12px 48px rgba(0,0,0,.65), 0 4px 12px rgba(0,0,0,.4);
  flex-direction:column;
  overflow:hidden;
  z-index:10;
  animation:editorOpen .22s ease-out;
}
#editor-overlay.visible{display:flex}
@keyframes editorOpen{0%{opacity:0;transform:scale(.94) translateY(10px)}100%{opacity:1;transform:scale(1) translateY(0)}}

/* Window chrome for the floating editor */
.eo-chrome{
  display:flex;align-items:center;padding:0 12px;height:36px;
  background:linear-gradient(180deg, var(--bg-mid) 0%, var(--bg-surface) 100%);
  border-bottom:1px solid var(--border-mid);
  flex-shrink:0;gap:8px;user-select:none;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.eo-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;border:1px solid rgba(0,0,0,.2);transition:filter .15s}
.eo-dot:hover{filter:brightness(1.3)}
.eo-dot-r{background:#ff5f56}.eo-dot-y{background:#ffbd2e}.eo-dot-g{background:#27c93f}
.eo-title{font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);flex:1;text-align:center;padding-right:33px}
.eo-badge{font-size:10px;padding:1px 7px;border-radius:20px;font-family:var(--font-mono)}
.eo-live{background:var(--green-muted);color:var(--green);border:1px solid var(--green-dim)}

/* Editor body inside the overlay */
.eo-body{
  flex:1;overflow-y:auto;padding:12px 14px;
  font-family:var(--font-mono);font-size:12px;line-height:1.85;
  color:var(--text-primary);background:var(--bg-deep);
  white-space:pre;
  scrollbar-width:thin;scrollbar-color:var(--border-dim) transparent;
}
.eo-body::-webkit-scrollbar{width:3px}
.eo-body::-webkit-scrollbar-thumb{background:var(--border-mid)}
.eo-line{display:flex;gap:12px}
.eo-ln{color:var(--text-hint);text-align:right;min-width:20px;user-select:none;flex-shrink:0;font-size:11px}
.eo-lc{flex:1}
.eo-empty{color:var(--text-hint);font-style:italic}

/* Dim the file grid when editor overlay is open — keep it visible so it feels like a stacked window */
#gui-content.editor-open .file-grid{opacity:.35;pointer-events:none;filter:blur(2px) brightness(.7);transition:opacity .25s,filter .25s}
#gui-content.editor-open~#gui-statusbar{opacity:.5;transition:opacity .25s}
#lesson-bar{border-top:1px solid var(--border-dim);background:linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-mid) 100%);padding:10px 18px;flex-shrink:0;display:flex;align-items:flex-start;gap:10px;min-height:52px}
#lesson-icon{width:20px;height:20px;border-radius:50%;background:var(--blue-muted);border:1px solid var(--blue-dim);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;margin-top:1px;font-family:var(--font-mono)}
#lesson-text{font-size:12.5px;color:var(--text-secondary);line-height:1.55;flex:1}
#lesson-text strong{color:var(--text-primary);font-weight:600}
#lesson-text code{font-family:var(--font-mono);font-size:11.5px;background:var(--bg-surface);border:1px solid var(--border-dim);padding:0 5px;border-radius:3px;color:var(--amber)}
body.dragging-divider{user-select:none;cursor:col-resize}

/* EXPORT BUTTON & MENU */
.pane-spacer{flex:1}
.export-wrap{position:relative}
.export-btn{
  background:var(--bg-surface);border:1px solid var(--border-dim);border-radius:var(--r-sm);
  color:var(--text-secondary);font-family:var(--font-mono);font-size:11px;
  padding:3px 10px;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap;
}
.export-btn:hover{background:var(--bg-hover);color:var(--text-primary)}
.export-menu{
  display:none;position:absolute;top:calc(100% + 4px);right:0;
  background:var(--bg-surface);border:1px solid var(--border-mid);border-radius:var(--r-md);
  box-shadow:0 8px 24px rgba(0,0,0,.5);z-index:200;min-width:150px;overflow:hidden;
}
.export-menu.visible{display:block}
.export-menu-item{
  padding:8px 14px;font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);
  cursor:pointer;transition:background .1s,color .1s;
}
.export-menu-item:hover{background:var(--bg-hover);color:var(--text-primary)}

/* USERNAME DIALOG */
#username-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);
  z-index:1000;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);
}
#username-overlay.visible{display:flex}
#username-dialog{
  background:var(--bg-deep);border:1px solid var(--border-mid);border-radius:var(--r-lg);
  box-shadow:0 16px 64px rgba(0,0,0,.7);width:380px;max-width:90vw;
  animation:dialogIn .2s ease-out;
}
@keyframes dialogIn{0%{opacity:0;transform:scale(.95) translateY(8px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.ud-header{
  display:flex;align-items:center;gap:10px;padding:18px 22px 0;
}
.ud-icon{
  width:36px;height:36px;border-radius:8px;background:var(--green-muted);
  border:1px solid var(--green-dim);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:16px;color:var(--green);font-weight:700;flex-shrink:0;
}
.ud-title{font-size:16px;font-weight:600;color:var(--text-primary)}
.ud-body{padding:16px 22px 20px}
.ud-desc{font-size:13px;color:var(--text-secondary);line-height:1.55;margin-bottom:14px}
.ud-input{
  width:100%;background:var(--bg-surface);border:1px solid var(--border-mid);
  border-radius:var(--r-sm);padding:10px 14px;font-family:var(--font-mono);
  font-size:14px;color:var(--text-primary);outline:none;transition:border-color .15s;
}
.ud-input:focus{border-color:var(--green-dim)}
.ud-input::placeholder{color:var(--text-hint)}
.ud-error{font-size:12px;color:var(--red);margin-top:8px;display:none}
.ud-error.visible{display:block}
.ud-footer{display:flex;justify-content:flex-end;padding:0 22px 18px}
.ud-btn{
  background:var(--green-muted);color:var(--green);border:1px solid var(--green-dim);
  border-radius:var(--r-sm);padding:8px 24px;font-family:var(--font-mono);
  font-size:13px;font-weight:600;cursor:pointer;transition:background .15s;
}
.ud-btn:hover{background:var(--green-dim)}
.ud-btn:disabled{opacity:.4;cursor:not-allowed}