* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 0; background: #0d1117; color: #e6edf3; }
header { padding: 24px; text-align: center; background: #0b0f14; border-bottom: 1px solid #1f2937; }
h1 { margin: 0 0 6px; font-size: 22px; }
.subtitle { margin: 0; color: #9da9bb; }
main { max-width: 1040px; margin: 0 auto; padding: 16px; }
.controls { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.controls select, .controls button { padding: 8px 12px; border-radius: 8px; border: 1px solid #30363d; background: #0b1220; color: #e6edf3; }
.controls button { cursor: pointer; }
.status { margin: 8px 0 16px; color: #9da9bb; }
h2 { margin-top: 20px; font-size: 20px; }
.breaking { border: 1px solid #5b8cff44; background: #0b1730; padding: 12px; border-radius: 12px; }
.news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.news-item { background: #0b1220; border: 1px solid #1f2937; border-radius: 12px; padding: 12px; }
.news-item h3 { margin: 0 0 6px; font-size: 18px; color: #fff; }
.news-item p { margin: 0 0 8px; color: #c9d1d9; }
.meta { display: flex; gap: 12px; align-items: baseline; margin-bottom: 8px; color: #9da9bb; flex-wrap: wrap; }
.meta a { color: #58a6ff; text-decoration: none; }

/* ===== Custom Theme Overrides ===== */
:root{
  --crimson: #DC143C;   /* crimson */
  --crimson-900: #b31233; /* darker hover */
  --rustic:  #8B4000;   /* rustic / burnt orange */
  --text-on-crimson: #ffffff;
}

/* Caption color */
header h1 { color: var(--crimson) !important; }

/* Section headings */
h2 { color: var(--rustic) !important; }

/* Primary action button (Read All) */
#readAll {
  background: var(--crimson) !important;
  color: var(--text-on-crimson) !important;
  border: none !important;
  font-weight: 600;
}
#readAll:hover { background: var(--crimson-900) !important; }

/* Keep other controls subtle */
.controls button:not(#readAll) {
  background: #0b1220;
  color: #e6edf3;
}

/* Optional: make the “Read All” button a bit larger */
#readAll { padding: 10px 16px; border-radius: 10px; }
