/* Container look (pairs with Tailwind prose) */
.prose pre[class*="language-"],
.prose pre:not([class*="language-"]) {
  position: relative;
  padding: 1rem 1.25rem;
  background: #0b1220; /* deep navy */
  color: #e5e7eb;      /* gray-200 */
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  overflow: auto;
  box-shadow: 0 4px 24px rgba(2,6,23,.25);
}
.prose pre code { background: transparent; padding: 0; }

/* Inline code chips */
.prose code {
  background: rgba(2,6,23,.8);
  color: #e5e7eb;
  border-radius: 8px;
  padding: .0001rem .4rem;
  border: 1px solid rgba(255,255,255,.06);
}

/* Token colors (balanced, readable) */
.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#94a3b8}
.token.punctuation{color:#e5e7eb}
.token.selector,.token.tag{color:#93c5fd}
.token.property,.token.boolean,.token.number{color:#fbbf24}
.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#34d399}
.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable{color:#a5b4fc}
.token.atrule,.token.attr-value,.token.keyword{color:#f472b6}
.token.function,.token.class-name{color:#60a5fa}
.token.regex,.token.important{color:#f59e0b}

/* Line numbers plugin */
pre.line-numbers { padding-left: 3.25rem; }
pre.line-numbers .line-numbers-rows {
  border-right: 1px solid rgba(255,255,255,.08);
  background: transparent;
}
pre.line-numbers .line-numbers-rows > span:before { color: rgba(229,231,235,.4); }

/* Toolbar + copy button */
div.code-toolbar > .toolbar { opacity:1; right:.5rem; top:.35rem; }
div.code-toolbar > .toolbar .toolbar-item > button,
div.code-toolbar > .toolbar .toolbar-item > a {
  background: rgba(255,255,255,.08);
  color: #e5e7eb;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  padding: .2rem .5rem;
  font-size: .75rem;
}
div.code-toolbar > .toolbar .toolbar-item > button:hover { background: rgba(255,255,255,.14); }

/* Light mode tweaks */
@media (prefers-color-scheme: light) {
  .prose pre[class*="language-"],
  .prose pre:not([class*="language-"]) {
    background:#0f172a; color:#e5e7eb; border-color:rgba(15,23,42,.4);
    box-shadow: 0 4px 24px rgba(2,6,23,.12);
  }
  .prose code { background:#111827; color:#e5e7eb; }
}

/* Optional: wrap long lines when you add class 'wrap' to <pre> */
.prose pre.wrap { white-space: pre-wrap; word-break: break-word; }