:root { --bg:#0b0d10; --fg:#eaeef3; --muted:#aab4c0; --card:#13171d; --accent:#4cc38a; --border:#222a33; }
@media (prefers-color-scheme: light) {
  :root { --bg:#ffffff; --fg:#101418; --muted:#516171; --card:#f6f8fb; --accent:#136f63; --border:#dfe7ef; }
}
* { box-sizing:border-box }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial;
  background:var(--bg); color:var(--fg); }
.header { padding:16px 20px; border-bottom:1px solid var(--border); display:flex; gap:12px; align-items:center; flex-wrap:wrap;}
h1 { font-size:22px; margin:0; }
.controls { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
select, input { background:var(--card); color:var(--fg); border:1px solid var(--border); border-radius:10px; padding:8px 10px; }
a.link { color:var(--accent); text-decoration:none; border-bottom:1px dashed var(--accent); }
.container { display:grid; gap:16px; padding:16px; grid-template-columns:1fr; }
@media (min-width: 1200px) { .container { grid-template-columns: 1.3fr 1fr; } }
.card { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:14px; }
.card h2 { margin:0 0 6px 0; font-size:18px; }
.meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; font-size:14px; color:var(--muted); }
.badges { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.badge { font-size:12px; padding:4px 8px; border:1px solid var(--border); border-radius:999px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.map { height:560px; border-radius:16px; overflow:hidden; }
.sources { margin-top:8px; font-size:14px; }
.sources a { color:var(--accent); text-decoration:none; border-bottom:1px dashed var(--accent); }
.footer { padding:12px 20px; border-top:1px solid var(--border); color:var(--muted); font-size:13px; }