body{margin:0;font-family:system-ui;background:#000}
.ni-shorts-header{display:flex;align-items:center;gap:8px;padding:10px 14px 0}
.ni-shorts-header h2{margin:0;font-size:20px;font-weight:700}
.ni-shorts-dot{width:10px;height:10px;background:#ff0000;border-radius:50%}

.ni-grid-wrap{display:grid;gap:14px;padding:12px}
@media(min-width:768px){.ni-grid-wrap{grid-template-columns:repeat(4,1fr)}}
@media(max-width:767px){.ni-grid-wrap{grid-template-columns:1fr}}

.ni-grid-item{
 height:70vh;
 background:#222 center/cover no-repeat;
 border-radius:14px;
 box-shadow:0 8px 22px rgba(0,0,0,.45);
 position:relative;
 cursor:pointer;
}
.ni-pagination{text-align:center;padding:20px}
.ni-pagination a,.ni-pagination span{
 padding:6px 10px;margin:2px;background:#eee;
 border-radius:6px;text-decoration:none;color:#000
}
.ni-pagination .current{background:#000;color:#fff}

.ni-play{position:absolute;bottom:10px;left:12px;color:#fff;font-size:18px}

.ni-modal{
 position:fixed;inset:0;background:rgba(0,0,0,.95);
 display:none;z-index:9999;
 touch-action:none;
}
.ni-modal.active{display:flex;justify-content:center}

.ni-modal-inner{
 max-width:420px;width:100%;height:100vh;position:relative;
}

.ni-modal video{width:100%;height:100%;object-fit:cover}

.ni-title{position:absolute;bottom:80px;left:15px;right:15px;color:#fff;font-weight:600}
.ni-mute{position:absolute;right:15px;bottom:140px;background:rgba(0,0,0,.6);border:none;color:#fff;font-size:20px;padding:10px;border-radius:50%}
.ni-close{position:absolute;top:15px;right:15px;background:none;border:none;color:#fff;font-size:24px}