.blog-wrap { max-width: 780px; margin: 0 auto; padding: 18px 16px 40px; box-sizing: border-box; width: 100%; min-width: 0; }
.blog-crumbs { font-size: 14px; margin: 6px 0 4px; }
.blog-h1 { font-size: 2.1rem; line-height: 1.2; font-weight: 800; margin: 10px 0 8px; }
.blog-meta { color: #777; font-size: 14px; margin-bottom: 16px; }
.blog-cover { width: 100%; height: auto; border-radius: 14px; display: block; margin: 0 0 20px; }
.blog-toc { background: #fff; border-radius: 12px; padding: 14px 18px; margin: 0 0 22px; box-shadow: 0 1px 6px rgba(0,0,0,.05); }
.blog-toc ol { margin: 8px 0 0; padding-left: 20px; }
.blog-toc li { margin: 4px 0; list-style: decimal; }
.article-body { background: #fff; border-radius: 14px; padding: 24px 26px; font-size: 17px; line-height: 1.7; color: #222; box-shadow: 0 1px 6px rgba(0,0,0,.05); overflow-wrap: anywhere; }
.article-body h2 { font-size: 1.6rem; font-weight: 700; margin: 34px 0 12px; line-height: 1.3; scroll-margin-top: 70px; }
.article-body h3 { font-size: 1.25rem; font-weight: 700; margin: 24px 0 8px; line-height: 1.35; }
.article-body p { margin: 0 0 14px; }
.article-body ul, .article-body ol { margin: 0 0 16px; padding-left: 24px; }
.article-body ul li { list-style: disc; margin: 6px 0; }
.article-body ol li { list-style: decimal; margin: 6px 0; }
.article-body .lead { font-size: 1.15rem; color: #444; }
.article-body figure { margin: 22px 0; }
.article-body figure img { width: 100%; height: auto; border-radius: 12px; display: block; border: 1px solid #eee; }
.article-body figcaption { font-size: 14px; color: #777; margin-top: 8px; text-align: center; }
.article-body .note { background: #f3eefc; border-left: 4px solid #7e57c2; padding: 12px 16px; border-radius: 8px; margin: 18px 0; }
.article-body .warn { background: #fff6e5; border-left: 4px solid #f0a020; padding: 12px 16px; border-radius: 8px; margin: 18px 0; }
.article-body table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; display: block; overflow-x: auto; }
.article-body th, .article-body td { border: 1px solid #e6e6e6; padding: 8px 10px; text-align: left; vertical-align: top; }
.article-body th { background: #f7f5fb; }
.article-body code { background: #f3f3f3; padding: 1px 6px; border-radius: 4px; font-size: .92em; }
.article-body .faq h3 { font-size: 1.1rem; margin-top: 18px; }
.article-body .tool { background: #f7f5fb; border-radius: 12px; padding: 16px; margin: 18px 0; }
.article-body .tool input { background: #fff !important; border-radius: 6px !important; padding: 0 10px !important; box-sizing: border-box !important; }
.blog-cta { background: linear-gradient(135deg, #5b247a, #7e57c2 60%, #1bcedf); color: #fff; border-radius: 14px; padding: 22px 24px; margin: 26px 0; }
.blog-cta-title { font-size: 1.4rem; font-weight: 800; margin-bottom: 6px; }
.blog-cta .btn { text-transform: none; border-radius: 8px; margin: 6px 8px 0 0; background: #fff !important; color: #5b247a; }
.blog-cta .btn-flat { color: #fff; text-transform: none; margin-top: 6px; }
.blog-related h2 { font-size: 1.4rem; font-weight: 700; }
.blog-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 12px 0; }
.blog-card { background: #fff; border-radius: 12px; overflow: hidden; color: #222; box-shadow: 0 1px 6px rgba(0,0,0,.06); display: flex; flex-direction: column; }
.blog-card img, .blog-card-ph { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; display: block; }
.blog-card-ph { background: linear-gradient(135deg, #7e57c2, #1bcedf); }
.blog-card-title { padding: 10px 12px 12px; font-weight: 700; line-height: 1.35; }
.blog-card-descr { padding: 0 12px 12px; color: #666; font-size: 14px; line-height: 1.45; }
.blog-card-date { padding: 10px 12px 0; color: #999; font-size: 13px; }
.blog-list-lead { color: #666; text-align: center; margin: 0 0 18px; }
@media (max-width: 600px) {
  .blog-h1 { font-size: 1.6rem; }
  .article-body { padding: 18px 16px; font-size: 16px; }
  .article-body h2 { font-size: 1.35rem; }
}
.blog-byline { font-weight: 600; color: #5b247a; }