/* ═══ 时事新闻页面样式 — 联合文社 ═══ */
#news-container { padding-bottom: var(--gap-xxl); }

.news-header {
  margin-bottom: var(--gap-xl);
  padding: var(--gap-lg);
  background: var(--ui-bg-muted);
  border-radius: var(--radii);
  border-left: 4px solid var(--ui-accent);
}

.loading-spinner {
  width: 24px; height: 24px;
  border: 2px solid var(--ui-line);
  border-top-color: var(--ui-accent);
  border-radius: 50%;
  margin: 0 auto 12px;
  animation: news-spin .8s linear infinite;
}

@keyframes news-spin { to { transform: rotate(360deg); } }

.news-card {
  background: var(--ui-bg);
  border: var(--ui-border) solid var(--ui-line);
  border-radius: var(--radii);
  padding: var(--gap-lg);
  transition: border-color .2s, box-shadow .2s;
}

.news-card:hover {
  border-color: var(--ui-accent);
  box-shadow: 0 0 12px rgba(100, 180, 255, .08);
}

.news-card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-md);
  margin-bottom: var(--gap-sm);
}

.news-card-category {
  display: inline-block;
  padding: 2px 10px;
  background: var(--ui-accent);
  color: #fff;
  border-radius: 20px;
  font-size: .68rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.news-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ui-fg);
  line-height: 1.5;
}

.news-card-summary {
  font-size: .8rem;
  color: var(--ui-fg-muted);
  line-height: 1.7;
  margin-bottom: var(--gap-sm);
}

.news-card-body {
  font-size: .78rem;
  color: var(--ui-fg);
  line-height: 1.8;
  white-space: pre-wrap;
}

.news-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--gap-md);
  padding-top: var(--gap-sm);
  border-top: var(--ui-border) solid var(--ui-line);
  font-size: .68rem;
  color: var(--ui-fg-muted);
}

.news-category-tag {
  display: inline-block;
  padding: 3px 10px;
  background: var(--ui-bg-muted);
  border: var(--ui-border) solid var(--ui-line);
  border-radius: 20px;
  font-size: .68rem;
  cursor: pointer;
  transition: .2s;
  margin-right: 4px;
  margin-bottom: 4px;
}

.news-category-tag:hover, .news-category-tag.active {
  background: var(--ui-accent);
  color: #fff;
  border-color: var(--ui-accent);
}