:root{
  --bg: #0b0c0e;
  --fg: #e7eaf0;
  --muted: #a7b0c0;
  --card: #121419;
  --ring: #2b86ff33;
  --accent: #2b86ff;
  --ghost: #2d3340;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height:1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{color:var(--accent); text-decoration:none}
a:focus{outline:2px solid var(--accent); outline-offset:2px}

.site-header{
  padding: 3rem 1.25rem 1rem;
  text-align:center;
}
.site-header h1{margin:0 0 .25rem; font-size: clamp(1.6rem, 2.5vw, 2.2rem)}
.tagline{margin:0 0 1rem; color:var(--muted)}
.filter{
  width:min(720px, 92%);
  padding:.8rem 1rem;
  border-radius:.8rem;
  border:1px solid #283041;
  background:#0f1117;
  color:var(--fg);
  box-shadow: 0 0 0 0 var(--ring);
}
.filter:focus{outline:none; box-shadow: 0 0 0 .2rem var(--ring)}

.grid{
  display:grid;
  gap:1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  padding: 0 1.25rem 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.card{
  background: var(--card);
  border:1px solid #232838;
  border-radius: 18px;
  padding:1.1rem 1.1rem 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.card h2{margin:.1rem 0 .2rem; font-size:1.1rem}
.card p{margin:0; color:var(--muted); font-size:.95rem}

.actions{display:flex; gap:.5rem; margin-top:.5rem; flex-wrap:wrap}
.btn{
  display:inline-block;
  padding:.6rem .9rem;
  border-radius:10px;
  background:var(--accent);
  color:white;
  font-weight:600;
  border:1px solid transparent;
}
.btn:hover{opacity:.95}
.btn.ghost{
  background:transparent;
  border-color:#3a435a;
  color:var(--fg);
}
.btn.ghost:hover{background:var(--ghost)}

.site-footer{
  text-align:center;
  padding:1.5rem;
  color:var(--muted);
  border-top:1px solid #202636;
}

/* Print: make cards full width for neat handouts */
@media print{
  .site-header, .filter, .site-footer{display:none}
  .grid{padding:0; gap:.5rem}
  .card{break-inside:avoid; border-color:#bbb; color:#000; background:#fff; box-shadow:none}
  body{background:#fff; color:#000}
}