body {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Thai", sans-serif;
    letter-spacing: 0;
    background:
        radial-gradient(circle at top left, rgba(186, 230, 253, .35), transparent 30rem),
        radial-gradient(circle at top right, rgba(251, 207, 232, .30), transparent 28rem),
        #f8fcff;
}
img { max-width: 100%; }
.section-wrap { max-width: 80rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
.soft-card { border: 1px solid rgba(186, 230, 253, .85); background: rgba(255, 255, 255, .94); box-shadow: 0 18px 42px rgba(2, 132, 199, .08); }
.hero-visual { aspect-ratio: 16 / 11; background: linear-gradient(135deg, #e0f2fe, #ffffff 48%, #fce7f3); }
.content-body { color: #334155; font-size: 1.0625rem; }
.content-body h2 { color: #0f172a; font-size: 1.55rem; font-weight: 850; margin: 2rem 0 .85rem; line-height: 1.25; }
.content-body h3 { color: #0f172a; font-size: 1.22rem; font-weight: 800; margin: 1.5rem 0 .6rem; line-height: 1.35; }
.content-body p { margin-bottom: 1rem; line-height: 1.85; }
.content-body ul, .content-body ol { padding-left: 1.5rem; margin: 1rem 0 1.25rem; }
.content-body li { margin-bottom: .45rem; line-height: 1.75; }
.content-body a { color: #0369a1; text-decoration: underline; text-underline-offset: 3px; }
.content-body img { border-radius: .75rem; margin: 1.5rem 0; }
.content-body table { display: block; width: 100%; max-width: 100%; border-collapse: collapse; margin: 1.5rem 0; overflow-x: auto; border-radius: .75rem; box-shadow: 0 0 0 1px #bae6fd; }
.content-body th, .content-body td { min-width: 8rem; border: 1px solid #bae6fd; padding: .85rem .9rem; text-align: left; vertical-align: top; }
.content-body th { background: #f0f9ff; color: #0f172a; font-weight: 850; }
.content-body tr:nth-child(even) td { background: #fdf2f8; }
.toc-link { display: block; border-left: 2px solid #bae6fd; padding: .4rem .75rem; color: #475569; font-size: .9rem; font-weight: 700; }
.toc-link:hover { border-color: #f9a8d4; color: #be185d; }

/* Safety overrides for old frontend teal utilities that may remain in seeded rich content or partials. */
main .text-teal-700, main .text-teal-800, main .text-teal-900 { color: #0369a1 !important; }
main .text-teal-300, main .text-teal-100 { color: #bae6fd !important; }
main .bg-teal-50 { background-color: #f0f9ff !important; }
main .bg-teal-400, main .bg-teal-500, main .bg-teal-700, main .bg-teal-800 { background-color: #7dd3fc !important; color: #0f172a !important; }
main .border-teal-200, main .border-teal-300 { border-color: #bae6fd !important; }
main .hover\:bg-teal-800:hover { background-color: #38bdf8 !important; }
main .hover\:text-teal-800:hover, main .hover\:text-teal-900:hover { color: #be185d !important; }
@media (min-width: 1024px) { .section-wrap { padding-left: 1.5rem; padding-right: 1.5rem; } }