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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #0f0f0f;
  color: #f1f1f1;
}

.topbar {
  padding: 16px 24px;
  background: #1a1a1a;
  border-bottom: 1px solid #2a2a2a;
}

main { padding: 20px; max-width: 1200px; margin: 0 auto; }

.player-wrap {
  margin-bottom: 24px;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
}
.player-wrap.hidden { display: none; }

#video { width: 100%; max-height: 70vh; display: block; }

.quality-selector {
  padding: 10px 14px;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 8px;
}
.quality-selector select {
  background: #2a2a2a;
  color: #fff;
  border: 1px solid #3a3a3a;
  border-radius: 6px;
  padding: 6px 10px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.card {
  background: #1a1a1a;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s ease;
}
.card:hover { transform: scale(1.03); }
.card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.card .info { padding: 10px; }
.card .title { font-size: 14px; font-weight: 600; }
.card .date { font-size: 12px; color: #999; margin-top: 4px; }

@media (max-width: 600px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}