.tip{
   border:none;
   padding:0;
   margin:0;
   font-size:11px;
   margin:2px 0 0 -2px;
   text-wrap:auto;
}


/*------------     工具栏     -------------*/
#toolsCollection{
    position: sticky;
    top:0;
    z-index:500;
    background:#FFF;
}
#tools {
display: flex;
justify-content: space-between; /* 子元素 分别在两端 */
align-items: center;
background: #cee5ff;
padding: 6px 20px;
border-radius:10px 10px 0 0 ;
}


#tools > .left {
text-align: left;
display: flex;
flex-wrap: nowrap;
}

#tools > .left > span {
border-radius: 5px;
display:inline-flex;
margin-right:20px;
}

#tools > .left > span > :is(button, label){
background: #FFF;
border: none;
padding: 7px 12px;
margin: 0;
font-size: 14px;
cursor: pointer;
border: 1px solid #AAA;
color: #666;
display:inline-flex;
}
#tools > .left > span > :is(button, label) > svg{
width:20px;
height:20px;
margin-right:5px;
}
#tools > .left > span > :is(button, label):first-child {
border-radius: 7px 0 0 7px;
}

#tools > .left > span > :is(button, label):last-child {
border-radius: 0 7px 7px 0;
margin-left:-1px;
}

#tools > .left > span > :is(button, label).selected {
background: #e5eeff !important;
color: #2765dc !important;
border-color: #2765dc !important;
cursor:default !important;
border-right:1px solid #2765dc !important;
z-index:1;
}

#tools > .left > span > :is(button, label):hover{
  color:#2765dc;
}

#tools > .right {
    display:flex;
    align-items:center;
    text-align: right;
}



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






.customSelect001 {
    font-size:16px;
    position: relative;
    width: 150px;
    font-family: 'Segoe UI', Arial, sans-serif;
}

.customSelect001 .select-header {
    padding: 0 10px 0 30px;
    height:38px;
    background: white;
    border: 1px solid rgba(45,125,255,.7);
    border-radius: 30px 0  0 30px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s;
    color:#336;
    user-select: none;
}

.customSelect001 .select-header:hover {
    border-color: #999;
}

.customSelect001 .select-header.active {
    border-color: #4a6cf7;
    box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.1);
}

.customSelect001 .select-arrow {
    transition: transform 0.2s;
    color: #666;
}

.customSelect001 .select-header.active .select-arrow {
    transform: rotate(180deg);
    color: #4a6cf7;
}

.customSelect001 .select-options {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    width: 100%;
    background: white;
    border: 1px solid #ccc;
    border-radius:5px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: all 0.2s;
    z-index: 1000;
    max-height: 400px; /* 限制最大高度 */
    overflow-y: auto;  /* 添加垂直滚动条 */
}

.customSelect001 .select-options.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 自定义滚动条样式 */
.customSelect001 .select-options::-webkit-scrollbar {
    width: 8px;
}

.customSelect001 .select-options::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.customSelect001 .select-options::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

.customSelect001 .select-options::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

/* 分类标签 - 淡化样式 */
.customSelect001 .category-label {
    color: #2765dc;
    text-align:left;
    font-weight: 500;
    padding: 8px 16px;
    border-bottom: 1px solid #f0f0f0;
    background: #f0f0f0;
    cursor: default;
    user-select: none;
    letter-spacing: 0.5px;
    position: sticky; /* 保持分类标签在顶部可见 */
    top: 0;
    z-index: 10;
}

/* 可选项样式 */
.customSelect001 .option-item {
    
    padding: 5px 25px 5px 5px;
    cursor: pointer;
    transition: all 0.15s;
    color: #555;
    border-left: 5px solid transparent;
    font-family: 'Consolas', 'Monaco', monospace;
}

.customSelect001 .option-item:hover {
    background: #f5f7ff;
    border-left-color: #4a6cf7;
}

.customSelect001 .option-item.selected {
    background: #f0f4ff;
    color: #4a6cf7;
    font-weight: 500;
    border-left-color: #4a6cf7;
}




/*************************************************************************************************************************************************************************/
/* 新增：图片容器样式，处理旋转溢出 */
/* 容器样式 - 保持稳定不旋转 */
/* 工具条 */
#toolsbar {
    color:#333;
    padding: 10px;
    background: #edf5ff;
    border-radius:0 0 10px 10px;
    display:flex;
    align-content:center;
    justify-content:center;
    align-items:center;
    font-size: 13px;
    gap:0 2%;
}
#toolsbar span{
    text-wrap:nowrap;
}

#toolsbar button {
background: #FFF;
border: none;
padding: 4px 12px;
margin: 0;

cursor: pointer;
border: 1px solid #aaa;
color: #666;
display:inline-flex;
border-radius:4px;
}

#toolsbar button:hover {
    color:#2765dc;
}

#toolsbar button:disabled {
    background: #94a3b8;
    cursor: not-allowed;
}

#toolsbar :is(input,select){
    color:#2765dc;
    font-size:12px;
    height:22px;
    border-radius:3px;
    margin:0 2px;
    border:1px solid #CCC;
}




#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;
        }

        /* 主容器 */
        #imageContainer {
            position: relative;
            display: inline-block;
           padding:5px;
            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;
        }