/* ============================================================
   brand.css · 品牌页面特有样式（完美还原内联样式）
   ============================================================ */

/* ---------- 页面布局 ---------- */
.page-layout {
    display: grid;
    grid-template-columns: 2fr 1fr; /* 品牌页的 2:1 比例 */
    gap: 30px;
}

/* 终极方案：使用 flex 布局忽略换行符 */
.article-detail .detail-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    white-space: normal !important;
    line-height: 1.7 !important;
}

/* 每个段落作为 flex 项 */
.article-detail .detail-body p {
    flex-shrink: 0 !important;
    margin: 0 0 0.1em 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* 隐藏所有换行标签 */
.article-detail .detail-body br {
    display: none !important;
}
/* ---------- 左侧内容通用区块 ---------- */
.main-content .section-title {
    font-size: 22px;
    font-weight: 700;
    color: #0b2a4a;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #eef3fa;
}
.main-content .section-title i {
    color: #1a5fc7;
    font-size: 22px;
}
.main-content .section-title .more {
    margin-left: auto;
    font-size: 14px;
    font-weight: 500;
    color: #6b7f98;
}
.main-content .section-title .more i {
    font-size: 12px;
    color: #6b7f98;
}

/* ---------- 课程介绍 ---------- */
.course-intro {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #eef3fa;
    padding: 28px 30px;
    margin-bottom: 24px;
    transition: box-shadow 0.2s;
}
.course-intro:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}
.course-intro .course-tag {
    display: inline-block;
    background: #fff0e6;
    color: #e06b3a;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 14px;
    border-radius: 30px;
    margin-bottom: 8px;
    border: 1px solid #fbdccc;
}
.course-intro h3 {
    font-size: 20px;
    font-weight: 700;
    color: #0b2a4a;
    margin-bottom: 6px;
}
.course-intro .course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    font-size: 14px;
    color: #6b7f98;
    margin-bottom: 12px;
}
.course-intro .course-meta span i {
    color: #1a5fc7;
    margin-right: 4px;
}
.course-intro .course-desc {
    font-size: 15px;
    color: #3f556b;
    line-height: 1.8;
}
.course-intro .course-desc .highlight-box {
    background: #f8fbff;
    border-left: 4px solid #1a5fc7;
    padding: 12px 18px;
    border-radius: 8px;
    margin: 12px 0;
    font-size: 14px;
}
.course-intro .course-desc .highlight-box strong {
    color: #1a5fc7;
}

/* ---------- 热门课程卡片 ---------- */
.course-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 30px;
}
.course-card-item {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #eef3fa;
    overflow: hidden;
    transition: all 0.3s ease;
    text-align: center;
}
.course-card-item:hover {
    border-color: #c8d9f0;
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
}
.course-card-item .card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #f0f4fa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #eef3fa;
    position: relative;
    overflow: hidden;
}
.course-card-item .card-image .placeholder-icon {
    font-size: 40px;
    color: #c8d9f0;
    margin-bottom: 6px;
}
.course-card-item .card-image .placeholder-text {
    font-size: 14px;
    color: #b0c8e0;
    font-weight: 500;
}
.course-card-item .card-info {
    padding: 18px 16px 20px;
}
.course-card-item .card-info .cname {
    font-size: 18px;
    font-weight: 700;
    color: #0b2a4a;
    line-height: 1.3;
}
.course-card-item .card-info .ctag {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #1a5fc7;
    background: #eef4fe;
    padding: 2px 14px;
    border-radius: 30px;
}
.course-card-item .card-info .ctag.hot {
    background: #fff0e6;
    color: #e06b3a;
}
.course-card-item .card-info .ctag.special {
    background: #e3f0fa;
    color: #1a6b8a;
}
.course-card-item .card-info .cdesc {
    font-size: 14px;
    color: #6b7f98;
    margin-top: 6px;
    line-height: 1.5;
}

/* ---------- 内容板块：学校简介、师资、问答、口碑 ---------- */
.content-block {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #eef3fa;
    padding: 28px 30px;
    margin-bottom: 24px;
    transition: box-shadow 0.2s;
    scroll-margin-top: 80px;
}
.content-block:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}
.content-block .block-title {
    font-size: 20px;
    font-weight: 700;
    color: #0b2a4a;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f4fa;
}
.content-block .block-title i {
    color: #1a5fc7;
    font-size: 22px;
}
.content-block .block-title .more-link {
    margin-left: auto;
    font-size: 14px;
    font-weight: 500;
    color: #6b7f98;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s;
}
.content-block .block-title .more-link:hover {
    color: #1a5fc7;
}
.content-block .block-title .more-link i {
    font-size: 12px;
    color: inherit;
}
.content-block .block-body {
    font-size: 15px;
    color: #3f556b;
    line-height: 1.9;
}
.content-block .block-body p {
    margin-bottom: 12px;
}
.content-block .block-body .highlight-box {
    background: #f8fbff;
    border-left: 4px solid #1a5fc7;
    padding: 12px 18px;
    border-radius: 8px;
    margin: 12px 0;
}
.content-block .block-body .highlight-box strong {
    color: #1a5fc7;
}

