:root {
  --bg: #0a0f21;
  --card: #111835;
  --card-alt: #1b2461;
  --text: #e9f2ff;
  --muted: #9bb3d8;
  --accent: #84c4ff;
  --success: #6fe2ad;
  --error: #f77;
  --radius: 14px;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(circle at 20% 20%, #141b53 0%, #091223 40%, var(--bg) 100%);
  color: var(--text);
  min-height: 100vh;
}
header {
  padding: 2rem 1rem 1rem;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
h1 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.6rem); }
p.subtitle { margin: .4rem 0 1rem; color: var(--muted); }

.controls {
  display:flex; gap:.75rem; flex-wrap: wrap; justify-content: center; margin: 0 0 1rem;
}
.controls input, .controls select { border: 1px solid rgba(255,255,255,.2); border-radius: 12px; background: #161d4d; color: #e8efff; padding: .6rem .75rem; min-width: 210px; }
.controls input::placeholder { color: rgba(238,248,255,.6); }

#grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); gap: 1rem; padding: 0 1rem 2rem; }

.card {
  background: var(--card);
  border: 1px solid rgba(170, 186, 244, .08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  min-height: 220px;
  transition: transform .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-4px); border-color: rgba(132, 196, 255, .3); }

.card h2 { font-size: 1.08rem; margin: 0 0 .35rem; }
.card a.title { text-decoration: none; color: var(--text); }
.card p.desc { color: var(--muted); font-size:.93rem; min-height: 2em; }

.meta { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; font-size:.82rem; color: #c4d3ef; }
.meta span { background: rgba(32, 58, 132, .35); border-radius: 999px; padding:.25rem .5rem; }
.topics { margin: .7rem 0 0; display:flex; flex-wrap:wrap; gap:.4rem; }
.topic { backface-visibility: hidden; font-size:.75rem; padding:.28rem .52rem; border-radius: 999px; border: 1px solid rgba(132,196,255,.4); color: #b8d9ff; }

.links { margin-top: auto; display:flex; gap:.5rem; flex-wrap:wrap; }
.links a { text-decoration: none; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: var(--text); background: rgba(14, 27, 74,.75); padding:.33rem .6rem; font-size: .8rem; transition:.18s; }
.links a:hover { background: #1934b3; }

#status { margin: 0 1rem 1rem; color: var(--muted); }

.spinner {
  width: 1rem;
  height: 1rem;
  border: 3px solid rgba(255,255,255,.2);
  border-top-color: #84c4ff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
  display:inline-block;
  vertical-align:middle;
  margin-right:.4rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

footer { text-align:center; font-size:.82rem; color:var(--muted); padding:1rem; border-top:1px solid rgba(255,255,255,.04); }

@media (max-width: 540px){ .controls { flex-direction: column; align-items:center; } }