:root {
  --bg: #05070a;
  --term-bg: #0a0f0a;
  --fg: #33ff66;
  --fg-dim: #1f9e46;
  --fg-bright: #a6ffc1;
  --accent: #33ff66;
  --red: #ff5f56;
  --yellow: #ffbd2e;
  --green: #27c93f;
  --blue: #58c4ff;
  --cyan: #33e0ff;
  --error: #ff5f56;
  --font: "JetBrains Mono", "Fira Code", "Cascadia Code", "Ubuntu Mono", ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#app {
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.terminal-window {
  width: 100%;
  max-width: 900px;
  background: var(--term-bg);
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(51, 255, 102, 0.15),
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(51, 255, 102, 0.06);
}

.terminal-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #10160f;
  border-bottom: 1px solid rgba(51, 255, 102, 0.12);
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}
.dot.red { background: var(--red); }
.dot.yellow { background: var(--yellow); }
.dot.green { background: var(--green); }

.terminal-bar .title {
  margin-left: 10px;
  font-size: 12px;
  color: var(--fg-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.terminal-body {
  position: relative;
  padding: 16px;
  height: min(70vh, 620px);
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.5;
  cursor: text;
}

.terminal-body::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.015) 0px,
    rgba(255, 255, 255, 0.015) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}

.terminal-output {
  white-space: pre-wrap;
  word-break: break-word;
}

.output-line { margin: 0; min-height: 1.5em; }
.output-line.error { color: var(--error); }
.output-line.system { color: var(--fg-dim); }

.boot-ok {
  color: var(--fg-bright);
  font-weight: 700;
}

.banner-art {
  white-space: pre;
  overflow-x: auto;
  color: var(--fg-bright);
  font-size: 11px;
  line-height: 1.2;
  text-shadow: 0 0 6px rgba(51, 255, 102, 0.35);
  padding-bottom: 2px;
}

.line-prompt {
  color: var(--fg-bright);
  font-weight: 600;
}
.line-cmd { color: var(--fg); }

.terminal-input-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  margin-top: 2px;
}

.prompt {
  color: var(--fg-bright);
  font-weight: 600;
  margin-right: 8px;
  white-space: nowrap;
}

.input-shadow {
  white-space: pre;
  color: var(--fg);
}

.cursor {
  display: inline-block;
  color: var(--fg);
  animation: blink 1s steps(1) infinite;
  margin-left: 1px;
}

.masked-hint {
  color: var(--fg-dim);
  font-style: italic;
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.hidden-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* markdown-ish rendering inside cat output */
.md-h1 { color: var(--fg-bright); font-weight: 700; font-size: 1.05em; }
.md-h2 { color: var(--fg-bright); font-weight: 700; }
.md-bold { color: var(--fg-bright); font-weight: 700; }
.md-italic { font-style: italic; color: var(--fg-dim); }
.md-bullet { color: var(--fg); }

/* ls colors */
.fs-dir { color: var(--blue); font-weight: 600; cursor: pointer; }
.fs-exec { color: var(--green); font-weight: 600; cursor: pointer; }
.fs-link { color: var(--cyan); text-decoration: underline; cursor: pointer; }
.fs-file { color: var(--fg); cursor: pointer; }
.fs-file:hover, .fs-dir:hover, .fs-exec:hover, .fs-link:hover { text-decoration: underline; }

a.path-link, a.quiet-link {
  color: var(--cyan);
  text-decoration: none;
}
a.path-link:hover, a.quiet-link:hover { text-decoration: underline; }

.hint {
  color: var(--fg-dim);
  font-size: 12px;
  text-align: center;
  margin: 4px 0 0;
}

/* scrollbar */
.terminal-body::-webkit-scrollbar { width: 10px; }
.terminal-body::-webkit-scrollbar-track { background: transparent; }
.terminal-body::-webkit-scrollbar-thumb {
  background: rgba(51, 255, 102, 0.25);
  border-radius: 6px;
}

@media (max-width: 640px) {
  body { padding: 0; }
  #app { max-width: 100%; }
  .terminal-window { border-radius: 0; max-width: 100%; }
  .terminal-body { height: 100vh; font-size: 13px; }
}