/* ---------- 师资力量 ---------- */
.teacher-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 6px;
}
.teacher-item {
    background: #f8fbff;
    border-radius: 14px;
    padding: 16px 14px;
    text-align: center;
    border: 1px solid #eef3fa;
    transition: all 0.2s;
}
.teacher-item:hover {
    background: #ffffff;
    border-color: #c8d9f0;
    transform: translateY(-2px);
}
.teacher-item .avatar {
    width: 56px;
    height: 56px;
    background: #eef4fe;
    border-radius: 50%;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b0c8e0;
    font-size: 24px;
}
.teacher-item .tname {
    font-weight: 700;
    color: #0b2a4a;
    font-size: 15px;
}
.teacher-item .ttitle {
    font-size: 13px;
    color: #6b7f98;
}

/* ---------- 学员问答 ---------- */
.qa-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.qa-item {
    background: #f8fbff;
    border-radius: 14px;
    padding: 16px 18px;
    border: 1px solid #eef3fa;
    transition: all 0.2s;
    cursor: default;
}
.qa-item:hover {
    background: #ffffff;
    border-color: #c8d9f0;
    transform: translateY(-2px);
}
.qa-item .qtop {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 6px;
}
.qa-item .qtop .qicon {
    color: #ff6b4a;
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}
.qa-item .qtop .qtext {
    font-size: 15px;
    font-weight: 600;
    color: #0b2a4a;
}
.qa-item .qtop .tag {
    font-size: 11px;
    font-weight: 600;
    color: #1a5fc7;
    background: #eef4fe;
    padding: 1px 10px;
    border-radius: 30px;
    margin-left: 6px;
    flex-shrink: 0;
}
.qa-item .qanswer {
    font-size: 14px;
    color: #5a6a7e;
    line-height: 1.6;
    padding-left: 26px;
}

/* ---------- 口碑评价 ---------- */
.review-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.review-item {
    background: #f8fbff;
    border-radius: 14px;
    padding: 16px 18px;
    border: 1px solid #eef3fa;
    transition: all 0.2s;
}
.review-item:hover {
    background: #ffffff;
    border-color: #c8d9f0;
}
.review-item .stars {
    color: #f5a623;
    font-size: 14px;
    margin-bottom: 4px;
}
.review-item .rtext {
    font-size: 14px;
    color: #3f556b;
    line-height: 1.6;
}
.review-item .ruser {
    font-size: 13px;
    color: #6b7f98;
    margin-top: 6px;
    font-weight: 500;
}

/* ---------- 侧边栏 ---------- */
.sidebar .side-card {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #eef3fa;
    padding: 24px 24px 28px;
    margin-bottom: 24px;
}
.sidebar .side-card .side-title {
    font-size: 17px;
    font-weight: 700;
    color: #0b2a4a;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f4fa;
}
.sidebar .side-card .side-title i {
    color: #1a5fc7;
    font-size: 18px;
}
.sidebar .side-card .side-title .hot {
    color: #ff6b4a;
    font-size: 13px;
    margin-left: auto;
}

/* 侧边栏表单 */
.booking-form-side .form-group {
    margin-bottom: 14px;
}
.booking-form-side .form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #0b2a4a;
    margin-bottom: 4px;
}
.booking-form-side .form-group label .required {
    color: #e06b3a;
    margin-left: 2px;
}
.booking-form-side .form-group input,
.booking-form-side .form-group textarea,
.booking-form-side .form-group select {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    font-family: inherit;
    color: #1d334a;
    background: #f8fbff;
    border: 1px solid #d4e2f7;
    border-radius: 12px;
    outline: none;
    transition: all 0.2s;
}
.booking-form-side .form-group input:focus,
.booking-form-side .form-group textarea:focus,
.booking-form-side .form-group select:focus {
    border-color: #1a5fc7;
    box-shadow: 0 0 0 3px rgba(26, 95, 199, 0.08);
    background: #ffffff;
}
.booking-form-side .form-group input.error,
.booking-form-side .form-group select.error {
    border-color: #e06b3a;
    box-shadow: 0 0 0 3px rgba(224, 107, 58, 0.10);
}
.booking-form-side .form-group .error-msg {
    color: #e06b3a;
    font-size: 12px;
    margin-top: 4px;
    display: none;
}
.booking-form-side .form-group .error-msg.show {
    display: block;
}
.booking-form-side .form-group textarea {
    resize: vertical;
    min-height: 60px;
}
.radio-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.radio-group .radio-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #1d334a;
    cursor: pointer;
}
.radio-group .radio-option input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #1a5fc7;
    cursor: pointer;
    flex-shrink: 0;
}
.radio-group .radio-option input[type="radio"]:checked+span {
    color: #1a5fc7;
    font-weight: 600;
}
.captcha {
    display: flex;
    align-items: center;
    gap: 10px;
}
.captcha input {
    flex: 1;
}
.captcha .code {
    font-weight: 700;
    font-size: 22px;
    color: #1a5fc7;
    background: #eef4fe;
    padding: 6px 16px;
    border-radius: 10px;
    letter-spacing: 4px;
    font-family: 'Courier New', monospace;
    cursor: pointer;
    user-select: none;
    border: 1px solid #d4e2f7;
    min-width: 80px;
    text-align: center;
}
.captcha .code:hover {
    background: #e0eaff;
}
.btn-submit-form {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #1a5fc7, #4a8de8);
    color: #fff;
    border: none;
    border-radius: 60px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 16px rgba(26, 95, 199, 0.2);
}
.btn-submit-form:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(26, 95, 199, 0.3);
}
.form-submit-hint {
    text-align: center;
    font-size: 12px;
    color: #8a9bb0;
    margin-top: 10px;
}
.form-submit-hint i {
    color: #2a9d8f;
    margin-right: 4px;
}

