.film{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.frame{position:relative;width:96px;height:96px;border-radius:8px;overflow:hidden;
border:1px solid var(--line);background:var(--sunken)}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.frame-n{position:absolute;left:5px;top:5px;min-width:19px;height:19px;padding:0 5px;
border-radius:5px;background:rgba(0,0,0,.66);color:#fff;
font-family:var(--mono);font-size:11px;font-weight:700;
display:flex;align-items:center;justify-content:center}
.frame-tools{position:absolute;left:0;right:0;bottom:0;display:flex;
background:rgba(0,0,0,.6);opacity:0;transition:opacity .12s}
.frame:hover .frame-tools,.frame:focus-within .frame-tools{opacity:1}
@media (hover:none){ .frame-tools{opacity:1} }
.frame .frame-btn{flex:1;padding:5px 0;color:#fff;border-radius:0}
.frame .frame-btn:hover{background:rgba(255,255,255,.18);color:#fff}
.film.locked{opacity:.6}
.film.locked .frame-tools{display:none}
@media (min-width:640px){
.frame{width:110px;height:110px}
}
.frame.is-doc{background:var(--panel)}
.frame-doc{display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:4px;width:100%;height:100%;padding:8px;text-align:center}
.frame-doc b{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--dim)}
.frame-doc i{font-style:normal;font-size:10px;line-height:1.35;color:var(--dim2);
overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
word-break:break-all}