/* Code blocks */
.code-card {
  padding: 0;
  overflow: hidden;
}

.code-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.code-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.code-dot.red { background: #FF5F56; }
.code-dot.yellow { background: #FFBD2E; }
.code-dot.green { background: #27C93F; }

.code-card-title {
  margin-left: 10px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

.snl-code {
  padding: 20px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  background: transparent;
  margin: 0;
}

.snl-code code {
  font-family: inherit;
}

/* Syntax highlighting */
.snl-keyword {
  color: #6332F5;
  font-weight: 600;
}

.snl-command {
  color: var(--turquoise);
  font-weight: 600;
}

.snl-string {
  color: #A8DB8F;
}

.snl-comment {
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
}

.snl-function {
  color: #FFD700;
}

.snl-number {
  color: #FF9E64;
}

.snl-operator {
  color: rgba(255, 255, 255, 0.6);
}