.blog-post-page { padding: 150px 0 80px; }
.blog-post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 38px; align-items: start; }
.blog-post-main { min-width: 0; }
.post-header { margin-bottom: 38px; padding-bottom: 32px; border-bottom: 1px solid var(--border); }
.post-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 28px; color: var(--primary-color); font-size: .76rem; font-weight: 800; }
.post-back:hover { transform: translateX(-3px); }
.post-title { margin: 15px 0; color: var(--ink); font-size: clamp(2.5rem, 6vw, 4.7rem); line-height: 1.12; letter-spacing: -.065em; }
.post-lead { max-width: 760px; font-size: 1rem; }
.post-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 22px; color: #98a2b3; font-size: .72rem; font-weight: 700; }
.post-content { padding: 38px; border: 1px solid var(--border); border-radius: var(--border-radius); background: rgba(255,255,255,.82); box-shadow: var(--shadow-sm); color: #344054; font-size: .98rem; line-height: 1.9; }
.post-content h1, .post-content h2, .post-content h3 { scroll-margin-top: 110px; margin: 1.7em 0 .65em; color: var(--ink); line-height: 1.3; letter-spacing: -.04em; }
.post-content h2 { font-size: 1.75rem; }
.post-content h3 { font-size: 1.25rem; }
.post-content p, .post-content ul, .post-content ol, .post-content blockquote { margin: 1em 0; }
.post-content ul, .post-content ol { padding-left: 1.5rem; }
.post-content ul { list-style: disc; }
.post-content ol { list-style: decimal; }
.post-content a { color: var(--primary-color); text-decoration: underline; text-underline-offset: 3px; }
.post-content blockquote { padding: 14px 18px; border-left: 3px solid var(--primary-color); border-radius: 0 12px 12px 0; background: var(--soft); }
.post-content img { margin: 24px auto; border-radius: 14px; box-shadow: var(--shadow-sm); }
.post-content pre { overflow-x: auto; margin: 24px 0; padding: 18px; border-radius: 14px; background: #101828; color: #e4e7ec; }
.post-content code { font-family: "Cascadia Code", Consolas, monospace; font-size: .86em; }
.post-content :not(pre) > code { padding: 3px 6px; border-radius: 6px; background: rgba(91,85,231,.08); color: var(--primary-dark); }
.post-footer { margin-top: 24px; }
.post-toc-sidebar { position: sticky; top: 105px; }
.toc-widget { padding: 22px; border: 1px solid var(--border); border-radius: 16px; background: rgba(255,255,255,.78); box-shadow: var(--shadow-sm); }
.toc-title { margin-bottom: 13px; color: var(--ink); font-size: .84rem; }
.toc-widget ul { display: grid; gap: 7px; }
.toc-widget a { display: block; color: var(--muted); font-size: .72rem; line-height: 1.5; }
.toc-widget a:hover { color: var(--primary-color); }
.toc-h3 { padding-left: 10px; }
.related-posts { padding: 80px 0; border-top: 1px solid var(--border); }
.related-posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.related-post-card { padding: 24px; border: 1px solid var(--border); border-radius: var(--border-radius); background: #fff; box-shadow: var(--shadow-sm); transition: var(--transition); }
.related-post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.related-post-title { margin-bottom: 10px; color: var(--ink); font-size: 1rem; }
.related-post-title a:hover { color: var(--primary-color); }
.related-post-card p { margin-bottom: 15px; font-size: .8rem; }
.related-post-card span { color: #98a2b3; font-size: .68rem; font-weight: 700; }
@media (max-width: 900px) {
    .blog-post-layout { grid-template-columns: 1fr; }
    .post-toc-sidebar { display: none; }
}
@media (max-width: 600px) {
    .blog-post-page { padding: 125px 0 55px; }
    .post-content { padding: 22px; }
    .related-posts-grid { grid-template-columns: 1fr; }
}

:root[data-theme="dark"] .post-content,
:root[data-theme="dark"] .toc-widget,
:root[data-theme="dark"] .related-post-card {
    background: rgba(17, 24, 39, .88);
    border-color: rgba(255,255,255,.12);
    color: #cbd5e1;
}

:root[data-theme="dark"] .post-title,
:root[data-theme="dark"] .post-content h1,
:root[data-theme="dark"] .post-content h2,
:root[data-theme="dark"] .post-content h3,
:root[data-theme="dark"] .toc-title,
:root[data-theme="dark"] .related-post-title,
:root[data-theme="dark"] .related-post-title a {
    color: #f5f7fb;
}

:root[data-theme="dark"] .post-lead,
:root[data-theme="dark"] .post-meta,
:root[data-theme="dark"] .post-content p,
:root[data-theme="dark"] .post-content li,
:root[data-theme="dark"] .post-content blockquote,
:root[data-theme="dark"] .toc-widget a,
:root[data-theme="dark"] .related-post-card p,
:root[data-theme="dark"] .related-post-card span {
    color: #a7b0c0;
}

:root[data-theme="dark"] .post-content blockquote {
    background: rgba(141,136,255,.11);
    border-left-color: var(--primary-color);
}

:root[data-theme="dark"] .post-content :not(pre) > code {
    background: rgba(141,136,255,.16);
    color: #d7d5ff;
}