:root {
  --bg: #1a1b26;
  --fg: #a9b1d6;
  --muted: #565f89;
  --purple: #bb9af7;
  --blue: #7aa2f7;
  --cyan: #7dcfff;
  --green: #9ece6a;
  --orange: #ff9e64;
  --red: #f7768e;
  --bg-highlight: #292e42;
  --font-mono: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 15px;
  overflow: hidden;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* --- Header / Top Bar --- */
#top-bar {
  display: flex;
  justify-content: space-between;
  padding: 4px 12px;
  background: var(--bg-highlight);
  color: var(--muted);
  font-size: 13px;
  border-bottom: 1px solid var(--bg);
}
#top-bar .top-left { color: var(--purple); font-weight: bold; }
#top-bar .path { color: var(--muted); font-weight: normal; }
#top-bar .version, #top-bar .theme { margin-right: 12px; }
#top-bar .theme { color: var(--blue); }
#clock { color: var(--blue); background: var(--bg); padding: 0 6px; border-radius: 2px; }

/* --- Terminal Main Area --- */
#terminal {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

#output {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Command Block in Output */
.cmd-block {
  margin-bottom: 8px;
}
.cmd-prompt {
  color: var(--muted);
  margin-bottom: 12px;
}
.cmd-prompt .user { color: var(--purple); }
.cmd-prompt .arrow { color: var(--cyan); margin: 0 4px; font-weight: bold; }
.cmd-prompt .command { color: var(--fg); font-weight: bold; }

/* --- Rendered Content Styles --- */
.section-title {
  color: var(--purple);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
  font-weight: bold;
}
.item-title {
  color: var(--fg);
  font-weight: bold;
}
.item-subtitle {
  color: var(--muted);
  font-weight: normal;
}
.item-desc {
  color: var(--fg);
  margin-top: 6px;
  line-height: 1.6;
}
.tag {
  color: var(--cyan);
  display: inline-block;
  margin-right: 6px;
}
.tag::before { content: "["; color: var(--muted); }
.tag::after { content: "]"; color: var(--muted); }
a {
  color: var(--blue);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Grid Layout for Skills */
.skills-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  row-gap: 12px;
}
.skill-category {
  color: var(--purple);
}
.skill-list {
  color: var(--fg);
}
.skill-tag {
  color: var(--cyan);
  display: inline-block;
  margin-right: 6px;
}
.skill-tag::before { content: "["; color: var(--muted); }
.skill-tag::after { content: "]"; color: var(--muted); }

/* Progress Bars for Achievements */
.achievement-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.ach-name {
  width: 140px;
  color: var(--purple);
}
.ach-bar-container {
  width: 200px;
  background: var(--bg-highlight);
  height: 12px;
  margin-right: 16px;
}
.ach-bar {
  background: var(--blue);
  height: 100%;
}
.ach-desc {
  color: var(--muted);
}
.ach-desc .highlight {
  color: var(--fg);
}

/* ASCII Banner */
.ascii-banner {
  color: var(--blue);
  white-space: pre;
  line-height: 1.2;
  margin-bottom: 20px;
  font-weight: bold;
}

/* Help Menu */
.help-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 10px;
}
.help-section {
  margin-bottom: 16px;
}
.help-section-title {
  color: var(--purple);
  margin-bottom: 8px;
}
.help-item {
  display: grid;
  grid-template-columns: 140px 1fr;
  margin-bottom: 6px;
}
.help-cmd {
  color: var(--cyan);
}
.help-desc {
  color: var(--muted);
}

/* --- Input Line --- */
#input-line {
  display: flex;
  align-items: center;
  margin-top: 12px;
  padding-bottom: 20px;
}
.prompt {
  white-space: nowrap;
}
.prompt .user { color: var(--purple); }
.prompt .path { color: var(--muted); }
.prompt .prompt-arrow { color: var(--cyan); font-weight: bold; margin-left: 4px; margin-right: 8px; }
#command-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 15px;
}

/* --- Footer / Bottom Bar --- */
#bottom-bar {
  display: flex;
  justify-content: space-between;
  padding: 4px 12px;
  background: var(--bg-highlight);
  color: var(--muted);
  font-size: 12px;
  border-top: 1px solid var(--bg);
}
.bottom-left, .bottom-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.jump-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
}
.jump-btn:hover {
  color: var(--fg);
}
.mode {
  background: var(--blue);
  color: var(--bg);
  padding: 0 6px;
  font-weight: bold;
}
.type-help {
  background: var(--purple);
  color: var(--bg);
  padding: 0 6px;
  font-weight: bold;
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--muted); }
::-webkit-scrollbar-thumb:hover { background: var(--purple); }