/* ============================================================
   多多兔学习工具箱 · CMS 内容站样式
   与主站 common.css 风格保持一致
   最后更新：2026-10-29
   ============================================================ */

/* ★★★ 关键：Bootstrap 把 html 根字号设为 10px，
   会导致 common.css 里所有 rem 尺寸缩到 62.5%（文字变得极小）。
   这里强制恢复为 16px，全站 rem 才与主站一致。 */
html {
    font-size: 16px !important;
}

/* Bootstrap 的 body 默认 14px，恢复为主站字号 */
body {
    font-size: 1rem !important;
    line-height: 1.6;
}

/* Bootstrap 会把 h1-h6 压到固定 px，这里恢复为主站观感 */
.dt-cms-wrap h1,
.dt-cms-wrap h2,
.dt-cms-wrap h3,
.dt-cms-wrap h4,
.dt-cms-wrap h5,
.dt-cms-wrap h6 {
    font-family: inherit;
    font-weight: 700;
    line-height: 1.5;
    color: #0d2b3e;
    margin-top: 0;
}

.dt-cms-wrap p {
    font-size: 0.95rem;
    line-height: 1.75;
    margin: 0 0 0.6em;
}

.dt-cms-wrap a {
    color: #1e88e5;
}

/* Bootstrap .panel 系列也受根字号影响，统一对齐主站卡片风格 */
.dt-cms-wrap .panel {
    border-radius: 20px;
    border: 2px solid #e2ecf6;
    box-shadow: none;
    margin-bottom: 1.4rem;
}

.dt-cms-wrap .panel-heading {
    background: #f7fafd;
    border-bottom: 1px solid #eef4fb;
    border-radius: 18px 18px 0 0;
    padding: 14px 20px;
}

.dt-cms-wrap .panel-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0d2b3e;
}

.dt-cms-wrap .panel-body {
    padding: 16px 20px;
}



.dt-cms-wrap .breadcrumb > li + li:before {
    content: none;
}

/* ----- CMS 页面容器：与主站 main-card 一致的观感 ----- */
.dt-cms-wrap {
    width: 100%;
}

/* ----- 面包屑（复用主站 .breadcrumb 视觉，补充间距） ----- */
.dt-cms-wrap .breadcrumb {
    margin-bottom: 1.6rem;
}

/* ----- 页头（与错题本 .page-header 一致） ----- */
.dt-cms-head {
    text-align: center;
    margin-bottom: 1.8rem;
}

.dt-cms-head h1 {
    font-size: 1.8rem;
    color: #1a73c7;
    margin-bottom: 8px;
    font-weight: 700;
    text-align: center;
}

.dt-cms-head h1 i {
    color: #42a5f5;
    margin-right: 8px;
}

.dt-cms-head p {
    color: #7a8ba0;
    font-size: 0.95rem;
    font-weight: 600;
}

/* ============================================================
   子栏目卡片（与错题本 .stats-grid / .stat-card 完全一致）
   ============================================================ */
.dt-channel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.dt-channel-card {
    background: #fff;
    border-radius: 18px;
    padding: 16px 8px;
    border: 2px solid #e2ecf6;
    text-align: center;
    transition: all 0.2s;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    display: block;
    color: inherit;
}

.dt-channel-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(66, 165, 245, 0.12);
    border-color: #bbdefb;
    text-decoration: none;
    color: inherit;
}

.dt-channel-card.active {
    border-color: #42a5f5;
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    box-shadow: 0 6px 16px rgba(66, 165, 245, 0.25);
    transform: translateY(-2px);
}

.dt-channel-card.active .dt-channel-count,
.dt-channel-card.active .dt-channel-name {
    color: #1565c0;
}

.dt-channel-card.active .dt-channel-name {
    font-weight: 600;
}

.dt-channel-card .dt-channel-icon {
    font-size: 1.6rem;
    line-height: 1;
    margin-bottom: 6px;
}

.dt-channel-card .dt-channel-count {
    font-size: 1.6rem;
    font-weight: 800;
    color: #1a73c7;
    line-height: 1;
}

.dt-channel-card .dt-channel-name {
    font-size: 0.8rem;
    color: #7a8ba0;
    margin-top: 6px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   文章列表
   ============================================================ */
.dt-article-list-wrap {
    background: #fff;
    border-radius: 20px;
    border: 2px solid #e2ecf6;
    overflow: hidden;
}

.dt-article-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 20px;
    background: #f7fafd;
    border-bottom: 1px solid #eef4fb;
}

.dt-article-list-head .dt-list-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0d2b3e;
}

.dt-article-list-head .dt-list-title i {
    color: #42a5f5;
    margin-right: 6px;
}

.dt-order-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.dt-order-tab {
    padding: 5px 14px;
    border-radius: 40px;
    border: 2px solid #e2ecf6;
    background: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    color: #52627a;
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
}

