*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; margin:0; background:#0b1220; color:#e5e7eb}
a{color:inherit; text-decoration:none}

.wrap{max-width:1100px; margin:0 auto; padding:28px 16px}
.hero{display:flex; flex-direction:column; gap:10px; margin-bottom:18px}
.hero h1{margin:0; font-size:clamp(28px,4vw,44px)}
.hero p{margin:0; color:#a7b0c0; max-width:70ch}

.toolbar{display:flex; gap:10px; flex-wrap:wrap; margin:18px 0}
.input, .select{
  background:#0f1a33; border:1px solid #223156; color:#e5e7eb;
  padding:10px 12px; border-radius:12px; outline:none;
}
.input{flex:1; min-width:220px}
.select{min-width:200px}

.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
@media (max-width: 900px){ .grid{grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 560px){ .grid{grid-template-columns: 1fr;} }

.card{
  background:#0f1a33;
  border:1px solid #223156;
  border-radius:16px;
  overflow:hidden;
  transition: transform .15s ease, border-color .15s ease;
}
.card:hover{ transform: translateY(-2px); border-color:#3b5bdc; }
.thumb{
  aspect-ratio: 16 / 9;
  background:#121f3e;
  display:block;
  width:100%;
  object-fit:cover;
}
.content{padding:12px 12px 14px}
.title{margin:0 0 6px; font-size:18px}
.desc{margin:0 0 10px; color:#a7b0c0; font-size:14px; line-height:1.35}
.tags{display:flex; gap:8px; flex-wrap:wrap}
.tag{
  font-size:12px; padding:4px 8px; border-radius:999px;
  border:1px solid #223156; color:#cbd5e1; background:#0b1530;
}

.empty{padding:18px; color:#a7b0c0; border:1px dashed #223156; border-radius:16px}