.blog-site {
    --bs-primary: #365e91;
    --bs-primary-rgb: 54, 94, 145;
    --bs-link-color: #365e91;
    --bs-link-color-rgb: 54, 94, 145;
    --bs-link-hover-color: #24466f;
    --bs-link-hover-color-rgb: 36, 70, 111;
    --bs-border-color: #d8e0e9;
    --bs-secondary-color: #64748b;
    --bs-body-color: #334155;
    --bs-body-bg: #f3f5f9;
    --bs-body-font-family: system-ui, -apple-system, "Segoe UI",
        "Microsoft YaHei", "PingFang SC", sans-serif;

    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-family: var(--bs-body-font-family);
    line-height: 1.65;
}

.blog-site :is(h1, h2, h3, h4, h5, h6) {
    color: #1e293b;
}

.blog-site a {
    text-underline-offset: 0.2em;
    transition: color 160ms ease, background-color 160ms ease;
}

.blog-site a:focus-visible,
.blog-site button:focus-visible {
    outline: 3px solid #5275a4;
    outline-offset: 3px;
}

.blog-site .row > *,
.blog-site .navbar-collapse {
    min-width: 0;
}

.blog-panel {
    min-width: 0;
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    box-shadow: 0 3px 14px rgb(30 41 59 / 4%);
}

.blog-header {
    background: #fff;
    border-bottom: 1px solid var(--bs-border-color);
}

.blog-header .navbar {
    --bs-navbar-color: #526174;
    --bs-navbar-hover-color: #24466f;
    --bs-navbar-active-color: #24466f;
    --bs-navbar-brand-color: #1e293b;
    --bs-navbar-brand-hover-color: #365e91;
}

.blog-header .navbar-brand {
    max-width: calc(100% - 4rem);
    white-space: normal;
    overflow-wrap: anywhere;
    letter-spacing: 0.02em;
}

.blog-header .nav-link {
    padding-inline: 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.9375rem;
    white-space: nowrap;
}

.blog-header .navbar-toggler {
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
}

.blog-header .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgb(54 94 145 / 15%);
}

.blog-header .nav-link:hover,
.blog-header .nav-link.active {
    background: #edf2f8;
}

.blog-header .nav-link.active {
    font-weight: 600;
}

.blog-search {
    width: 100%;
    min-width: 0;
}

.blog-search .form-control {
    width: 0;
    min-width: 0;
    flex: 1;
}

.blog-list-heading {
    padding-left: 0.8rem;
    border-left: 3px solid #365e91;
    font-weight: 650;
    line-height: 1.4;
}

.blog-post-item h2 {
    line-height: 1.55;
    font-weight: 600;
}

.blog-post-link {
    color: #1e293b;
}

.blog-post-link:hover,
.blog-post-link:focus-visible {
    color: #365e91;
    text-decoration: underline !important;
}

.blog-post-item .small {
    font-size: 0.8125rem;
}

.blog-sidebar-panel h2 {
    font-size: 1rem;
    font-weight: 650;
}

.blog-sidebar-panel li {
    align-items: baseline;
    font-size: 0.875rem;
}

.blog-sidebar-panel li > a {
    min-width: 0;
    color: #526174;
    border-radius: 0.25rem;
}

.blog-sidebar-panel li > a:hover {
    color: #365e91;
}

.blog-sidebar-panel a[aria-current="page"] {
    background: #edf2f8;
    color: #24466f;
    font-weight: 600;
    box-shadow: 0 0 0 3px #edf2f8;
}

.blog-sidebar-panel li > span {
    min-width: 1.75rem;
    padding: 0.1rem 0.4rem;
    border-radius: 0.375rem;
    background: #f1f5f9;
    font-size: 0.75rem;
    text-align: center;
}

.blog-article-title {
    margin-top: 0;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    line-height: 1.45;
    font-weight: 650;
}

