/*
 * 9Minecraft single-content styles
 * Tách từ style.css — chỉ load trên is_single() || is_page().
 * Selectors thuộc nhóm single-only: .postContent*, .highlight-*, .related-*,
 *   .post_all_info--single (kèm .info-row scoped), .code-copy-btn, .code-copy-toast.
 */



/* Copy button cho <pre> */
.code-copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-family: -apple-system, system-ui, sans-serif;
    color: #334155;
    cursor: pointer;
    transition: all .15s ease;
    z-index: 2;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.code-copy-btn:hover { background: #f1f5f9; border-color: #94a3b8; color: #0f172a; }
.code-copy-btn.copied { background: #10b981; border-color: #059669; color: #fff; }

/* Inline <code>: click-to-copy */
.postContent code, .postContent_page code {
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
    position: relative;
}
.postContent code:hover, .postContent_page code:hover { background-color: #d1d5db; }
.postContent code.just-copied, .postContent_page code.just-copied {
    background-color: #d1fae5 !important;
    color: #065f46 !important;
}
.postContent pre code, .postContent_page pre code {
    cursor: text; background: transparent; padding: 0; margin: 0; color: inherit; font-size: inherit;
}
.postContent pre code:hover, .postContent_page pre code:hover { background: transparent; }

/* Toast "Copied!" — float ở góc phải trên, ngoài thẻ code */
.code-copy-toast {
    position: fixed;
    background: #10b981;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    font-family: -apple-system, system-ui, sans-serif;
    padding: 6px 12px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .18s ease, transform .18s ease;
    white-space: nowrap;
}
.code-copy-toast.show {
    opacity: 1;
    transform: translateY(0);
}
.code-copy-toast::after {
    content: "";
    position: absolute;
    bottom: -4px;
    right: 14px;
    width: 8px;
    height: 8px;
    background: #10b981;
    transform: rotate(45deg);
}
.postContent {
color : #000;
font-family : "Roboto", sans-serif;
font-weight : 400;
font-size : 16px;
margin-bottom : 10px;
margin-top : 20px;
}
.postContent a {
color : blue;
}
.postContent div {
margin : 5px 0;
}
.postContent li {
list-style-position : outside;
margin : 0;
padding : 2px 4px;
}
.postContent h1 {
color : #c50c26;
font-weight : 700;
font-size : 26px;
margin : 15px 0;
}
.postContent h1 a {
color : #c50c26;
text-decoration : none;
}
/* ─── H2 Download Links - Double-line banner, Oswald font match TOC ─── */
/* Font Oswald + color #c62828 match highlight-toc (Features/Screenshots/Download). */
.postContent h2.mcap-download-heading {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
    margin: 40px 0 28px 0;
    padding: 12px 20px;

    background: #8C0C0C !important;

    color: #fdfbec !important;
    font-family: "Roboto Condensed", sans-serif !important;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.5px;
    text-transform: none;
    text-decoration: none !important;
    text-shadow: none;

    border: 0 !important;
    border-radius: 4px !important;

    box-shadow: none;
}

.postContent h2.mcap-download-heading::before {
    content: "\f0ed";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    font-size: 24px;
    color: #fdfbec;
    flex-shrink: 0;
    width: auto;
    height: auto;
    background: none;
}

.postContent h2.mcap-download-heading a {
    color: #fdfbec !important;
    text-decoration: none !important;
    border: 0 !important;
}
.postContent h2.mcap-download-heading a:hover {
    color: #fff !important;
}

/* Tablet ≤ 900px */
@media (max-width: 900px) {
.postContent h2.mcap-download-heading {
        font-size: 24px;
        gap: 14px;
        padding: 16px 18px;
        letter-spacing: 0.8px;
    }
}

/* Mobile ≤ 600px */
@media (max-width: 600px) {
.postContent h2.mcap-download-heading {
        font-size: 20px;
        margin: 32px 0 22px 0;
        padding: 10px 14px;
        letter-spacing: 0.3px;
    }
}

/* Very small ≤ 420px */
@media (max-width: 420px) {
.postContent h2.mcap-download-heading {
        font-size: 18px;
        padding: 8px 12px;
        border-top-width: 1.5px !important;
        border-bottom-width: 1.5px !important;
    }
}
/* ────────────────────────────────────────────────────────────────────── */
.postContent h3 {
color : #194e90;
font-weight : 700;
font-size : 22px;
margin : 15px 0;
text-decoration : underline;
}
.postContent h4 {
color : #3d2775;
font-weight : 700;
font-size : 18px;
margin : 15px 0;
text-decoration : underline;
}
.postContent h5 {
color : #10271b;
font-weight : 700;
font-size : 16px;
margin : 15px 0;
}
.postContent ul, .postContent ol {
margin : 15px 0;
padding-left : 28px;
}
.postContent ul ul, .postContent ol ol,
.postContent ul ol, .postContent ol ul {
margin : 2px 0;
padding-left : 20px;
}
.postContent blockquote,
.postContent_page blockquote {
    background: #fff7ed;
    border: 2px dashed #fb923c;
    padding: 20px 24px 20px 60px;
    margin: 24px 0;
    border-radius: 12px;
    position: relative;
    color: #7c2d12;
    font-size: 16px;
    line-height: 1.65;
    font-weight: 400;
    overflow-wrap: break-word;
}
.postContent blockquote::before,
.postContent_page blockquote::before {
    content: "\275D"; /* ❝ */
    position: absolute;
    top: 12px;
    left: 18px;
    font-size: 28px;
    color: #fb923c;
    line-height: 1;
    font-family: Georgia, serif;
}
.postContent_page blockquote {
    font-family: "Roboto Condensed", sans-serif;
}

.postContent blockquote a {
color : #c2410c;
font-weight : 700;
}
.postContent blockquote a:hover {
color : #7c2d12;
text-decoration: underline;
}

.postContent_page blockquote a {
color : #c2410c;
font-family : "Roboto Condensed", sans-serif;
font-weight : 700;
line-height : 18px;
}@media (max-width: 767px) {
.postContent img {
max-width : 100%;
height : auto;
}
}@media (max-width: 991px) {
.postContent img {
max-width : 100%;
height : auto;
}
}

/* ===== FIGURE / FIGCAPTION / WP-CAPTION ===== */
.postContent figure,
.postContent .wp-block-image,
.postContent .wp-caption {
  margin: 1.75rem auto;
  padding: 0;
  max-width: 100%;
  width: fit-content;
  border-radius: 10px;
  overflow: hidden;
  background: #f8f9fb;
  border: 1px solid #e2e5ea;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.postContent figure:hover,
.postContent .wp-block-image:hover,
.postContent .wp-caption:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  transform: translateY(-1px);
}
.postContent figure img,
.postContent .wp-block-image img,
.postContent .wp-caption img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 10px 10px 0 0;
  margin: 0;
}
.postContent figcaption,
.postContent .wp-caption-text {
  padding: 10px 14px;
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: #5a6270;
  background: #f1f3f5;
  border-top: 2px solid #2e7d32;
  text-align: center;
}

/* Figure without figcaption - no bottom bar */
.postContent figure:not(:has(figcaption)) {
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
}
.postContent figure:not(:has(figcaption)):hover {
  box-shadow: none;
  transform: none;
}
.postContent figure:not(:has(figcaption)) img {
  border-radius: 10px;
}

/* Aligned figures */
.postContent figure.alignleft,
.postContent .wp-block-image.alignleft {
  float: left;
  max-width: 50%;
  margin: 0.5em 1.5em 1em 0;
}
.postContent figure.alignright,
.postContent .wp-block-image.alignright {
  float: right;
  max-width: 50%;
  margin: 0.5em 0 1em 1.5em;
}
.postContent figure.aligncenter,
.postContent .wp-block-image.aligncenter {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 600px) {
.postContent figure,
  .postContent .wp-block-image,
  .postContent .wp-caption {
    margin: 1.25rem 0;
    border-radius: 8px;
  }
  .postContent figure img,
  .postContent .wp-block-image img,
  .postContent .wp-caption img {
    border-radius: 8px 8px 0 0;
  }
  .postContent figure:not(:has(figcaption)) img {
    border-radius: 8px;
  }
  .postContent figcaption,
  .postContent .wp-caption-text {
    font-size: 12px;
    padding: 8px 10px;
  }
  .postContent figure.alignleft,
  .postContent figure.alignright,
  .postContent .wp-block-image.alignleft,
  .postContent .wp-block-image.alignright {
    float: none;
    max-width: 100%;
    margin: 1.25rem 0;
  }
}


.related-heading {
	font-family : "Oswald", sans-serif;
    font-size: 22px;
    color: #861023;
    margin: 20px 0 15px;
    text-transform: uppercase;
    text-align: left;
    border-bottom: 2px solid #ddd;
    padding-bottom: 8px;
}

.highlight-toc {
  margin: 16px 0;
  display: flex;
  justify-content: center;
}

.highlight-toc::before {
  display: none;
}

.highlight-item {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 5px 24px;
  font-family: "Oswald", sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  border: none;
  position: relative;
  transition: filter 0.2s ease;
}

/* Hover: line hiện + chữ sáng nhẹ */
.highlight-item::before,
.highlight-item::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.highlight-item::before { top: -1.5px; }
.highlight-item::after  { bottom: -1.5px; }

.highlight-item:hover {
  filter: brightness(1.25);
}
.highlight-item:hover::before,
.highlight-item:hover::after {
  opacity: 1;
}

/* ===== FEATURES ===== */
.highlight-features,
.highlight-features:hover {
  color: #2e7d32;
}

/* ===== SCREENSHOTS ===== */
.highlight-screenshots,
.highlight-screenshots:hover {
  color: #1565c0;
}

/* ===== DOWNLOAD ===== */
.highlight-download,
.highlight-download:hover {
  color: #c62828;
}@media (max-width: 600px) {
.highlight-toc {
    display: flex;
    justify-content: center;
  }
  .highlight-item {
    flex: 1;
    font-size: clamp(11px, 4vw, 17px);
    padding: 6px 2px;
    text-align: center;
    white-space: nowrap;
    min-width: 0;
  }
}

.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 30px 0;
    padding: 0 10px;
}

.related-posts-item {
    background: #f9f9f9;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.related-thumb {
    width: 100%;
    height: 180px;
    background: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.related-thumb img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.related-title {
    padding: 12px 14px 16px;
    text-align: center;
}

.related-title a {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #004175;
    text-decoration: none;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-heading {
    font-family: "Oswald", sans-serif;
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    margin: 40px 0 20px;
    background: linear-gradient(90deg, #861023, #c94f7c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

@media (max-width: 991px) {
.related-posts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .related-thumb {
        height: 160px;
    }

    .related-title a {
        font-size: 16px;
    }
}@media (max-width: 767px) {
.related-posts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        padding: 0 8px;
    }

    .related-thumb {
        height: 140px;
    }

    .related-title {
        padding: 10px 12px 14px;
    }

    .related-title a {
        font-size: 15px;
        -webkit-line-clamp: 3;
    }

    .related-heading {
        font-size: 24px;
        margin: 30px 0 15px;
    }
}

@media (max-width: 480px) {
.related-posts-grid {
        gap: 12px;
    }

    .related-thumb {
        height: 120px;
    }

    .related-title a {
        font-size: 16px;
    }
}


/* ===== post_all_info--single ===== */
.post_all_info--single {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 14px;
    margin-bottom: 10px;
}

/* Desktop: wrapper flex row, .info-row con dùng display:contents để 4 item xếp thẳng 1 hàng */
@media (min-width: 768px) {
.post_all_info--single {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: 30px;
    }

    .post_all_info--single > .info-row {
        display: contents;
    }
}

/* Mobile: 2 hàng, mỗi hàng 2 cột đều nhau */
@media (max-width: 767px) {
.post_all_info--single {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-size: 13px;
    }

    .post_all_info--single > .info-row {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0;
    }

    .post_all_info--single > .info-row > * {
        flex: 1 1 auto;
        min-width: 0;
        overflow: visible;
        text-overflow: unset;
        white-space: normal;
    }

    .post_all_info--single > .info-row > * img {
        width: 18px !important;
        height: 18px !important;
        margin-right: 4px !important;
    }
}

/* ── Pre block (code block) — light blue, wrap full, copy button ──── */
.postContent pre,
.postContent_page pre {
    font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', monospace;
    font-size: 15px;
    line-height: 1.5;
    background: #cddcff;
    color: #0f172a;
    padding: 40px 16px 16px 16px;
    border-radius: 6px;
    border: 1px solid #b5b5b5;
    margin: 16px 0;
    position: relative;
    overflow: visible;
    white-space: pre-wrap;       /* preserve line breaks + wrap long lines */
    overflow-wrap: anywhere;     /* break long unbreakable tokens (URLs, hashes) */
    word-break: normal;
}

/* Code inside pre: inherit font + bỏ inline style */
.postContent pre code,
.postContent_page pre code {
    background: transparent !important;
    color: inherit !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: inherit !important;
    border-radius: 0 !important;
}

/* Links trong pre — trên nền xanh nhạt */
.postContent pre a,
.postContent_page pre a {
    color: #1d4ed8;
    font-family: inherit;
    font-size: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.postContent pre a:hover { color: #1e3a8a; }

/* ── Blockquote — Warm Callout (Option 5) ──────────────────────── */
.postContent blockquote,
.postContent_page blockquote {
    position: relative;
    background: #fff7ed;
    border: 2px dashed #fb923c;
    border-radius: 12px;
    padding: 20px 24px 20px 60px;
    margin: 24px 0;
    color: #000;
    font-style: normal;
    font-size: 16px;
    line-height: 1.65;
    font-weight: 400;
    overflow-wrap: break-word;
    box-shadow: none;
}
.postContent blockquote::before,
.postContent_page blockquote::before {
    content: "\275D"; /* ❝ */
    position: absolute;
    top: 12px;
    left: 18px;
    font-size: 28px;
    color: #fb923c;
    line-height: 1;
    font-family: Georgia, serif;
    opacity: 1;
    pointer-events: none;
}
.postContent blockquote p:last-child,
.postContent_page blockquote p:last-child { margin-bottom: 0; }
.postContent blockquote a,
.postContent_page blockquote a {
    color: #e11d48;                         /* rose-600 — đỏ hồng tinh tế */
    font-weight: 600;
    line-height: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(225, 29, 72, 0.4);
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
    transition: color .15s ease, text-decoration-color .15s ease;
}
.postContent blockquote a:hover,
.postContent_page blockquote a:hover {
    color: #be123c;                         /* rose-700 — đậm hơn khi hover */
    text-decoration-color: #be123c;
}
.postContent blockquote cite,
.postContent_page blockquote cite {
    display: block;
    margin-top: 10px;
    font-style: normal;
    font-size: 13px;
    color: #a16207;
}
.postContent blockquote cite::before {
    content: "— ";
    color: #c2410c;
}

/* ── Modern Headings v2 (h1-h6) - bigger, with underlines ────────────
   Design notes:
   - User feedback: prefer LARGER fonts and underlines
   - h1: 38px, h2: 32px (with gradient underline), h3: 26px (with accent underline),
     h4: 22px (subtle underline), h5: 18px label
   - System font stack
   - Margin-top > margin-bottom (heading "dính" content theo sau)
   - Exclude .mcap-download-heading (banner đỏ Download Links)
   - Exclude .mcig-section h3 (How to Install plugin có design riêng)
   - Exclude .mcap-requires-section h3 (Requirements plugin có design riêng)
─────────────────────────────────────────────────────────────────────── */
.postContent h1,
.postContent h2:not(.mcap-download-heading),
.postContent h3,
.postContent h4,
.postContent h5,
.postContent h6 {
    font-family: "Roboto Condensed", sans-serif;
    color: #0f172a;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    margin: 1.8em 0 0.7em;
    padding: 0;
    border: 0;
    text-decoration: none;
    background: transparent;
    text-shadow: none;
    text-transform: none;
}
.postContent > h1:first-child,
.postContent > h2:first-child,
.postContent > h3:first-child { margin-top: 0.4em; }

/* h1 - page title */
.postContent h1 {
    font-size: 38px;
    letter-spacing: -0.025em;
    line-height: 1.2;
}
.postContent h1 a { color: inherit; text-decoration: none; }

/* h2 - major section, gradient underline */
.postContent h2:not(.mcap-download-heading) {
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    padding-bottom: 14px;
    margin-bottom: 0.8em;
    position: relative;
}
.postContent h2:not(.mcap-download-heading)::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #16a34a 0%, #4ade80 50%, transparent 100%);
    border-radius: 2px;
}
.postContent h2:not(.mcap-download-heading) a { color: inherit; text-decoration: none; }

/* h3 - subsection, with full-width subtle underline + accent left bar */
.postContent h3 {
    font-size: 26px;
    font-weight: 600;
    color: #15803d;
    padding: 0 0 10px 14px;
    position: relative;
    border-bottom: 2px solid rgba(22, 163, 74, 0.18);
}
.postContent h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.18em;
    bottom: 0.45em;
    width: 5px;
    background: linear-gradient(180deg, #16a34a, #15803d);
    border-radius: 3px;
}
.postContent h3 a { color: inherit; text-decoration: none; }

/* h4 - sub-subsection, dotted underline */
.postContent h4 {
    font-size: 22px;
    color: #1a4860;
    font-weight: 600;
    padding-bottom: 6px;
    border-bottom: 2px dotted rgba(26, 72, 96, 0.25);
}
.postContent h4 a { color: inherit; text-decoration: none; }

/* Strong/b bên trong heading kế thừa font-weight của heading
   → render giống nhau dù tác giả wrap hay không wrap <strong> */
.postContent h1 strong, .postContent h1 b,
.postContent h2 strong, .postContent h2 b,
.postContent h3 strong, .postContent h3 b,
.postContent h4 strong, .postContent h4 b,
.postContent h5 strong, .postContent h5 b,
.postContent h6 strong, .postContent h6 b {
    font-weight: inherit;
}

/* h5 - minor heading, small accent bar */
.postContent h5 {
    font-size: 18px;
    font-weight: 600;
    color: #6d28d9;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(109, 40, 217, 0.22);
    margin-top: 1.5em;
}
.postContent h5 a { color: inherit; text-decoration: none; }

/* h6 - smallest, label style with accent */
.postContent h6 {
    font-size: 15px;
    color: #475569;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Mobile - scale down ~15% */
@media (max-width: 600px) {
.postContent h1 { font-size: 30px; }
    .postContent h2:not(.mcap-download-heading) { font-size: 26px; padding-bottom: 12px; }
    .postContent h3 { font-size: 22px; padding-left: 12px; }
    .postContent h3::before { width: 4px; }
    .postContent h4 { font-size: 19px; }
    .postContent h5 { font-size: 16px; }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
.postContent h1,
    .postContent h2:not(.mcap-download-heading) { color: #f1f5f9; }
    .postContent h2:not(.mcap-download-heading)::after {
        background: linear-gradient(90deg, #22c55e 0%, #4ade80 50%, transparent 100%);
    }
    .postContent h3 { color: #4ade80; border-bottom-color: rgba(74, 222, 128, 0.25); }
    .postContent h3::before { background: linear-gradient(180deg, #22c55e, #16a34a); }
    .postContent h4 { color: #93c5fd; border-bottom-color: rgba(147, 197, 253, 0.3); }
    .postContent h5 { color: #c4b5fd; border-bottom-color: rgba(196, 181, 253, 0.3); }
    .postContent h6 { color: #94a3b8; }
}

/* ── PRESERVE: Plugin h3 designs (independent từ theme) ────────────── */

/* mc-install-guide: 📖 + green gradient */
.postContent .mcig-section h3 {
    display: inline-block;
    color: #1a1a1a;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.3px;
    margin: 0 0 18px 0;
    padding: 0 0 8px 0;
    border-bottom: 0;
}
.postContent .mcig-section h3::before {
    content: "📖";
    background: transparent;
    width: auto;
    position: static;
    margin: 0 8px 0 0;
    border-radius: 0;
    top: auto; bottom: auto;
}

/* mc-requires-box: ⚙ + blue gradient */
.postContent .mcap-requires-section h3 {
    display: inline-block;
    color: #1a1a1a;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.3px;
    margin: 0 0 18px 0;
    padding: 0 0 8px 0;
    border-bottom: 0;
}
.postContent .mcap-requires-section h3::before {
    content: "⚙";
    background: transparent;
    width: auto;
    position: static;
    margin: 0 8px 0 0;
    color: #2271b1;
    border-radius: 0;
    top: auto; bottom: auto;
}

@media (prefers-color-scheme: dark) {
.postContent .mcig-section h3,
    .postContent .mcap-requires-section h3 { color: #1a1a1a; }
}

/* ── Kbd (keyboard key) ──────────────────────────────────────── */
.postContent kbd,
.postContent_page kbd {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.82em;
    font-weight: 600;
    line-height: 1;
    background: linear-gradient(180deg, #fafafa 0%, #e5e7eb 100%);
    color: #1f2937;
    padding: 3px 7px;
    border: 1px solid #d1d5db;
    border-bottom-width: 2px;
    border-radius: 5px;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.04);
    min-width: 18px;
    text-align: center;
    vertical-align: 1px;
    margin: 0 2px;
}

/* ── Mark (highlight) ────────────────────────────────────────── */
.postContent mark,
.postContent_page mark {
    background: linear-gradient(180deg, transparent 55%, #fef08a 55%);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

/* ── Abbr (tooltip hint) ─────────────────────────────────────── */
.postContent abbr[title],
.postContent_page abbr[title] {
    text-decoration: none;
    border-bottom: 1px dotted #94a3b8;
    cursor: help;
}

/* ── Samp (sample output) ────────────────────────────────────── */
.postContent samp,
.postContent_page samp {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.9em;
    background: #ecfdf5;
    color: #065f46;
    padding: 1px 5px;
    border-radius: 4px;
}

/* ── HR (divider) ────────────────────────────────────────────── */
.postContent hr,
.postContent_page hr {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #cbd5e1, transparent);
    margin: 28px 0;
}

/* ── Table (modern striped) ──────────────────────────────────── */
.postContent table,
.postContent_page table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0;
    font-size: 14.5px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.postContent table th,
.postContent_page table th {
    background: #f1f5f9;
    color: #0f172a;
    font-weight: 600;
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid #e2e8f0;
}
.postContent table td,
.postContent_page table td {
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}
.postContent table tr:nth-child(even) td,
.postContent_page table tr:nth-child(even) td {
    background: #fafbfc;
}
.postContent table tr:last-child td,
.postContent_page table tr:last-child td {
    border-bottom: 0;
}@media (prefers-color-scheme: dark) {
.postContent blockquote,
    .postContent_page blockquote {
        background: #1e293b;
        color: #cbd5e1;
        border-left-color: #4ade80;
    }
    .postContent table,
    .postContent_page table {
        background: #0f172a;
        border-color: #334155;
    }
    .postContent table th { background: #1e293b; color: #f1f5f9; }
    .postContent table td { color: #cbd5e1; border-bottom-color: #1e293b; }
    .postContent table tr:nth-child(even) td { background: #162033; }
}