/* Terminal Box & Code Viewers */
.terminal-window {
  background-color: var(--terminal-body-bg);
  border: 1px solid var(--terminal-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--elevated-shadow);
  width: 100%;
}

.terminal-header {
  background-color: var(--terminal-header-bg);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--terminal-border);
}

.terminal-dots {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.terminal-dot {
  width: 11px;
  height: 11px;
  border-radius: var(--radius-full);
}

.dot-red { background-color: #ef4444; }
.dot-yellow { background-color: #f59e0b; }
.dot-green { background-color: #10b981; }

.terminal-tabs {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background-color: rgba(0, 0, 0, 0.35);
  padding: 0.25rem 0.35rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.terminal-tab {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-sm);
  color: #cbd5e1;
  cursor: pointer;
  transition: all var(--transition-fast);
  background: transparent;
  border: 1px solid transparent;
  font-weight: 500;
}

.terminal-tab:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.12);
}

.terminal-tab.active {
  color: #ffffff !important;
  background-color: #2563eb !important;
  border-color: #3b82f6 !important;
  font-weight: 700;
  box-shadow: 0 1px 6px rgba(37, 99, 235, 0.4);
}

.terminal-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background-color: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  transition: all var(--transition-fast);
}

.btn-copy:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
}

.btn-copy svg {
  width: 14px;
  height: 14px;
}

/* Terminal Body */
.terminal-body {
  padding: 1.25rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.7;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  color: #e2e8f0;
}

@media (max-width: 600px) {
  .terminal-header {
    padding: 0.6rem 0.75rem;
  }
  .terminal-body {
    padding: 1rem 0.85rem;
    font-size: 0.8rem;
  }
  .terminal-tabs {
    gap: 0.2rem;
  }
  .terminal-tab {
    padding: 0.3rem 0.55rem;
    font-size: 0.75rem;
  }
}

.terminal-command-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.terminal-prompt {
  color: var(--accent-emerald);
  user-select: none;
  font-weight: 700;
}

.terminal-cmd {
  color: #f8fafc;
  font-weight: 500;
}

/* Code Syntax Styling (Clean Obsidian Theme) */
.code-block {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  line-height: 1.65;
  color: #e2e8f0;
  tab-size: 4;
}

.code-keyword { color: #f472b6; font-weight: 600; } /* import, class, def, return */
.code-function { color: #60a5fa; }                 /* assert_status, post, get */
.code-string { color: #34d399; }                   /* "admin", "SKU-123" */
.code-comment { color: #64748b; font-style: italic; } /* # 1. Structured Builder */
.code-variable { color: #f8fafc; }
.code-decorator { color: #fbbf24; }
.code-class { color: #38bdf8; font-weight: 600; }  /* BaseAssertions, LoginPage */
.code-constant { color: #c084fc; }                 /* HTTP_CREATED, ENDPOINT_PRODUCTS */

/* Inline Code Tag */
.inline-code {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
  background-color: var(--bg-surface-hover);
  border: 1px solid var(--border-color);
  color: var(--brand-primary);
}