.blog-site .form-control,
.blog-site .form-select {
    background-color: #fff;
    border-color: #cbd5e1;
    border-radius: 0.375rem;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.blog-site .form-control:focus,
.blog-site .form-select:focus {
    border-color: #5275a4;
    box-shadow: 0 0 0 0.2rem rgb(54 94 145 / 15%);
}

.blog-site .btn {
    border-radius: 0.375rem;
    transition: color 160ms ease, background-color 160ms ease,
        border-color 160ms ease, box-shadow 160ms ease;
}

.blog-site .btn-primary {
    --bs-btn-bg: #365e91;
    --bs-btn-border-color: #365e91;
    --bs-btn-hover-bg: #24466f;
    --bs-btn-hover-border-color: #24466f;
    --bs-btn-active-bg: #24466f;
    --bs-btn-active-border-color: #24466f;
    --bs-btn-disabled-bg: #365e91;
    --bs-btn-disabled-border-color: #365e91;
    --bs-btn-focus-shadow-rgb: 54, 94, 145;
}

.blog-site .btn-outline-primary {
    --bs-btn-color: #365e91;
    --bs-btn-border-color: #365e91;
    --bs-btn-hover-bg: #365e91;
    --bs-btn-hover-border-color: #365e91;
    --bs-btn-active-bg: #24466f;
    --bs-btn-active-border-color: #24466f;
    --bs-btn-disabled-color: #365e91;
    --bs-btn-disabled-border-color: #365e91;
    --bs-btn-focus-shadow-rgb: 54, 94, 145;
}

.blog-site .pagination {
    --bs-pagination-color: #365e91;
    --bs-pagination-hover-color: #24466f;
    --bs-pagination-hover-bg: #edf2f8;
    --bs-pagination-focus-color: #24466f;
    --bs-pagination-focus-bg: #edf2f8;
    --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgb(54 94 145 / 15%);
    --bs-pagination-active-bg: #365e91;
    --bs-pagination-active-border-color: #365e91;

    flex-wrap: wrap;
    gap: 0.25rem;
}

.blog-site .pagination .page-item .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    border-radius: 0.375rem;
    min-width: 2rem;
}

.blog-site #comments {
    font-size: 0.9375rem;
}

.blog-site #comments-heading {
    font-weight: 650;
}

.blog-comment,
.blog-comment-form {
    scroll-margin-top: 1.5rem;
}

.blog-comment:target {
    outline: 2px solid #5275a4;
    outline-offset: 5px;
    border-radius: 0.375rem;
}

.blog-comment > header,
.blog-comment-body,
.blog-field-message,
.blog-form-help {
    overflow-wrap: anywhere;
}

.blog-comment-body {
    margin-bottom: 0.5rem;
}

.blog-comment-form {
    padding: 1.5rem;
    background: #f8fafc;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
}

.blog-comment-form .form-label {
    font-size: 0.875rem;
    font-weight: 600;
}

.blog-comment-form textarea.form-control {
    line-height: 1.75;
    resize: vertical;
}

.blog-site .blog-field-error .form-control {
    border-color: #b02a37;
}

.blog-site .blog-field-error .form-control:focus {
    border-color: #b02a37;
    box-shadow: 0 0 0 0.2rem rgb(176 42 55 / 15%);
}

.blog-site .blog-quote-controls {
    padding: 1rem;
    background: #edf2f8;
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
}

.blog-site #quote-selection-preview {
    margin-bottom: 0.75rem;
    background: transparent;
}

.blog-form-help {
    line-height: 1.8;
}

.blog-empty-state {
    padding: 1.5rem 1rem;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 0.5rem;
    text-align: center;
    overflow-wrap: anywhere;
}

.blog-list-description {
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.blog-site #comments article > header time {
    font-size: 0.8125rem;
}

.blog-site #comments blockquote {
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 0 0.375rem 0.375rem 0;
}

.blog-site .modal-content {
    border-color: var(--bs-border-color);
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 12px 40px rgb(30 41 59 / 14%);
}

.blog-site .modal-body {
    min-width: 0;
    padding: 1.5rem;
}

.blog-site > footer {
    line-height: 1.8;
}

@media (min-width: 992px) {
    .blog-header .navbar-collapse {
        flex-wrap: wrap;
        row-gap: 0.75rem;
    }

    .blog-header .navbar-nav {
        flex-wrap: wrap;
    }

    .blog-search {
        width: 13rem;
        flex: 0 0 13rem;
    }
}

@media (max-width: 991.98px) {
    .blog-header .navbar-nav {
        gap: 0.25rem;
        padding-top: 0.75rem;
    }

    .blog-header .nav-link {
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    .blog-search .form-control,
    .blog-search .btn {
        min-height: 44px;
    }
}

@media (max-width: 575.98px) {
    .blog-panel {
        border-radius: 0.5rem;
    }

    .blog-site .modal-body {
        padding: 1rem;
    }

    .blog-site .form-control,
    .blog-site .form-select {
        font-size: 1rem;
    }

    .blog-site .pagination .page-link {
        min-width: 44px;
        min-height: 44px;
    }

    .blog-site .modal-footer .btn,
    .blog-site #comments .btn {
        min-height: 44px;
    }

    .blog-comment-form {
        padding: 1rem;
    }

    .blog-comment-form button[type="submit"] {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .blog-site *,
    .blog-site *::before,
    .blog-site *::after {
        transition: none !important;
        animation: none !important;
    }
}