/* v119 authoritative artwork + chips for 3D Scrolling */

.threeDCard .tplCover{
  position:relative;
  aspect-ratio: 400 / 275;
  overflow:hidden;
  background:#0a0e16;
}
.threeDCard .tplCover img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.threeDCard .threeDBadge{
  position:absolute;
  left:12px;
  top:12px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font:800 11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.04em;
  color:#fff;
  background:rgba(3,7,18,.68);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  backdrop-filter:blur(8px);
}
.threeDCard .threeDBadge i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#ff375f;
  box-shadow:0 0 0 4px rgba(255,55,95,.15);
}

.threeDScrollJobFilters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 14px;
}
.threeDScrollJobFilters button{
  border:1px solid var(--line,#e5e7eb);
  background:var(--surface,#fff);
  color:var(--text,#111827);
  border-radius:999px;
  padding:7px 11px;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}
.threeDScrollJobFilters button.active{
  border-color:#111827;
  background:#111827;
  color:#fff;
}

@media (max-width:720px){
  .threeDCard .threeDBadge{left:10px;top:10px;padding:5px 8px}
}