:root {
  --bg: #0a0a0a;
  --fg: #d1ffd1;
  --muted: #9be29b;
  --accent: #00ff7f;
  --link: #7df9ff;
  --cursor: #aaffaa;
  --shadow: 0 20px 60px rgba(0,255,127,0.06);
}

body {
  margin: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--fg);
  font: 16px monospace;
}

.container { width: min(960px, 100%); }
.terminal { background: #0008; border-radius: 16px; overflow: hidden; }

.term-topbar { display: flex; padding: 10px; gap: 10px; align-items: center; background: #111; }
.dots { display: flex; gap: 6px; }
.dot { width: 12px; height: 12px; border-radius: 50%; }
.red { background: #ff5f56; }
.yellow { background: #ffbd2e; }
.green { background: #27c93f; }
.title { flex: 1; opacity: 0.8; }

.btn { border: 1px solid var(--accent); background: none; color: var(--fg); border-radius: 8px; padding: 4px 10px; cursor: pointer; }

.screen { padding: 15px; max-height: 60vh; overflow-y: auto; }
.line { margin-bottom: 6px; }
.prompt { color: var(--accent); }
.muted { color: var(--muted); }
a { color: var(--link); }

.input-row { display: flex; gap: 8px; padding: 10px; }
.input-field { flex: 1; border: none; background: transparent; color: var(--fg); font: inherit; outline: none; }

.footer { text-align: center; padding: 10px; color: var(--muted); font-size: 0.9rem; }