:root{
  --tpsvc-shadow-lg: 0 20px 40px rgba(0,0,0,.18);
}

/* Грид */
.tpsvc-grid{
  display:grid;
  grid-template-columns: repeat(var(--tpsvc-grid-cols,3), minmax(0,1fr));
  gap: var(--tpsvc-grid-gap,24px);
  margin: 16px auto;
}

/* Карточка */
.tpsvc-card{
  width: var(--tpsvc-w,320px);
  height: var(--tpsvc-h,520px);
  border-radius: var(--tpsvc-radius,20px);
  overflow: hidden;
  background: #111;
  box-shadow: var(--tpsvc-shadow, var(--tpsvc-shadow-lg));
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Медиа-область */
.tpsvc-media{
  position: relative;
  flex: 1 1 auto;
  isolation: isolate;
  background: #000;
}

.tpsvc-poster{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  filter: saturate(0.98);
}
.tpsvc-poster--ph{
  background: linear-gradient(180deg, #3b3b3b, #1a1a1a);
}

/* затемнение как у VOICE */
.tpsvc-media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 75%, rgba(0,0,0,.85) 100%);
  z-index:1;
  pointer-events:none;
}

/* Play */
.tpsvc-play{
  position:absolute;
  z-index:2;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:74px; height:74px;
  border-radius:999px;
  border:none; outline:none;
  background: rgba(255,255,255,.86);
  cursor:pointer;
  display:grid; place-items:center;
  transition: transform .18s ease, background .2s ease;
}
.tpsvc-play:hover{ transform:translate(-50%,-50%) scale(1.06); }
.tpsvc-play:active{ transform:translate(-50%,-50%) scale(0.98); }
.tpsvc-play-icon{
  width:0; height:0;
  border-left:22px solid #111;
  border-top:14px solid transparent;
  border-bottom:14px solid transparent;
  margin-left:4px;
}

/* Лайк/Шер */
.tpsvc-like, .tpsvc-share{
  position:absolute; z-index:2;
  right:14px; width:36px; height:36px;
  border-radius:999px; background: rgba(255,255,255,.86);
  cursor:pointer; transition:transform .18s ease, background .2s ease; 
  display:grid; place-items:center;
}
.tpsvc-like{ top:14px; }
.tpsvc-share{ top:60px; }
.tpsvc-like::before{
  content:"❤"; font-size:18px; line-height:1; color:#222;
}
.tpsvc-like.tpsvc-liked{ background:#ff3366; }
.tpsvc-like.tpsvc-liked::before{ color:#fff; }
.tpsvc-share::before{
  content:"↗"; font-size:18px; transform:rotate(45deg);
}

/* Счётчик */
.tpsvc-badge-views{
  position:absolute; z-index:2; left:14px; bottom:14px;
  color:#fff; font: 500 13px/1.1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  display:flex; align-items:center; gap:8px;
  opacity:.95;
}
.tpsvc-eye{
  width:18px; height:12px; display:inline-block;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 3px, transparent 3px) center/100% 100%,
    linear-gradient(#fff, #fff) center/100% 2px;
  mask: radial-gradient(closest-side, transparent 65%, black 66%);
}
.tpsvc-views-text{ white-space:nowrap; }

/* Подпись */
.tpsvc-caption{
  padding:12px 14px 16px;
  color:#fff; background:#1c1c1c;
  font: 600 14px/1.35 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  min-height: 64px;
}

/* Видео-объект когда воспроизводим */
.tpsvc-embed{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0; display:block; z-index:2; background:#000;
  border-radius:inherit;
}

/* Адаптив */
@media (max-width: 680px){
  .tpsvc-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px){
  .tpsvc-grid{ grid-template-columns: 1fr; }
}