:root{
  --bg:#0f1115; --fg:#e6e6e6; --muted:#8b949e;
  --accent:#00ff84;
  --winbar:#7b7e84; --winborder:#d8f3ff;
  --term:#012456;           /* preview window bg */
  --code-bg:#0b0e13;        /* editor textarea bg */
  --code-fg:#e6e6e6;        /* editor textarea fg */
  --shadow-glow: 0 0 24px rgba(0,255,200,.18), 0 0 2px rgba(0,255,200,.5) inset;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height:1.4;
}

/* layout */
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 16px; border-bottom:1px solid #1c1f26; background:#0b0d12;
  position:sticky; top:0; z-index:10;
}
.brand{font-weight:600; letter-spacing:.3px}
.topbar .btn.ghost{padding:6px 10px; margin-left:8px}

.wrap{max-width:1200px; margin:0 auto; padding:18px}

.controls,.actions{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  background:#0b0d12; border:1px solid #1b1f25; border-radius:10px;
  padding:12px; box-shadow:0 0 18px rgba(0,0,0,.2) inset;
}
.controls .group,.actions .group{display:flex; align-items:center; gap:8px}
.controls .group label,.actions .group label{font-size:.8rem; color:var(--muted)}
.controls .group.grow{flex:1}
.controls input[type="text"]{width:100%}

#canvasWrap{display:flex; justify-content:center; padding:18px 0}

/* --- EDITOR --- */
.editor{margin-top:10px}
.wrap .editor textarea{
  width:100%; min-height:160px;
  background:var(--code-bg) !important;
  color:var(--code-fg) !important;
  border:1px solid color-mix(in srgb, var(--winborder) 35%, transparent);
  border-radius:10px; padding:12px; resize:vertical;
  caret-color: var(--accent);
  outline:none;
}
.wrap .editor textarea::selection{ background: color-mix(in srgb, var(--accent) 28%, transparent); }
.wrap .editor textarea::placeholder{ color: color-mix(in srgb, var(--code-fg) 45%, transparent); }
.editor .tips{color:var(--muted); font-size:.8rem; margin-top:6px}

.actions{margin-top:12px}
.footer{margin:18px 0; text-align:center; color:var(--muted)}

/* buttons */
.btn{
  background:var(--accent); color:#00150b; border:0; padding:10px 14px;
  border-radius:10px; cursor:pointer; font-weight:700; letter-spacing:.3px;
  box-shadow:0 10px 20px rgba(0,255,132,.12);
}
.btn:hover{filter:brightness(.95)}
.btn.ghost{ background:transparent; color:var(--fg); border:1px solid #2a2f3a; }

/* window */
.powershell-window{
  width:720px; border:2px solid var(--winborder); border-radius:10px;
  box-shadow:var(--shadow-glow); overflow:hidden; background:#0a0e14;
}
.title-bar{
  background:var(--winbar); color:#fff; display:flex; align-items:center;
  justify-content:space-between; padding:6px 10px; height:30px;
}
.title{font-weight:700}
.buttons{display:flex; gap:6px}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block;opacity:.95}
.dot.min{background:#4bd865}.dot.max{background:#f2c84b}.dot.close{background:#f26a6a}

/* terminal */
.terminal{ position:relative; background:var(--term); padding:16px; }

/* --- IMPORTANT: override Prism’s default gray background inside console --- */
.terminal pre[class*="language-"],
.terminal code[class*="language-"]{
  background:transparent !important;
  box-shadow:none !important;
}
pre[class*="language-"]{ margin:0; }
#codeBlock{ white-space:pre-wrap; }

#cursor{
  position:absolute; width:8px; height:1.2em; background:#e6e6e6;
  animation:blink 1s steps(1) infinite; bottom:16px; left:16px; opacity:.6;
}
@keyframes blink{50%{opacity:0}}

/* form bits */
select,input,textarea{font-family:inherit; font-size:.95rem}
input[type="text"]{background:#0b0e13; border:1px solid #1b1f25; color:var(--fg); padding:6px 8px; border-radius:8px}
input[type="range"]{accent-color:var(--accent)}
#toast{margin-left:10px; color:var(--muted)}

/* responsive */
@media (max-width:900px){
  .powershell-window{width:100%}
  #canvasWrap{padding:8px 0}
}