/* 热门课程 */
.hot-course-list .hot-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f5f8fc;
    transition: all 0.2s;
    cursor: pointer;
}
.hot-course-list .hot-item:last-child {
    border-bottom: none;
}
.hot-course-list .hot-item:hover {
    color: #1a5fc7;
    padding-left: 4px;
}
.hot-course-list .hot-item .index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #eef4fe;
    color: #1a5fc7;
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
    flex-shrink: 0;
}
.hot-course-list .hot-item .index.top1 {
    background: #ff6b4a;
    color: #fff;
}
.hot-course-list .hot-item .index.top2 {
    background: #f5a623;
    color: #fff;
}
.hot-course-list .hot-item .index.top3 {
    background: #4a8de8;
    color: #fff;
}
.hot-course-list .hot-item .cname {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #1d334a;
}
.hot-course-list .hot-item .cname:hover {
    color: #1a5fc7;
}

/* 校区导航 */
.campus-nav-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.campus-nav-list a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #f8fbff;
    border-radius: 10px;
    font-size: 14px;
    color: #2d4059;
    transition: all 0.2s;
    border: 1px solid #eef3fa;
}
.campus-nav-list a:hover {
    background: #ffffff;
    border-color: #c8d9f0;
    color: #1a5fc7;
}
.campus-nav-list a i {
    color: #1a5fc7;
    font-size: 14px;
}


/* ============================================================
   完美同步：响应式断点适配
   ============================================================ */
