pre {
  background: linear-gradient(135deg, var(--s100), var(--p100) 80%);
  color: var(--color);
  padding: 1.2em 1em;
  border-radius: 1em;
  font-family: 'JetBrains Mono', 'Fira Mono', 'Consolas', monospace;
  font-size: 0.96em;
  line-height: 1.7;
  overflow: auto;
  box-shadow: 0 4px 24px 0 rgba(40,32,70,0.05);
  border: 1px solid var(--l);
  position: relative;
  margin: 2em 0;
}

/* Highlighted border for code blocks */
pre::before {
  content: "code";
  position: absolute;
  top: 0.6em;
  right: 1.2em;
  font-size: 0.75em;
  color: var(--text-muted);
  background: var(--p50);
  padding: 0.3em 0.9em;
  border-radius: 99em;
  letter-spacing: 0.08em;
  font-family: inherit;
  font-weight: bold;
  filter: brightness(0.98);
}

code {
  color: var(--d600); /* Danger accent for inline/monospaced text */
  background: var(--s100);
  border-radius: 0.4em;
  padding: 0.18em 0.39em;
  font-family: inherit;
  font-size: 0.78em;
  white-space: break-spaces;
}

/* --- Syntax highlighting (extra, optional) --- */
.token.comment,
.token.selector {
  color: var(--text-muted);
  font-style: italic;
}
.token.property,
.token.tag {
  color: var(--p400);
}
.token.string {
  color: var(--su500);
}
.token.number {
  color: var(--i500);
}
.token.function {
  color: var(--w600);
}
.token.keyword {
  color: var(--d500);
  font-weight: bold;
}

[data-theme="dark"] pre {
    background: linear-gradient(135deg, var(--s800), var(--p700) 78%);
    color: var(--color);
    border-color: var(--d);
    box-shadow: 0 4px 34px 0 rgba(23,14,44,0.26);
}
[data-theme="dark"] code {
    background: var(--s50);
    color: var(--d700);
}
[data-theme="dark"] pre::before {
    background: var(--p700);
    color: var(--s800);
}