* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: #f4f7fb;
    color: #263246;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.75;
}
a { color: #1769aa; }
a:hover, a:focus { color: #0e4d80; }
.blog-header {
    background: rgba(255,255,255,.97);
    border-bottom: 1px solid #e1e7ef;
    padding: 16px 20px;
}
.blog-header-inner, .blog-page, .blog-footer {
    width: min(1360px, calc(100% - 40px));
    margin: 0 auto;
}
.blog-header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 18px;
}
.blog-brand {
    color: #17263a;
    font-size: 1.45rem;
    font-weight: 750;
    text-decoration: none;
}
.blog-tagline { color: #68768a; }
.blog-nav { display: flex; gap: 18px; margin-left: auto; }
.blog-nav a { text-decoration: none; }
.blog-try-link { font-weight: 700; }
.blog-page { margin-top: 30px; margin-bottom: 52px; }
.blog-layout {
    display: grid;
    grid-template-columns: 215px minmax(0, 1fr) 245px;
    gap: 24px;
    align-items: start;
}
.blog-sidebar {
    position: sticky;
    top: 20px;
    padding: 20px 18px;
    background: #fff;
    border: 1px solid #e1e7ef;
    border-radius: 10px;
    box-shadow: 0 3px 14px rgba(27, 49, 77, .045);
}
.blog-sidebar h2 { margin: 0 0 12px; color: #263246; font-size: 1.02rem; line-height: 1.4; }
.blog-sidebar ul { margin: 0; padding: 0; list-style: none; }
.blog-sidebar li { margin: 10px 0; line-height: 1.45; }
.blog-sidebar a { text-decoration: none; }
.blog-sidebar a:hover, .blog-sidebar a.current { text-decoration: underline; }
.blog-languages { margin-top: 24px; padding-top: 18px; border-top: 1px solid #e9edf2; }
.blog-languages ul, .blog-language-list ul { max-height: 360px; overflow: auto; }
.blog-article {
    min-width: 0;
    padding: 38px clamp(24px, 4vw, 54px) 46px;
    background: #fff;
    border: 1px solid #e7ebf1;
    border-radius: 12px;
    box-shadow: 0 3px 16px rgba(27, 49, 77, .05);
}
.blog-breadcrumbs { margin-bottom: 18px; color: #748196; font-size: .9rem; }
.blog-breadcrumbs a { text-decoration: none; }
.blog-eyebrow { margin: 0 0 8px; color: #146da7; font-size: .9rem; font-weight: 700; letter-spacing: .02em; }
.blog-article h1 { margin: 0 0 14px; color: #162438; font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1.18; }
.blog-lede { margin: 0 0 18px; color: #526176; font-size: 1.12rem; line-height: 1.65; }
.blog-meta { margin: 0 0 14px; color: #748196; font-size: .88rem; }
.blog-rights {
    margin: 0;
    padding: 12px 14px;
    background: #f0f7fd;
    border-left: 4px solid #2780b9;
    border-radius: 5px;
    color: #4d5d70;
    font-size: .92rem;
}
.blog-section { scroll-margin-top: 20px; }
.blog-section h2 {
    margin: 38px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e8edf2;
    color: #19293e;
    font-size: 1.45rem;
    line-height: 1.32;
}
.blog-section p { margin: 14px 0; }
.blog-steps { padding-left: 1.4rem; }
.blog-steps li { margin: 12px 0; padding-left: 4px; }
.blog-tips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
    margin: 18px 0;
    padding: 0;
    list-style: none;
}
.blog-tips li { padding: 14px 15px; background: #f7f9fc; border: 1px solid #e4eaf1; border-radius: 7px; }
.blog-faq details { padding: 13px 0; border-bottom: 1px solid #e8edf2; }
.blog-faq summary { cursor: pointer; color: #1769aa; font-weight: 700; }
.blog-faq details p { margin: 10px 0 2px; }
.blog-inline-related ul { padding-left: 1.25rem; }
.blog-inline-related li { margin: 8px 0; }
.blog-related-card h2 { margin: 0 0 14px; color: #263246; font-size: 1.02rem; }
.blog-related-card li { margin: 13px 0; }
.blog-cta { margin-top: 20px; padding: 18px; background: #eef9f2; border-left: 4px solid #36a269; border-radius: 7px; }
.blog-cta p { margin: 9px 0 16px; color: #526176; font-size: .93rem; }
.blog-button { display: inline-block; padding: 9px 15px; border-radius: 5px; background: #31975c; color: #fff; font-weight: 700; text-decoration: none; }
.blog-button:hover, .blog-button:focus { background: #257847; color: #fff; }
.blog-footer { padding: 0 0 38px; color: #748196; text-align: center; font-size: .9rem; }
.blog-footer p { margin: 7px 0; }
.blog-footer a { margin: 0 5px; text-decoration: none; }
.blog-index-header {
    max-width: 900px;
    margin: 30px auto 24px;
    padding: 34px 42px;
    background: #fff;
    border: 1px solid #e7ebf1;
    border-radius: 12px;
    box-shadow: 0 3px 16px rgba(27, 49, 77, .05);
}
.blog-index-header h1 { margin: 0 0 12px; color: #162438; font-size: clamp(2rem, 4vw, 2.7rem); line-height: 1.2; }
.blog-index-layout { display: grid; grid-template-columns: minmax(0, 1fr) 225px; gap: 24px; align-items: start; }
.blog-index-list { min-width: 0; }
.blog-index-list > h2 { margin: 0 0 14px; color: #263246; }
.blog-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.blog-card { padding: 22px; background: #fff; border: 1px solid #e1e7ef; border-radius: 9px; box-shadow: 0 3px 14px rgba(27, 49, 77, .04); }
.blog-card h3 { margin: 0 0 10px; line-height: 1.4; }
.blog-card p { color: #526176; }
.blog-card a { text-decoration: none; }
.blog-language-list { position: sticky; top: 20px; }
@media (max-width: 1060px) {
    .blog-layout { grid-template-columns: 185px minmax(0, 1fr); }
    .blog-related { grid-column: 1 / -1; position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 20px; }
    .blog-cta { margin-top: 0; }
}
@media (max-width: 720px) {
    .blog-header-inner, .blog-page, .blog-footer { width: min(100% - 28px, 1360px); }
    .blog-index-header { width: calc(100% - 28px); margin-top: 20px; padding: 28px 20px; }
    .blog-index-layout, .blog-cards { grid-template-columns: 1fr; }
    .blog-language-list { position: static; }
    .blog-nav { width: 100%; margin-left: 0; }
    .blog-layout { display: flex; flex-direction: column; }
    .blog-toc { order: 1; position: static; width: 100%; }
    .blog-article { order: 2; width: 100%; padding: 28px 20px 34px; }
    .blog-related { order: 3; width: 100%; display: block; }
    .blog-cta { margin-top: 20px; }
    .blog-tips { grid-template-columns: 1fr; }
}
[dir="rtl"] .blog-nav { margin-left: 0; margin-right: auto; }
[dir="rtl"] .blog-rights { border-left: 1px solid #dbe7f1; border-right: 4px solid #2780b9; }
[dir="rtl"] .blog-cta { border-left: 1px solid #dbe7f1; border-right: 4px solid #36a269; }
[dir="rtl"] .blog-steps { padding-left: 0; padding-right: 1.4rem; }
[dir="rtl"] .blog-steps li { padding-left: 0; padding-right: 4px; }

/* 图文对照：原图与生成结果并排 */
.blog-figure { margin: 26px 0 8px; }
.blog-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.blog-compare-item { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.blog-compare-item img,
.blog-compare-item video {
    width: 100%;
    height: 300px;
    object-fit: contain;
    background: #0e1622;
    border: 1px solid #e1e7ef;
    border-radius: 9px;
}
.blog-compare-label { color: #4d5d70; font-size: .9rem; font-weight: 600; text-align: center; }
.blog-figure figcaption { margin-top: 12px; color: #68768a; font-size: .92rem; text-align: center; }
@media (max-width: 560px) {
    .blog-compare { grid-template-columns: 1fr; }
    .blog-compare-item img, .blog-compare-item video { height: 240px; }
}