#container{
    display:grid; 
    grid-template-columns: 250px auto;
    padding-top:10px;
    background:#f2f6ff;
}

#ids{
 padding-bottom:20px;
 display:flex;
 flex-direction: column;
 gap:15px 5%;
 padding-right:20px;
}
#ids span.idSpan{
 padding:10px;
 text-align:center;
 border:1px solid rgba(0,30,255,0.15);
 background:rgba(0,30,255,0.1);
 position:relative;
 min-height:138px;
 display:flex;
 align-items:center;
 justify-items:center;
 justify-content:center;
}
#ids span.idSpan:hover{
 border:1px solid rgba(0,30,255,0.6);
 cursor:pointer;
}
#ids span.idSpan.selected{
 border:1px solid rgba(0,30,255,0.6);
 background:rgba(0,30,255,0.3);
 cursor:default !important;
}
#ids span.idSpan img.idImage{
 max-width:100px;
 max-height:100px;
}


#ids .tools{
display:none;
color:red;
font-size:14px;
position:absolute;
top:2px;
right:2px;
line-height:1;
height:16px;
align-items:center;
justify-items:center;
justify-content:center;
}
#ids span.idSpan:hover .tools{
display:flex !important;
}
#ids .tools >span{
margin:0 2px;
padding:1px;
width:15px;
height:15px;
align-items:center;
justify-items:center;
justify-content:center;
}
#ids .tools >span:hover{
color:#FFF;
background:rgba(255,0,0,0.7);
}



#ids span.idSpan .topic{
 position:absolute;
 top:5px;
 left:5px;
 text-shadow:1px 1px 1px #FFF;
 color:rgba(0,0,0,0.8);
}



.tip001{
 position:absolute;
 left:0px;
 top:0px;
 padding:5px 0 0 5px;
 color:#68a1e0;
 text-shadow:1px 1px 1px #FFF;
}



 span.customB001{
 display:inline-block;
 margin:0 5px 0 30px;
 min-width:85px;
 text-align: justify; /* 文本两端对齐核心属性 */
 text-align-last: justify; /* 兼容单行文本（关键！否则单行不生效） */
 }









#imgInfo{
 background:#fff;
 text-align:center;
 display:block;
 padding:5px;
}

#imgInfo .imgInfoSpan{
 font-size:12px;
 color:#89B;
 padding:2px 7px 1px 7px;
 border-radius:7px 7px 0 0;
}



 #itemCollection {
 overflow: scroll;
 border: 1px dashed #BBB;
 text-align: center;
 min-height:80vh;
 position:relative;
 }

 /* 主容器 */
 #imageContainer {
 position: relative;
 display: inline-block;
 padding-top:30px;
 overflow: visible;
 user-select: none;
 }
 /* 图片 */
 #imageContainer #targetImage {
 display: block;
 max-width: 800px;
 max-height: 600px;
 cursor: default;
 transform-origin: center center;
 width: auto;
 height: auto;
 outline:1px solid #ccc;
 }
 /* 剪裁模式下图片显示十字光标 */
 #imageContainer .crop-mode #targetImage {
 cursor: crosshair;
 }
 /* 选区框 - 绝对定位在容器中 */
 #imageContainer .crop-selector {
 position: absolute;
 border: 2px solid #007bff;
 background: rgba(0, 123, 255, 0.1);
 pointer-events: none; /* 选区框本身不接收事件 */
 box-sizing: border-box;
 z-index: 11;
 }
 /* 选区内部使用移动光标 */
 #imageContainer .crop-selector.move-cursor {
 cursor: move;
 }
 /* 8个操控点 */
 #imageContainer .resize-handle {
 position: absolute;
 width: 16px;
 height: 16px;
 background: white;
 border: 2px solid #007bff;
 border-radius: 50%;
 z-index: 12;
 pointer-events: all;
 cursor: pointer;
 }

 #imageContainer .handle-tl {
 top: -10px;
 left: -10px;
 cursor: nwse-resize;
 }

 #imageContainer .handle-tm {
 top: -10px;
 left: 50%;
 margin-left: -8px;
 cursor: ns-resize;
 }

 #imageContainer .handle-tr {
 top: -10px;
 right: -10px;
 cursor: nesw-resize;
 }

 #imageContainer .handle-ml {
 top: 50%;
 left: -10px;
 margin-top: -8px;
 cursor: ew-resize;
 }

 #imageContainer .handle-mr {
 top: 50%;
 right: -10px;
 margin-top: -8px;
 cursor: ew-resize;
 }

 #imageContainer .handle-bl {
 bottom: -10px;
 left: -10px;
 cursor: nesw-resize;
 }

 #imageContainer .handle-bm {
 bottom: -10px;
 left: 50%;
 margin-left: -8px;
 cursor: ns-resize;
 }

 #imageContainer .handle-br {
 bottom: -10px;
 right: -10px;
 cursor: nwse-resize;
 }
 /* 选区尺寸信息 */
 #imageContainer .selector-info {
 position: absolute;
 left: 0;
 bottom: -25px;
 background: rgba(0,0,0,0.8);
 color: #fff;
 padding: 3px 8px;
 font-size: 13px;
 border-radius: 3px;
 pointer-events: none;
 white-space: nowrap;
 z-index: 13;
 }
 /* 加载遮罩 */
 #imageContainer .loading-mask {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(255, 255, 255, 0.9);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 16px;
 color: #333;
 z-index: 20;
 }
 /* 信息面板 */
 .info-panel {
 position: fixed;
 top: 80px;
 right: 20px;
 background: white;
 border: 1px solid #ddd;
 border-radius: 8px;
 padding: 15px;
 box-shadow: 0 2px 10px rgba(0,0,0,0.1);
 max-width: 300px;
 z-index: 50;
 display: none;
 }

 .info-panel.show {
 display: block;
 }

 .info-panel h3 {
 margin: 0 0 10px 0;
 color: #333;
 font-size: 16px;
 }

 .info-panel pre {
 background: #f5f5f5;
 padding: 10px;
 border-radius: 4px;
 font-size: 12px;
 max-height: 300px;
 overflow-y: auto;
 white-space: pre-wrap;
 word-wrap: break-word;
 }

 .info-panel .close-btn {
 position: absolute;
 top: 10px;
 right: 10px;
 background: none;
 border: none;
 font-size: 18px;
 cursor: pointer;
 color: #666;
 }