/* Topics list page */
.topics-container{
	max-width: 920px;
	margin: 100px auto 60px;
	padding: 0 20px;
}
.topics-heading{ font-size:1.6rem; font-weight:900; margin-bottom:8px; }
.topics-desc{ color:#667085; margin-bottom:16px; }
.topics-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.topics-item{ background:#fff; border:1px solid #e9ecef; border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,.03); }
.topics-link{ display:block; padding:14px 16px; color:#333; text-decoration:none; }
.topics-link:hover{ border-radius:10px; background:#f7fbff; }
.topics-title{ font-weight:800; margin-bottom:6px; }
.topics-meta{ font-size:.9rem; color:#667085; margin-bottom:6px; }
.topics-excerpt{ margin:0; color:#555; line-height:1.7; }

.news-label {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background: #999;
    margin-left: 8px;
    vertical-align: middle;
}
.news-label.topics { background: #E60012; }
.news-label.info { background: #0078D7; }
.news-label.cat-event { background: #FF9800; color: #fff; }
.news-label.cat-update { background: #4CAF50; color: #fff; }
.news-label.cat-introduction { background: #9C27B0; color: #fff; }
.news-label.other { background: #607D8B; color: #fff; }

.topics-pagination {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.page-btn {
    display: inline-block;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.page-btn:hover {
    background: #f0f0f0;
    border-color: #bbb;
}
.page-btn.active {
    background: #333;
    color: #fff;
    border-color: #333;
    cursor: default;
}
.page-btn.disabled {
    opacity: 0.5;
    pointer-events: none;
}

@media (max-width: 900px){
	.topics-container{ margin-top: 80px; }
}