.dt-order-tab:hover {
    border-color: #42a5f5;
    color: #1e88e5;
    text-decoration: none;
}

.dt-order-tab.active {
    background: linear-gradient(135deg, #42a5f5, #1e88e5);
    color: #fff;
    border-color: #1e88e5;
}

/* ----- 文章条目 ----- */
.dt-article-list {
    padding: 4px 0;
}

.dt-article-item {
    display: flex;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px dashed #eef4fb;
    transition: background 0.15s;
    text-decoration: none;
    color: inherit;
}

.dt-article-item:last-child {
    border-bottom: none;
}

.dt-article-item:hover {
    background: #f7fafd;
    text-decoration: none;
    color: inherit;
}

.dt-article-thumb {
    flex: 0 0 132px;
    width: 132px;
    height: 92px;
    border-radius: 14px;
    overflow: hidden;
    background: #f0f6fc;
    border: 1px solid #e8f2fc;
}

.dt-article-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s;
}

.dt-article-item:hover .dt-article-thumb img {
    transform: scale(1.05);
}

.dt-article-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dt-article-title {
    font-size: 1.02rem;
    font-weight: 700;
    color: #0d2b3e;
    line-height: 1.5;
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.dt-article-item:hover .dt-article-title {
    color: #1a73c7;
}

.dt-article-desc {
    font-size: 0.85rem;
    color: #7a8ba0;
    line-height: 1.6;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.dt-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    font-size: 0.78rem;
    color: #9bb3c9;
}

.dt-article-meta .dt-channel-tag {
    background: rgba(66, 165, 245, 0.12);
    color: #1e88e5;
    padding: 2px 10px;
    border-radius: 40px;
    font-weight: 600;
    text-decoration: none;
}

.dt-article-meta .dt-channel-tag:hover {
    background: rgba(66, 165, 245, 0.22);
    color: #1565c0;
    text-decoration: none;
}

.dt-article-meta i {
    margin-right: 3px;
    color: #b5c8da;
}

/* ----- 空状态 ----- */
.dt-empty {
    text-align: center;
    padding: 70px 20px;
}

.dt-empty .dt-empty-icon {
    font-size: 3.6rem;
    line-height: 1;
    margin-bottom: 14px;
    opacity: 0.75;
}

.dt-empty .dt-empty-title {
    font-size: 1.05rem;
    color: #52627a;
    font-weight: 600;
    margin-bottom: 6px;
}

.dt-empty .dt-empty-desc {
    font-size: 0.88rem;
    color: #9bb3c9;
}

/* ============================================================
   分页（替换 bootstrap 样式）
   ============================================================ */
.dt-cms-wrap .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    list-style: none;
    padding: 20px 0 6px;
    margin: 0;
}

.dt-cms-wrap .pagination > li {
    display: block;
    list-style: none;
}

.dt-cms-wrap .pagination > li > a,
.dt-cms-wrap .pagination > li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 40px;
    border: 2px solid #e2ecf6;
    background: #fff;
    color: #52627a;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.15s;
    box-sizing: border-box;
}

.dt-cms-wrap .pagination > li > a:hover {
    border-color: #42a5f5;
    color: #1e88e5;
    text-decoration: none;
    transform: translateY(-1px);
}

.dt-cms-wrap .pagination > li.active > span,
.dt-cms-wrap .pagination > li.active > a {
    background: linear-gradient(135deg, #42a5f5, #1e88e5);
    border-color: #1e88e5;
    color: #fff;
    box-shadow: 0 3px 0 #1976d2;
}

.dt-cms-wrap .pagination > li.disabled > span {
    color: #c6d4e2;
    background: #f7fafd;
    border-color: #eef4fb;
    cursor: not-allowed;
}

/* 加载更多按钮 */
.dt-cms-wrap .btn-loadmore {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.8rem;
    border-radius: 40px;
    border: 2px solid #bbdefb;
    background: #fff;
    color: #1e88e5;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    box-shadow: 0 4px 0 #e2ecf6;
    transition: all 0.2s;
}

.dt-cms-wrap .btn-loadmore:hover {
    border-color: #42a5f5;
    transform: translateY(-2px);
    text-decoration: none;
    color: #1565c0;
}

.dt-cms-wrap .loadmore-tips {
    display: block;
    text-align: center;
    color: #9bb3c9;
    font-size: 0.88rem;
    padding: 20px 0;
}

/* ============================================================
   文章详情页
   ============================================================ */
.dt-article-detail {
    background: #fff;
    border-radius: 20px;
    border: 2px solid #e2ecf6;
    padding: 28px 32px 32px;
}

.dt-detail-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #0d2b3e;
    line-height: 1.5;
    margin-bottom: 14px;
    text-align: center;
}

