.topic-tabs { border-bottom: 1px solid var(--color-border); border-top: 1px solid var(--color-border); }
.topic-tabs__scroller { display: flex; width: min(100%, var(--content-width)); margin: 0 auto; overflow-x: auto; padding: 0 var(--space-2); scrollbar-width: none; }
.topic-tabs__scroller::-webkit-scrollbar { display: none; }
.topic-tab { flex: 0 0 auto; cursor: pointer; border-bottom: 2px solid transparent; padding: .8rem var(--space-3); background: transparent; color: var(--color-muted); white-space: nowrap; }
.topic-tab[aria-selected="true"] { border-color: var(--color-accent); color: var(--color-brand); font-weight: 650; }
.status-panel { width: min(calc(100% - 2rem), var(--content-width)); margin: var(--space-6) auto; padding: var(--space-5); border-radius: var(--radius-sm); background: var(--color-soft); color: var(--color-muted); text-align: center; }
.status-panel--error { color: var(--color-danger); }
.status-panel__retry { display: block; cursor: pointer; margin: var(--space-3) auto 0; border-radius: var(--radius-sm); padding: .55rem 1rem; background: var(--color-brand); color: #fff; }
.load-more-wrap { min-height: 42px; text-align: center; }
.button { cursor: pointer; border-radius: var(--radius-sm); }
.button--link { padding: var(--space-3) var(--space-4); background: transparent; color: var(--color-brand); }
.button:disabled { cursor: wait; opacity: .55; }
.article-stream { width: min(100%, var(--content-width)); margin: 0 auto; }
.article { padding: var(--space-4) var(--space-4) var(--space-6); }
.article__title { margin-bottom: var(--space-5); font-size: clamp(1.65rem, 7vw, 2.35rem); line-height: 1.12; }
.article__meta { margin: calc(var(--space-4) * -1) 0 var(--space-5); color: var(--color-muted); font-size: var(--font-size-sm); }
.article__hero { width: 100%; max-height: 520px; margin-bottom: var(--space-4); border-radius: var(--radius-sm); object-fit: cover; }
.article__body { display: grid; gap: var(--space-4); font-size: 1rem; line-height: var(--line-body); overflow-wrap: anywhere; }
.article-end { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0; color: #9298a1; font-size: var(--font-size-sm); }
.article-end::before, .article-end::after { height: 1px; flex: 1; background: var(--color-border); content: ""; }
.recommendations { padding: 0 var(--space-4) var(--space-6); }
.recommendations__title { margin-bottom: var(--space-3); text-align: center; }
.recommendations__grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.recommendation { position: relative; min-height: 190px; overflow: hidden; border-radius: var(--radius-md); background: var(--color-soft); }
.recommendation__image { width: 100%; height: 100%; min-height: 190px; object-fit: cover; }
.recommendation__shade { position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgb(0 0 0 / 78%)); }
.recommendation__title { position: absolute; right: var(--space-3); bottom: var(--space-3); left: var(--space-3); display: -webkit-box; overflow: hidden; color: #fff; font-weight: 700; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.article-sentinel { height: 2px; }
@media (max-width: 520px) { .recommendations__grid { grid-template-columns: 1fr; } }