/* ============================================================
   MATH-DSE-SPECIFIC CLASSES (no conflict with site-wide styles)
   ============================================================ */

/* ---- Container ---- */
.mathdse-article {
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    max-width: 820px;
    margin: 40px auto;
    padding: 0 20px;
    line-height: 1.7;
    color: #1e1e1e;
    background: #fafafa;
}

/* ---- Headings ---- */
.mathdse-h1 {
    font-size: 2.0rem;
    color: #0b3b5c;
    border-bottom: 3px solid #1a6b8a;
    padding-bottom: 6px;
    margin-top: 1.8em;
    font-weight: 700;
}
.mathdse-h2 {
    font-size: 1.5rem;
    color: #0b3b5c;
    border-bottom: 2px solid #e0e7ef;
    padding-bottom: 6px;
    margin-top: 1.8em;
    font-weight: 600;
}
.mathdse-h3 {
    font-size: 1.2rem;
    color: #0b3b5c;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 4px;
    margin-top: 1.5em;
    font-weight: 600;
}

/* ---- Lists ---- */
.mathdse-ul {
    padding-left: 1.6rem;
    list-style-type: disc;
}
.mathdse-ul .mathdse-li {
    margin-bottom: 6px;
}
.mathdse-ol {
    padding-left: 1.6rem;
    list-style-type: decimal;
}
.mathdse-ol .mathdse-li {
    margin-bottom: 6px;
}

/* ---- Horizontal rule ---- */
.mathdse-hr {
    margin: 40px 0 20px;
    border: 0;
    border-top: 2px solid #dce3ec;
}

/* ---- Tables ---- */
.mathdse-table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0;
    font-size: 0.95rem;
}
.mathdse-table th,
.mathdse-table td {
    border: 1px solid #cbd5e0;
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
}
.mathdse-table th {
    background: #e6edf5;
    font-weight: 600;
}

/* ---- Metadata Table (special border style) ---- */
.mathdse-metadata {
    background: #f0f4fa;
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
}
.mathdse-metadata .mathdse-table {
    margin: 0;
}
.mathdse-metadata .mathdse-table th {
    background: #dce6f0;
    width: 30%;
}

/* ---- Boxes (tips, warnings, examples, practice) ---- */
.mathdse-box-tip,
.mathdse-box-warning,
.mathdse-box-example,
.mathdse-box-practice,
.mathdse-box-keytakeaway {
    padding: 12px 20px;
    margin: 20px 0;
    border-radius: 0 6px 6px 0;
}
.mathdse-box-tip {
    background: #f0f5fb;
    border-left: 6px solid #1a6b8a;
}
.mathdse-box-warning {
    background: #fdf0ee;
    border-left: 6px solid #c0392b;
}
.mathdse-box-example {
    background: #eef7f2;
    border-left: 6px solid #27ae60;
}
.mathdse-box-practice {
    background: #fef9f0;
    border-left: 6px solid #e67e22;
}
.mathdse-box-keytakeaway {
    background: #eaf4eb;
    border-left: 6px solid #2d7d46;
}
.mathdse-box-tip strong,
.mathdse-box-warning strong,
.mathdse-box-example strong,
.mathdse-box-practice strong,
.mathdse-box-keytakeaway strong {
    display: block;
    font-size: 1.05rem;
    margin-bottom: 4px;
}
.mathdse-box-tip strong i,
.mathdse-box-warning strong i,
.mathdse-box-example strong i,
.mathdse-box-practice strong i,
.mathdse-box-keytakeaway strong i {
    margin-right: 8px;
}

/* ---- Answer Grid ---- */
.mathdse-answer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 20px;
    background: #f8f9fc;
    padding: 12px 18px;
    border-radius: 8px;
}

/* ---- DSE Badge ---- */
.mathdse-badge {
    display: inline-block;
    background: #1a6b8a;
    color: #fff;
    font-size: 0.70rem;
    font-weight: 700;
    padding: 2px 12px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    margin-right: 8px;
}
.mathdse-badge i {
    margin-right: 4px;
}

/* ---- Next Article Preview ---- */
.mathdse-next-preview {
    background: #eaf2f8;
    padding: 12px 20px;
    border-radius: 8px;
    margin-top: 30px;
}
.mathdse-next-preview i {
    margin-right: 10px;
    color: #1a6b8a;
}

/* ---- Utility ---- */
.mathdse-icon-margin {
    margin-right: 6px;
}
.mathdse-text-center {
    text-align: center;
}
.mathdse-monospace-tree {
    background: #f0f4fa;
    padding: 12px 22px;
    border-radius: 10px;
    font-family: monospace;
    font-size: 0.95rem;
    line-height: 1.8;
}
.mathdse-check-green {
    color: #27ae60;
    margin-right: 6px;
}

/* ---- Difficulty Stars ---- */
.mathdse-star-filled {
    color: #f1c40f;
}
.mathdse-star-empty {
    color: #dce0e5;
}

/* 分页容器 */
.mathdse-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px; /* 按钮之间的间距 */
    margin: 40px 0;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
}

/* 基础按钮样式 */
.mathdse-pagination .page-btn {
    display: inline-block;
    padding: 8px 14px;
    color: #1a6b8a;
    background-color: #fff;
    border: 1px solid #dce3ec;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

/* 鼠标悬停效果 */
.mathdse-pagination .page-btn:hover {
    background-color: #f0f5fb;
    border-color: #1a6b8a;
}

/* 当前激活页码（选中状态） */
.mathdse-pagination .page-btn.active {
    background-color: #1a6b8a;
    color: #fff;
    border-color: #1a6b8a;
    cursor: default;
}

/* 上一页/下一页文字，如果不需要可以隐藏 */
.mathdse-pagination .prev, 
.mathdse-pagination .next {
    background-color: #f8f9fc;
}

/* 信息统计文字（共X条...） */
.mathdse-pagination .page-info {
    color: #666;
    font-size: 0.9rem;
    margin-left: 15px;
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
    .mathdse-answer-grid {
        grid-template-columns: 1fr;
    }
    .mathdse-table {
        font-size: 0.85rem;
    }
    .mathdse-article {
        padding: 0 12px;
    }
    .mathdse-metadata .mathdse-table th {
        width: 40%;
    }
}