.image-edit-btn{display:inline-block;margin-top:10px;padding:8px 16px;color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:13px;font-weight:500;transition:all 0.3s}.image-edit-btn:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgb(102 126 234 / .4)}.image-editor-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:99999}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgb(0 0 0 / .7)}.modal-container{position:relative;max-width:900px;width:85%;max-height:85vh;margin:7.5vh auto;background:#fff;border-radius:10px;box-shadow:0 8px 30px rgb(0 0 0 / .3);overflow:hidden;display:flex;flex-direction:column}.modal-close{position:absolute;top:12px;right:12px;width:35px;height:35px;background:rgb(0 0 0 / .1);border:none;border-radius:50%;font-size:22px;color:#333;cursor:pointer;z-index:20;display:flex;align-items:center;justify-content:center;transition:all 0.3s}.modal-close:hover{background:rgb(0 0 0 / .2);transform:rotate(90deg)}.thumbnail-nav-top{top:12px;right:60px;display:flex;gap:8px;z-index:15;padding:8px;background:rgb(255 255 255 / .95);border-radius:8px;box-shadow:0 2px 8px rgb(0 0 0 / .15)}.thumbnail-item{position:relative;width:50px;height:50px;border-radius:6px;overflow:hidden;cursor:pointer;border:2px solid #fff0;transition:all 0.3s;background-size:cover;background-position:center;box-shadow:0 2px 4px rgb(0 0 0 / .1)}.thumbnail-item:hover{border-color:#4a90e2;transform:scale(1.08)}.thumbnail-item.active{border-color:#667eea;box-shadow:0 3px 10px rgb(102 126 234 / .4)}.modal-content{display:flex;flex:1;overflow:hidden;padding-top:10px}.preview-section{flex:1;padding:20px;background:#f8f9fa;display:flex;flex-direction:column;overflow-y:auto}.control-panel{width:280px;padding:20px;background:#fff;border-left:1px solid #e0e0e0;overflow-y:auto}.section-title{margin:0 0 15px 0;font-size:16px;font-weight:600;color:#333}.ruler-container{position:relative;width:100%;aspect-ratio:1;background:#fff;border-radius:8px;box-shadow:0 2px 8px rgb(0 0 0 / .1)}.ruler-top,.ruler-left{position:absolute;background:#e8e8e8;display:flex;align-items:center;z-index:10}.ruler-top{left:30px;right:0;top:0;height:30px;border-radius:8px 8px 0 0}.ruler-left{left:0;top:30px;bottom:0;width:30px;border-radius:8px 0 0 0}.ruler-mark{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center}.ruler-mark-last{position:absolute!important}.ruler-top .ruler-mark,.ruler-bottom .ruler-mark{flex-direction:column}.ruler-left .ruler-mark,.ruler-right .ruler-mark{flex-direction:row}.ruler-tick{background:#555}.ruler-top .ruler-tick,.ruler-bottom .ruler-tick{width:2px;height:8px}.ruler-left .ruler-tick,.ruler-right .ruler-tick{width:8px;height:2px}.ruler-label{font-size:9px;color:#666;font-weight:500;margin:2px}.pattern-display{position:absolute;top:30px;left:30px;right:0;bottom:0;background:#fff;overflow:hidden;border:1px solid #ddd}.pattern-tile{box-sizing:border-box}.control-group{margin-bottom:18px}.control-label{display:block;margin-bottom:8px;font-size:13px;font-weight:600;color:#333}.current-image-name{padding:8px 10px;background:#f8f9fa;border-radius:5px;font-size:12px;color:#666;border-left:3px solid #667eea;word-break:break-all}.scale-buttons{display:flex;gap:6px}.scale-btn{flex:1;padding:8px;background:#f0f0f0;border:2px solid #ddd;border-radius:5px;cursor:pointer;font-size:12px;font-weight:500;transition:all 0.3s}.scale-btn:hover{background:#e8e8e8;border-color:#4a90e2}.scale-btn.active{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border-color:#667eea}.size-inputs{display:flex;gap:10px}.input-wrapper{flex:1}.input-wrapper label{display:block;margin-bottom:5px;font-size:11px;color:#666}.input-wrapper input{width:100%;padding:8px;border:1px solid #ddd;border-radius:5px;font-size:13px;transition:all 0.3s}.input-wrapper input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px rgb(102 126 234 / .1)}.slider-container{padding:12px;background:#f8f9fa;border-radius:6px}.slider-label{display:flex;justify-content:space-between;margin-bottom:8px;font-size:12px;color:#666}.slider-value{font-weight:600;color:#667eea}.size-slider{width:100%;height:5px;border-radius:3px;background:#ddd;outline:none;-webkit-appearance:none}.size-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#667eea;cursor:pointer;transition:all 0.3s}.size-slider::-webkit-slider-thumb:hover{background:#764ba2;transform:scale(1.15)}.size-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#667eea;cursor:pointer;border:none}.tile-info{padding:12px;background:linear-gradient(135deg,#f8f9fa 0%,#e8eaf6 100%);border-left:3px solid #667eea;border-radius:5px}.info-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.info-row:last-child{margin-bottom:0}.info-label{font-size:12px;color:#666;font-weight:500}.info-value{font-size:13px;font-weight:600;color:#667eea}.btn-save{width:100%;padding:10px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.3s}.btn-save:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgb(102 126 234 / .4)}@media (max-width:1024px){.modal-container{width:90%}.control-panel{width:250px}}@media (max-width:768px){.modal-container{width:95%;max-height:95vh;margin:2.5vh auto}.modal-content{flex-direction:column}.preview-section{padding:15px}.control-panel{width:100%;border-left:none;border-top:1px solid #e0e0e0;padding:15px}.thumbnail-navigation-top{position:static;margin:10px;justify-content:center}.size-inputs{flex-direction:column;gap:8px}.scale-buttons{flex-direction:column}}