@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  --primary: #00ff9c;  /* Default Matrix Green */
  --bg: #050608;
  --terminal-bg: #0b0f14;
  --glow: rgba(0, 255, 156, 0.2);
  --prompt: #22d3ee;
  --path: #a78bfa;
}

/* Theme Classes */
body.amber-theme { --primary: #ffb000; --glow: rgba(255, 176, 0, 0.2); --prompt: #ff5f56; }
body.red-theme { --primary: #ff2a2a; --glow: rgba(255, 42, 42, 0.2); --prompt: #fff; }
body.blue-theme { --primary: #33bbff; --glow: rgba(51, 187, 255, 0.2); --prompt: #facc15; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  font-family: 'JetBrains Mono', monospace;
  color: var(--primary);
  height: 100dvh; /* Mobile friendly height */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: color 0.3s ease;
}

/* --- Terminal Box --- */
.terminal {
  width: 90%;
  max-width: 900px;
  height: 85vh;
  background: var(--terminal-bg);
  border-radius: 10px;
  box-shadow: 0 0 40px var(--glow);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border: 1px solid #1f2937;
}

/* --- Matrix Canvas --- */
#matrix {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 1;
  opacity: 0.15;
  pointer-events: none;
}

/* --- CRT Scanlines --- */
.scanlines {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    rgba(255,255,255,0) 50%,
    rgba(0,0,0,0.1) 50%,
    rgba(0,0,0,0.1)
  );
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 10;
  animation: scrollScanlines 10s linear infinite;
  opacity: 0.6;
}

@keyframes scrollScanlines {
  0% { background-position: 0 0; }
  100% { background-position: 0 100%; }
}

/* --- Header --- */
.terminal-header {
  padding: 12px 15px;
  background: #1f2937;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #374151;
  border-radius: 10px 10px 0 0;
  flex-shrink: 0;
  position: relative;
  z-index: 20;
}

.buttons { 
  display: flex; gap: 8px; position: absolute; left: 15px; 
}

.dot { 
  width: 12px; height: 12px; border-radius: 50%; cursor: pointer;
  transition: transform 0.1s ease, filter 0.1s;
}

.red    { background: #ff5f56; border: 1px solid #e0443e; }
.yellow { background: #ffbd2e; border: 1px solid #dea123; }
.green  { background: #27c93f; border: 1px solid #1aab29; }

.dot:hover { filter: brightness(1.2); }
.dot:active { transform: scale(0.9); }

.title {
  margin-left: auto; margin-right: auto;
  color: #9ca3af; font-size: 13px; font-weight: 600;
  font-family: sans-serif;
}

/* --- Body --- */
.terminal-body {
  padding: 20px;
  overflow-y: auto;
  flex-grow: 1;
  font-size: 15px;
  text-shadow: 0 0 5px var(--glow);
  z-index: 2; /* Above Matrix */
  position: relative;
}

/* Scrollbar */
.terminal-body::-webkit-scrollbar { width: 6px; }
.terminal-body::-webkit-scrollbar-track { background: var(--terminal-bg); }
.terminal-body::-webkit-scrollbar-thumb { background: #374151; border-radius: 4px; }

/* --- Content --- */
.output {
  margin-bottom: 15px;
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.5;
}

.command-echo { color: #facc15; font-weight: bold; }

.input-line {
  display: flex; align-items: center; flex-wrap: wrap;
  margin-top: 10px; padding-bottom: 10px;
}

.prompt { color: var(--prompt); margin-right: 8px; font-weight: bold;}
.path { color: var(--path); margin-right: 8px; font-weight: bold;}

input {
  background: transparent; border: none; color: var(--primary);
  outline: none; font-family: inherit; font-size: 16px;
  flex-grow: 1; text-shadow: 0 0 5px var(--glow);
}

a { color: #38bdf8; text-decoration: none; border-bottom: 1px dashed #38bdf8; }
a:hover { color: #fff; border-bottom: 1px solid #fff; }

/* --- Mobile --- */
@media (max-width: 600px) {
  .terminal { width: 100%; height: 100dvh; border-radius: 0; border: none; }
  .terminal-body { padding: 15px; font-size: 14px; padding-bottom: 50px; }
  .scanlines { display: none; } /* Better mobile performance */
  .title { display: none; } /* Save space */
}