.container {
   
    margin: 0 auto;
}

.main-content1 {
    display: flex;
    gap: 20px;
   width:85%;
    padding: 20px;
   
}

.image-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.image-wrapper {
    position: relative;
    width: 100%;
    max-width: 800px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: visible;
    cursor: move;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #999;
    font-size: 16px;
    pointer-events: none;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.upload-hint.hidden {
    display: none;
}

.icon-upload {
    display: inline-block;
    width: 64px;
    height: 64px;
    background-image: url("data:image/svg+xml,%3Csvg%20t%3D%221765539376353%22%20class%3D%22icon%22%20viewBox%3D%220%200%201025%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20p-id%3D%222526%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cpath%20d%3D%22M192.104577%201023.615791a192.104577%20192.104577%200%200%201-192.104577-192.104577V447.878374a64.034859%2064.034859%200%200%201%20128.069718%200v384.017049a64.034859%2064.034859%200%200%200%2064.034859%2064.034859h640.34859a64.034859%2064.034859%200%200%200%2064.034859-64.034859V448.262583a64.034859%2064.034859%200%200%201%20128.069718%200v383.63284a192.104577%20192.104577%200%200%201-192.104577%20192.104577z%20m256.139436-383.824945V218.569544L365.44694%20301.302582a64.034859%2064.034859%200%200%201-90.54529-90.417221l192.104577-192.104577a64.034859%2064.034859%200%200%201%2090.609325%200l177.184455%20176.99235a64.034859%2064.034859%200%201%201-90.545291%2090.353186L576.313731%20218.697614v421.093232a64.034859%2064.034859%200%201%201-128.069718%200z%22%20fill%3D%22%238F9BB3%22%20p-id%3D%222527%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
}

#imageCanvas {
    display: block;
    max-width: 100%;
    height: auto;
    user-select: none;
    position: relative;
}

.crop-box {
    position: absolute;
    border: 2px solid #1890ff;
    background: rgba(24, 144, 255, 0.1);
    cursor: move;
    box-sizing: border-box;
    z-index: 10;
    pointer-events: auto;
    left: 0;
    top: 0;
    will-change: transform;
}

.crop-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #1890ff;
    border: 2px solid white;
    border-radius: 2px;
    box-sizing: border-box;
    z-index: 11;
    pointer-events: auto;
}

.crop-handle-nw {
    top: -6px;
    left: -6px;
    cursor: nw-resize;
}

.crop-handle-ne {
    top: -6px;
    right: -6px;
    cursor: ne-resize;
}

.crop-handle-sw {
    bottom: -6px;
    left: -6px;
    cursor: sw-resize;
}

.crop-handle-se {
    bottom: -6px;
    right: -6px;
    cursor: se-resize;
}

.crop-handle-n {
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    cursor: n-resize;
}

.crop-handle-s {
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    cursor: s-resize;
}

.crop-handle-w {
    top: 50%;
    left: -6px;
    transform: translateY(-50%);
    cursor: w-resize;
}

.crop-handle-e {
    top: 50%;
    right: -6px;
    transform: translateY(-50%);
    cursor: e-resize;
}

.crop-size-info {
    font-size: 14px;
    color: #666;
    padding: 8px 16px;
    background: #f9f9f9;
    border-radius: 4px;
}

.sidebar1 {
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 20px;
	background:#ffffff;
	padding:30px;
	border-radius:10px;
}

.tool-section {
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: 15px;
}

.tool-section:last-child {
    border-bottom: none;
}

.tool-section h3 {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 12px;
}

.tool-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tool-btn {
    width: 36px;
    height: 36px;
    border: 1px solid #d9d9d9;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.tool-btn:hover {
    border-color: #1890ff;
    color: #1890ff;
}

.tool-btn.clear-btn {
    width: auto;
    padding: 0 12px;
   
}

.tool-btn.clear-btn:hover {
    background: #fff1f0;
}

