:root {
  --bg: #0b0f0a;
  --bg-deep: #06080a;
  --fg: #d6f5e3;
  --dim: #6c8a78;
  --green: #00ff9c;
  --green-soft: #66ffbe;
  --amber: #ffb454;
  --red: #ff5c5c;
  --yellow: #ffd95c;
  --blue: #5ce1ff;
  --shadow: 0 0 1px rgba(0, 255, 156, 0.5),
            0 0 12px rgba(0, 255, 156, 0.15);
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: radial-gradient(ellipse at 50% 0%, #0d1812 0%, var(--bg-deep) 60%, #000 100%);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: var(--green); text-decoration: none; border-bottom: 1px dashed rgba(0,255,156,0.4); }
a:hover { color: var(--green-soft); border-bottom-color: var(--green-soft); }

/* matrix canvas */
#matrix {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  opacity: 0.22;
  pointer-events: none;
}

/* CRT effects */
.scanlines {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.025) 0px,
    rgba(255,255,255,0.025) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}
.vignette {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);
}

/* terminal frame */
.terminal {
  position: relative;
  z-index: 5;
  max-width: 1080px;
  margin: 40px auto;
  background: rgba(7, 12, 9, 0.78);
  border: 1px solid rgba(0,255,156,0.18);
  border-radius: 10px;
  box-shadow:
    0 0 0 1px rgba(0,255,156,0.05) inset,
    0 30px 80px rgba(0, 0, 0, 0.6),
    0 0 60px rgba(0, 255, 156, 0.08);
  backdrop-filter: blur(2px);
  overflow: hidden;
}

.bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #0e1612, #0a1310);
  border-bottom: 1px solid rgba(0,255,156,0.12);
  font-size: 12px;
  color: var(--dim);
}
.dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.dot.red { background: #ff5f56; }
.dot.yellow { background: #ffbd2e; }
.dot.green { background: #27c93f; }
.bar .title { flex: 1; text-align: center; letter-spacing: 0.5px; }
.bar .meta { color: var(--green); font-weight: 500; }

.screen {
  padding: 22px 26px 18px;
  min-height: 70vh;
  position: relative;
}

.ascii {
  color: var(--green);
  text-shadow: var(--shadow);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.05;
  margin: 0 0 18px;
  white-space: pre;
  overflow-x: auto;
  letter-spacing: 0;
  animation: flicker 6s infinite;
}

@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0.78; }
}

.boot {
  color: var(--dim);
  white-space: pre-wrap;
  margin-bottom: 6px;
  min-height: 1.5em;
}
.boot .ok { color: var(--green); }
.boot .warn { color: var(--amber); }

.welcome { margin: 6px 0 14px; }
.welcome p { margin: 4px 0; }

.g { color: var(--green); }
.dim { color: var(--dim); }
.amber { color: var(--amber); }
.blue { color: var(--blue); }
.red { color: var(--red); }
.yellow { color: var(--yellow); }

.history { white-space: pre-wrap; word-break: break-word; }
.history .entry { margin: 8px 0 12px; }
.history .cmdline { color: var(--fg); }
.history .ps1 { color: var(--green); }
.history .output { color: var(--fg); margin-top: 2px; }
.history table.kv { border-collapse: collapse; margin: 4px 0; }
.history table.kv td { padding: 2px 14px 2px 0; vertical-align: top; }
.history table.kv td:first-child { color: var(--dim); }

.prompt-line {
  display: flex;
  align-items: center;
  position: relative;
  margin-top: 4px;
}
.ps1 {
  color: var(--green);
  white-space: pre;
  user-select: none;
}
.ps1 .user { color: var(--green); font-weight: 700; }
.ps1 .at { color: var(--dim); }
.ps1 .host { color: var(--green-soft); }
.ps1 .path { color: var(--blue); }

#prompt-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--fg);
  font: inherit;
  caret-color: transparent;
  padding: 0;
}

.caret {
  position: absolute;
  pointer-events: none;
  color: var(--green);
  text-shadow: var(--shadow);
  animation: blink 1s steps(1) infinite;
  left: 0;
  transform: translateX(0);
}
@keyframes blink { 50% { opacity: 0; } }

.statusbar {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 8px 14px;
  background: linear-gradient(180deg, #0a1310, #060a08);
  border-top: 1px solid rgba(0,255,156,0.1);
  font-size: 11px;
  color: var(--dim);
}
.status-item.ok { color: var(--green); }
.status-item.right { margin-left: auto; }

/* selection */
::selection { background: rgba(0,255,156,0.3); color: #fff; }

/* mobile */
@media (max-width: 720px) {
  body { font-size: 13px; }
  .terminal { margin: 0; border-radius: 0; min-height: 100vh; }
  .screen { padding: 14px 14px 12px; min-height: calc(100vh - 90px); }
  .ascii { font-size: 7px; }
  .bar .title { display: none; }
}

/* ascii cards */
.box {
  border: 1px solid rgba(0,255,156,0.25);
  padding: 10px 14px;
  margin: 6px 0;
  border-radius: 4px;
  background: rgba(0, 255, 156, 0.03);
}
.box h3 { margin: 0 0 6px; color: var(--green); font-size: 13px; letter-spacing: 1px; }
.box p { margin: 2px 0; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 6px 0;
}

.tag {
  display: inline-block;
  border: 1px solid rgba(0,255,156,0.4);
  color: var(--green);
  padding: 1px 8px;
  margin: 2px 4px 2px 0;
  border-radius: 999px;
  font-size: 11px;
}