/* ==========================================================================
   预测豆 · 清爽浅色主题（靛蓝主色）
   覆盖 base.css / detail.css 的旧样式，不改响应式断点结构
   ========================================================================== */
:root {
    --primary: #4c6ef5;
    --primary-dark: #3b5bdb;
    --primary-soft: #edf2ff;
    --text-main: #2b2f36;
    --text-muted: #868e96;
    --bg-page: #f4f6fb;
    --card-bg: #ffffff;
    --radius: 12px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .07);
    --shadow-md: 0 8px 20px -6px rgba(16, 24, 40, .14);
}

/* ---------- 全局 ---------- */
body {
    background-color: var(--bg-page);
    color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
        "Microsoft YaHei", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a {
    transition: color .2s ease;
}

a:hover {
    color: var(--primary);
}

::selection {
    background: var(--primary);
    color: #fff;
}

/* ---------- 按钮 / 表单 ---------- */
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline-primary:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.btn-primary,
.btn-outline-primary {
    border-radius: 999px;
    transition: all .2s ease;
}

.btn-secondary {
    border-radius: 0 999px 999px 0;
}

.form-control {
    border-radius: 8px;
    border-color: #e2e6ee;
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(76, 110, 245, .15);
}

/* ---------- 顶部导航（浅色） ---------- */
.blog-navbar {
    background-color: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .04);
}

.blog-navbar .brand-logo {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--primary);
}

.blog-navbar .brand-logo::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--primary), #9775fa);
    transform: rotate(45deg) translateY(-1px);
}

.blog-navbar .nav-link {
    color: #495057 !important;
    font-weight: 500;
    position: relative;
    transition: color .2s ease;
}

.blog-navbar .nav-link:hover {
    color: var(--primary) !important;
}

.blog-navbar .nav-item a.active,
.blog-navbar .nav-link.active {
    color: var(--primary) !important;
    font-weight: 600;
}

.blog-navbar .nav-link.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%);
    width: 18px;
    height: 3px;
    border-radius: 2px;
    background: var(--primary);
}

.blog-navbar .btn {
    border-radius: 999px;
    padding: .3rem 1.1rem;
}

.blog-navbar .dropdown-menu {
    background-color: #fff;
    border: none;
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    padding: .5rem 0;
}

.blog-navbar .dropdown-item {
    color: #495057 !important;
}

.blog-navbar .dropdown-item:hover {
    background-color: var(--primary-soft);
    color: var(--primary) !important;
}

.get-msg {
    background: var(--primary);
}

/* ---------- 通用卡片 ---------- */
.card {
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    background-color: var(--card-bg);
}

.card .card-header {
    background: transparent;
    border: none;
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--text-main);
    position: relative;
    padding-left: .95rem;
}

.card .card-header::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 1.05em;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--primary), #9775fa);
}

/* ---------- 轮播图 ---------- */
.blog-carousel .carousel {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.blog-carousel .carousel-item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 45%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(20, 24, 40, .55));
    pointer-events: none;
}

.blog-carousel .carousel-caption {
    text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
    z-index: 2;
}

.blog-carousel .carousel-indicators li {
    border: none;
    background-color: rgba(255, 255, 255, .55);
    transition: all .25s ease;
}

.blog-carousel .carousel-indicators .active {
    background-color: #fff;
    width: 18px;
}

/* ---------- 文章列表 ---------- */
.choice .active {
    color: var(--primary);
    border-bottom: 2px solid var(--primary);
}

.summary-list .media {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1rem;
    margin-bottom: 1rem;
    transition: transform .25s ease, box-shadow .25s ease;
}

.summary-list .media:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.summary-list .article-img.img-thumbnail,
.summary-list img.article-img {
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
}

.summary-list h5 a {
    color: var(--text-main);
}

.summary-list h5 a:hover {
    color: var(--primary);
}

.summary-list .cate {
    color: var(--primary);
}

.summary-list .cate:hover {
    color: var(--primary-dark);
}

/* 列表区上方的留白 */
main > .container > .row {
    margin-top: .25rem;
}

/* ---------- 标签云（多彩胶囊，9 色轮转） ---------- */
.card-body a.tags,
.tag-cloud a.tags {
    color: #fff;
    border-radius: 999px;
    padding: .18rem .75rem;
    margin: .25rem;
    font-weight: 500;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    transition: all .2s ease;
}

.card-body a.tags:nth-child(9n+1),
.tag-cloud a.tags:nth-child(9n+1) {
    background: #748ffc;
}

.card-body a.tags:nth-child(9n+2),
.tag-cloud a.tags:nth-child(9n+2) {
    background: #ffa94d;
}

.card-body a.tags:nth-child(9n+3),
.tag-cloud a.tags:nth-child(9n+3) {
    background: #69db7c;
}

.card-body a.tags:nth-child(9n+4),
.tag-cloud a.tags:nth-child(9n+4) {
    background: #4dabf7;
}

.card-body a.tags:nth-child(9n+5),
.tag-cloud a.tags:nth-child(9n+5) {
    background: #f783ac;
}

.card-body a.tags:nth-child(9n+6),
.tag-cloud a.tags:nth-child(9n+6) {
    background: #38d9a9;
}

