.doc-content > *:first-child { margin-top: 0; }

.doc-content h1, .doc-content h2, .doc-content h3,
.doc-content h4, .doc-content h5, .doc-content h6 {
  margin-top: 1.5em; margin-bottom: 0.5em;
  font-weight: 600; color: var(--text); scroll-margin-top: 80px;
}

.doc-content h2 { border-bottom: 1px solid var(--border); padding-bottom: 8px; }

.doc-content a { color: var(--accent); text-decoration: none; }
.doc-content a:hover { text-decoration: underline; }

.doc-content p, .doc-content ul, .doc-content ol { margin-bottom: 1em; }
.doc-content ul, .doc-content ol { padding-left: 2em; }
.doc-content li { margin-bottom: 0.25em; }

.doc-content img { max-width: 100%; height: auto; border-radius: 6px; margin: 1.5em 0; }

.doc-content code:not(pre code) {
  background-color: var(--bg-dark); color: var(--danger);
  padding: 0.2em 0.4em; border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 0.85em; white-space: normal; word-break: break-word;
}

.doc-content blockquote {
  margin: 1.5em 0; padding: 16px 20px; background-color: var(--bg-dark);
  border-left: 5px solid var(--accent); border-radius: 0 8px 8px 0;
  font-style: italic; transition: background-color 0.3s, border-color 0.3s;
}
.doc-content blockquote p { margin: 0; color: var(--text-muted); }

.doc-content blockquote.info,
.doc-content blockquote.warning,
.doc-content blockquote.danger,
.doc-content blockquote.success { font-style: normal; }

.doc-content blockquote.info {
  border-left-color: var(--info);
  background-color: color-mix(in srgb, var(--info) 10%, var(--bg-dark));
}
.doc-content blockquote.warning {
  border-left-color: var(--warning);
  background-color: color-mix(in srgb, var(--warning) 10%, var(--bg-dark));
}
.doc-content blockquote.danger {
  border-left-color: var(--danger);
  background-color: color-mix(in srgb, var(--danger) 10%, var(--bg-dark));
}
.doc-content blockquote.success {
  border-left-color: var(--success);
  background-color: color-mix(in srgb, var(--success) 10%, var(--bg-dark));
}

.doc-content table {
  width: 100%; border-collapse: collapse; margin: 1.5em 0;
  display: block; overflow-x: auto;
}
.doc-content th, .doc-content td {
  padding: 12px; border: 1px solid var(--border); text-align: left;
}
.doc-content th { background-color: var(--bg-dark); font-weight: bold; }

.doc-content pre {
  background-color: var(--bg-dark); color: var(--text); padding: 16px;
  border-radius: 8px; overflow-x: auto; border: 1px solid var(--border);
  margin: 1.5em 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 0.9em; line-height: 1.5; max-width: 100%;
}

.highlight pre { margin: 0; padding: 0; border: none; background: transparent; }

div.highlighter-rouge {
  background: var(--bg-dark); border: 1px solid var(--border);
  border-radius: 8px; margin: 1.5em 0; overflow: hidden;
}

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

.code-lang {
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 0.75em; font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em;
}

.highlight {
  color: var(--text); padding: 16px; overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 0.9em; line-height: 1.5; margin: 0;
}

.copy-btn {
  background-color: transparent; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 4px 10px; font-size: 0.75em; font-family: inherit;
  font-weight: 600; cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.copy-btn:hover {
  background-color: var(--accent); color: var(--contrast); border-color: var(--accent);
}
.copy-btn.copied {
  background-color: var(--success); color: var(--contrast); border-color: var(--success);
}

/* Syntax Highlighting */
.highlight .c, .highlight .cm, .highlight .c1 { color: hsl(212,8%,45%); font-style: italic; }
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kr, .highlight .kt { color: hsl(354,66%,54%); font-weight: bold; }
.highlight .o, .highlight .ow { color: hsl(354,66%,54%); font-weight: bold; }
.highlight .p { color: var(--text); }
.highlight .s, .highlight .s1, .highlight .s2, .highlight .sd, .highlight .se { color: hsl(212,94%,20%); }
.highlight .m, .highlight .mi, .highlight .mf { color: hsl(212,100%,39%); }
.highlight .nf { color: hsl(261,51%,51%); font-weight: bold; }
.highlight .nc { color: hsl(24,93%,46%); font-weight: bold; }
.highlight .nx { color: var(--text); }
.highlight .nd, .highlight .ni, .highlight .nn { color: hsl(24,93%,46%); }
.highlight .err { color: hsl(354,66%,54%); background-color: hsl(353,100%,97%); }

body.dark-mode .highlight .c,
body.dark-mode .highlight .cm,
body.dark-mode .highlight .c1 { color: hsl(212,8%,58%); }
body.dark-mode .highlight .k,
body.dark-mode .highlight .kd,
body.dark-mode .highlight .kn,
body.dark-mode .highlight .kr,
body.dark-mode .highlight .kt,
body.dark-mode .highlight .o,
body.dark-mode .highlight .ow { color: hsl(4,100%,72%); }
body.dark-mode .highlight .s,
body.dark-mode .highlight .s1,
body.dark-mode .highlight .s2,
body.dark-mode .highlight .sd,
body.dark-mode .highlight .se { color: hsl(207,100%,82%); }
body.dark-mode .highlight .m,
body.dark-mode .highlight .mi,
body.dark-mode .highlight .mf { color: hsl(208,100%,74%); }
body.dark-mode .highlight .nf,
body.dark-mode .highlight .nc { color: hsl(269,100%,83%); }
body.dark-mode .highlight .nx { color: var(--text); }
body.dark-mode .highlight .nd,
body.dark-mode .highlight .ni,
body.dark-mode .highlight .nn { color: hsl(28,100%,67%); }