:root {
  --bg:#020203;
  --panel:#071012;
  --text:#a8ff60;
  --muted:#7fa07f;
  --accent:#66d9ef;
  --prompt:#9be56c;
  --cursor:#a8ff60;
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}
html,body{height:100%;margin:0}
body{
  background:linear-gradient(180deg,#000 0%,#05060a 100%);
  color:var(--text);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.terminal{
  width:100%;max-width:900px;height:600px;background:var(--panel);
  border-radius:8px;box-shadow:0 8px 40px rgba(0,0,0,.7);
  padding:18px;display:flex;flex-direction:column;overflow:hidden;
}
.header{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.dots{display:flex;gap:6px}
.dot{width:12px;height:12px;border-radius:50%}
.dot.red{background:#ff5f56}
.dot.yellow{background:#ffbd2e}
.dot.green{background:#27c93f}
.screen{
  flex:1;overflow:auto;padding:12px;border-radius:6px;background:transparent;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
  position:relative;
  scrollbar-width: thin;
  scrollbar-color: var(--text) var(--panel);
}
.screen::-webkit-scrollbar {
  width: 8px;
}
.screen::-webkit-scrollbar-track {
  background: var(--panel);
}
.screen::-webkit-scrollbar-thumb {
  background: var(--text);
  border-radius: 4px;
}
.screen::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}
.line{
  white-space:pre-wrap;word-break:break-word;
  font-size:15px;line-height:1.45;width:100%;
}
.prompt-line{
  display:flex;gap:8px;align-items:flex-start;width:100%;margin-top:4px;
}
.prompt-line .ps{color:var(--muted);}
.cmd-input{
  background:transparent;border:0;outline:0;color:var(--text);
  width:auto;flex:1;font-family:inherit;font-size:15px;
  line-height:1.45;
  caret-color: var(--cursor);
}
.cmd-input.password-mode {
  color: transparent;
}
.muted{color:var(--muted)}
.accent{color:var(--accent)}
.small{font-size:13px;color:var(--muted)}
.footer{font-size:12px;color:var(--muted);margin-top:10px}
.cmd-input:focus{outline:none}