/* 阿里图标样式 */
.icon-flip-horizontal {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg%20t%3D%221765539488022%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20p-id%3D%223548%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cpath%20d%3D%22M453.5%20927.2H102.3c-12.2%200-23.4-6.1-30-16.4-6.6-10.3-7.4-23.1-2.3-34.1l351.2-756.8c7.1-15.3%2023.5-23.4%2040-19.8%2016.4%203.6%2027.9%2017.9%2027.9%2034.8v756.8c0%2019.5-15.9%2035.5-35.6%2035.5z%20m-336-45.3h326.3V178.8L117.5%20881.9z%22%20fill%3D%22%237D7D7D%22%20p-id%3D%223549%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M569.1%20904.6h351.2c9.5%200%2015.7-9.8%2011.7-18.4L580.9%20129.4c-5.8-12.6-24.7-8.4-24.7%205.4v756.8c0%207.2%205.8%2013%2012.9%2013z%22%20fill%3D%22%23CBCBCB%22%20p-id%3D%223550%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M920.3%20927.2H569.1c-19.6%200-35.6-16-35.6-35.6V134.8c0-16.8%2011.5-31.1%2027.9-34.8%2016.4-3.6%2032.9%204.5%2040%2019.8l351.2%20756.8c5.1%2011.1%204.3%2023.8-2.3%2034.1-6.5%2010.4-17.8%2016.5-30%2016.5z%20m-341.5-45.3h326.3L578.8%20178.8v703.1z%22%20fill%3D%22%237D7D7D%22%20p-id%3D%223551%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.icon-flip-vertical {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg%20t%3D%221765539531452%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20p-id%3D%224544%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cpath%20d%3D%22M892.2%20489.5H130.5c-16.9%200-31.3-11.6-35-28.1-3.7-16.5%204.5-33.1%2019.9-40.2L877.1%2067.7c11.2-5.2%2024-4.3%2034.4%202.3%2010.4%206.6%2016.5%2017.9%2016.5%2030.2v353.5c0%2019.7-16.1%2035.8-35.8%2035.8z%20m-717.4-45.6h707.6V115.5L174.8%20443.9z%22%20fill%3D%22%237D7D7D%22%20p-id%3D%224545%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M905.2%20570v353.5c0%209.5-9.9%2015.8-18.5%2011.8L125%20581.8c-12.7-5.9-8.5-24.8%205.5-24.8h761.7c7.2-0.1%2013%205.8%2013%2013z%22%20fill%3D%22%23CBCBCB%22%20p-id%3D%224546%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M892.2%20959.3c-5.1%200-10.3-1.1-15.1-3.4L115.4%20602.5c-15.4-7.1-23.6-23.7-19.9-40.2%203.7-16.5%2018-28.1%2035-28.1h761.7c19.8%200%2035.8%2016.1%2035.8%2035.8v353.5c0%2012.3-6.2%2023.6-16.5%2030.2-5.9%203.7-12.6%205.6-19.3%205.6zM174.8%20579.7l707.6%20328.4V579.7H174.8z%22%20fill%3D%22%237D7D7D%22%20p-id%3D%224547%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.ratio-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.preset-ratios {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ratio-btn {
    padding: 6px 16px;
    border: 1px solid #d9d9d9;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.ratio-btn:hover {
    border-color: #1890ff;
    color: #1890ff;
}

.ratio-btn.active {
    background: #1890ff;
    color: white;
    border-color: #1890ff;
}

.custom-ratio {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.custom-ratio label {
    font-size: 13px;
    color: #666;
}

.ratio-inputs {
    display: flex;
    gap: 12px;
}

.input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.input-group label {
    font-size: 12px;
    color: #999;
}

.input-group input {
    padding: 6px 8px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 13px;
    width:90%;
}

.input-group input:focus {
    outline: none;
    border-color: #1890ff;
}

.photo-sizes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.photo-size-btn {
    padding: 6px 16px;
    border: 1px solid #d9d9d9;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.photo-size-btn:hover {
    border-color: #1890ff;
    color: #1890ff;
}

.photo-size-btn.active {
    background: #1890ff;
    color: white;
    border-color: #1890ff;
}

.export-settings {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.export-settings label {
    font-size: 13px;
    color: #666;
}

.export-settings select {
    padding: 8px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 13px;
    background: white;
    cursor: pointer;
}

.export-settings select:focus {
    outline: none;
    border-color: #1890ff;
}

.download-btn {
    width: 100%;
    padding: 12px;
    background: #1890ff;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
   
}

.download-btn:hover {
    background: #40a9ff;
}

.download-btn:active {
    background: #096dd9;
}

/* 响应式设计 */
@media (max-width: 1024px) {
    .main-content {
        flex-direction: column;
    }
    
    .sidebar {
        width: 100%;
    }
}