@media (max-width: 1024px) {
    .page-layout {
        grid-template-columns: 1fr;
    }
    .teacher-list {
        grid-template-columns: repeat(2, 1fr);
    }
    .qa-list {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .course-card-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .teacher-list {
        grid-template-columns: 1fr 1fr;
    }
    .qa-list {
        grid-template-columns: 1fr;
    }
    .review-list {
        grid-template-columns: 1fr;
    }
    .campus-nav-list {
        grid-template-columns: 1fr 1fr;
    }
    .radio-group {
        flex-direction: column;
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .course-intro {
        padding: 20px 16px;
    }
    .course-intro h3 {
        font-size: 17px;
    }
    .course-card-item .card-info .cname {
        font-size: 16px;
    }
    .teacher-list {
        grid-template-columns: 1fr 1fr;
    }
    .campus-nav-list {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    .campus-nav-list a {
        font-size: 13px;
        padding: 6px 10px;
    }
    .qa-item .qtop {
        flex-wrap: wrap;
    }
    .qa-item .qanswer {
        padding-left: 0;
    }
}
/* ============================================================
   增加整体内容板块与导航之间的间距
   ============================================================ */
.page-main {
    padding-top: 50px; /* 原来是 30px，现在加宽到 50px，给顶部留出更多呼吸感 */
}
/* ============================================================
   品牌列表页专有样式（提取自内联 CSS，完美兼容列表页结构）
   ============================================================ */

/* ---------- 列表页顶部内边距 ---------- */
.page-main {
    padding: 30px 0 40px;
}

/* ---------- 文章列表 ---------- */
.article-list-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.article-list-item {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #eef3fa;
    padding: 18px 22px;
    transition: all 0.3s ease;
}
.article-list-item:hover {
    border-color: #c8d9f0;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
    transform: translateY(-2px);
}
.article-list-item .item-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.article-list-item .item-header .title {
    font-size: 18px;
    font-weight: 700;
    color: #0b2a4a;
    line-height: 1.3;
}
.article-list-item .item-header .tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #1a5fc7;
    background: #eef4fe;
    padding: 2px 14px;
    border-radius: 30px;
    flex-shrink: 0;
}
.article-list-item .item-header .tag.hot {
    background: #fff0e6;
    color: #e06b3a;
}
.article-list-item .item-header .tag.special {
    background: #e3f0fa;
    color: #1a6b8a;
}
.article-list-item .summary {
    font-size: 14px;
    color: #5a6a7e;
    line-height: 1.7;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.article-list-item .item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.article-list-item .item-footer .btn-detail {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #1a5fc7;
    border: 1px solid #d4e2f7;
    padding: 4px 20px;
    border-radius: 30px;
    background: #fff;
    transition: all 0.2s;
    cursor: pointer;
}
.article-list-item .item-footer .btn-detail:hover {
    background: #1a5fc7;
    color: #fff;
    border-color: #1a5fc7;
    box-shadow: 0 4px 12px rgba(26, 95, 199, 0.2);
}
.article-list-item .item-footer .meta {
    font-size: 13px;
    color: #8a9bb0;
}

/* ---------- 分页 ---------- */
.pagination-static {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #eef3fa;
    flex-wrap: wrap;
}
.pagination-static .page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid #d4e2f7;
    background: #ffffff;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    color: #2d4059;
    transition: all 0.2s ease;
    cursor: default;
    user-select: none;
}
.pagination-static .page-btn.active {
    background: #1a5fc7;
    color: #fff;
    border-color: #1a5fc7;
}
.pagination-static .page-btn.disabled {
    opacity: 0.4;
    cursor: default;
}
.pagination-static .page-btn.ellipsis {
    border: none;
    background: transparent;
    color: #6b7f98;
    min-width: 30px;
    padding: 0 4px;
}
.pagination-static .page-info {
    font-size: 13px;
    color: #8a9bb0;
    margin-left: 6px;
}

/* ---------- 列表页侧边栏专有：学员问答 ---------- */
.faq-list .faq-item {
    padding: 12px 0;
    border-bottom: 1px solid #f5f8fc;
    transition: all 0.2s;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.faq-list .faq-item:last-child {
    border-bottom: none;
}
.faq-list .faq-item:hover {
    color: #1a5fc7;
    padding-left: 4px;
}
.faq-list .faq-item .qicon {
    color: #ff6b4a;
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}
.faq-list .faq-item .qtext {
    font-size: 14px;
    font-weight: 500;
    color: #1d334a;
    line-height: 1.4;
}
.faq-list .faq-item .qtext:hover {
    color: #1a5fc7;
}
.faq-list .faq-item .qtag {
    font-size: 11px;
    font-weight: 600;
    color: #1a5fc7;
    background: #eef4fe;
    padding: 1px 10px;
    border-radius: 30px;
    margin-left: 6px;
    flex-shrink: 0;
}

/* ---------- 列表页侧边栏专有：口碑评价 ---------- */
.review-side-list .review-side-item {
    padding: 12px 0;
    border-bottom: 1px solid #f5f8fc;
    transition: all 0.2s;
}
.review-side-list .review-side-item:last-child {
    border-bottom: none;
}
.review-side-list .review-side-item:hover {
    padding-left: 4px;
}
.review-side-list .review-side-item .stars {
    color: #f5a623;
    font-size: 13px;
    margin-bottom: 2px;
}
.review-side-list .review-side-item .rtext {
    font-size: 14px;
    color: #3f556b;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.review-side-list .review-side-item .ruser {
    font-size: 12px;
    color: #8a9bb0;
    margin-top: 2px;
    font-weight: 500;
}


/* ============================================================
   手机端响应式适配补全
   ============================================================ */
@media (max-width: 768px) {
    .article-list-item {
        padding: 14px 16px;
    }
    .article-list-item .item-header .title {
        font-size: 16px;
    }
    .pagination-static .page-btn {
        min-width: 32px;
        height: 32px;
        font-size: 13px;
        padding: 0 10px;
    }
    .pagination-static .page-info {
        font-size: 12px;
    }
}
@media (max-width: 480px) {
    .article-list-item .item-footer {
        flex-direction: column;
        align-items: flex-start;
    }
    .article-list-item .item-footer .meta {
        font-size: 12px;
    }
    .pagination-static {
        gap: 5px;
    }
    .pagination-static .page-btn {
        min-width: 28px;
        height: 28px;
        font-size: 12px;
        padding: 0 8px;
    }
    .pagination-static .page-btn.ellipsis {
        min-width: 20px;
    }
    .pagination-static .page-info {
        font-size: 11px;
        margin-left: 4px;
    }
    .radio-group {
        flex-direction: column;
        gap: 6px;
    }
}
/* ============================================================
   1. 修复移动端：年级单选项强制在同一行
   ============================================================ */
@media (max-width: 480px) {
    .radio-group {
        flex-direction: row !important; /* 强制水平排列 */
        flex-wrap: wrap !important;     /* 允许换行防止溢出 */
        gap: 6px 12px !important;       /* 紧凑间隔 */
    }
}

/* ============================================================
   2. 列表图文混排样式（适配修改后的 HTML）
   ============================================================ */
.article-item {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #eef3fa;
    padding: 18px 20px;
    transition: all 0.3s ease;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 18px;
}
.article-item:last-child {
    margin-bottom: 0;
}
.article-item:hover {
    border-color: #c8d9f0;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
    transform: translateY(-2px);
}
.article-item.has-image .thumb {
    flex: 0 0 160px;
    aspect-ratio: 16 / 10;
    background: #f0f4fa;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #eef3fa;
    overflow: hidden;
}
.article-item.has-image .thumb .placeholder-icon {
    font-size: 28px;
    color: #c8d9f0;
    margin-bottom: 4px;
}
.article-item.has-image .thumb .placeholder-text {
    font-size: 12px;
    color: #b0c8e0;
    font-weight: 500;
}
.article-item .content {
    flex: 1;
    min-width: 0;
}
.article-item .content .title {
    font-size: 18px;
    font-weight: 700;
    color: #0b2a4a;
    line-height: 1.4;
    margin-bottom: 4px;
}
.article-item .content .title a:hover {
    color: #1a5fc7;
}
.article-item .content .summary {
    font-size: 14px;
    color: #5a6a7e;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px;
}
.article-item .content .meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: #8a9bb0;
    flex-wrap: wrap;
}
.article-item .content .meta span i {
    margin-right: 4px;
}
.article-item .content .meta .tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #1a5fc7;
    background: #eef4fe;
    padding: 1px 12px;
    border-radius: 30px;
}
.article-item .content .meta .tag.hot {
    background: #fff0e6;
    color: #e06b3a;
}
.article-item .content .meta .tag.special {
    background: #e3f0fa;
    color: #1a6b8a;
}

/* 手机端图文排版适配 */
@media (max-width: 480px) {
    .article-item {
        flex-direction: column; /* 手机小屏变为上下排列 */
        padding: 14px 16px;
        margin-bottom: 12px;
    }
    .article-item.has-image .thumb {
        flex: 0 0 auto;
        width: 100%;
        aspect-ratio: 16 / 9;
    }
    .article-item .content .title {
        font-size: 16px;
    }
}
        .article-item.no-image .thumb {
            display: none !important;
        }
        .article-item.no-image .content {
            flex: 1 !important;
            width: 100% !important;
        }
        .article-item.no-image .content .summary {
            margin-right: 0;
        }
        /* ============================================================
   修复：侧边栏标题“更多”链接靠右对齐
   ============================================================ */
.sidebar .side-card .side-title .more-link {
    margin-left: auto;          /* 关键代码：将元素推到 flex 容器的最右侧 */
    font-size: 13px;
    font-weight: 500;
    color: #6b7f98;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s ease;
}
.sidebar .side-card .side-title .more-link:hover {
    color: #1a5fc7;             /* 悬停时变成主题蓝色 */
}
.sidebar .side-card .side-title .more-link i {
    font-size: 11px;            /* 统一右侧小箭头的尺寸 */
}
/* ============================================================
   LOGO 图片样式（替换原图标+文字样式）
   ============================================================ */
.main-header .logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.main-header .logo .logo-link {
    display: flex;
    align-items: center;
    line-height: 1;
    transition: opacity 0.25s ease;
    text-decoration: none;
}

.main-header .logo .logo-link:hover {
    opacity: 0.85;
}

.main-header .logo .logo-img {
    height: 50px;
    width: auto;
    max-height: 50px;
    display: block;
    object-fit: contain;
}

/* ---------- 移动端适配 ---------- */
@media (max-width: 768px) {
    .main-header .logo .logo-img {
        height: 40px;
        max-height: 40px;
    }
}

@media (max-width: 480px) {
    .main-header .logo .logo-img {
        height: 34px;
        max-height: 34px;
    }
}
/* ============================================================
   1. 内容页 Logo 区域适配
   ============================================================ */
/* ============================================================
   LOGO 区域：左图右文
   ============================================================ */
.main-header .logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.main-header .logo .logo-link {
    display: flex;
    align-items: center;
    gap: 12px;               /* 图片与文字间距 */
    text-decoration: none;
    line-height: 1;
    transition: opacity 0.2s ease;
}

.main-header .logo .logo-link:hover {
    opacity: 0.85;
}

/* ---- 图片 ---- */
.main-header .logo .logo-img {
    height: 50px;
    width: auto;
    max-height: 50px;
    display: block;
    object-fit: contain;
}

/* ---- 网站名称 ---- */
.main-header .logo .logo-text {
    font-size: 24px;
    font-weight: 800;
    color: #0b2a4a;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #1a5fc7, #4a8de8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    white-space: nowrap;
}

/* ============================================================
   移动端适配
   ============================================================ */
@media (max-width: 768px) {
    .main-header .logo .logo-img {
        height: 40px;
        max-height: 40px;
    }
    .main-header .logo .logo-text {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .main-header .logo .logo-img {
        height: 34px;
        max-height: 34px;
    }
    .main-header .logo .logo-text {
        font-size: 17px;
    }
    .main-header .logo .logo-link {
        gap: 8px;
    }
}

/* ============================================================
   2. 内容页 - 文章详情正文
   ============================================================ */
.article-detail {
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
    border-radius: 0;
}
.article-detail .detail-header {
    margin-bottom: 16px;
}
.article-detail .detail-header .title {
    font-size: 24px;
    font-weight: 700;
    color: #0b2a4a;
    line-height: 1.3;
    margin-bottom: 6px;
}
.article-detail .detail-header .meta {
    font-size: 14px;
    color: #8a9bb0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.article-detail .detail-header .meta .tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #1a5fc7;
    background: #eef4fe;
    padding: 1px 14px;
    border-radius: 30px;
}
.article-detail .detail-header .meta span i {
    margin-right: 4px;   /* ← 新增：图标与文字间距 */
}
.article-detail .detail-header .meta .tag.hot {
    background: #fff0e6;
    color: #e06b3a;
}
.article-detail .detail-body {
    font-size: inherit;
    color: #2d4059;
    line-height: 1.9;
}
.article-detail .detail-body p {
    margin-bottom: 0.8em;
}
.article-detail .detail-body h3 {
    font-size: 18px;
    font-weight: 700;
    color: #0b2a4a;
    margin: 1em 0 0.4em;
}
.article-detail .detail-body ul {
    padding-left: 24px;
    margin: 0.6em 0 0.8em;
}
.article-detail .detail-body ul li {
    margin-bottom: 4px;
}
.article-detail .detail-footer {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #eef3fa;
}
.article-detail .detail-footer .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.article-detail .detail-footer .tags .t {
    font-size: 13px;
    font-weight: 500;
    color: #1a5fc7;
    background: #eef4fe;
    padding: 2px 14px;
    border-radius: 30px;
}


/* ============================================================
   3. 内容页 - 相关推荐
   ============================================================ */
.related-section {
    margin-top: 24px;
}
.related-section .related-title {
    font-size: 18px;
    font-weight: 700;
    color: #0b2a4a;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f4fa;
    display: flex;
    align-items: center;
    gap: 10px;
}
.related-section .related-title i {
    color: #1a5fc7;
}
.related-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}
.related-item {
    background: #f8fbff;
    border-radius: 14px;
    border: 1px solid #eef3fa;
    padding: 16px 16px 14px;
    transition: all 0.2s;
    cursor: pointer;
}
.related-item:hover {
    background: #ffffff;
    border-color: #c8d9f0;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
}
.related-item .rtitle {
    font-size: 15px;
    font-weight: 600;
    color: #0b2a4a;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.related-item .rtitle:hover {
    color: #1a5fc7;
}
.related-item .rmeta {
    font-size: 13px;
    color: #8a9bb0;
    margin-top: 6px;
}
.related-item .rmeta i {
    margin-right: 4px;
}


/* ============================================================
   4. 移动端适配补充（针对内容页）
   ============================================================ */
@media (max-width: 1024px) {
    .related-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 768px) {
    .related-grid {
        grid-template-columns: 1fr;
    }
    .article-detail .detail-header .title {
        font-size: 20px;
    }
}
@media (max-width: 480px) {
    .article-detail .detail-header .title {
        font-size: 18px;
    }
}


/* ============================================================
   5. 侧边栏“更多”链接靠右对齐
   ============================================================ */
.sidebar .side-card .side-title .more-link {
    margin-left: auto;          /* 关键代码：将元素推到 flex 容器的最右侧 */
    font-size: 13px;
    font-weight: 500;
    color: #6b7f98;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s ease;
}
.sidebar .side-card .side-title .more-link:hover {
    color: #1a5fc7;             /* 悬停时变成主题蓝色 */
}
.sidebar .side-card .side-title .more-link i {
    font-size: 11px;            /* 统一右侧小箭头的尺寸 */
}
/* 导航栏 - 预约报名按钮徽标 */
.main-nav a.btn-nav {
    background: #1a5fc7;
    color: #fff;
    padding: 8px 22px;
    position: relative;
    border-radius: 30px;
    font-weight: 700;
}
.main-nav a.btn-nav:hover {
    background: #1550a8;
}
.main-nav a.btn-nav .badge {
    position: absolute;
    top: -8px;
    right: -10px;
    background: #ff6b4a;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 30px;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(255, 107, 74, 0.3);
}
/* ============================================================
   修复学员问答板块移动端排版错位
   ============================================================ */
@media (max-width: 480px) {
    .qa-item .qtop {
        flex-wrap: nowrap !important;
        align-items: center !important; /* 垂直居中对齐 */
        gap: 8px;
    }
    .qa-item .qtop .qicon {
        flex-shrink: 0;
        font-size: 15px;
        line-height: 1.5; /* 与标题行高一致 */
        margin-top: 0; /* 取消额外边距 */
        display: flex;
        align-items: center; /* 图标内部居中 */
    }
    .qa-item .qtop .qtext {
        flex: 1;
        min-width: 0;
        word-break: break-word;
        font-size: 14px;
        line-height: 1.5;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px; /* 标题与标签间距 */
    }
    .qa-item .qtop .qtext .tag {
        flex-shrink: 0;
        white-space: nowrap;
        font-size: 10px;
        padding: 1px 8px;
        vertical-align: middle;
        display: inline-block;
        line-height: 1.4;
    }
    .qa-item .qanswer {
        padding-left: 0;
        font-size: 13px;
    }
}
/* 课程卡片图片样式 */
.course-card-item .card-image .course-img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* 保持比例裁剪，铺满容器 */
    display: block;
}
/* ============================================================
   修复：文章详情换行 & 图标显示
   ============================================================ */

