/* Reset & base */
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: #0b0e14;
  color: #d6d6d6;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Terminal container */
.terminal {
  width: 92%;
  max-width: 960px;
  height: 85vh;
  background: #020409;
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
}

/* Output area */
.output {
  flex: 1;
  overflow-y: auto;
  white-space: pre-wrap;
  line-height: 1.45;
  scrollbar-width: thin;
  scrollbar-color: #2a2f3a transparent;
}

/* Scrollbar (WebKit) */
.output::-webkit-scrollbar {
  width: 6px;
}
.output::-webkit-scrollbar-thumb {
  background: #2a2f3a;
  border-radius: 4px;
}

/* Input line */
.input-line {
  display: flex;
  align-items: center;
  margin-top: 8px;
}

/* Prompt */
.prompt {
  color: #7df9aa;
  margin-right: 8px;
  white-space: nowrap;
}

/* Input field */
input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #d6d6d6;
  font-family: inherit;
  font-size: 1em;
  caret-color: #d6d6d6;
}

/* Output styles */
.cmd {
  color: #7df9aa;
}

.error {
  color: #ff6b6b;
}

.dim {
  color: #8b8b8b;
}

/* Optional subtle animation */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.output div {
  animation: fadeIn 0.05s ease-out;
}