/* ── Pi Dark Theme Syntax Highlighting ──────────────────────────── */

.hljs {
  display: block;
  overflow-x: auto;
  padding: 12px;
  background: #0d0d0d;
  color: #abb2bf;
  border-radius: 10px;
  font-family: 'SF Mono', Monaco, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.55;
  border: 1px solid #1e1e1e;
}

.hljs-keyword  { color: #c678dd; font-weight: 600; }   /* purple */
.hljs-function { color: #61afef; }                    /* blue */
.hljs-string   { color: #98c379; }                    /* green */
.hljs-number   { color: #d19a66; }                    /* orange */
.hljs-comment  { color: #5c6370; font-style: italic; } /* grey */
.hljs-variable { color: #e06c75; }                    /* red */
.hljs-operator { color: #56b6c2; }                    /* cyan */
.hljs-punctuation { color: #abb2bf; }                 /* white-ish */
.hljs-property { color: #e5c07b; }                    /* yellow */
.hljs-tag      { color: #e06c75; }                    /* red */
.hljs-attr     { color: #d19a66; }                    /* orange */

/* ── Inline Code ───────────────────────────────────────────────── */
.inline-code {
  background: #1a1a1a;
  color: #56b6c2;
  padding: 2px 6px;
  border-radius: 5px;
  font-family: 'SF Mono', Monaco, Menlo, Consolas, monospace;
  font-size: 0.92em;
  border: 1px solid #2a2a2a;
}

/* ── Code Block Wrapper ───────────────────────────────────────────── */
.code-block {
  margin: 8px 0;
  position: relative;
}

.code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: #141414;
  border: 1px solid #1e1e1e;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  font-size: 11px;
  color: #666;
  font-family: var(--font);
}

.code-header .lang-label {
  text-transform: lowercase;
  letter-spacing: 0.5px;
}

.code-block pre {
  margin: 0;
  border-radius: 0 0 10px 10px;
}