.topic-grid { width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px 20px; }
.topic-card { display: flex; min-width: 0; flex-direction: column; gap: 12px; text-decoration: none; color: #fff; }
.topic-card-image { display: block; width: 100%; height: auto; aspect-ratio: 410/231; object-fit: cover; border-radius: 18px; }
.topic-card-info { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 8px; }
.topic-card-count { max-width: 100%; overflow: hidden; color: #8a8a8a; font-size: 14px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.topic-card h3 { margin: 0; max-width: 100%; overflow: hidden; color: #f5f5f5; font-size: 16px; font-weight: 400; line-height: 22px; text-overflow: ellipsis; white-space: nowrap; }
.topic-card:focus-visible { outline: 2px solid #ff4b02; outline-offset: 3px; }
.topic-banner-ads { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; width: 1552px; max-width: calc(100% - 64px); margin-inline: auto; }
.topic-banner-ads a { display: block; aspect-ratio: 766/94; border-radius: 10px; overflow: hidden; }
.topic-banner-ads img { width: 100%; height: 100%; object-fit: fill; display: block; }
.topic-layout { width: 1552px; max-width: calc(100% - 64px); margin: 36px auto; display: flex; flex-direction: column; gap: 24px; }
.topic-breadcrumb { display: flex; flex-wrap: wrap; gap: 0; font-size: 18px; line-height: 24px; color: rgba(255,255,255,.55); }
.topic-breadcrumb a { color: inherit; text-decoration: none; }
.topic-breadcrumb > span:not([aria-current]) { margin-inline: 5px; }
.topic-breadcrumb [aria-current="page"] { color: #ff4b02; }
.topic-breadcrumb a:hover { color: #fff; }
.topic-layout h1 { margin: 0; font-size: 24px; line-height: 32px; color: #f5f5f5; }
.topic-intro { margin: 0; color: #999; font-size: 16px; line-height: 24px; }
.listing-intro { display: flex; flex-direction: column; gap: 16px; min-width: 0; overflow-wrap: anywhere; }
.topic-layout .content-section { gap: 24px; }
.topic-layout .pagination { align-self: center; }
@media (max-width:767px) {
 .topic-grid { grid-template-columns: minmax(0,1fr); gap: 20px; }
 .home-topics .topic-grid { display: flex; flex-wrap: nowrap; gap: 9px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
 .home-topics .topic-grid::-webkit-scrollbar { display: none; }
 .home-topics .topic-grid > .home-category-card { display: block; flex: 0 0 calc(100% - 18px); min-width: 0; scroll-snap-align: start; }
 .home-topics .topic-grid::after { content: ""; flex: 0 0 18px; }
 .topic-banner-ads a { height: 47px; aspect-ratio: auto; }
 .topic-banner-ads { max-width: calc(100% - 32px); grid-template-columns: 1fr; gap: 12px; }
 .topic-layout { max-width: calc(100% - 32px); margin: 20px auto; gap: 16px; }
 .topic-layout h1 { font-size: 20px; line-height: 28px; }
 .topic-intro, .topic-breadcrumb { font-size: 12px; line-height: 20px; }
 .listing-intro { gap: 12px; }
 .topic-layout .content-section { gap: 16px; }
}

.topic-layout .topic-banner-ads { width: 100%; max-width: 100%; }

/* 本地占位图保持 cover；实际广告图片使用 fill。 */
.topic-banner-ads img[src*="/static/images/placeholder-"] { object-fit: cover; }