.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.dragover,  .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;
}
 .canvas-container {
 border: 1px solid #ccc;
 background: #eee;
 display: inline-block;
 width: 100%;
 }
 .canvas-container canvas {
 display: block;
 width: 100%;
 height: auto;
 background: #fff;
 }
 .preview-canvas {
 width: 100%;
 height: auto;
 border: 1px solid #ccc;
 background: #fff;
 }
 .controls-panel {
 background: #fff;
 padding: 15px;
 border-radius: 5px;
 margin-bottom: 10px;
 box-shadow: 0 2px 5px rgba(0,0,0,0.1);
 }
 .loading { color: #999; font-style: italic; margin-top: 10px; }
 .hidden-panel { display: none; }
 .input-group-addon { padding: 0; border: none; background: transparent; }
 .input-group-addon input { border-radius: 0 4px 4px 0; height: 34px; }
 .input-group .form-control[type=range] { padding: 0; border-radius: 4px 0 0 4px; }