cat > style.css <<'CSS'
:root{
  --bg:#0b0f17;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.10);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.65);
  --muted2:rgba(255,255,255,.50);
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --r:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(110,231,183,.10), transparent 55%),
    radial-gradient(1200px 600px at 90% 0%, rgba(59,130,246,.12), transparent 60%),
    radial-gradient(900px 500px at 70% 95%, rgba(244,114,182,.10), transparent 55%),
    var(--bg);
}
.wrap{max-width:1200px;margin:0 auto;padding:28px 18px 50px}
.header{
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--border);
  border-radius:calc(var(--r) + 6px);
  box-shadow:var(--shadow);
  padding:18px;
}
.title{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
h1{font-size:22px;margin:0;letter-spacing:.2px}
.sub{margin:0;color:var(--muted);font-size:13px}
.controls{display:flex;gap:12px;flex-wrap:wrap;align-items:end}
.control{display:flex;flex-direction:column;gap:6px;min-width:180px}
.control.grow{flex:1;min-width:240px}
label{font-size:12px;color:var(--muted2)}
select,input{
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.22);
  color:var(--text);
  padding:10px 12px;
  font-size:14px;
  outline:none;
}
select:focus,input:focus{border-color:rgba(255,255,255,.22)}
.meta{
  display:flex;justify-content:space-between;align-items:center;
  margin:14px 2px 12px;gap:10px;flex-wrap:wrap
}
.pill{
  border:1px solid var(--border);
  background:rgba(255,255,255,.08);
  border-radius:999px;
  padding:8px 12px;
  font-size:13px;
  color:var(--muted);
}
.hint{font-size:13px;color:var(--muted2)}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:1100px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.grid{grid-template-columns:1fr}}
.card{
  display:flex;gap:12px;align-items:center;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  border-radius:var(--r);
  padding:12px;
  box-shadow:0 8px 18px rgba(0,0,0,.22);
  transition:transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.card:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.16);
}
.iconWrap{
  width:46px;height:46px;border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.22);
  display:grid;place-items:center;flex:0 0 auto;
}
.icon{width:100%;height:100%;object-fit:cover}
.iconFallback{
  font-weight:700;color:rgba(255,255,255,.75);
  font-size:14px;letter-spacing:.5px;
}
.cardBody{min-width:0;display:flex;flex-direction:column;gap:4px}
.cardTitle{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cardSub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.empty{
  margin-top:30px;
  border:1px dashed rgba(255,255,255,.18);
  border-radius:var(--r);
  padding:22px;
  color:var(--muted);
  background:rgba(255,255,255,.04);
}
.hidden{display:none}
CSS