button#du_open_camera { background: transparent; border: 1px solid #aaa; color: #aaa; cursor: pointer; width: 87px; padding: 15px; }
button#du_open_camera:hover { color: #000; border-color: #000; }
.du-image-wrapper { position: relative; display: inline-block; margin: 5px; }
.du-gallery-container { display: flex; gap: 10px; overflow-x: auto; padding: 10px 0; align-items: flex-start; }
.du-image-wrapper { width: 80px; height: 80px; border: 1px solid #ccc; position: relative; flex-shrink: 0; background: #fff; }
.du-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
[type=button].du-remove { position: absolute; top: -6px; right: -6px; background: red; color: #fff; border: none; border-radius: 50%; font-size: 12px; width: 18px; height: 18px; line-height: 16px; text-align: center; cursor: pointer; z-index: 2; padding: 0; }
.du-label { position: absolute; bottom: -18px; font-size: 10px; width: 100%; text-align: center; color: #666; }
.du-add-box { border: 2px dashed #ccc; background: #fafafa; justify-content: center; align-items: center; text-align: center; cursor: pointer; display: flex; flex-direction: column; color: #777; font-size: 12px; }
button#du_add_box { box-shadow: 0 4px 6px rgba(0,0,0,.04); border: 1px solid rgba(0,0,0,.04); color: #333; line-height: 1; background: transparent; }
button#du_add_box:hover { background: transparent; border-color: #333; }
.du-plus { font-size: 20px; line-height: 20px; font-weight: bold; }
.du-loader-circle { border: 3px solid #f3f3f3; border-top: 3px solid #3498db; border-radius: 50%; width: 24px; height: 24px; animation: spin 1s linear infinite; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
@keyframes spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }