/* style.css — classic card look, clear spacing/chips/badges */
:root{
  --bg: #0b0e11;
  --panel: #11161c;
  --muted: #9aa6b2;
  --text: #e6edf3;
  --accent: #4da3ff;

  --green: #2ea043;
  --yellow: #f2cc60;
  --orange: #ffa657;
  --red: #ff6b6b;

  --radius: 14px;
  --shadow: 0 6px 20px rgba(0,0,0,.35);
  --border: 1px solid rgba(255,255,255,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg, #0b0e11, #0d1015);
  color:var(--text);
  font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.site-header{
  position:sticky; top:0; z-index:10;
  background:rgba(11,14,17,.7);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:var(--border);
}
.site-header h1{
  margin:0; padding:16px 20px; font-size:20px; letter-spacing:.2px;
}

.container{ max-width:980px; margin:32px auto; padding:0 16px; }

.filters{
  background:var(--panel);
  border:var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px;
  margin-bottom:18px;
}

.controls{
  display:grid;
  gap:12px 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items:end;
}

label{ display:flex; flex-direction:column; gap:6px; font-size:14px; }
label.checkbox{ flex-direction:row; align-items:center; gap:8px; }

select, button{
  height:38px; border-radius:10px; border:var(--border);
  background:#0f141a; color:var(--text);
  padding:0 10px; outline:none;
}
select:focus, button:focus{ box-shadow:0 0 0 3px rgba(77,163,255,.35); border-color:#3c7fd7; }

button{ background:#1a2230; cursor:pointer }
button.btn-secondary{ background:#131a22 }

.meta{ margin-left:6px; color:var(--muted); font-size:13px; }

.cards{ list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.card{
  background:linear-gradient(180deg, #0f151c, #0f141a);
  border:var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px 14px 12px;
}

.card .row{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }

.badge{
  font-size:12px; padding:5px 8px; border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}

.title{ font-size:17px; font-weight:600; margin:2px 0 8px; }

.summary{ color:#d7dee6; margin:0 0 8px; }

.small{ color:var(--muted); font-size:13px; margin:0 0 4px; }

.sources a{
  color:var(--accent); text-decoration:none;
  border-bottom:1px dashed rgba(77,163,255,.4);
}
.sources a:hover{ text-decoration:underline; }

.sev-green .badge.sev-green{ border-color:rgba(46,160,67,.6); background:rgba(46,160,67,.1); }
.sev-yellow .badge.sev-yellow{ border-color:rgba(242,204,96,.6); background:rgba(242,204,96,.1); }
.sev-orange .badge.sev-orange{ border-color:rgba(255,166,87,.6); background:rgba(255,166,87,.1); }
.sev-red .badge.sev-red{ border-color:rgba(255,107,107,.6); background:rgba(255,107,107,.1); }

.empty{
  color:var(--muted);
  text-align:center;
  margin:18px 0;
}

/* small screens */
@media (max-width:520px){
  .title{ font-size:16px; }
  .controls{ grid-template-columns: 1fr 1fr; }
}

/* in style.css (optional nicer look) */
.badge-muted { opacity: .75; border-style:dashed }

.badge-muted { opacity: .65; }