/* 正文换行修复 */
.article-detail .detail-body {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

.article-detail .detail-body p {
    margin-bottom: 0.8em;
}

.article-detail .detail-body br {
    display: block;
    content: "";
    margin: 0.2em 0;
}

/* 图标字体回退修复 */
.related-item .rmeta i,
.article-detail .detail-header .meta i,
.related-section .related-title i {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
}

/* 如果 Font Awesome 完全加载失败，用 emoji 或文本替代 */
.related-item .rmeta .fa-calendar-alt::before {
    content: "\f133"; /* 日历图标的 Unicode */
}

/* 移动端适配保留 */
@media (max-width: 768px) {
    .article-detail .detail-body {
        font-size: 15px;
        line-height: 1.8;
    }
}
/* ============================================================
   修复：相关推荐图标不显示 & 文章间距过大
   ============================================================ */

/* ---------- 1. 强制修复 Font Awesome 图标显示 ---------- */
.related-item .rmeta i.fa-calendar-alt,
.related-item .rmeta i.far,
.article-detail .detail-header .meta i.far {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 400 !important;
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* 使用 Unicode 强制显示日历图标（兜底方案） */
.related-item .rmeta i.fa-calendar-alt::before,
.article-detail .detail-header .meta i.fa-calendar-alt::before {
    content: "\f133" !important;
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 400 !important;
}
/* ============================================================
   修复：编辑器自动添加白色背景 & 间距过大
   ============================================================ */

/* 1. 强制去掉所有内联白色背景 */
.article-detail .detail-body * {
    background: transparent !important;
}

/* 2. 重置段落间距（覆盖编辑器自带的 margin: 16px 0） */
.article-detail .detail-body p {
    margin: 0 0 0.2em 0 !important;
    padding: 0;
}

/* 3. 标题间距 */
.article-detail .detail-body h3 {
    margin: 0.6em 0 0.1em 0 !important;
}

/* 4. 隐藏多余的 br */
.article-detail .detail-body br {
    display: none;
}

/* ---------- 2. 修复文章详情间距过大 ---------- */
.article-detail .detail-body {
    font-size: inherit;
    color: #2d4059;
    line-height: 1.8;
    white-space: pre-wrap;      /* 保留换行，但需配合下面样式控制间距 */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* 控制段落间距（减小上下边距） */
.article-detail .detail-body p {
    margin: 0 0 0.4em 0 !important;  /* 仅保留底部小间距 */
    padding: 0;
}


/* 控制标题间距 */
.article-detail .detail-body h3 {
    font-size: 18px;
    font-weight: 700;
    color: #0b2a4a;
    margin: 0.6em 0 0.3em 0 !important;
}

/* 控制列表间距 */
.article-detail .detail-body ul {
    padding-left: 24px;
    margin: 0.2em 0 0.4em 0 !important;
}
.article-detail .detail-body ul li {
    margin-bottom: 2px;
}

/* 控制 br 换行间距（防止叠加空白） */
.article-detail .detail-body br {
    display: block;
    content: "";
    margin: 0.1em 0;
}

/* 去掉多余的空白行（如果连续出现多个空行） */
.article-detail .detail-body .empty-line,
.article-detail .detail-body p:empty {
    display: none;
}

/* ---------- 3. 补充：相关推荐卡片微调 ---------- */
.related-item .rmeta {
    font-size: 13px;
    color: #8a9bb0;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.related-item .rmeta i {
    font-size: 13px;
    width: 14px;
    text-align: center;
}
/* 在 brand.css 中补充 */
.detail-footer .tags .t:hover {
    background: #1a5fc7;
    color: #fff;
    text-decoration: none;
}
/* 相关推荐 - 支持 A 标签点击 */
.related-item {
    display: block;              /* A 标签需要 block 才能撑满 */
    background: #f8fbff;
    border-radius: 14px;
    border: 1px solid #eef3fa;
    padding: 16px 16px 14px;
    transition: all 0.2s;
    cursor: pointer;
    text-decoration: none;       /* 去掉下划线 */
    color: inherit;              /* 继承父级颜色 */
}

.related-item:hover {
    background: #ffffff;
    border-color: #c8d9f0;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
    text-decoration: none;       /* 悬停时也不显示下划线 */
}

.related-item .rtitle {
    font-size: 15px;
    font-weight: 600;
    color: #0b2a4a;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-item .rtitle:hover {
    color: #1a5fc7;              /* 标题悬停变蓝色 */
}

.related-item .rmeta {
    font-size: 13px;
    color: #8a9bb0;
    margin-top: 6px;
}

.related-item .rmeta i {
    margin-right: 4px;
}
/* ============================================================
   侧边栏 - A标签样式（热门课程、问答、评价）
   ============================================================ */

/* 热门课程 */
.hot-course-list .hot-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f5f8fc;
    transition: all 0.2s;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}
.hot-course-list .hot-item:last-child {
    border-bottom: none;
}
.hot-course-list .hot-item:hover {
    color: #1a5fc7;
    padding-left: 4px;
    text-decoration: none;
}
.hot-course-list .hot-item .index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #eef4fe;
    color: #1a5fc7;
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
    flex-shrink: 0;
}
.hot-course-list .hot-item .index.top1 {
    background: #ff6b4a;
    color: #fff;
}
.hot-course-list .hot-item .index.top2 {
    background: #f5a623;
    color: #fff;
}
.hot-course-list .hot-item .index.top3 {
    background: #4a8de8;
    color: #fff;
}
.hot-course-list .hot-item .cname {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #1d334a;
}
.hot-course-list .hot-item:hover .cname {
    color: #1a5fc7;
}

/* 学员问答 */
.faq-list .faq-item {
    padding: 12px 0;
    border-bottom: 1px solid #f5f8fc;
    transition: all 0.2s;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}
.faq-list .faq-item:last-child {
    border-bottom: none;
}
.faq-list .faq-item:hover {
    color: #1a5fc7;
    padding-left: 4px;
    text-decoration: none;
}
.faq-list .faq-item .qicon {
    color: #ff6b4a;
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}
.faq-list .faq-item .qtext {
    font-size: 14px;
    font-weight: 500;
    color: #1d334a;
    line-height: 1.4;
}
.faq-list .faq-item:hover .qtext {
    color: #1a5fc7;
}
.faq-list .faq-item .qtag {
    font-size: 11px;
    font-weight: 600;
    color: #1a5fc7;
    background: #eef4fe;
    padding: 1px 10px;
    border-radius: 30px;
    margin-left: 6px;
    flex-shrink: 0;
}

/* 口碑评价 */
.review-side-list .review-side-item {
    padding: 12px 0;
    border-bottom: 1px solid #f5f8fc;
    transition: all 0.2s;
    display: block;
    text-decoration: none;
    color: inherit;
}
.review-side-list .review-side-item:last-child {
    border-bottom: none;
}
.review-side-list .review-side-item:hover {
    padding-left: 4px;
    text-decoration: none;
}
.review-side-list .review-side-item .stars {
    color: #f5a623;
    font-size: 13px;
    margin-bottom: 2px;
}
.review-side-list .review-side-item .rtext {
    font-size: 14px;
    color: #3f556b;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.review-side-list .review-side-item:hover .rtext {
    color: #1a5fc7;
}
.review-side-list .review-side-item .ruser {
    font-size: 12px;
    color: #8a9bb0;
    margin-top: 2px;
    font-weight: 500;
}
/* ---------- 师资头像图片样式 ---------- */
.teacher-item .avatar-link {
    display: block;
    width: 70px;          /* 可根据设计调整 */
    height: 70px;
    margin: 0 auto 8px;
    border-radius: 50%;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    text-decoration: none; /* 去掉链接下划线 */
}

.teacher-item .avatar-link:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.teacher-item .teacher-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;    /* 保证图片裁切为正方形并填充 */
    display: block;
    background: #eef4fe;  /* 加载失败时的占位背景色 */
}

