body { font-family: system-ui, Arial, sans-serif; margin: 0; background: #0f1115; color: #eaeef7; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 24px; }
h1, h2 { margin: 0 0 16px; }
.filters { display: grid; gap: 10px; grid-template-columns: 1fr 180px 180px 160px auto auto; align-items: center; margin-bottom: 18px; }
.filters input, .filters select { padding: 10px; border-radius: 10px; border: 1px solid #2b3140; background: #141824; color: #eaeef7; }
button, .btn { padding: 10px 14px; border-radius: 10px; border: 1px solid #2b3140; background: #1b2233; cursor: pointer; }
.btn { display: inline-block; }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 22px;
}

.card { border: 1px solid #232a3a; background: #121625; border-radius: 14px; overflow: hidden; }
.cover { height: 140px; background: #0b0e17; display: grid; place-items: center; }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.placeholder { opacity: .6; padding: 12px; }
.tall { height: 340px; display: grid; place-items: center; }
.card-body { padding: 12px; }
.card-body h3 { margin: 0 0 8px; font-size: 16px; }
.meta { opacity: .8; font-size: 13px; margin-bottom: 6px; }
.card-body p { margin: 10px 0 0; opacity: .9; font-size: 13px; line-height: 1.4; }

.detail { display: grid; grid-template-columns: 320px 1fr; gap: 16px; margin-top: 12px; }
.detail-cover img { width: 100%; border-radius: 14px; border: 1px solid #232a3a; }
.detail-body { border: 1px solid #232a3a; border-radius: 14px; background: #121625; padding: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.chip { padding: 6px 10px; border: 1px solid #2b3140; border-radius: 999px; background: #141824; font-size: 13px; }
.meta-list { display: grid; gap: 6px; margin: 10px 0 14px; opacity: .9; }
.desc { line-height: 1.6; opacity: .95; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 10px; }
.gallery img { width: 100%; border-radius: 12px; border: 1px solid #232a3a; object-fit: cover; }
@media (max-width: 900px) {
  .filters { grid-template-columns: 1fr; }
  .detail { grid-template-columns: 1fr; }
}
.card-video {
  display: flex;
  flex-direction: column;
}

.card-video .video {
  position: relative;
  width: 90%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-bottom: 1px solid #232a3a;
}

.card-video iframe {
  width: 90%;
  height: 100%;
  border: 0;
}

.card-video .desc {
  font-size: 13px;
  line-height: 1.45;
  opacity: .9;
  margin-top: 8px;
}

.card-actions {
  display: flex;
  gap: 8px;
  padding: 0 12px 12px;
}
.video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.video iframe {
  width: 90%;
  height: 100%;
  border: 0;
}
.video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.video video { width: 100%; height: 100%; object-fit: cover; display:block; }
.video { position: relative; width: 100%; aspect-ratio: 16 / 9; background:#000; }
.video video, .video iframe { width: 90%; height: 100%; border:0; display:block; object-fit:cover; }