:root {
  --bg:       #0e0f11;
  --bg-title: #17191b;
  --fg:       #5bef5b;
  --dim:      #3da83d;
  --bright:   #9dff9d;
  --red:      #ff6a6a;
  --yellow:   #ffd166;
  --blue:     #7bbcff;
  --white:    #f0f0f0;
  --border:   #252728;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: #060708;
  color: var(--fg);
  font-family: "Ubuntu Mono", "JetBrains Mono", "DejaVu Sans Mono",
               "Consolas", "Menlo", monospace;
  font-size: 14.5px;
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.terminal {
  width: 100%;
  max-width: 960px;
  height: 92vh;
  max-height: 720px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85);
}

.titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg-title);
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  color: #909294;
  flex-shrink: 0;
}

.titlebar .dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.dot.red    { background: #ff5f57; }
.dot.yellow { background: #febc2e; }
.dot.green  { background: #28c840; }

.titlebar .title {
  flex: 1;
  text-align: center;
  color: #b8bbbd;
  letter-spacing: 0.3px;
  margin-right: 48px;
}

.screen {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px;
  scrollbar-width: thin;
  scrollbar-color: #2f3134 transparent;
}

.screen::-webkit-scrollbar { width: 10px; }
.screen::-webkit-scrollbar-track { background: transparent; }
.screen::-webkit-scrollbar-thumb {
  background: #2f3134;
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.screen::-webkit-scrollbar-thumb:hover { background: #3f4144; background-clip: padding-box; }

.line {
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--fg);
}

.line.dim    { color: var(--dim); }
.line.bright { color: var(--bright); }
.line.info   { color: var(--yellow); }
.line.error  { color: var(--red); }

.line a {
  color: var(--bright);
  text-decoration: underline;
  text-decoration-color: rgba(157, 255, 157, 0.5);
}
.line a:hover { text-decoration-color: var(--bright); }

.input-line {
  display: flex;
  align-items: center;
  padding: 10px 18px 14px;
  flex-shrink: 0;
  border-top: 1px solid rgba(91, 239, 91, 0.08);
}

.prompt {
  white-space: nowrap;
  flex-shrink: 0;
}

.prompt .user   { color: var(--bright); font-weight: bold; }
.prompt .at     { color: var(--white); }
.prompt .host   { color: var(--bright); font-weight: bold; }
.prompt .colon  { color: var(--white); }
.prompt .path   { color: var(--blue);   font-weight: bold; }
.prompt .symbol { color: var(--white); }
.prompt .space  { color: var(--fg); }

#cmd {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  outline: none;
  color: var(--fg);
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  caret-color: transparent;
  padding: 0;
  margin: 0;
}

#cmd:disabled {
  opacity: 0.35;
}

.cursor {
  display: inline-block;
  width: 8px;
  height: 1.05em;
  background: var(--fg);
  vertical-align: text-bottom;
  flex-shrink: 0;
  transform: translateY(2px);
  animation: blink 1.15s steps(1) infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

.terminal::selection,
.terminal *::selection {
  background: #1f6b1f;
  color: #d4ffd4;
}