body {
  font-family: sans-serif;
  margin: 2em;
  background: #f9f9f9;
}
h1 {
  color: #3366cc;
}
#app {
  margin-top: 1em;
  padding: 1em;
  background: white;
  border: 1px solid #ccc;
  border-radius: 8px;
}
/* --- Dark-only: News list + heading --- */
body.dark #news-list{
  background:#0f172a !important;
  border:1px solid #1f2937 !important;
  border-radius:10px;
  padding:.5rem .75rem;
  list-style:none;
  margin:0; /* prevents white parent from peeking */
}
body.dark #news-list > li{
  background:transparent !important;
  padding:.35rem 0;
  border:0;
}
body.dark #news-list > li + li{
  border-top:1px solid #1f2937; /* subtle dark divider instead of white gap */
}
body.dark h2:has(+ #news-list){
  color:#e6edf3 !important;      /* "Latest items" readable in dark */
}
body.dark #news-list a{
  color:#9ecbff !important;       /* readable links */
}
/* News (dark): wrap the whole block that contains H2 + #news-list */
body.dark section:has(> h2 + #news-list),
body.dark div:has(> h2 + #news-list),
body.dark article:has(> h2 + #news-list){
  background:#0f172a !important;
  border:1px solid #1f2937 !important;
  border-radius:10px;
  padding:.5rem .75rem;
}
/* Title + list spacing/colors */
body.dark h2:has(+ #news-list){ color:#e6edf3 !important; margin:0 0 .25rem 0 !important; }
body.dark #news-list{ background:transparent !important; border:0; list-style:none; margin:0 !important; padding:0; }
body.dark #news-list > li{ background:transparent !important; padding:.35rem .5rem; }
body.dark #news-list > li + li{ border-top:1px solid #1f2937; }
body.dark #news-list a{ color:#9ecbff !important; }
/* --- Dark-only: News title + list as one block --- */
body.dark h2:has(+ #news-list){
  background:#0f172a !important;
  color:#e6edf3 !important;
  margin:0 !important;
  padding:.5rem .75rem .25rem .75rem !important;
  border-radius:10px 10px 0 0 !important;
}
body.dark #news-list{
  background:#0f172a !important;
  border:1px solid #1f2937 !important;
  border-top:0 !important; /* merges with the H2 above */
  border-radius:0 0 10px 10px !important;
  padding:.25rem .75rem .5rem .75rem !important;
  list-style:none; margin:0 !important;
}
body.dark #news-list > li{ background:transparent !important; padding:.35rem 0; border:0; }
body.dark #news-list > li + li{ border-top:1px solid #1f2937; }
body.dark #news-list a{ color:#9ecbff !important; }