* {
  box-sizing: border-box;
}

body {
  margin: 0;
  display: flex;
  /* Darker background for the body makes the terminal pop */
  background-color: #0c0c0c; 
  color: #333;
}

/* 2. Sidebar Container */
header {
  padding: 15px;
  width: 220px; /* Slightly wider for the hover effect */
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px 20px;
  height: 100%; 
  
  /* Terminal Aesthetic */
  background-color: #1a1a1a; /* Deep charcoal */
  font-family: 'Courier New', Courier, monospace;
  border: 1px solid #333;
  border-radius: 10px; /* Rounded but still techy */
  box-shadow: 5px 0 15px rgba(0, 0, 0, 0.5);
}

/* 3. Terminal Brand Style */
.brand {
  font-size: 24px;
  font-weight: 900;
  text-decoration: none;
  color: #00ff00; /* Neon Green */
  letter-spacing: 4px;
  text-align: center;
  transition: 0.3s;
  display: block;
}

/* Adding a blinking cursor to the brand name */
.brand::after {
  content: "_";
  animation: blink 1s infinite;
}

.brand-container {
  display: flex;
  align-items: center;
  justify-content: center; /* Centers the whole unit in the sidebar */
  font-family: 'Courier New', Courier, monospace;
  font-size: 24px;
  color: #00ff00;
}

.brand-input {
  background: transparent;
  border: none;
  outline: none;
  color: #00ff00;
  font-family: inherit;
  font-size: inherit;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
  
  /* Hide the browser's default cursor */
  caret-color: transparent; 
  
  /* Initial width for 2 characters ('MG') */
  width: 2ch; 
  min-width: 0ch; 
}

.cursor {
  animation: blink 1s infinite;
  color: #00ff00;
  /* Prevent the cursor from wrapping to a new line */
  display: inline-block; 
}

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

.brand:hover {
  transform: scale(1.1);
  text-shadow: 0 0 10px #00ff00;
}

/* 4. Navigation & The Hover Prompt (>) */
nav {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

nav a {
  text-decoration: none;
  color: #008800; /* Dimmer green when idle */
  font-size: 16px;
  font-weight: bold;
  padding: 10px 5px;
  border-radius: 4px;
  transition: all 0.2s ease;
  position: relative;
  padding-left: 25px; /* Space for the > character */
}

nav a.active {
  color: #00ff00;
  text-shadow: 0 0 5px #00ff00;
}


/* The > prompt */
nav a::before {
  content: '>';
  position: absolute;
  left: 5px;
  opacity: 0;
  transition: 0.2s;
  color: #00ff00;
}

nav a:hover {
  color: #00ff00;
  background-color: rgba(0, 255, 0, 0.05); /* Very faint green highlight */
}

nav a:hover::before {
  opacity: 1;
  left: 8px; /* Slight slide in effect */
}

/* 5. Main Content Area */
main {
  flex: 1;
  display: block;          /* don’t flex-center children */
  padding: 0;              /* remove 15% padding */
  color: #e0e0e0;
  font-family: 'Segoe UI', sans-serif;
}

h1 {
  margin-top: 0;
  font-size: 2.5rem;
  color: #fff;
}



/* ===== Terminal content area ===== */

:root{
  --term-bg: #070a07;
  --term-panel: rgba(0, 0, 0, 0.55);
  --term-border: rgba(0, 255, 0, 0.18);
  --term-glow: rgba(0, 255, 0, 0.15);
  --term-text: #b8ffb8;
  --term-dim: #7adf7a;
  --term-accent: #00ff00;
  --term-red: #ff6b6b;
  --term-yellow: #ffd166;
  --term-blue: #7aa2ff;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

#app, #view {
  /* whichever id you're using for your content mount */
  font-family: var(--mono);
}

/* Terminal "window" container */
.terminal {
  background: radial-gradient(800px 400px at 30% 0%, rgba(0,255,0,0.06), transparent),
              radial-gradient(900px 500px at 90% 20%, rgba(122,162,255,0.05), transparent),
              var(--term-bg);
  border: 1px solid var(--term-border);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 16px 40px rgba(0,0,0,0.45);
  border-radius: 14px;
  overflow: hidden;
}

/* Terminal top bar */
.terminal__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.55);
  border-bottom: 1px solid var(--term-border);
}

.terminal__dots {
  display: flex;
  gap: 7px;
}
.terminal__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  opacity: 0.95;
}
.terminal__dot.red { background: #ff5f57; }
.terminal__dot.yellow { background: #febc2e; }
.terminal__dot.green { background: #28c840; }

.terminal__title {
  color: var(--term-dim);
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* Terminal body */
.terminal__body {
  padding: 16px 16px 22px;
  color: var(--term-text);
  line-height: 1.6;
  text-shadow: 0 0 10px var(--term-glow);
}

/* Prompt line */
.prompt {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 10px 0 6px;
  flex-wrap: wrap;
}

.prompt__left {
  color: var(--term-accent);
  font-weight: 700;
  white-space: nowrap;
}

.prompt__cmd {
  color: var(--term-text);
  font-weight: 600;
}

/* Output blocks */
.output {
  margin: 0 0 10px;
  color: var(--term-text);
}
.output.dim { color: var(--term-dim); }
.output.error { color: var(--term-red); text-shadow: 0 0 8px rgba(255,0,0,0.15); }

.hr {
  height: 1px;
  background: rgba(0,255,0,0.14);
  margin: 14px 0;
}

/* Code-ish inline */
code, .kbd {
  font-family: var(--mono);
  background: rgba(0, 255, 0, 0.06);
  border: 1px solid rgba(0,255,0,0.12);
  padding: 2px 6px;
  border-radius: 8px;
  color: var(--term-text);
}

/* Links in terminal */
.terminal a {
  color: var(--term-blue);
  text-decoration: none;
  font-weight: 700;
}
.terminal a:hover { text-decoration: underline; }

/* Lists as "ls" output style */
.ls {
  margin: 8px 0 12px;
  padding-left: 0;
  list-style: none;
}
.ls li::before {
  content: "• ";
  color: rgba(0,255,0,0.55);
}

/* Nice “command cards” */
.cmdbox {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(0,255,0,0.14);
  border-radius: 12px;
  padding: 12px;
  margin: 12px 0;
}

/* Optional: blinking cursor span */
.blink {
  display: inline-block;
  width: 10px;
  margin-left: 2px;
  color: var(--term-accent);
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }