:root{
  --bg:#000; /* default black, change later */
  --term-bg:#081014;
  --term-panel:#071218;
  --accent:#3a8a3a; /* gardening green */
  --accent2:#9dbf6a;
  --text:#cfe8d0;
  --muted:#7f9b78;
  --highlight-bg:rgba(150,200,120,0.25);
  --font-family: "DejaVu Sans Mono", "Liberation Mono", "Ubuntu Mono", monospace;
  --font-size:12px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:var(--font-family);font-size:var(--font-size);}
body.bg-black{background:var(--bg);color:var(--text);overflow:hidden}

/* desktop container */
#desktop{position:relative;width:100%;height:100%;}

/* terminal window */
.terminal {
  position:absolute;
  top:8vh;
  left:8vw;
  width:640px;
  height:360px;
  background:linear-gradient(180deg,var(--term-bg),#04110b);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:6px;
  box-shadow:0 8px 30px rgba(0,0,0,0.7);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  resize:both;
}

/* titlebar */
.term-title {
  height:28px;
  background:var(--term-panel);
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 8px;
  color:var(--muted);
  user-select:none;
  cursor:grab;
}

/* titlebar buttons */
.term-btn {
  width:12px;height:12px;border-radius:50%;
  box-shadow:inset 0 -1px rgba(0,0,0,0.2);
}
.term-btn.red{background:#ff5f56}
.term-btn.yellow{background:#ffbd2e}
.term-btn.green{background:#2ecc71}

/* content area (terminal screen) */
.term-screen {
  flex:1;
  padding:12px;
  font-family:var(--font-family);
  font-size:var(--font-size);
  color:var(--text);
  background:transparent;
  overflow:auto;
  position:relative;
}

/* faux text cursor */
.cursor {
  display:inline-block;
  width:8px;
  height:14px;
  background:var(--text);
  margin-left:4px;
  animation:blink 1s step-end infinite;
  vertical-align:bottom;
}
@keyframes blink {50%{opacity:0}100%{opacity:1}}

/* boot text styling */
.boot-line{color:var(--muted);white-space:pre-wrap;font-family:var(--font-family);font-size:var(--font-size);}

/* layout inside initial terminal: left nav column and main content area */
.term-inner {
  display:flex;
  gap:12px;
}
.term-nav {
  width:180px;
  padding:8px;
  background:rgba(0,0,0,0.04);
  border-right:1px dashed rgba(255,255,255,0.03);
  height: calc(100% - 8px);
  overflow:auto;
}
.nav-link {
  display:block;
  padding:6px 8px;
  margin:6px 0;
  color:var(--text);
  border-radius:4px;
  text-decoration:none;
  font-size:14px;
  background:transparent;
}
.nav-link:hover{background:rgba(150,200,120,0.08)}
.nav-link .label{display:inline-block}
.nav-link.highlighted{background:var(--highlight-bg);outline:1px solid rgba(60,120,60,0.15)}

/* main content column */
.term-body {
  flex:1;
  padding:8px;
  overflow:auto;
  color:var(--text);
  font-size:12px;
  line-height:1.4;
}

/* small helper */
.small-muted{color:var(--muted);font-size:11px}

/* new terminal stacking order */
.terminal[data-z="1"]{z-index:100}
.terminal[data-z="2"]{z-index:200}
.terminal[data-z="3"]{z-index:300}
/* and so on; script will manage z-indexs */