* { box-sizing: border-box; }
:root { --page-pad: 12px; --line: #0a0a0a; --col-min: 288px; --gap: 1px; }
body { margin:0; font-family:'JetBrains Mono', monospace; background:#0a0a0a; color:#e6e6e6; }
.toolbar { position:sticky; top:0; z-index:5; display:flex; gap:8px; padding:var(--page-pad); background:rgba(10,10,10,.9); border-bottom:1px solid #1a1a1a; }
input[type="text"]{ background:#111; border:1px solid #2a2a2a; color:#e6e6e6; padding:6px 8px; font-family:'JetBrains Mono', monospace; width:240px; }
.counts{ margin-left:auto; opacity:.65 }
.grid { display:grid; grid-template-columns: repeat(var(--cols, 1), var(--col, var(--col-min))); justify-content:start; gap: var(--gap); padding: var(--gap) var(--page-pad); background: var(--line); }
.card, .video-card { background:#111; }
.card .name { padding:8px; font-size:12px; opacity:.85; }
.ratio { position:relative; width:100%; aspect-ratio:16/9; background:#000; }
.ratio iframe, .video-el { position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; }
.modal-play { position:absolute; left:0; right:0; top:8%; bottom:12%; display:flex; align-items:center; justify-content:center; background:transparent; border:0; cursor:pointer; z-index:3; }
.modal-play svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.modal-play.hidden { display:none; }
.hidden { display:none; }

/* Grid cards for thumbnails */
.video-card { position:relative; display:block; text-decoration:none; color:inherit; aspect-ratio:16/9; overflow:hidden; }
.thumb { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; display:block; background:#000; }
.thumb.portrait { object-fit:cover; object-position:center center; }
.play-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; letter-spacing:1px; font-family:'JetBrains Mono', monospace; opacity:0; transition:opacity 120ms linear, background 120ms linear; pointer-events:none; }
.video-card:hover .play-overlay { opacity:1; background:rgba(0,0,0,.25); }

/* Modal */
.modal { position:fixed; inset:0; display:none; }
.modal.hidden { display:none; }
.modal:not(.hidden) { display:grid; place-items:center; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.85); }
.modal-content { position:relative; z-index:1; width:min(92vw, 1280px); }
.modal-close { position:absolute; top:-36px; right:0; border:1px solid #fff; background:transparent; color:#fff; font-family:'JetBrains Mono', monospace; padding:2px 6px; cursor:pointer; }
.nav { position:absolute; top:8%; bottom:12%; width:56px; display:flex; align-items:center; justify-content:center; color:#fff; opacity:0; transition:opacity 120ms linear; cursor:pointer; user-select:none; z-index:2; }
.modal-content:hover .nav { opacity:.8; }
.nav:hover { opacity:1; }
.nav-left { left:0; }
.nav-right { right:0; }
.icon { pointer-events:none; }
.icon-img { width:28px; height:28px; filter: invert(1) brightness(2) drop-shadow(0 1px 2px rgba(0,0,0,.5)); }

/* Buttons */
.btn { background:#111; color:#e6e6e6; border:1px solid #2a2a2a; padding:6px 8px; font-family:'JetBrains Mono', monospace; cursor:pointer; }
.btn:hover { background:#151515; }

/* Tags */
.tags { display:flex; flex-wrap:wrap; gap:6px; }
.tag-chip { border:1px solid #2a2a2a; color:#e6e6e6; padding:4px 8px; cursor:pointer; user-select:none; background:#111; }
.tag-chip.active { background:#e6e6e6; color:#0a0a0a; }