:root { --bg: #0f0f0f; --text: #fff; --accent: #3d3d3d; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: sans-serif; overflow-x: hidden; }

.top-bar { 
    height: 60px; display: flex; justify-content: space-between; align-items: center;
    padding: 0 20px; background: #202020; position: sticky; top: 0; z-index: 100;
}

.grid-container {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px; padding: 20px;
}

.video-card { cursor: pointer; transition: transform 0.2s; }
.video-card img { width: 100%; border-radius: 12px; }

.drawer {
    position: fixed; top: 0; right: -300px; width: 300px; height: 100%;
    background: #1e1e1e; z-index: 1000; transition: 0.3s; padding: 20px;
}
.drawer.open { right: 0; }

#overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.7);
    display: none; z-index: 999;
}

.modal { display: none; position: fixed; inset: 0; background: #000; z-index: 2000; }
.modal-content { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
.close { position: absolute; top: 20px; right: 20px; color: #fff; font-size: 28px; cursor: pointer; background: rgba(0,0,0,0.5); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; z-index: 2001; }
.close:hover { background: rgba(255,255,255,0.2); }
video { width: 100%; height: 100%; max-width: 100%; max-height: 100vh; object-fit: contain; }