:root{
  --ink:#1C3D5A;
  --muted:#6b7a88;
  --brand:#66A5AD;
  --brand-2:#168aad;
  --bg:#F7FAFB;
  --card:#fff;
  --line:#E6EEF2;
  --radius:14px;
  --shadow:0 6px 22px rgba(28,61,90,.08);
}

/* ===== Base ===== */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0; padding:0;
  background:var(--bg); color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{ color:inherit; text-decoration:none }

/* ===== Header / Hero ===== */
.site-header{
  background:linear-gradient(120deg,var(--ink),var(--brand));
  color:#fff;
  padding:40px 16px 30px;
  box-shadow:0 2px 6px rgba(0,0,0,.05)
}
.hero{ width:min(1100px,92%); margin:0 auto; text-align:center }
.hero-logo{ width:120px; height:auto; margin:0 auto 10px }
.hero-title{ margin:0; font-weight:900; letter-spacing:.2px; font-size:clamp(1.6rem,3vw,2.1rem) }
.hero-subtitle{ margin:.5rem auto 0; max-width:720px; opacity:.95 }

/* ===== Nav ===== */
nav{
  background:#EDF7F7;
  padding:12px 16px;
  display:flex; justify-content:center
}
.nav-links{ display:flex; gap:22px; font-weight:700; flex-wrap:wrap }
.nav-links a{ position:relative; padding-bottom:2px }
.nav-links a:hover{ color:var(--brand-2) }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-6px;
  height:2px; width:0; background:var(--brand); transition:width .2s
}
.nav-links a:hover::after{ width:100% }

/* ===== Breaking bar ===== */
.breaking{
  position:sticky; top:0; z-index:50;
  display:flex; gap:10px; align-items:center;
  background:#0f2436; color:#fff; padding:8px 14px
}
.breaking.hidden{ display:none }
.breaking .blink{ color:#49e07b; animation:pulse 1s infinite }
@keyframes pulse{ 0%,100%{opacity:.5} 50%{opacity:1} }
.breaking a{ color:#fff; text-decoration:underline }

/* ===== Controls ===== */
main{ width:min(1100px,92%); margin:0 auto; padding:22px 0 36px }
.controls .row{
  display:flex; flex-wrap:wrap; gap:12px;
  align-items:center; justify-content:space-between
}
.chips{ display:flex; gap:8px; flex-wrap:wrap }
.chip{
  padding:8px 12px; border-radius:999px; border:1px solid var(--line);
  background:#fff; cursor:pointer; font-weight:700; font-size:.95rem;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.chip:hover{ transform:translateY(-1px); box-shadow:0 4px 14px rgba(28,61,90,.10) }
.chip.active{ background:var(--brand); color:#fff; border-color:var(--brand) }

.controls-right{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap
}
.search, .select{
  height:38px; padding:0 12px; min-width:170px;
  border:1px solid var(--line); border-radius:10px; background:#fff;
  font:inherit; color:var(--ink)
}
.near-me{ display:flex; align-items:center; gap:8px; font-weight:700; color:var(--muted) }
.near-me input{ width:18px; height:18px }

/* ===== Feed ===== */
.feed{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px; margin-top:16px
}
@media (max-width:980px){ .feed{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:620px){ .feed{ grid-template-columns:1fr } }

.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px;
  box-shadow:var(--shadow); display:grid; gap:8px
}
.card:hover{ transform:translateY(-2px); box-shadow:0 14px 28px rgba(28,61,90,.12) }
.card h3{ margin:0 0 2px; font-size:1.08rem; line-height:1.25 }
.meta{ color:var(--muted); font-weight:700; font-size:.92rem }
.tag{
  display:inline-block; padding:3px 10px; border-radius:999px;
  font-weight:800; margin-right:6px; background:#eff7f7; font-size:.85rem
}
.tag.Policy{ background:#eaf1ff }
.tag.Market{ background:#eafaf1 }
.tag.Industry{ background:#f6f1ff }
.summary{ color:#2f4357; line-height:1.45 }
.impact{
  border-left:3px solid var(--brand); background:#f6fbfb;
  padding:10px 12px; border-radius:10px; color:#214055; font-size:.95rem
}

.actions{ display:flex; gap:10px; align-items:center; margin-top:6px }
.btn{
  padding:10px 14px; border-radius:12px; border:1px solid var(--line);
  background:#fff; font-weight:800; cursor:pointer
}
.btn.primary{ background:var(--brand); color:#fff; border-color:var(--brand) }
.btn.ghost{ background:transparent; color:var(--ink) }

.empty,.error{ text-align:center; margin:18px 0; padding:12px; border-radius:10px }
.empty{ color:#667 }
.error{ color:#b23; background:#fff4f4; border:1px solid #ffd1d1 }
.hidden{ display:none }

/* ===== Pagination ===== */
.pager{
  display:flex;
  gap:12px;
  justify-content:center;
  align-items:center;
  margin:18px 0 6px;
}
.pager-info{ font-weight:800; color:var(--muted) }
.pager-btn[disabled]{ opacity:.5; cursor:not-allowed }

/* ===== Footer ===== */
footer {
  text-align: center;
  padding: 2rem 1rem;
  font-size: 0.95rem;
  color: #EAF6F6;
  background: linear-gradient(120deg, #1C3D5A, #66A5AD);
  border-top: 1px solid #D3E3EC;
  box-shadow: 0 -2px 6px rgba(0,0,0,.05);
}
footer p { margin: 0; font-weight: 700; letter-spacing: .2px; }

/* ===== Responsiveness tweaks ===== */
@media (max-width:820px){
  .search, .select{ min-width:140px }
}
@media (max-width:520px){
  .hero-logo{ width:110px }
  .controls .row{ gap:10px }
  .search, .select{ flex:1 }
}