.drop-zone {
 border: 2px dashed #ccc;
 border-radius: 10px;
 padding: 30px;
 text-align: center;
 background: #fff;
 transition: border 0.3s, background 0.3s;
 cursor: pointer;
 margin-bottom: 20px;
 }
 .drop-zone:hover {
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect width='10' height='10' fill='%23f0f0f0'/%3E%3Crect x='10' y='10' width='10' height='10' fill='%23f0f0f0'/%3E%3C/svg%3E");
 background-size: 10px 10px !important;
 transition: background-image 0.3s ease, background-color 0.3s ease;
 border-color: #23527c;
 }
 .drop-zone-icon {
 font-size: 48px;
 color: #337ab7;
 margin-bottom: 15px;
}
.editor-container {
 padding: 10px;
 margin-top: 10px;
}
.canvas-wrapper {
 text-align: center;
 margin: 20px 0;
 background: repeating-conic-gradient(#ccc 0% 25%, #eee 0% 50%) 50% / 20px 20px;
 padding: 20px;
 border-radius: 8px;
 border: 1px solid #ddd;
 overflow: visible; 
 position: relative;
 width: 100%;
}
#mainCanvas {
 display: block;
 margin: 0 auto;
 border: 2px solid #337ab7;
 cursor: crosshair;
 max-width: 100%;
 height: auto;
 box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
 .toolbar {
 background: #f8f9fa;
 padding: 20px;
 border-radius: 8px;
 margin: 20px 0;
 border: 1px solid #e7e7e7;
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 20px;
 }
.shape-panel {
 margin: 10px 0;
}
.shape-panel.active {
 display: block;
}
.bridge-item {
 background: white;
 padding: 8px 12px;
 margin: 5px 0;
 border-radius: 4px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 border: 1px solid #ddd;
}
 .file-info {
 background: #e7f3ff;
 padding: 15px;
 border-radius: 8px;
 margin: 15px 0;
 border-left: 4px solid #337ab7;
 display: flex;
 justify-content: space-between;
 align-items: center;
 }
.preview-hint {
 position: absolute;
 background: rgba(0,0,0,0.7);
 color: white;
 padding: 4px 8px;
 border-radius: 4px;
 font-size: 12px;
 pointer-events: none;
 z-index: 100;
}