body { font-family: Arial, sans-serif; margin: 0; background:#0b0f14; color:#e8eef7; }
a { color:#8ab4ff; text-decoration:none; }
.container { max-width:1100px; margin:0 auto; padding:20px; }
.header { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap:14px; margin-top:16px; }
.card { background:#121a24; border:1px solid #1f2a3a; border-radius:12px; padding:14px; }
.card h3 { margin:10px 0 8px; font-size:18px; }
.badge { display:inline-block; padding:4px 10px; border-radius:999px; background:#1f2a3a; font-size:12px; }
.toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:12px; }
input, select { padding:10px; border-radius:10px; border:1px solid #2a3a52; background:#0f1620; color:#e8eef7; }
.btn { padding:10px 12px; border-radius:10px; background:#1f6feb; color:white; border:0; cursor:pointer; display:inline-block; }
.small { color:#a8b3c7; font-size:13px; }

.thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  border: 1px solid #1f2a3a;
  background: #0a0f16;
  object-fit: cover;
}

.player-wrap { background:#000; border-radius:12px; overflow:hidden; border:1px solid #1f2a3a; margin-top:14px; }
.player-aspect { width:100%; background:#000; position:relative; }
.player-aspect::before { content:""; display:block; padding-top:56.25%; } /* 16:9 default */
.player-aspect[data-aspect="9:16"]::before { padding-top:177.78%; }
.player-aspect[data-aspect="4:3"]::before { padding-top:75%; }
.player-aspect iframe { position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; }

.notice { background:#1b2533; border:1px solid #2a3a52; border-radius:12px; padding:12px; }