/* YOLO标注工具 */
/* 画布台面：空的时候显示提示；收拖进来的图片会高亮 */
.yl-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:20rem;padding:.5rem;
  border:1px solid #eef1f5;border-radius:.6rem;background:#f6f7f9}
.yl-stage.hover{border-color:var(--site-primary);background:var(--site-tint)}
.yl-stage canvas{display:block;max-width:100%;max-height:62vh;border-radius:.375rem;touch-action:none}
.yl-empty{color:#8a939c;font-size:.875rem;text-align:center;line-height:1.9;padding:1rem}
/* 缩略图条（当前这张高亮，右上角一个 × 可以移除） */
.yl-thumbs{display:flex;gap:.375rem;overflow-x:auto;padding-bottom:.25rem}
.yl-thumb{position:relative;flex:0 0 auto;padding:0;border:2px solid transparent;border-radius:.4rem;background:none;line-height:0}
.yl-thumb img{display:block;width:4.25rem;height:3.2rem;object-fit:cover;border-radius:.3rem}
.yl-thumb.is-cur{border-color:var(--site-primary)}
.yl-thumb b{position:absolute;right:.15rem;bottom:.15rem;padding:0 .3rem;border-radius:.5rem;
  background:rgba(0,0,0,.62);color:#fff;font-size:.6875rem;font-weight:600}
.yl-thumb-x{position:absolute;left:-.35rem;top:-.35rem;width:1.1rem;height:1.1rem;border-radius:50%;
  background:#dc2626;color:#fff;font-size:.8rem;font-style:normal;line-height:1.05rem;text-align:center;cursor:pointer}
.yl-names{font-size:.875rem}
/* 类别小胶囊：点一下设为当前类别（有选中的框就改成这个类别） */
.yl-chips{display:flex;flex-wrap:wrap;gap:.3rem;max-height:9rem;overflow:auto}
.yl-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.1rem .5rem;border-radius:999px;
  background:#f4f6f8;font-size:.8125rem;cursor:pointer}
.yl-chip i{width:.6rem;height:.6rem;border-radius:50%;display:inline-block}
.yl-chip.is-cur{outline:2px solid var(--site-primary)}
.yl-chip.is-more{background:#fff;border:1px dashed #cbd5e1;color:#5b6670}
/* 本张的框列表 */
.yl-list{max-height:11rem;overflow:auto}
.yl-row{display:flex;align-items:center;gap:.5rem;padding:.25rem .35rem;border-bottom:1px solid #f1f3f5;
  font-size:.8125rem;cursor:pointer}
.yl-row.is-sel{background:var(--site-tint)}
.yl-row .yl-dot{width:.6rem;height:.6rem;border-radius:50%;flex:0 0 auto}
.yl-row .yl-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yl-row button{border:0;background:none;color:#98a2ad;padding:0 .15rem;line-height:1}
.yl-row button:hover{color:#dc2626}
.yl-file{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .5rem}
.yl-file>i{flex:0 0 auto}
.yl-file .text-break{flex:0 1 auto;min-width:0;max-width:100%}
.yl-file .sub{flex:1 1 12rem;min-width:0;white-space:normal}
.yl-file .btn{flex:0 0 auto;white-space:nowrap}
@media (max-width:575.98px){
  .yl-stage{min-height:14rem}
  .yl-stage canvas{max-height:42vh}
}