::-webkit-scrollbar {
    width: 5px;
    height: 5px
}

::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 2px
}

::-webkit-scrollbar-thumb {
    background: #cecece;
    border-radius: 10px
}

::-webkit-scrollbar-thumb:hover {
    background: #55b837
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size-adjust: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box
}
.showecodes .textarea{width:100%;height:120px;border-radius:5px;border:1px solid #e2e8f0;padding:3px}
.showecodes .input{width:100%;border-radius:5px;border:1px solid #e2e8f0;padding:3px}
.showecodes .package{height:auto}
.showecodes .package .name{width:50px;}
#toggleQrcode .package{height:auto}
#toggleQrcode .package .textarea{width:100%;height:120px;border-radius:5px;border:1px solid #e2e8f0;padding:3px}
.filter-color {
            display: flex;
            gap: 12px;
            margin: 0;
            padding: 0;
            list-style: none;
            flex-wrap: wrap;
			justify-content: center;
    align-items: center;
        }
        
        .filter-color li {
            position: relative;
        }
        
        .filter-color .color {
            display: block;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid #e2e8f0;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
        }
        
        .filter-color .color:hover {
            transform: scale(1.15);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }
        
        .filter-color .color.active {
            border-color: #1c86ee;
            transform: scale(1.2);
            box-shadow: 0 4px 12px rgba(28, 134, 238, 0.4);
        }
        
        .filter-color .color.active::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 16px;
            height: 16px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
            background-size: contain;
            filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3));
        }       
        
        .filter-color .color10 {
            border: 2px solid #e2e8f0;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 0 0 1px #e2e8f0;
        }
        
        .filter-color .color10.active {
            border-color: #1c86ee;
            box-shadow: 0 4px 12px rgba(28, 134, 238, 0.4), inset 0 0 0 1px #e2e8f0;
        }
        .filter-color .color.color10.active::after {
              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23007aff'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
        }
        .color1 { background-color: #ff3b30; } /* 红色 */
        .color2 { background-color: #ff8c42; } /* 橙色 */
        .color3 { background-color: #FFFF00; } /* 黄色 */
        .color4 { background-color: #4cd964; } /* 绿色 */
        .color5 { background-color: #5ac8fa; } /* 青色 */
        .color6 { background-color: #007aff; } /* 蓝色 */
        .color7 { background-color: #5856d6; } /* 紫色 */
        .color8 { background-color: #fc54f6; } /* 粉色 */
        .color9 { background-color: #000000; } /* 黑色 */
        .color10 { background-color: #ffffff; } /* 白色 */
        .color11 { background-color: #a2845e; } /* 褐色 */
        .color12 { background-color: #8e8e93; } /* 灰色 */
        
        .color-label {
            display: block;
            text-align: center;
            font-size: 12px;            
            color: #64748b;
        }
.layui-colorpicker-eyedropper {
    padding: 5px 0;
}
.layui-colorpicker-eyedropper-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e6e6e6;
    border-radius: 2px;
    cursor: pointer;
    background: #f8f8f8;
    transition: all 0.3s;
    font-size: 12px;
    color: #666;
}
.layui-colorpicker-eyedropper-btn:hover {
    background: #e8e8e8;
    border-color: #d2d2d2;
    color: #333;
}
.toggleround{
    border: 1px solid rgb(215, 204, 255);
    display: flex;
    flex-direction: column;
    padding: 30px 20px;
    gap: 10px;
}
.searchclose{color: #000;position: absolute;right: 60px;top: 13px;cursor: pointer;display:none}
.searchcloseMubans{color: #000;position: absolute;right: 60px;top: 13px;cursor: pointer;display:none}
.searchclosebjkw{color: #000;position: absolute;right: 60px;top: 13px;cursor: pointer;display:none}
.searchclosesvg{color: #000;position: absolute;right: 60px;top: 13px;cursor: pointer;display:none}
.searchcloseYiShuZi{color: #000;position: absolute;right: 60px;top: 13px;cursor: pointer;display:none}
.searchcloseMuban{color: #000;position: absolute;right: 60px;top: 13px;cursor: pointer;display:none}
.searchcloseBeijing{color: #000;position: absolute;right: 60px;top: 13px;cursor: pointer;display:none}
.waterfallMuban p{display: inline-block;
    width: 250px;
    padding: 20px;
    font-size: 16px;
    color: #f33;}
.GetSvgHtml .html p{display: inline-block;
    width: 230px;
    padding: 20px;
    font-size: 16px;
    color: #f33;}    
.GetYiShuZiHtml .html p{display: inline-block;
    width: 230px;
    padding: 20px;
    font-size: 16px;
    color: #f33;}     
.GetBeijingHtml .html p   {display: inline-block;
    width: 230px;
    padding: 20px;
    font-size: 16px;
    color: #f33;}      
.slider-value{width:70px;}
.ypat{
    display: flex;
    flex-direction: column;
    color: #000;
    gap: 10px;
}
.rdtool{left:6px;}
/* 蒙版样式 */
        .mask-preview {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 10px;
            max-height: 200px;
            overflow-y: auto;
            padding: 0 10px;
        }
        
        .mask-option {
            width: calc(25% - 6px);
            aspect-ratio: 1/1; 
            border: 2px solid #ddd;
            border-radius: 5px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f8f9fa;
            transition: all 0.3s ease;
            position: relative;
        }
        .shape-crop-icon{
            text-align: center;
        }
        .shape-crop-icon img{
            width:80%;
            height:80%;
        }
        .shape-crop-letter{
            color:#000;
            font-weight:bold;
            font-size:18px;
        }
        .mask-option:hover {
            border-color: #3498db;
            transform: scale(1.05);
        }
        
        .mask-option.active {
            border-color: #e74c3c;
            background: #fff;
        }
        
        .mask-shape {
            width: 25px;
            height: 25px;
            background: #3498db;
        }
        
        .mask-triangle {
            width: 0;
            height: 0;
            background: transparent !important;
            border-left: 12px solid transparent;
            border-right: 12px solid transparent;
            border-bottom: 24px solid #3498db;
        }
        
        .mask-heart {
            position: relative;
            width: 24px;
            height: 22px;
        }
        
        .mask-heart:before,
        .mask-heart:after {
            content: '';
            position: absolute;
            width: 12px;
            height: 20px;
            background: #3498db;
            border-radius: 12px 12px 0 0;
        }
        
        .mask-heart:before {
            left: 12px;
            transform: rotate(-45deg);
            transform-origin: 0 100%;
        }
        
        .mask-heart:after {
            left: 0;
            transform: rotate(45deg);
            transform-origin: 100% 100%;
        }
        
        .mask-star {
            background: transparent !important;
            position: relative;
        }
        
        .mask-star:before {
            content: '★';
            font-size: 24px;
            color: #3498db;
            line-height: 1;
        }
        
        .mask-hexagon {
            clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
            width: 25px;
            height: 25px;
        }
        
        .mask-oval {
            border-radius: 50% / 60% 40%;
            width: 25px;
            height: 20px;
        }
        
        .mask-cloud {
            position: relative;
            background: #3498db;
            border-radius: 40px;
            height: 16px;
            width: 32px;
        }
        
        .mask-cloud:before {
            content: '';
            position: absolute;
            background: #3498db;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            top: -8px;
            left: 4px;
        }
        
        .mask-cloud:after {
            content: '';
            position: absolute;
            background: #3498db;
            border-radius: 50%;
            width: 16px;
            height: 16px;
            top: -6px;
            right: 6px;
        }
        
        .mask-cross {
            position: relative;
            background: #3498db;
            width: 25px;
            height: 5px;
        }
        
        .mask-cross:before {
            content: '';
            position: absolute;
            background: #3498db;
            width: 5px;
            height: 25px;
            top: -10px;
            left: 10px;
        }

        .mask-flower {
            background: #3498db;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            position: relative;
        }
        
        .mask-flower:before {
            content: '';
            position: absolute;
            background: #3498db;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            top: -8px;
            left: 0;
        }
        
        .mask-flower:after {
            content: '';
            position: absolute;
            background: #3498db;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            top: 0;
            left: -8px;
        }
        
        .mask-puzzle {
            background: #3498db;
            width: 20px;
            height: 20px;
            position: relative;
            clip-path: polygon(0 0, 70% 0, 70% 30%, 100% 30%, 100% 70%, 70% 70%, 70% 100%, 30% 100%, 30% 70%, 0 70%, 0 30%, 30% 30%, 30% 0);
        }

        .mask-droplet {
            background: #3498db;
            border-radius: 50% 50% 50% 0;
            width: 20px;
            height: 25px;
            transform: rotate(-45deg);
        }
        
        .mask-arrow {
            background: #3498db;
            clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
            width: 25px;
            height: 20px;
        }
        
        /* 字母和数字蒙版样式 */
        .mask-letter, .mask-number {
            width: 25px;
            height: 25px;
            background: #3498db;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: white;
            font-size: 14px;
            border-radius: 3px;
        }
        
        /* 笔刷蒙版样式 */
        .mask-brush {
            position: relative;
            width: 30px;
            height: 30px;
            background: #3498db;
            border-radius: 3px;
            overflow: hidden;
        }
        
        .mask-brush-rough {
            background: 
                linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%),
                #3498db;
            border-radius: 2px;
        }
        
        .mask-brush-spray {
            position: relative;
            background: transparent;
        }
        
        .mask-brush-spray:before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 30% 30%, #3498db 2px, transparent 3px),
                radial-gradient(circle at 70% 30%, #3498db 2px, transparent 3px),
                radial-gradient(circle at 50% 70%, #3498db 2px, transparent 3px),
                radial-gradient(circle at 20% 80%, #3498db 2px, transparent 3px),
                radial-gradient(circle at 80% 80%, #3498db 2px, transparent 3px);
        }
        
        /* 油漆排刷样式 */
        .mask-paint-brush {
            position: relative;
            width: 30px;
            height: 30px;
            background: #3498db;
            border-radius: 2px;
            overflow: hidden;
        }
        
        .mask-paint-brush-horizontal {
            background: 
                linear-gradient(to bottom, 
                    transparent 0%, 
                    #3498db 20%, 
                    #3498db 80%, 
                    transparent 100%),
                linear-gradient(to right, 
                    transparent 0%, 
                    rgba(255,255,255,0.5) 30%, 
                    rgba(255,255,255,0.5) 70%, 
                    transparent 100%);
        }
        
        .mask-paint-brush-vertical {
            background: 
                linear-gradient(to right, 
                    transparent 0%, 
                    #3498db 20%, 
                    #3498db 80%, 
                    transparent 100%),
                linear-gradient(to bottom, 
                    transparent 0%, 
                    rgba(255,255,255,0.5) 30%, 
                    rgba(255,255,255,0.5) 70%, 
                    transparent 100%);
        }
        
        .mask-paint-brush-diagonal {
            background: 
                linear-gradient(45deg, 
                    transparent 0%, 
                    #3498db 20%, 
                    #3498db 80%, 
                    transparent 100%),
                linear-gradient(-45deg, 
                    transparent 0%, 
                    rgba(255,255,255,0.5) 30%, 
                    rgba(255,255,255,0.5) 70%, 
                    transparent 100%);
        }
        .file-input-wrapper {
            position: relative;
            overflow: hidden;
            display: inline-block;
        }
        
        .file-input-wrapper input[type=file] {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }
        
        .selection-info {
            background: #e8f4fd;
            padding: 10px;
            border-radius: 5px;
            border-left: 4px solid #3498db;
            font-size: 14px;
            margin-top: 5px;
        }
        
        .delete-hint {
            background: #ffeaa7;
            padding: 8px;
            border-radius: 5px;
            border-left: 4px solid #fdcb6e;
            font-size: 12px;
            margin-top: 5px;
        }
        
        /* 蒙版参数控制面板样式 */
        .mask-params-panel {
            background: #f8f9fa;
            border-radius: 5px;
            padding: 15px;
            margin-top: 10px;
            border: 1px solid #e9ecef;
            display: none;
        }
        
        .param-group {
            margin-bottom: 10px;
        }
        
        .param-group label {
            display: block;
            margin-bottom: 5px;
            font-size: 14px;
            color: #495057;
            font-weight: 500;
        }
        
        .param-controls {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        
        .param-controls input[type="range"] {
            flex: 1;
        }
        
        .param-controls input[type="number"] {
            width: 70px;
            padding: 5px;
            border: 1px solid #ced4da;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .param-controls input[type="color"] {
            width: 40px;
            height: 30px;
            border: 1px solid #ced4da;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .param-checkbox {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .param-checkbox input {
            margin: 0;
        }
        
        .param-checkbox label {
            margin: 0;
        }
        
        .mask-actions {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }
        
        .mask-actions button {
            flex: 1;
            padding: 8px 10px;
            font-size: 13px;
        }
        
        /* 矩形参数特殊样式 */
        .corner-controls {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-top: 10px;
        }
        
        .corner-control {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        
        .corner-control label {
            font-size: 12px;
            color: #6c757d;
        }
        
        .corner-control input {
            width: 100%;
            padding: 5px;
            border: 1px solid #ced4da;
            border-radius: 4px;
            font-size: 12px;
        }
        
        .dimension-controls {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }
        
        .dimension-control {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        
        .dimension-control label {
            font-size: 12px;
            color: #6c757d;
        }
        
        .dimension-control input {
            width: 100%;
            padding: 5px;
            border: 1px solid #ced4da;
            border-radius: 4px;
            font-size: 12px;
        }
        
        .percentage-control {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .percentage-control input[type="range"] {
            flex: 1;
        }
        
        .percentage-control input[type="number"] {
            width: 60px;
        }
        
        .percentage-value {
            font-size: 12px;
            color: #6c757d;
            min-width: 30px;
        }
        
        .mask-category {
            width: 100%;
            margin-bottom: 10px;
        }
        
        .mask-category-title {
            font-size: 12px;
            color: #7f8c8d;
            margin-bottom: 5px;
            border-bottom: 1px solid #ecf0f1;
            padding-bottom: 3px;
        }
        
        .mask-category-items {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        
        .selection-info {
    background: #e8f4fd;
    padding: 10px;
    border-radius: 5px;
    border-left: 4px solid #3498db;
    font-size: 14px;
    margin-top: 5px;
}
button:disabled {
    background: #bdc3c7;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.btn-remove {
    background: #e74c3c;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-size: 14px;
}
        @media (max-width: 768px) {
            .content-area {
                flex-direction: column;
            }
            
            .tools-panel {
                width: 100%;
                max-height: 300px;
            }
            
            .canvas-controls {
                justify-content: center;
            }
            
            button {
                padding: 8px 12px;
                font-size: 12px;
            }
            
            h1 {
                font-size: 20px;
            }
            
            .mask-preview {
                max-height: 150px;
            }
        }
.layui-colorpicker-eyedropper-btn i{color:#16baaa}
.layui-colorpicker-main-input{display:flex;align-items: center;justify-content: space-between;gap:5px}
.layui-colorpicker-main-input input.layui-input{width:100%}      
.layui-colorpicker-main-input .layui-btn-container .layui-btn{margin:0;padding:0 8px;font-size:12px}
.layui-colorpicker-main-input .layui-btn-container{display:flex;gap:3px}
.sclist{
    display:flex;
    flex-wrap: wrap;
    margin:15px;
    gap: 15px;
    max-height: 270px;
    overflow-y: scroll;
}
.sclist .tipli{
    flex:1;
    min-width: calc(33.3% - 15px);
    max-width: calc(33.3% - 15px);
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #ddd;
    padding: 10px;
}

.scimgs{
    position: relative;
    width:100%;
    aspect-ratio: 1/1;
    overflow: hidden;
}
.sclist .tipli p{
    font-size: 16px;
    padding-top: 10px;
    width: 100%;
    text-align: center;
}
.scimgs span{
    position: absolute;
    bottom: 0;
    right: 0;
    text-align: center;
    color: #1e9fff;
    background: #ddd;
    padding: 3px 5px;
    font-size: 12px;
    border-radius: 3px;
}
.sclist .tipli img{
    width:100%;
    height: 100%;
    object-fit: cover;
}
.zoom-percentage {
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    border: 1px solid #ddd;
    min-width: 60px;
    text-align: center;
    margin: 0 5px;
}

.canvas-containerNew canvas {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}
.canvas-containerNew{
    display: flex;
    justify-content: center;
    margin-top:20px;
}
.loading-state {
  color: #666;
  font-style: italic;
}
.error {
  color: #d9534f;
}
.ttipss{
    height:40px;
    line-height:40px;
    font-size:18px;
}
.htips{
    font-size:16px;
    margin-top: 15px;
}
.content-state{
    position: relative;
    padding-bottom: 50px;
}
.scoretips{
    position: absolute;
    top: 48px;
    left: -150px;
    background: linear-gradient(to bottom, 
       #ffe095 0%,  
       #ffffff 50%,          
       #FFFFFF 100%  
    );
    border: 1px solid rgb(221, 221, 221);
    padding:0 20px;
    z-index: 1000;
    width: 400px;
    max-height: 417px;
    min-height: 100px;
    pointer-events: auto;
}
.btips{
    font-size: 16px;
    position: absolute;
    bottom: 0;
    height: 30px;
    color: #f60;
    width: 100%;
    text-align: center;
    margin-top: 15px;
}
#download-main-btn{display:none}
.toolbtn{
    display:flex;
    align-items: center;
    gap: 20px;
}
.layui-anim-downbit {
    box-sizing: unset
}
.user-avatar{
    margin-left:0;
}
.toggleFont img.li.on{
    border: #82a4bd 3px solid;
}
.zitiname{
    text-align:left;color:#000;
}

.cipsr{
    display:inline-block;
    color:#f44336;
    font-size:17px;
    cursor: pointer
}
.cipsr i{padding-right:3px}
.pulse {
     animation: pulse 1.5s infinite;
}
@keyframes pulse {
   0% { transform: scale(1); }
   50% { transform: scale(1.2); }
   100% { transform: scale(1); }
}

.download-container {
  position: relative;
  display: inline-block;
}

.download-options {
  position: absolute;
  top: 32px;
  left: -5px;
  width: 90px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  display: none;
  z-index: 999;
  padding: 5px 0;
}

.download-options .download-btns {
  display: block;
  width: 100%;
  text-align: center;
  margin: 0;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid #f2f2f2;
  padding: 0 10px;
}

.download-options .download-btns:last-child {
  border-bottom: none;
}

.download-options .download-btns:hover {
  background-color: #f2f2f2;
}

.download-options.show {
  display: flex;
  flex-direction: column;
}
.container_div {
    display: none;
    flex-direction: column;
    height: 100vh;
    background-color: #fff;
    width: calc(100% - 85px);
}

.container_div.active{
    display:flex!important;
}
.preview-area{
    display:none;
}
.preview-area.active{
    display:flex!important;
}
.main {
    display: flex;
    flex-grow: 1;
    overflow: hidden;
    height: auto;
    border-top: 1px solid #ededed;
    position: relative;
}

.search_food input {
    height: 40px;
    border: 0;
    outline: 0;
    background: 0 0;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    font-size: 14px;
    color: #000;
    border-radius: 5px;
    padding-right: 60px;
    background-color: #ededed
}

.search_food .searchBtn {
    position: absolute;
    width: 48px;
    text-align: center;
    font-size: 12px;
    right: 5px;
    top: 5px;
    color: #fff;
    border: none;
    outline: 0;
    border-radius: 5px;
    cursor: pointer;
    background-color: #1e9fff;
    margin: unset;
    padding: unset;
    height: 30px;
}
.function-area{
    display:none;
}
.function-area.active{
    display:block;
}
.function-area .search_food .searchBtn{
     height: 30px;
}
.addcanvas_model{
    display: none;
    align-items: start;
    justify-content: space-around;
    overflow: scroll;
}
.addcanvas_model.active{
    display: block!important;
}
.model_right{
    padding:0 20px;
    width: 50%;
    float: left;
    text-align: center;
}

.setSizes {
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    margin-top: 10px;
    position: relative;
    background-color: #f7f7f7;
    height: auto;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    gap:10px;
    padding: 5px;
}
.setSizes .switch-item.on{
   border: 1px solid #2196f3 ;
   color: #2196f3;
}
.setSizes .switch-item.on .zdybtn{
    color: #fff;
}
.setSizes .switch-item {
    border-radius: 8px;
    color: #000000;
    cursor: pointer;
    font-size: 15px;
    position: relative;
    background-color: #fff;
    padding: 9px 8px;
    width: calc(50% - 10px);
}
.setSizes .switch-item.zdy{
    display:flex;
    flex-direction: column;
}
.setSizes .switch-item:hover .zdybtn{
    
}
.zdy div{
    display:flex;
}
.zdybtn{
    color: #2196f3;
    text-align: center;
    border-radius: 3px;
    width: 100%;
    margin: 0 auto;
    padding: 5px 0;
    cursor: pointer;
}
.setSizes .switch-item:hover {
    background-color: #2196f3;
    color: #fff
}
.canvascustom .layui-layer-btn a{height: 40px;    line-height: 40px;}
.canvascustom .layui-layer-btn-c{padding:20px 0}
.GetBeijingHtmls {
    overflow: auto;
    margin-left: -10px;
    margin-right: -10px;
    padding: 0 10px;
    height: 487px;
}

.GetBeijingHtmls .htmls {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(4, 1fr);
}

.GetBeijingHtmls .li {
    height: 76px;
    overflow: hidden;
    background-image: url(../img/bgpng.jpg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}
.GetBeijingHtmls .li.on{
    border:2px solid #0200f8;
}
.GetBeijingHtmls .li img {
    height: 100%!important;
    border-radius: 6px;
    width: 100%!important;
    object-fit: contain;
}
.model_right .search_food .searchBtn{height:30px}
.left-panels {
    width: 250px;
    background-color: #fff;
    padding: 0 10px 10px 10px;
    color: #4c4c4c;
    transition: all .3s ease;
    border-right: 1px solid #f7f7f7;
    overflow-y: scroll;
    overflow-x: hidden;
}
.readdcanvas{    
    line-height: 40px;
    text-align: center;
    color: #797979;
    font-size: 18px;
}
    
/* 裁剪工具样式 */
.crop-controls {
    border: 1px solid #e6e6e6;
    padding: 10px;
    border-radius: 4px;
    background: #f8f8f8;
}

.control-group {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.control-group label {
    width: 60px;
    font-size: 12px;
    margin-right: 8px;
    color: #5b5b5b;
}

.control-group input {
    flex: 1;
    height: 30px;
    padding: 0 8px;
}

.button-group {
    display: flex;
    gap: 8px;
    
}

.button-group button.layui-btn {
    flex: 1;
    padding:0;
    margin:0;
}
.button-group button.layui-btn:hover{
    color:#fff;
}
.right-panels {
    width: 250px;
    background-color: #fff;
    padding: 0 10px;
    overflow-y: auto;
    color: #fff;
    transition: all .3s ease;
    border-left: 1px solid #f7f7f7;
    overflow-x: hidden;
}
/* 裁剪工具样式 */
.crop-selection {
    position: absolute;
    border: 2px dashed #ff0000;
    background: rgba(255, 255, 255, 0.1);
    cursor: move;
    z-index: 1000;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.3);
}

.crop-overlay {
    position: absolute;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;
    pointer-events: none;
}

.crop-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #ff0000;
    border: 2px solid #fff;
    border-radius: 2px;
}

.crop-handle-tl { top: -6px; left: -6px; cursor: nw-resize; }
.crop-handle-tr { top: -6px; right: -6px; cursor: ne-resize; }
.crop-handle-bl { bottom: -6px; left: -6px; cursor: sw-resize; }
.crop-handle-br { bottom: -6px; right: -6px; cursor: se-resize; }
.crop-handle-t { top: -6px; left: 50%; margin-left: -6px; cursor: n-resize; }
.crop-handle-b { bottom: -6px; left: 50%; margin-left: -6px; cursor: s-resize; }
.crop-handle-l { left: -6px; top: 50%; margin-top: -6px; cursor: w-resize; }
.crop-handle-r { right: -6px; top: 50%; margin-top: -6px; cursor: e-resize; }


.canvas-containers {
    flex-grow: 1;
    background-color: #ffffff;
    width: calc(100% - 540px);
    height: calc(100vh - 60px);
    position: relative
}
.toolb{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-around;
}
.toolb .bas{
    background: #f3f3f3;
    padding: 5px 15px;
    border-radius: 3px;
    cursor: pointer;
}
.containers-top {
    display: flex;
    border-bottom: 1px solid #f7f7f7;
    background-color: #fff;
    justify-content: space-between
}

.containers-L {
    display: flex;
    padding: 10px
}

.containers-R {
    display: flex;
    padding: 10px
}

.containers-top .li {
    text-align: center;
    cursor: pointer;
    height: 48px;
    width: 48px;
    padding: 10px;
    border-radius: 10px;
    margin: 0 10px
}

.containers-top .li:hover {
    background-color: #ededed
}

.containers-top .li img {
    width: 100%;
    height: 100%
}
#canvas-container{
    position: relative;
    
}

.canvas-containers-wra {
    display: inline-block;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align:center;
    background-color: #dedcdd;
    height: calc(100dvh - 120px); /* 首选 */
    height: calc(100vh - 120px);
    overflow: hidden;
    position: relative;
    background-image: url(../img/beijing.jpg)
}
@supports not (height: 100dvh) {
  .canvas-containers-wra {
    height: -webkit-fill-available;
  }
}
.canvas-jiao {
    width: 20px;
    height: 20px;
    background-color: #f0f0f0;
    position: absolute;
    z-index: 99;
    left: 0;
    top: 0
}

.canvas-container canvas {
    border: 1px solid #f7f7f7;
    box-shadow: 0 0 10px #f7f7f7
}

.footer {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    position: absolute;
    bottom: auto;;
    right: 1px
}

.footerLi {
    background-color: #fff;
    padding: 0 3px;
    border-radius: 4px;
    margin: 0 3px;
    display: flex;
    align-items: center
}

.footerLi img {
    height: 30px;
    cursor: pointer;
    margin: 5px 6px
}

.container_div button {
    margin: 5px 2px;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    background-color: #2196f3;
    color: #fff;
    border: unset;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color .3s
}

input[type=color],input[type=number],input[type=range],select {
    width: 100%;
    height: 28px;
    line-height: 28px;
    text-align: center;
    margin: 5px 0;
    border-radius: 4px;
    margin-left: 2px;
    background-color: #ededed
}

.tool-section {
    position: relative;
    background-color: #fff;
    margin-bottom: 10px;
    margin-top: 10px
}

.search_food {
    position: relative;
    width: 100%
}

#categoryMuban {
    width: 60px;
    height: 30px;
    position: absolute;
    z-index: 99;
    top: 0;
    left: 3px
}
#categoryMubans {
    width: 60px;
    height: 30px;
    position: absolute;
    z-index: 99;
    top: 0;
    left: 3px
}
.btn {
    padding: 10px;
    border-radius: 4px;
    margin-top: 10px;
    text-align: center;
    cursor: pointer;
    background-color: #ff5722;
    color: #f0f8ff
}

.xingzhuang {
    display: grid;
    grid-gap: 10px;
    justify-items: center;
    grid-template-columns: 1fr 1fr 1fr;
    overflow: auto;
    margin-left: -10px;
    margin-right: -10px;
    padding: 10px
}

.xingzhuang img {
    height: 58px;
    width: 58px;
    overflow: hidden;
    margin-bottom: 10px;
    border-radius: 10px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    cursor: pointer
}

.layer-item {
    padding: 10px;
    margin: 5px 0;
    border-radius: 4px;
    cursor: pointer
}

.layer-item .FirstLayer {
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    transition: background-color .3s;
    justify-content: center;
    align-items: center
}

.layer-item .FirstLayer .getUnfold {
    display: none
}

.layer-item.selected .FirstLayer .getUnfold {
    display: block
}

.layer-item .FirstLayer img {
    width: 20px;
    height: 20px;
    margin-right: 5px;
    background-color: #fff;
    padding: 2px;
    border-radius: 2px
}

.layer-item .FirstLayer div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 25px)
}

.layer-item:hover {
    background-color: #ddd;
    color: #1e9fff
}

.layer-item.selected {
    background-color: #1e9fff;
    color: #f0f8ff
}

.layer-item .layer-item-list:nth-child(2) {
    margin-top: 10px
}

.layer-item .layer-item-list {
    padding: 10px;
    margin-left: 10px;
    border-radius: 4px;
    cursor: pointer;
    display: none
}

.layer-item.Unfold .layer-item-list {
    display: block
}

.layer-item .layer-item-list .FirstLayer {
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    transition: background-color .3s;
    justify-content: center;
    align-items: center
}

.layer-item .layer-item-list .FirstLayer img {
    width: 20px;
    height: 20px;
    margin-right: 5px;
    background-color: #fff;
    padding: 2px;
    border-radius: 2px
}

.layer-item .layer-item-list .FirstLayer div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 25px)
}

.layer-item .layer-item-list:hover {
    background-color: #ddd;
    color: #1e9fff
}

.layer-item .layer-item-list.selected {
    background-color: #004b83;
    color: #f0f8ff
}

.context-menu {
    display: none;
    position: absolute;
    background-color: #fff;
    border-radius: 4px;
    z-index: 1000;
    width: 160px;
    padding: 5px;
    box-shadow: -3px -2px 9px 0 #a9a9a9
}

.context-menu button {
    display: flex;
    width: 100%;
    text-align: left;
    padding: 10px;
    background: 0 0;
    border: none;
    height: auto;
    line-height: unset;
    color: #4a4a4a;
    align-items: center;
    margin: auto
}

.context-menu button img {
    height: 18px;
    margin-right: 3px
}

.context-menu button:hover {
    background-color: #e7e7e7
}

.RightClickList {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-items: stretch;
    margin-bottom: 5px;
    border-bottom: 1px solid #e3e3e3;
    padding-bottom: 5px
}

.RightClickList img {
    cursor: pointer;
    padding: 8px;
    background-color: #f9f9f9;
    border-radius: 6px;
    height: 34px;
    width: 100%;
    border: 1px solid #e7e7e7
}

h3 {
    line-height: 40px;
    color: #505050
}

.ColorsElection {
    display: grid;
    grid-gap: 6px;
    align-items: center;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    width: 100%;
    overflow: hidden;
    justify-content: space-between;
    margin-bottom: 10px
}

.ColorsElection .li {
    width: 25px;
    height: 25px;
    font-size: 12px;
    margin-right: 5px;
    border: 4px solid #fff;
    cursor: pointer;
    border-radius: 2px
}

.ColorsElection .touming {
    background-image: url(../img/bgpng.jpg);
    background-size: 60%
}

#layerList {
    overflow: auto;
    margin-left: -10px;
    margin-right: -10px;
    padding: 0 10px;
    height: calc(100vh - 150px);
    margin-top: 10px
}

.left-li {
    width: 100%;
    display: grid;
    grid-gap: 6px;
    align-items: center;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 10px
}

.left-Sj-Color {
    background: linear-gradient(137deg,rgb(96 7 233),#03a9f4);
    text-align: center;
    line-height: 33px;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, .15);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
}

.color .layui-colorpicker {
    width: 100%;
    padding: 0;
    line-height: 31px;
    height: 31px;
    border:0;
}
.color.layui-inline{
    height:33px;
}
.guanbi {
    background-color: red;
    height: 20px;
    width: 20px;
    position: absolute;
    top: 0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    right: 0;
    border-radius: 0 0 0 10px;
    cursor: pointer
}
.bgColors .layui-colorpicker-trigger-i{color:#c5aeae}
.package {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 3fr;
    height: 48px;
    align-items: center;
    padding: 0 5px;
    border-radius: 5px;
    margin-top: 10px;
    background-color: #f7f7f7;
    background-color: #fff color: #fff;
    position: relative
}

.package .name {
    border-radius: 3px;
    line-height: 32px;
    text-align: center;
    width: 70px;
    color: #3e3e3e;
    margin-right: 5px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.layer-item {
    cursor: move
}

.zuobiao {
    padding: 3px 6px;
    position: absolute;
    z-index: 999;
    background-color: #fff;
    border: 1px solid #cfcfcf;
    display: flex;
    align-items: center;
    border-radius: 4px
}

.zuobiao .text {
    padding: 0 4px;
    background-color: #707070;
    border: 1px solid #cfcfcf;
    color: #fff;
    border-radius: 4px;
    cursor: no-drop
}

.zuobiao img {
    height: 20px;
    padding: 3px;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 6px
}

.zuobiao img:hover {
    background-color: #f0f8ff
}

.tool-list {
    display: grid;
    grid-gap: 6px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    justify-items: stretch;
    margin-top: 10px
}

.tool-list img {
    cursor: pointer;
    padding: 10px;
    background-color: #f7f7f7;
    border-radius: 6px;
    height: 40px;
    width: 100%
}

.toggleFont {
    grid-template-columns: 1fr;
    height: 90vh;
    overflow: auto;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #dbdbdb;
    border-radius: 6px
}

.toggleFont img {
    height: auto;
    width: 100%
}

.GetSvgHtml {
    overflow: auto;
    margin-left: -10px;
    margin-right: -10px;
    padding: 10px;
    height: calc(100vh - 100px);
    margin-top: 10px
}

.GetSvgHtml .html {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr
}

.GetSvgHtml .li {
    height: 68px;
    overflow: hidden;
    border: 1px solid #f7f7f7;
    border-radius: 10px;
    background-image: url(../img/bgpng.jpg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    cursor: pointer;
    border: 1px solid #e1e1e1
}

.GetSvgHtml .li svg {
    height: 100%!important;
    width: 100%!important;
    color: #111920
}
.GetYiShuZiHtml {
    overflow: auto;
    margin-left: -10px;
    margin-right: -10px;
    padding: 10px;
    height: calc(100vh - 100px);
    margin-top: 10px
}


.GetYiShuZiHtml .html {
    display: grid;
    grid-gap: 1px;
    grid-template-columns: 1fr 1fr
}

.GetYiShuZiHtml .li {
    height: 70px;
    overflow: hidden;
    border: 1px solid #f7f7f7;
    border-radius: 10px;
    background-image: url(../img/bgpng.jpg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    cursor: pointer;
    border: 1px solid #dbdbdb
}

.GetYiShuZiHtml .li img {
    max-width: 100%!important;
    max-height: 100%!important;
    height: auto!important;
    width: auto!important;
    color: #111920
}
.GetBeijingHtml {
    overflow: auto;
    margin-left: -10px;
    margin-right: -10px;
    padding: 0 10px;
    height: calc(100vh - 276px);
}

.GetBeijingHtml .html {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr
}

.GetBeijingHtml .li {
    height: 76px;
    overflow: hidden;
    background-image: url(../img/bgpng.jpg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.GetBeijingHtml .li img {
    max-height: 100%!important;
    height: auto!important;
    border-radius: 6px;
    width: 100%
}

.GetPngHtmlLst {
    overflow: auto;
    padding: 0 10px;
    height: calc(100vh - 70px);
    background-color: #ededed
}

.GetPngHtmlLst .name {
    display: flex;
    background-color: #fff;
    padding: 10px;
    margin: 10px 0;
    border-radius: 10px;
    justify-content: space-between;
    align-items: center
}

.GetPngHtmlLst .name .text {
    font-size: 16px
}

.GetPngHtmlLst .name .more {
    color: #b3b3b3;
    cursor: pointer
}

.GetPngHtmlLst .html {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
    margin-left: -10px;
    margin-right: -10px;
    padding: 0 10px
}

.GetPngHtmlLst .li {
    height: 70px;
    overflow: hidden;
    border: 1px solid #f7f7f7;
    border-radius: 10px;
    background-image: url(../img/bgpng.jpg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    cursor: pointer;
    border: 1px solid #dbdbdb
}

.GetPngHtmlLst .li img {
    max-width: 100%!important;
    max-height: 100%!important;
    height: auto!important;
    width: auto!important;
    color: #111920
}

.GetPngHtml {
    padding: 10px;
    padding-bottom: 0;
    transform: translateX(-110%);
    transition: all .3s ease;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: #ededed
}

.GetPngHtml .name {
    display: flex;
    background-color: #fff;
    padding: 10px;
    margin: 10px 0;
    margin-top: 0;
    border-radius: 10px;
    justify-content: space-between;
    align-items: center
}

.GetPngHtml .name .text {
    font-size: 16px;
    width: calc(100% - 50px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.GetPngHtml .name .more {
    color: red;
    cursor: pointer
}

.GetPngHtml .html {
    height: calc(100vh - 130px);
    overflow: auto;
    margin-left: -10px;
    margin-right: -10px;
    padding: 10px;
    background-color: #ededed
}

.GetPngHtml .htmlLi {
    display: grid;
    grid-gap: 1px;
    grid-template-columns: 1fr 1fr
}

.GetPngHtml .li {
    height: 70px;
    overflow: hidden;
    border: 1px solid #f7f7f7;
    border-radius: 10px;
    background-image: url(../img/bgpng.jpg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    cursor: pointer;
    border: 1px solid #dbdbdb
}

.GetPngHtml .li img {
    max-width: 100%!important;
    max-height: 100%!important;
    height: auto!important;
    width: auto!important;
    color: #111920
}

.title {
    position: relative;
    margin-bottom: 10px;
    margin-top: 10px;
    font-size: 15px;
}

.title .line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #dbdbdb
}

.title .text {
    position: relative;
    z-index: 1;
    background-color: #fff;
    padding: 0 10px;
    display: inline-block;
    color: #3e3e3e;
    left: 10px;
    font-size:14px;
}

.bas i{padding-right:5px;}
.bas.on{color:#1e9fff}
.canvasds{
    display: none;
}
.canvasds.active{
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
}   
.zhuoguanbi {
    width: 100%;
    height: auto;
    cursor: pointer;
    display: block;
    font-size: 16px;
    color:#3e3e3e;
    margin-top: 10px;
}
.zhuoguanbi i{
    padding-right:5px;
}
.youguanbi {
    width: 100%;
    height: auto;
    cursor: pointer;
    display: block;
    font-size: 16px;
    color:#3e3e3e;
    margin-top: 10px;
}
.youguanbi i{
    padding-left:5px;
}
.left-panels.generalMenu.showGengduo{
    top:100px;
}
.right-panels.generalMenu.showZitis{
    right:0;
    top: 0px;
    overflow: unset;
}
.right-panels.generalMenu.showMengBan {
    right: 0;
    top: 0px;
    overflow: unset;
}
.right-panels.generalMenu.showMubans{
    right:0;
    top: 50px;
    overflow: unset;
}
.right-panels.generalMenu.showecodes{
    right:0;
    top: 50px;
    overflow: unset;
}
.lisrss.on{background: #e6e3ff;}
.right-panels.generalMenu.showCaijians{
    right:0;
    top: 50px;
    overflow: unset;
}
.canvasds .layui-btn{height:32px;line-height:32px;margin-left: 0;}
.youguanbis {
    width: 20px;
    height: 64px;
    cursor: pointer;
    position: absolute;
    left: -20px;
    z-index: 999;
    top: 20%;
    margin-top: -10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: #fff;
    background: #1e9fff;
}
.rsbgt{
    display:flex;
    gap:10px;
}
.rbs{
    flex:1;
    text-align: center;
    color: #5b5b5b;
    background: #f3f3f3;
    padding: 5px 15px;
    border-radius: 3px;
    cursor: pointer;
}
.rbs.on{
    color:#1e9fff;
}
.rbs i{
    padding-right:5px
}
.tool-list.wxz{
    display:flex;
}
.tool-list.wxz .li{
    flex:1;
}
.tool-list.wxz .li img{
    height:auto;
}
.left-panels.generalMenu{
    top:0px;
    display: none;
}
.tiaozheng {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-direction: column;
}
.tiaozheng .bsrbs{
    flex:1;
}
.aas{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.dbrs{
    display: flex;
    gap: 3px;
    justify-content: center;
    align-items: center;
}
.btssr{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}
.setSize {
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    margin-top: 10px;
    position: relative;
    background-color: #f7f7f7;
    height: calc(100vh - 85px);
    overflow: auto
}
.radio-group {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 15px;
        }
        
        .Share-container label.radio-option {
            display: flex;
            align-items: center;
            cursor: pointer;
            padding: 12px 20px;
            border-radius: 8px;
            background: #f8f9fa;
            transition: all 0.2s;
            flex: 1;
            min-width: 120px;
        }
        
        .Share-container label.radio-option:hover {
            background: #e9ecef;
        }
        
        .Share-container label.radio-option input {
            display: none;
        }
        
        .custom-radio {
            width: 20px;
            height: 20px;
            border: 2px solid #adb5bd;
            border-radius: 50%;
            margin-right: 12px;
            position: relative;
            transition: all 0.2s;
        }
        
        .radio-option input:checked + .custom-radio {
            border-color: #4dabf7;
            background-color: #e7f5ff;
        }
        
        .radio-option input:checked + .custom-radio::after {
            content: '';
            width: 10px;
            height: 10px;
            background: #4dabf7;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        .radio-option input:checked ~ .option-label {
            color: #1971c2;
        }
        
        .option-label {
            font-size: 16px;
            color: #495057;
            transition: color 0.2s;
        }
.setSize .switch-item {
    border-radius: 8px;
    color: #000000;
    cursor: pointer;
    font-size: 15px;
    position: relative;
    background-color: #fff;
    padding: 12px 8px;
    margin: 10px
}

.setSize .switch-item:hover {
    background-color: #2196f3;
    color: #fff
}

#ruler-x,#ruler-y {
    position: absolute;
    background: #f0f0f0;
    z-index: 1
}

#ruler-x {
    left: 20px;
    top: 0;
    height: 20px
}

#ruler-y {
    left: 0;
    top: 20px;
    width: 20px
}

#textContainer {
    position: absolute;
    display: none;
    background-color: #2196f3;
    padding: 5px 10px;
    border: 2px solid #dedcdd;
    pointer-events: none;
    z-index: 999999;
    border-radius: 6px;
    color: #fff
}

.PreviewMix {
    position: absolute;
    bottom: 10px;
    left: 30px;
    display:none;
}

.PreviewMix .LayerPreviewEditor {
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #dbdbdb;
    max-width: 485px;
    overflow: auto;
    height: 70px;
    margin-top: 5px
}

.PreviewMix .LayerPreviewEditor .li {
    font-size: 24px;
    width: 48px;
    height: 48px;
    background-color: #dedcdd;
    margin: 10px;
    float: left;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 700;
    border: 4px solid #d7d7d7;
    position: relative
}

.PreviewMix .LayerPreviewEditor .li .name {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.PreviewMix .LayerPreviewEditor .li .Function {
    height: 18px;
    position: absolute;
    right: -10px;
    top: -10px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 2px
}

.PreviewMix .LayerPreviewEditor .li:hover {
    border: 4px solid #ff5722
}

.PreviewMix .toggleLayerPreviewEditor {
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #dbdbdb;
    padding: 3px 6px;
    overflow: auto;
    align-items: center;
    color: #0fba8b;
    cursor: pointer;
    display: inline-block
}

.PreviewMix .toggleLayerPreviewEditor img {
    height: 24px;
    margin-right: 10px
}

.PreviewMix .toggleLayerPreviewEditor div {
    float: right;
    margin-top: 3px
}



.styleWode {
    height: calc(100vh - 70px);
    overflow: auto;
    background-color: #ededed;
    margin-top: 10px;
    padding: 10px;
    border-radius: 4px
}

.waterfall {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: 1fr 1fr
}

.waterfall .item {
    break-inside: avoid;
    background-color: #fff;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    position: relative
}

.waterfall .item .item-pic {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center
}

.waterfall .item img {
    display: block;
    object-fit: cover;
    cursor: pointer;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%
}

.waterfall .item .un {
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #cbcbcb;
    cursor: pointer;
    width: 20px;
    position: absolute;
    right: 5px;
    top: 5px
}

.waterfall .item-info {
    padding: 10px;
    margin: 0;
    font-size: 12px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.Share-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,.1);
    max-width: 360px;
    margin: 0 auto
}

.Share-container label {
    display: block;
    margin-bottom: 5px;
    font-weight: 700
}

.Share-container input[type=text] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-bottom: 15px
}

.Share-container select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-bottom: 15px;
    height: 41px;
    text-align: justify;
    margin-left: unset
}

.Share-container .button {
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    width: 100%;
    padding: 10px;
    text-align: center
}

.styleMuban {
    height: calc(100vh - 75px);
    overflow: auto;
    background-color: #ffffff;
    margin-top: 10px;
    padding: 1px;
    border-radius: 4px
}

.waterfallMuban {
    column-count: 2; /* 固定2列 */
    column-gap: 5px; /* 列间距 */
    padding: 3px; /* 容器内边距 */
}

.waterfallMuban .item {
    break-inside: avoid; /* 关键：防止元素被列分割 */
    margin-bottom: 1px; /* 元素底部间距 */
    display: inline-block; /* 确保元素在列中正确排列 */
    width: 100%; /* 宽度占满列 */
}

.waterfallMuban .item .item-vip {
    background-color: red;
    position: absolute;
    padding: 0 5px;
    top: 2px;
    right: 2px;
    color: #fff;
    border-radius: 2px;
    z-index: 9
}

.waterfallMuban .item .item-pic {
    width: 100%;
}

.waterfallMuban .item img {
    width: 100%; /* 宽度充满容器 */
    height: auto; /* 高度随比例自动计算（核心：让图片保持原始高度） */
    display: block; /* 移除图片底部空白 */
    border-radius: 4px; /* 可选：增加圆角 */
}

.waterfallMuban .item .un {
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #cbcbcb;
    cursor: pointer;
    width: 20px;
    position: absolute;
    right: 5px;
    top: 5px
}

.waterfallMuban .item-info {
    padding: 10px;
    margin: 0;
    font-size: 12px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.overflowStyle {
    overflow: auto;
    height: 100%;
    margin: 0 -10px;
    padding: 0 10px
}

.overflowStyle .package .input {
    width: calc(100% - 3px);
    height: 30px;
    padding: 10px;
    border-radius: 5px
}
.color-picker-container {
    display: flex;
    align-items: center;
    position: relative;
    margin-right: 10px;
}

.color-picker-container .color {
    width: 24px;
    height: 24px;
    border: unset;
    cursor: pointer;
    position: absolute;
    left: 10px;
}

.color-picker-container .result-input {
    width: 100px;
    padding: 0 6px;
    height: 38px;
    font-size: 12px;
    border: 2px solid #ddd;
    border-radius: 100px;
    text-align: center;
    text-transform: uppercase;
    padding-left: 40px;
}