.rspl{
  box-sizing:border-box;
  max-width:1200px;
  margin:0 auto;
  padding:16px;
}
.rspl *, .rspl *::before, .rspl *::after{box-sizing:border-box;}

.rtl .rspl{direction:rtl;}

.rspl__toolbar{
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex-wrap:wrap;
  margin-bottom:16px;
  padding:12px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  background:rgba(0,0,0,.02);
}

.rspl__field{display:flex;flex-direction:column;gap:6px;min-width:180px;}
.rspl__field--search{flex:1;min-width:240px;}
.rspl__label{font-size:12px;opacity:.75;}
.rspl__select,.rspl__input{
  height:40px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.14);
  background:#fff;
  outline:none;
}
.rspl__select{
  /* Theme-safe select styling: prevent multiple/double arrows injected by themes */
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance:none !important;
  padding-right:38px !important;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2714%27%20height%3D%2714%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M5%207l5%206%205-6%27%20fill%3D%27none%27%20stroke%3D%27%23666%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-size:14px 14px !important;
  background-position:right 12px center !important;
}
.rtl .rspl__select{
  padding-right:12px !important;
  padding-left:38px !important;
  background-position:left 12px center !important;
}
.rspl__input{width:100%;}

.rspl__notice{
  margin:12px 0;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,193,7,.12);
}

.rspl__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
}
@media (max-width: 1024px){
  .rspl__grid{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width: 640px){
  .rspl__grid{grid-template-columns:repeat(1, minmax(0,1fr));}
}

.rspl__card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  height:100%;
}

.rspl__thumb{width:100%;aspect-ratio:16/9;background:rgba(0,0,0,.04);}
.rspl__img{width:100%;height:100%;object-fit:cover;display:block;}
.rspl__img--placeholder{width:100%;height:100%;background:linear-gradient(135deg, rgba(0,0,0,.06), rgba(0,0,0,.02));}

.rspl__body{padding:12px 12px 14px;display:flex;flex-direction:column;gap:10px;flex:1;}
.rspl__titleRow{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.rspl__name{font-weight:700;font-size:14px;line-height:1.3;}

.rspl__badge{
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  white-space:nowrap;
}
.rspl__badge--pro{background:rgba(0,123,255,.10);}
.rspl__badge--free{background:rgba(40,167,69,.10);}

.rspl__desc{font-size:12px;line-height:1.6;opacity:.8;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:3.2em;}

.rspl__meta{display:flex;flex-wrap:wrap;gap:8px;opacity:.75;font-size:12px;}
.rspl__metaItem{padding:4px 8px;border-radius:999px;border:1px solid rgba(0,0,0,.10);background:rgba(0,0,0,.02);}

.rspl__actions{margin-top:auto;display:flex;gap:10px;}
.rspl__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.14);
  text-decoration:none;
  font-size:12px;
  background:rgba(0,0,0,.02);
}
.rspl__btn:hover{background:rgba(0,0,0,.05);}

.rspl__footer{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:18px;}
.rspl__more{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 16px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.14);
  background:#fff;
  cursor:pointer;
}
.rspl__loading{opacity:.7;font-size:13px;}

.rspl__nameLink{color:inherit;text-decoration:none;}
.rspl__nameLink:hover{text-decoration:underline;}
.rspl__thumbLink{display:block;width:100%;height:100%;}

.rspl__pager{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.rspl__pagerLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.14);
  text-decoration:none;
  font-size:12px;
  background:rgba(0,0,0,.02);
}
.rspl__pagerLink:hover{background:rgba(0,0,0,.05);}