/* Frontend grid styles (same look as before) */
.yt-manual-grid-wrap{max-width:1100px;margin:0 auto;padding:18px}
.yt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.yt-card{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 6px 18px rgba(20,20,50,0.06);cursor:pointer;transition:transform .15s;position:relative}
.yt-card:hover{transform:translateY(-4px)}
.yt-thumb{position:relative;padding-top:56.25%;background:#000}
.yt-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.yt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.45)}
.yt-play:after{content:'';display:block;margin-left:5px;border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent #fff}
.yt-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.65);z-index:9999;padding:18px}
.yt-modal.open{display:flex}
.yt-player{width:100%;max-width:980px;background:#000;border-radius:10px;overflow:hidden;position:relative}
.yt-modal-header{padding:12px 16px;background:#fff;color:#111;font-weight:600}
.yt-close{position:absolute;right:14px;top:14px;background:#fff;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.25);z-index:2}
@media (max-width:600px){ .yt-player{max-width:100%} .yt-grid{gap:10px} }