.dt-detail-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-size: 0.82rem;
    color: #9bb3c9;
    padding-bottom: 18px;
    margin-bottom: 22px;
    border-bottom: 1px dashed #eef4fb;
}

.dt-detail-meta i {
    margin-right: 4px;
    color: #b5c8da;
}

.dt-detail-content {
    font-size: 0.98rem;
    line-height: 2;
    color: #3d4f63;
    word-break: break-word;
}

.dt-detail-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
    margin: 16px auto;
}

.dt-detail-content h2,
.dt-detail-content h3,
.dt-detail-content h4 {
    color: #0d2b3e;
    margin: 1.4em 0 0.6em;
    font-weight: 700;
    line-height: 1.5;
}

.dt-detail-content h2 { font-size: 1.22rem; }
.dt-detail-content h3 { font-size: 1.1rem; }
.dt-detail-content h4 { font-size: 1rem; }

.dt-detail-content p {
    margin-bottom: 1em;
}

.dt-detail-content a {
    color: #1e88e5;
    text-decoration: none;
    border-bottom: 1px dotted rgba(66, 165, 245, 0.5);
}

.dt-detail-content a:hover {
    color: #1565c0;
    border-bottom-style: solid;
}

.dt-detail-content ul,
.dt-detail-content ol {
    margin: 0 0 1em 1.4em;
    padding: 0;
}

.dt-detail-content li {
    margin-bottom: 0.4em;
}

.dt-detail-content blockquote {
    margin: 1.2em 0;
    padding: 12px 18px;
    background: #f7fafd;
    border-left: 4px solid #42a5f5;
    border-radius: 0 12px 12px 0;
    color: #52627a;
}

.dt-detail-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.2em 0;
    font-size: 0.9rem;
}

.dt-detail-content table th,
.dt-detail-content table td {
    border: 1px solid #e2ecf6;
    padding: 8px 12px;
    text-align: left;
}

.dt-detail-content table th {
    background: #f7fafd;
    font-weight: 700;
    color: #0d2b3e;
}

.dt-detail-content pre {
    background: #f7fafd;
    border: 1px solid #e2ecf6;
    border-radius: 12px;
    padding: 14px 16px;
    overflow-x: auto;
    font-size: 0.86rem;
    line-height: 1.7;
}

.dt-detail-content code {
    background: #f0f6fc;
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 0.88em;
    color: #d8542a;
}

.dt-detail-content pre code {
    background: none;
    padding: 0;
    color: inherit;
}

/* 上一篇 / 下一篇 */
.dt-detail-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px dashed #eef4fb;
}

.dt-detail-nav a {
    flex: 1 1 240px;
    min-width: 0;
    padding: 12px 16px;
    border-radius: 14px;
    background: #f7fafd;
    border: 1px solid #eef4fb;
    color: #52627a;
    font-size: 0.85rem;
    text-decoration: none;
    line-height: 1.6;
    transition: all 0.15s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dt-detail-nav a:hover {
    background: #eef7ff;
    border-color: #bbdefb;
    color: #1a73c7;
    text-decoration: none;
}

.dt-detail-nav a b {
    color: #1a73c7;
    margin-right: 6px;
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 768px) {
    .dt-cms-head h1 {
        font-size: 1.4rem;
    }

    .dt-cms-head p {
        font-size: 0.86rem;
    }

    .dt-channel-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .dt-channel-card {
        padding: 12px 6px;
        border-radius: 14px;
    }

    .dt-channel-card .dt-channel-icon {
        font-size: 1.3rem;
    }

    .dt-channel-card .dt-channel-count {
        font-size: 1.3rem;
    }

    .dt-channel-card .dt-channel-name {
        font-size: 0.7rem;
    }

    .dt-article-item {
        padding: 14px 14px;
        gap: 12px;
    }

    .dt-article-thumb {
        flex: 0 0 96px;
        width: 96px;
        height: 72px;
        border-radius: 12px;
    }

    .dt-article-title {
        font-size: 0.94rem;
    }

    .dt-article-desc {
        font-size: 0.8rem;
        -webkit-line-clamp: 1;
    }

    .dt-article-meta {
        gap: 10px;
        font-size: 0.72rem;
    }

    .dt-article-list-head {
        padding: 12px 14px;
    }

    .dt-article-detail {
        padding: 20px 16px 24px;
        border-radius: 16px;
    }

    .dt-detail-title {
        font-size: 1.2rem;
    }

    .dt-detail-content {
        font-size: 0.92rem;
        line-height: 1.9;
    }

    .dt-cms-wrap .pagination > li > a,
    .dt-cms-wrap .pagination > li > span {
        min-width: 34px;
        height: 34px;
        padding: 0 9px;
        font-size: 0.82rem;
    }
}

@media (max-width: 420px) {
    .dt-channel-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dt-article-thumb {
        display: none;
    }
}