.tanvir-nd-designer-wrapper { background: #fcfcfc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; margin-bottom: 25px; }
.tanvir-nd-designer-wrapper h4 { margin-top: 0; margin-bottom: 15px; font-weight: 600; }
.tanvir-nd-preview-box { background: repeating-linear-gradient(45deg, #f1f5f9, #f1f5f9 10px, #f8fafc 10px, #f8fafc 20px); border: 1px dashed #cbd5e1; border-radius: 8px; padding: 10px; margin-bottom: 20px; text-align: center; }
.tanvir-nd-preview-box svg { max-width: 100%; height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)); max-height: 300px; }
.tanvir-nd-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
@media (max-width: 480px) { .tanvir-nd-controls { grid-template-columns: 1fr; } }
.tanvir-nd-control-group label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; color: #475569; }
.tanvir-nd-control-group input[type="text"], .tanvir-nd-control-group select, .tanvir-nd-control-group textarea { width: 100%; padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 4px; box-sizing: border-box; }
.tanvir-nd-control-group input[type="color"] { width: 100%; height: 38px; padding: 2px; border: 1px solid #cbd5e1; border-radius: 4px; cursor: pointer; }
.tanvir-nd-color-swatches { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 5px; }
.tanvir-nd-color-swatch { width: 32px; height: 32px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: all 0.2s ease; }
.tanvir-nd-color-swatch:hover { transform: scale(1.1); }
.tanvir-nd-color-swatch.active { outline: 2px solid #2563eb; outline-offset: 2px; border-color: #fff; }
.tanvir-nd-template-slider { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; margin-top: 5px; }
.tanvir-nd-template-item { flex: 0 0 80px; height: 80px; border: 2px solid transparent; border-radius: 8px; cursor: pointer; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: all 0.2s ease; background: #fff; }
.tanvir-nd-template-item img { width: 100%; height: 100%; object-fit: contain; }
.tanvir-nd-template-item:hover { transform: scale(1.05); }
.tanvir-nd-template-item.active { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,0.2); }