.pekv-block{--pekv-green:#087c58;box-sizing:border-box;width:100%;min-width:0;margin:5px 0 14px;padding:12px;border:1px solid #dbe7e1;border-radius:5px;background:#fff;color:#345449;font:13px/1.5 Arial,sans-serif;container-type:inline-size}
.pekv-block *{box-sizing:border-box}
.pekv-block .pekv-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px}
.pekv-block .pekv-card{position:relative;min-width:0;margin:0;padding:0;background:#fff}
.pekv-block .pekv-image{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border:1px solid #e0e9e4;border-radius:5px;background:linear-gradient(135deg,#d7ede2,#edf6f1);text-decoration:none}
.pekv-block .pekv-image img{display:block;width:100%;height:100%;max-width:100%;margin:0;padding:0;border:0;border-radius:0;object-fit:cover;transition:transform .25s ease}
.pekv-block .pekv-image:hover img{transform:scale(1.035)}
.pekv-block .pekv-image::after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#102a2259);pointer-events:none}
.pekv-block .pekv-play{position:absolute;z-index:1;left:50%;top:50%;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding-left:2px;transform:translate(-50%,-50%);border:1px solid #ffffffa6;border-radius:50%;background:#083c2c9c;color:#fff;font-size:14px;box-shadow:0 2px 8px #0002;pointer-events:none}
.pekv-block .pekv-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:8px 0 0;padding:0;color:var(--pekv-green);font:600 13px/20px Arial,sans-serif;text-decoration:none;overflow-wrap:anywhere}
.pekv-block .pekv-title:hover{color:#045d40; text-decoration: none !important;}
.pekv-block a:focus-visible,.pekv-block button:focus-visible,.pekv-block [tabindex]:focus-visible{outline:2px solid #1aa26f;outline-offset:3px}
.pekv-block.pekv-list .pekv-items,.pekv-block.pekv-ranked .pekv-items{grid-template-columns:minmax(0,1fr);gap:0}
.pekv-block.pekv-list .pekv-card,.pekv-block.pekv-ranked .pekv-card{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #e8efeb}
.pekv-block.pekv-list .pekv-card:first-child,.pekv-block.pekv-ranked .pekv-card:first-child{padding-top:0}
.pekv-block.pekv-list .pekv-card:last-child,.pekv-block.pekv-ranked .pekv-card:last-child{padding-bottom:0;border-bottom:0}
.pekv-block.pekv-list .pekv-image,.pekv-block.pekv-ranked .pekv-image{flex:0 0 34%;max-width:180px}
.pekv-block.pekv-list .pekv-title,.pekv-block.pekv-ranked .pekv-title{flex:1;min-width:0;margin:0;font-size:12px;line-height:19px;-webkit-line-clamp:3}
.pekv-block.pekv-list .pekv-play,.pekv-block.pekv-ranked .pekv-play{width:26px;height:26px;font-size:10px}
.pekv-block.pekv-ranked .pekv-items{counter-reset:pekv-rank}
.pekv-block.pekv-ranked .pekv-card{counter-increment:pekv-rank}
.pekv-block.pekv-ranked .pekv-card::before{content:counter(pekv-rank,decimal-leading-zero);flex-shrink:0;color:#6c8d7b;font:600 12px Arial}
.pekv-block.pekv-ranked .pekv-card:first-child::before{color:#087c58}
.pekv-block .pekv-tabbar{display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;padding:0 0 10px;margin:0 0 12px;border-bottom:1px solid #e0ebe5}
.pekv-block .pekv-tabbar button{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-height:32px;max-width:100%;padding:5px 12px;border:1px solid #cfe2d7;border-radius:5px;background:#f3faf6;color:#087c58;font:600 12px/20px Arial;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pekv-block .pekv-tabbar button[aria-selected=true]{background:#087c58;border-color:#087c58;color:#fff}
.pekv-block .pekv-panel[hidden],.pekv-block .pekv-tabbar button[hidden]{display:none!important}
.pekv-block .pekv-empty{margin:0;padding:24px 12px;text-align:center;color:#71867a;font-size:12px}
.pekv-block .pekv-panel+.pekv-panel{margin-top:12px}
.pekv-block[data-pekv-ready] .pekv-panel{margin-top:0}
@container(max-width:360px){.pekv-block .pekv-items{gap:12px}.pekv-block .pekv-tabbar button{padding:5px 9px}.pekv-block.pekv-ranked .pekv-card,.pekv-block.pekv-list .pekv-card{gap:8px}}
@media(prefers-reduced-motion:reduce){.pekv-block .pekv-image img{transition:none}.pekv-block .pekv-image:hover img{transform:none}}

.pekv-block a,
.pekv-block a:hover,
.pekv-block a:focus {
    text-decoration: none !important;
}