.news-page { padding-bottom: 72px; }
.news-hero { margin-bottom: 28px; }
.news-hero-icon { display: grid; place-items: center; width: 72px; height: 72px; border: 3px solid currentColor; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #4f1bb0, #7938e6 58%, #df64e9); font: italic 700 2rem Georgia, serif; box-shadow: 5px 5px 0 #17151c; }
.feed-panel, .article-panel { margin-top: 24px; }
.feed-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr) auto; align-items: end; gap: 16px; }
.feed-form .primary-button { min-height: 52px; white-space: nowrap; }
.secondary-button { min-height: 42px; padding: 0 16px; border: 1px solid #17151c; border-radius: 999px; color: #4f1bb0; background: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.secondary-button:disabled { opacity: .5; cursor: wait; }
.news-message { min-height: 1.4em; margin: 12px 0 0; color: #5f5867; font-size: .9rem; }
.news-message.is-error { color: #c43f55; }
.feed-list { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.feed-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid #d8d3dc; border-radius: 14px; background: #faf8ff; }
.feed-main { min-width: 0; }
.feed-main strong { display: block; margin-bottom: 4px; }
.feed-meta, .feed-url { color: #716a78; font-size: .8rem; overflow-wrap: anywhere; }
.feed-category { display: inline-flex; margin-right: 8px; padding: 3px 8px; border-radius: 999px; color: #fff; background: #7938e6; font-size: .75rem; font-weight: 800; }
.icon-button { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border: 1px solid #d96a7b; border-radius: 50%; color: #c43f55; background: #fff; font-size: 1rem; cursor: pointer; }
.article-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 18px 0; }
.category-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.category-button { padding: 7px 13px; border: 1px solid #cfc8d8; border-radius: 999px; color: #504957; background: #fff; font: inherit; font-size: .86rem; font-weight: 800; cursor: pointer; }
.category-button[aria-pressed="true"] { border-color: #7938e6; color: #fff; background: #7938e6; }
.filter-check { display: inline-flex; align-items: center; gap: 7px; font-size: .9rem; font-weight: 800; }
.filter-check input { width: 18px; height: 18px; accent-color: #7938e6; }
.article-list { display: grid; gap: 14px; }
.news-article { padding: 18px; border: 1px solid #d8d3dc; border-left: 5px solid #7938e6; border-radius: 14px; background: #fff; }
.news-article.is-read { border-left-color: #b8b1bf; background: #fafafa; }
.article-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.article-category { color: #7938e6; font-size: .78rem; font-weight: 900; }
.article-date { color: #77717e; font-size: .78rem; }
.article-title { display: inline-block; margin: 9px 0 5px; color: #17151c; font-size: 1.12rem; font-weight: 900; line-height: 1.45; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.article-source { margin: 0; color: #5f5867; font-size: .82rem; font-weight: 800; }
.article-summary { margin: 11px 0 0; color: #5f5867; line-height: 1.65; }
.article-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.article-action { min-height: 38px; padding: 0 13px; border: 1px solid #cfc8d8; border-radius: 999px; color: #504957; background: #fff; font: inherit; font-size: .84rem; font-weight: 800; cursor: pointer; }
.article-action[aria-pressed="true"] { border-color: #7938e6; color: #4f1bb0; background: #f1eaff; }

@media (max-width: 720px) {
  .news-hero-icon { width: 58px; height: 58px; font-size: 1.6rem; box-shadow: 4px 4px 0 #17151c; }
  .feed-panel, .article-panel { margin-top: 18px; }
  .feed-form { grid-template-columns: 1fr; gap: 14px; }
  .feed-form .primary-button, .secondary-button { width: 100%; }
  .section-heading { align-items: flex-start; }
  .section-heading .secondary-button { width: auto; margin-top: 4px; }
  .feed-item { padding: 13px; }
  .article-heading { align-items: center; }
  .article-controls { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 12px 16px; }
  .category-filters { grid-column: 1 / -1; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 3px; }
  .category-button { flex: 0 0 auto; }
  .filter-check { white-space: nowrap; }
  .news-article { padding: 15px; }
  .article-title { font-size: 1.03rem; }
  input { font-size: 16px; }
}