:root {
  --bg0: #040706;
  --bg1: #08130e;
  --bg2: #0b2418;
  --line: #16ff8f;
  --line-soft: #58ffc0;
  --warn: #ffd95a;
  --text: #d7ffe9;
  --danger: #ff6f7a;
  --shadow: rgba(22, 255, 143, 0.25);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: "Share Tech Mono", monospace;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 10%, rgba(22, 255, 143, 0.12), transparent 40%),
    radial-gradient(circle at 85% 95%, rgba(88, 255, 192, 0.1), transparent 38%),
    linear-gradient(160deg, var(--bg0), var(--bg1) 45%, var(--bg2));
  display: grid;
  place-items: center;
  padding: 28px 18px;
  overflow-x: hidden;
}

.noise,
.scanline {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.noise {
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

.scanline {
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 3px,
    rgba(11, 255, 152, 0.045) 3px,
    rgba(11, 255, 152, 0.045) 4px
  );
  animation: sweep 10s linear infinite;
}

.terminal {
  position: relative;
  z-index: 1;
  width: min(100%, 780px);
  border: 1px solid rgba(88, 255, 192, 0.5);
  background: linear-gradient(
    180deg,
    rgba(5, 25, 18, 0.84),
    rgba(5, 18, 14, 0.9)
  );
  box-shadow:
    0 0 0 1px rgba(22, 255, 143, 0.14) inset,
    0 0 35px var(--shadow),
    0 18px 40px rgba(0, 0, 0, 0.55);
  padding: 28px;
  border-radius: 14px;
  animation: boot 620ms ease;
}

.terminal-head {
  margin-bottom: 18px;
}

.kicker {
  margin: 0;
  color: var(--warn);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-size: 0.78rem;
}

h1 {
  margin: 8px 0 6px;
  font-family: "Orbitron", sans-serif;
  letter-spacing: 1.4px;
  color: var(--line-soft);
  text-shadow: 0 0 12px rgba(88, 255, 192, 0.45);
}

.lead {
  margin: 0;
  opacity: 0.9;
}

.panel {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(88, 255, 192, 0.35);
  background: rgba(1, 10, 7, 0.65);
  padding: 16px;
  border-radius: 10px;
}

label {
  letter-spacing: 0.6px;
}

input {
  width: 100%;
  border: 1px solid rgba(88, 255, 192, 0.45);
  background: #020b07;
  color: var(--line-soft);
  padding: 11px 12px;
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
}

input:focus {
  outline: none;
  border-color: var(--line);
  box-shadow: 0 0 0 3px rgba(22, 255, 143, 0.18);
}

.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

button {
  border: 1px solid rgba(88, 255, 192, 0.4);
  color: var(--line-soft);
  background: linear-gradient(160deg, #042414, #062f1a);
  padding: 9px 14px;
  border-radius: 8px;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

button:hover {
  transform: translateY(-1px);
  border-color: var(--line);
  box-shadow: 0 0 20px rgba(22, 255, 143, 0.22);
}

button:active {
  transform: translateY(0);
}

button.ghost {
  background: #09110e;
  color: #b0ffe0;
}

#status {
  margin: 4px 0 0;
  border: 1px dashed rgba(88, 255, 192, 0.36);
  background: rgba(3, 14, 10, 0.7);
  border-radius: 8px;
  padding: 10px;
  min-height: 46px;
  white-space: pre-wrap;
  word-break: break-word;
}

.foot {
  margin-top: 14px;
  opacity: 0.72;
  font-size: 0.84rem;
  letter-spacing: 0.6px;
}

@keyframes boot {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes sweep {
  from {
    transform: translateY(-8%);
  }
  to {
    transform: translateY(8%);
  }
}

@media (max-width: 640px) {
  .terminal {
    padding: 20px;
    border-radius: 12px;
  }

  h1 {
    font-size: 1.48rem;
  }

  .actions {
    gap: 8px;
  }

  button {
    flex: 1 1 48%;
  }
}