body { font-family: system-ui, sans-serif; margin: 0; color: #1a1a1a; height: 100vh; }
.app-shell { display: flex; height: 100vh; }
.content-header { display: flex; align-items: center; gap: 0.75rem; padding: 1.5rem 1.5rem 0.5rem; }
.content-header h2 { margin: 0; }
/* Target the primitive's own stable data attribute, not a class we pass in:
   ScrollArea sets its own `class` after spreading our attributes, so a
   caller-supplied class never reaches the DOM (confirmed by inspecting the
   live element — it only ever carries "dx-scroll-area-auto-hide"). Without
   this, the scroll div has no bounded height, so it just grows to fit every
   article (nothing to scroll) while its ancestor's overflow: hidden clips
   everything past the viewport instead. */
main > [data-scroll-direction] { flex: 1; min-height: 0; padding: 0 1.5rem 1.5rem; }
.article-list { list-style: none; padding: 0; margin: 0; }
.article-row { border-bottom: 1px solid #ddd; padding: 1rem 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.article-row-header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; }
.article-row a { font-weight: 600; text-decoration: none; color: #0b5fff; }
.summary { color: #444; margin: 0; }
.topics { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.error { color: #b00020; }
.subscribe-form { display: flex; gap: 0.5rem; margin: 1rem 0; min-width: 0; }
/* Target the raw tag, not the component's own class: dioxus's #[css_module]
   content-hashes Input's class per build (e.g. "dx-input-83f82cbc"), so a
   selector on the unhashed name never matches anything. */
.subscribe-form input { flex: 1 1 0; min-width: 0; }
.subscribe-status { margin: 0.25rem 0 1rem; font-size: 0.9rem; }
.subscribe-status.success { color: #1a7f37; }
.subscribe-status.error { color: #b00020; }