.card-body a.tags:nth-child(9n+7),
.tag-cloud a.tags:nth-child(9n+7) {
    background: #9775fa;
}

.card-body a.tags:nth-child(9n+8),
.tag-cloud a.tags:nth-child(9n+8) {
    background: #ff8787;
}

.card-body a.tags:nth-child(9n+9),
.tag-cloud a.tags:nth-child(9n+9) {
    background: #3bc9db;
}

.card-body a.tags:hover,
.tag-cloud a.tags:hover {
    color: #fff;
    transform: translateY(-2px);
    filter: brightness(.92);
}

/* 详情页正文下的关键词 */
#article .tag-cloud a {
    display: inline-block;
    background: var(--primary-soft);
    color: var(--primary-dark);
    border-radius: 999px;
    padding: .15rem .7rem;
    margin: .2rem .25rem 0 0;
}

#article .tag-cloud a:hover {
    background: var(--primary);
    color: #fff;
}

/* ---------- 分页 ---------- */
.page-link {
    color: var(--primary);
    border: none;
    border-radius: 8px;
    margin: 0 2px;
}

.page-item.active .page-link {
    background-color: var(--primary);
    border-color: var(--primary);
}

.page-link:hover {
    color: var(--primary-dark);
    background-color: var(--primary-soft);
}

/* ---------- 引用块 ---------- */
blockquote {
    border-left: 4px solid var(--primary);
    background: var(--primary-soft);
    border-radius: 0 8px 8px 0;
    color: #495057;
}

/* ---------- 文章详情页 ---------- */
.breadcrumb {
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
}

.breadcrumb-item a {
    color: var(--text-muted);
}

.breadcrumb-item a:hover {
    color: var(--primary);
}

#article .card-body {
    padding: 1.5rem 1.25rem;
}

#article .card-title {
    color: var(--text-main);
    font-size: 1.55rem;
    line-height: 1.4;
}

#article .card-body > .text-center.f-13 {
    color: var(--text-muted);
}

#article .card-body > hr {
    border-top: 1px solid #edf0f5;
}

#article .article-body a {
    color: var(--primary);
}

#article .article-body a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

#article .article-body h2 {
    border-left: 5px solid var(--primary);
    background-color: var(--primary-soft);
    border-radius: 0 8px 8px 0;
}

#article .article-body table th {
    background-color: var(--primary);
    border-color: var(--primary-dark);
}

#article .article-body table td {
    border-color: #dee2e6;
}

#article .article-body code,
.article-body code {
    background-color: #eef1f6;
    color: #d6336c;
}

#article .article-body .codehilite pre,
.codehilite pre {
    background-color: #f1f3f9;
    border-radius: 8px;
}

/* 上一篇 / 下一篇 */
#article .more-page a {
    display: inline-block;
    background: var(--primary-soft);
    color: var(--primary-dark);
    border-radius: 999px;
    padding: .4rem 1rem;
    transition: all .2s ease;
}

#article .more-page a:hover {
    background: var(--primary);
    color: #fff;
}

/* ---------- 覆盖残留的青色(text-info/btn-info/#00AAEE) ---------- */
.text-info {
    color: var(--primary) !important;
}

.btn-info {
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-info:hover,
.btn-info:focus {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

.description {
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.description strong {
    border-bottom-color: var(--primary);
}

#category-card .badge,
.badge-info {
    background-color: var(--primary);
}

/* ---------- 动弹/吐槽列表 ---------- */
#comment-list h2 {
    color: var(--text-main);
}

#comment-list .comment-parent {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
    transition: transform .25s ease, box-shadow .25s ease;
}

#comment-list .comment-parent:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

#comment-list .comment-parent hr {
    border-top: 1px solid #edf0f5;
    margin-bottom: 0;
}

#comment-list .comment-parent .rep-btn {
    color: var(--primary);
}

#comment-list .comment-body img {
    max-width: 100%;
    border-radius: 8px;
}

/* ---------- 画廊页（GDP 图表） ---------- */
.gallery-block {
    padding-top: 1.5rem;
}

.gallery-block .chart-container {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1rem;
    overflow: hidden;
}

/* ---------- 回到顶部 ---------- */
#to-top {
    background-color: var(--primary);
    border-color: var(--primary);
    opacity: .55;
    box-shadow: var(--shadow-md);
}

#to-top:hover {
    opacity: 1;
}

/* ---------- 页脚（浅色） ---------- */
.site-footer {
    background: #fff;
    border-top: 1px solid #e9edf3;
    margin-top: 2.5rem;
}

.site-footer p {
    color: var(--text-muted);
    font-size: .85rem;
}

.site-footer a {
    color: #5b6472;
}

.site-footer a:hover {
    color: var(--primary);
}

/* ---------- 响应式微调（沿用原断点） ---------- */
@media (min-width: 768px) {
    .summary-list .media {
        padding: 1.25rem 1.4rem;
    }

    #article .card-body {
        padding: 2rem 2.5rem;
    }
}

@media (max-width: 767.98px) {
    body {
        padding-top: 3.4rem;
    }

    .blog-navbar .nav-link.active::after {
        left: 0;
        transform: none;
    }
}