.cp97-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:14px;
  margin-top:12px;
}
.cp97-grid-wide{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}

.cp97-card{
  position:relative;
  display:flex;flex-direction:column;
  border:1px solid var(--brd,rgba(255,255,255,.14));
  border-radius:12px;overflow:hidden;
  background:rgba(255,255,255,.035);
  text-decoration:none;color:inherit;
  transition:border-color .18s var(--ease,ease),background .18s var(--ease,ease),
             transform .18s var(--ease,ease);
}


.cp97-hit{position:absolute;inset:0;z-index:1;border-radius:12px}

.cp97-hitbtn{appearance:none;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit;width:100%}


.cp97-frame{
  display:block;width:100%;aspect-ratio:16/9;border:0;
  border-bottom:1px solid var(--brd,rgba(255,255,255,.12));
  background:#000;
}
.cp97-card.cp97-playing{border-color:rgba(255,107,166,.5)}
.cp97-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.cp97-card:has(.cp97-hit:hover),
.cp97-card:has(.cp97-hit:focus-visible){
  border-color:rgba(255,107,166,.6);
  background:rgba(238,12,93,.09);
  transform:translateY(-2px);
}
.cp97-card:has(.cp97-hit:focus-visible){outline:2px solid #ff6aa6;outline-offset:2px}


.cp97-short{position:relative;z-index:2}
.cp97-short a{pointer-events:auto}



.cp97-thumb{
  position:relative;display:block;
  aspect-ratio:16/9;width:100%;
  overflow:hidden;
  border-bottom:1px solid var(--brd,rgba(255,255,255,.12));
}

.cp97-thumb{background-repeat:no-repeat;background-position:center;background-size:cover}
.cp97-thumb-yt{background-image:linear-gradient(135deg,#3a1520,#1a0d16)}
.cp97-thumb-sp{background-image:linear-gradient(135deg,#241a3a,#141024)}


.cp97-play{
  position:absolute;left:50%;top:50%;
  width:52px;height:36px;margin:-18px 0 0 -26px;
  border-radius:9px;
  background:rgba(12,8,14,.62);
  border:1px solid rgba(255,255,255,.28);
  transition:background .18s var(--ease,ease),transform .18s var(--ease,ease);
}
.cp97-play::after{
  content:"";position:absolute;left:50%;top:50%;
  margin:-7px 0 0 -4px;
  border-style:solid;border-width:7px 0 7px 12px;
  border-color:transparent transparent transparent #fff;
}
.cp97-card:has(.cp97-hit:hover) .cp97-play{background:var(--berry,#ee0c5d);transform:scale(1.06)}

.cp97-dur{
  position:absolute;right:8px;bottom:8px;
  padding:2px 6px;border-radius:4px;
  background:rgba(8,5,10,.82);
  color:#fff;
  font:700 11px/1.5 'Poppins',system-ui,Arial,sans-serif;
  letter-spacing:.02em;
}



.cp97-meta{display:flex;flex-direction:column;gap:6px;padding:12px 13px 13px}

.cp97-t{
  font:800 13.5px/1.4 'Poppins',system-ui,Arial,sans-serif;
  color:var(--ink,#e9e6f0);
}
.cp97-card:has(.cp97-hit:hover) .cp97-t{color:#fff}

.cp97-srcrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px}

.cp97-src{
  padding:2px 7px;border-radius:999px;
  font:800 10px/1.6 'Poppins',system-ui,Arial,sans-serif;
  white-space:nowrap;
}

.cp97-yt{background:rgba(255,45,80,.18);border:1px solid rgba(255,90,120,.55);color:#ffd0da}
.cp97-sp{background:rgba(120,90,247,.18);border:1px solid rgba(168,140,255,.5);color:#dcd2ff}

.cp97-by{
  font:600 10.5px/1.5 'Poppins',system-ui,Arial,sans-serif;
  color:var(--muted,#b8b0c4);
}
.cp97-free,.cp97-need{
  font:700 10px/1.5 'Poppins',system-ui,Arial,sans-serif;
  padding:1px 6px;border-radius:999px;
}
.cp97-free{background:rgba(60,200,140,.16);border:1px solid rgba(90,220,160,.45);color:#b6f0d5}
.cp97-need{background:rgba(255,255,255,.07);border:1px solid var(--brd-2,rgba(255,255,255,.16));color:#cfc7da}

.cp97-s{
  font:400 12.2px/1.55 'Poppins',system-ui,Arial,sans-serif;
  color:var(--muted,#b8b0c4);
}
.cp97-file{
  font:600 10.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:#cfc7da;
  word-break:break-all;
  opacity:.92;
}
.cp97-short{
  font:600 11px/1.5 'Poppins',system-ui,Arial,sans-serif;
  color:var(--muted,#b8b0c4);
}
.cp97-short a{color:#ffd7e7}


.cp97-card.cp97-nolink{cursor:default}
.cp97-card.cp97-nolink .cp97-play{opacity:.5}
.cp97-pending{
  display:block;margin:0 13px 13px;padding:7px 9px;
  border-radius:8px;
  background:rgba(255,190,60,.12);
  border:1px solid rgba(255,200,90,.42);
  color:#ffe2ad;
  font:600 10.8px/1.5 'Poppins',system-ui,Arial,sans-serif;
}


.cp97-note{
  position:relative;z-index:2;
  display:block;margin:0 13px 12px;padding:6px 8px;
  border-radius:7px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--brd-2,rgba(255,255,255,.16));
  border-left:2px solid rgba(255,200,90,.55);
  color:#cfc7da;
  font:500 10.3px/1.5 'Poppins',system-ui,Arial,sans-serif;
}



.cp97-block{margin-top:16px}
.cp97-head .cp84-head-ic{color:#ffd36a}
.cp97-block .cp84-head{
  background:linear-gradient(100deg,rgba(255,190,60,.16),rgba(238,12,93,.12));
  border-color:rgba(255,200,90,.4);
}

.w91-group.w91-plus{border-color:rgba(255,200,90,.42)}
.w91-group.w91-plus .w91-ic{color:#ffd36a}