/* 如果希望点击时出现轻微按下效果 */
.teacher-item .avatar-link:active {
    transform: scale(0.95);
}
/* 学员问答 - 链接样式 */
.faq-list .faq-item .qtext a {
    color: inherit;           /* 继承父级颜色 */
    text-decoration: none;    /* 去掉下划线 */
    display: inline;          /* 保持行内 */
}
.faq-list .faq-item .qtext a:hover {
    color: #1a5fc7;           /* 悬停变蓝，与原来 .qtext:hover 一致 */
}
.faq-list .faq-item .qtext a .qtag {
    /* 标签样式不受影响，保留原有 */
}

/* 口碑评价 - 链接样式 */
.review-side-list .review-side-item .rtext a {
    color: inherit;
    text-decoration: none;
}
.review-side-list .review-side-item .rtext a:hover {
    color: #1a5fc7;           /* 悬停变蓝 */
}
/* ---------- 文章列表 A 标签样式 ---------- */
.article-list-item .item-header a.title {
    color: #0b2a4a;
    text-decoration: none;
    transition: color 0.2s;
    cursor: pointer;
}
.article-list-item .item-header a.title:hover {
    color: #1a5fc7;
}

.article-list-item .item-footer a.btn-detail {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #1a5fc7;
    border: 1px solid #d4e2f7;
    padding: 4px 20px;
    border-radius: 30px;
    background: #fff;
    transition: all 0.2s;
    cursor: pointer;
    text-decoration: none;
}
.article-list-item .item-footer a.btn-detail:hover {
    background: #1a5fc7;
    color: #fff;
    border-color: #1a5fc7;
    box-shadow: 0 4px 12px rgba(26, 95, 199, 0.2);
}
/* ---------- 文章列表底部：左按钮 + 右信息 ---------- */
.article-list-item .item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.article-list-item .item-footer .footer-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.article-list-item .item-footer .meta {
    font-size: 13px;
    color: #8a9bb0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.article-list-item .item-footer .meta i {
    font-size: 13px;
    color: #b0c8e0;
}

/* ---------- 移动端适配 ---------- */
@media (max-width: 480px) {
    .article-list-item .item-footer {
        flex-direction: column;
        align-items: flex-start;
    }
    .article-list-item .item-footer .footer-right {
        width: 100%;
        justify-content: flex-start;
        gap: 12px;
    }
    .article-list-item .item-footer .meta {
        font-size: 12px;
    }
}