:root{
  --bg:#0b0f1a; --bgSoft:#0f1422; --card:#111a2a;
  --text:#e6efff; --muted:#a8b7d4; --ring:#5c92ff; --accent:#7fb4ff;
  --shadow:0 10px 30px rgba(0,0,0,.35); --radius:18px;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f5f7ff; --bgSoft:#eef2ff; --card:#fff; --text:#0d1424; --muted:#4a5680; --ring:#325dff; --accent:#3b82f6; --shadow:0 10px 25px rgba(0,0,0,.08); }
}
*{ box-sizing:border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  /* -- Add these lines -- */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

main.container {
  flex-grow: 1; /* Allows the main content to push the footer down */
}
.container{ width:min(1150px,96%); margin:0 auto; }

.topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0; position:sticky; top:0; z-index:5; backdrop-filter:blur(6px); }
.brand{ display:flex; align-items:center; gap:12px; }
.logo{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-weight:800; color:#fff; background:linear-gradient(135deg, var(--ring), var(--accent)); box-shadow:var(--shadow); }
.brand h1{ font-size:clamp(18px,2.3vw,22px); margin:0; }

.search{ position:relative; width:min(420px, 55%); }
.search input{ width:100%; border:1px solid rgba(126,142,185,.25); background:rgba(255,255,255,.03); color:var(--text); padding:12px 14px 12px 40px; border-radius:12px; outline:none; }
.search svg{ position:absolute; left:12px; top:50%; transform:translateY(-50%); opacity:.7; }

.hero{ text-align:center; margin-top:8px; }
.hero h2{ margin:8px 0 0; font-size: clamp(24px, 3.5vw, 36px); }
.hero p{ margin:6px auto 0; color:var(--muted); max-width:700px; }

.grid{ display:grid; gap:16px; margin:22px 0 50px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
@media (min-width:1300px){ .grid{ grid-template-columns: repeat(5, 1fr); } } /* target 5 per row on wide screens */

.card{
  display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(126,142,185,.18); border-radius:var(--radius);
  padding:16px; box-shadow:var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  
}
.card:hover{ transform:translateY(-4px); border-color:rgba(92,146,255,.45); box-shadow:0 20px 40px rgba(92,146,255,.18), var(--shadow); }
.icon{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg, rgba(92,146,255,.9), rgba(59,130,246,.9)); color:white; font-weight:800; font-size:18px; }
.title{ font-weight:800; font-size:18px; letter-spacing:.2px; }
.desc{ color:var(--muted); font-size:13px; }
.tag{ padding:4px 8px; border-radius:999px; font-size:12px; border:1px solid rgba(126,142,185,.25); background:rgba(255,255,255,.04); }
.meta{ display:flex; gap:10px; color:var(--muted); font-size:12px; }

.empty{ border:1px dashed rgba(126,142,185,.35); background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border-radius:var(--radius); padding:22px; text-align:center; color:var(--muted); }
.hidden{ display:none !important; }

.footer{ text-align:center; color:var(--muted); padding:10px 0 30px; font-size:13px; }

/* === Professional polish add-ons === */
:root{
  --focus:#5c92ff;
  --glass:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}
@media (prefers-color-scheme: light){
  :root{ --glass:linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01)); }
}
html, body { scroll-behavior: smooth; }
a { color: inherit; }

/* Compact header actions layout */
.header-actions{ display:flex; align-items:center; gap:12px; }
.btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:12px; border:1px solid rgba(126,142,185,.25); background:var(--glass); text-decoration:none; font-weight:600; box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.btn:hover{ transform:translateY(-2px); border-color:rgba(92,146,255,.45); box-shadow:0 16px 32px rgba(92,146,255,.18), var(--shadow); }
.btn svg{ width:18px; height:18px; }
.btn.github{ white-space:nowrap; }

/* Accessibility: clear focus outlines */
:focus-visible{ outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 14px; }

/* Grid polish */
.grid{ grid-auto-rows: 1fr; }
.card{ position:relative; isolation:isolate; }
.card .title{ display:flex; align-items:center; gap:8px; }
.card .title::after{ content:""; flex:1; min-width:12px; height:1px; background:rgba(126,142,185,.18); opacity:.6; margin-left:8px; }
.card .meta{ margin-top:auto; }

/* Hover halo */
.card::before{
  content:""; position:absolute; inset:-1px; border-radius:var(--radius);
  background:radial-gradient(400px 200px at var(--mx,50%) var(--my,0%), rgba(92,146,255,.18), transparent 60%);
  opacity:0; transition:opacity .2s ease;
  z-index:-1;
}
.card:hover::before{ opacity:1; }

/* Small screens: hide GitHub label  */
@media (max-width: 560px){
  .hide-sm{ display:none; }
  .search{ width:min(56vw, 360px); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}