:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#000;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;color:#000;background-color:#fff}#root{width:100%;margin:0 auto;padding:0;text-align:center}.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.app-header{padding:1rem 2rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 2px 8px #0000001a}.app-header h1{margin:0;font-size:1.75rem;font-weight:600}.app-subtitle{margin:.25rem 0 0;font-size:.875rem;opacity:.9}.app-layout{display:flex;flex:1;overflow:hidden}.sidebar{width:320px;background:#f8f9fa;border-right:1px solid #e0e0e0;overflow-y:auto;padding:1.5rem}.sidebar-right{border-right:none;border-left:1px solid #e0e0e0}.sidebar-section{margin-bottom:2rem}.sidebar-section h2{font-size:1.125rem;font-weight:600;margin:0 0 1rem;color:#333}.batch-image-upload{margin-top:1rem}.batch-upload-button{width:100%;padding:.75rem;background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;border:none;border-radius:6px;font-size:.95rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 2px 4px #0000001a}.batch-upload-button:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.batch-upload-button:active{transform:translateY(0)}.main-content{flex:1;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.undo-redo-toolbar{position:absolute;top:12px;left:12px;z-index:10;display:flex;gap:6px}.undo-redo-button{padding:6px 12px;font-size:.85rem;font-weight:500;color:#374151;background:#fff;border:1px solid #d1d5db;border-radius:6px;cursor:pointer;box-shadow:0 1px 2px #0000000d}.undo-redo-button:hover:not(:disabled){background:#f3f4f6}.undo-redo-button:disabled{opacity:.4;cursor:not-allowed}.autosave-indicator{position:absolute;top:14px;right:14px;z-index:10;display:flex;align-items:center;gap:4px;padding:4px 10px;font-size:.78rem;font-weight:500;color:#047857;background:#d1fae5f2;border:1px solid #6ee7b7;border-radius:999px;pointer-events:none;animation:toast-in .18s ease-out}.design-canvas-container{width:100%;height:100%;position:relative;background:#f5f5f5}.canvas-empty-state{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#999;pointer-events:none}.image-upload{margin-bottom:1rem}.upload-zone{border:2px dashed #ccc;border-radius:8px;padding:2rem;text-align:center;cursor:pointer;transition:all .2s;background:#fff}.upload-zone:hover:not(.disabled){border-color:#667eea;background:#f0f4ff}.upload-zone.drag-active{border-color:#667eea;background:#e3f2fd}.upload-zone.disabled{cursor:not-allowed;opacity:.6}.upload-icon{color:#667eea;margin-bottom:1rem}.upload-text{margin:.5rem 0;color:#333}.upload-hint{margin:.25rem 0 0;font-size:.875rem;color:#999}.upload-errors{margin-top:1rem}.config-section{margin-bottom:1.5rem}.config-section h3{font-size:.875rem;font-weight:600;margin:0 0 .75rem;color:#666;text-transform:uppercase;letter-spacing:.5px}.preset-buttons{display:flex;flex-direction:column;gap:.5rem}.preset-btn{padding:.75rem 1rem;border:2px solid #e0e0e0;border-radius:6px;background:#fff;cursor:pointer;text-align:left;transition:all .2s;display:flex;flex-direction:column;gap:.25rem}.preset-btn:hover{border-color:#667eea}.preset-btn.active{border-color:#667eea;background:#f0f4ff;font-weight:600}.preset-dimensions{font-size:.75rem;color:#999}.custom-dimensions{display:flex;gap:1rem;margin-top:1rem}.input-group{flex:1}.input-group label{display:block;font-size:.875rem;margin-bottom:.25rem;color:#666}.input-group input,.paper-size-selector select{width:100%;padding:.5rem;border:1px solid #e0e0e0;border-radius:4px;font-size:.875rem}.orientation-buttons{display:flex;gap:.5rem;margin-top:.75rem}.orientation-btn{flex:1;padding:.5rem;border:2px solid #e0e0e0;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s}.orientation-btn:hover{border-color:#667eea}.orientation-btn.active{border-color:#667eea;background:#f0f4ff;font-weight:600}.grid-info{background:#fff;padding:1rem;border-radius:6px;border:1px solid #e0e0e0}.grid-info p{margin:.5rem 0}.grid-total{font-size:.875rem;color:#666}.grid-spacing-control{margin-top:1rem}.grid-spacing-control .checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem;color:#333}.grid-spacing-control input[type=checkbox]{width:auto;cursor:pointer}.export-panel h2{font-size:1.125rem;font-weight:600;margin:0 0 1.5rem;color:#333}.grid-preview{margin-bottom:2rem}.grid-preview h3{font-size:.875rem;font-weight:600;margin:0 0 1rem;color:#666;text-transform:uppercase;letter-spacing:.5px}.preview-paper-container{display:flex;justify-content:center;padding:1rem;background:#fff;border-radius:8px;border:1px solid #e0e0e0}.preview-info{margin-top:1rem;font-size:.875rem;color:#666}.preview-info p{margin:.25rem 0}.preview-dimensions{font-size:.75rem;color:#999}.export-settings{margin-bottom:1.5rem}.export-settings h3{font-size:.875rem;font-weight:600;margin:0 0 1rem;color:#666;text-transform:uppercase;letter-spacing:.5px}.setting-group{margin-bottom:1rem}.setting-group label{display:block;font-size:.875rem;margin-bottom:.25rem;color:#666}.setting-group input,.setting-group select{width:100%;padding:.5rem;border:1px solid #e0e0e0;border-radius:4px;font-size:.875rem}.setting-checkbox{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.setting-checkbox input[type=checkbox]{width:auto}.setting-checkbox label{font-size:.875rem;color:#666;cursor:pointer}.export-button{width:100%;padding:.75rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .2s}.export-button:hover:not(:disabled){transform:translateY(-2px)}.export-button:disabled{opacity:.6;cursor:not-allowed}.export-hint{margin-top:.75rem;font-size:.875rem;color:#999;text-align:center}.error-display{position:fixed;bottom:2rem;right:2rem;max-width:400px;z-index:1000}.error-list{display:flex;flex-direction:column;gap:.75rem}.error-message{padding:1rem;border-radius:6px;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;box-shadow:0 4px 12px #00000026}.error-error{background:#ffebee;border-left:4px solid #f44336}.error-warning{background:#fff3e0;border-left:4px solid #ff9800}.error-content{display:flex;align-items:flex-start;gap:.75rem;flex:1}.error-icon{font-size:1.25rem;line-height:1}.error-error .error-icon{color:#f44336}.error-warning .error-icon{color:#ff9800}.error-text{flex:1}.error-text strong{display:block;margin-bottom:.25rem;font-size:.875rem;color:#333}.error-text p{margin:0;font-size:.875rem;color:#666}.error-dismiss{padding:.25rem;background:none;border:none;cursor:pointer;color:#999;font-size:1.25rem;line-height:1}.error-dismiss:hover{color:#333}.error-dismiss-all{margin-top:.75rem;padding:.5rem 1rem;background:#333;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:.875rem;width:100%}.slot-properties-panel{background:#fff;padding:1rem;border-radius:8px;border:1px solid #e0e0e0}.slot-properties-panel h3{font-size:.875rem;font-weight:600;margin:0 0 1rem;color:#666;text-transform:uppercase;letter-spacing:.5px}.info-message{padding:1rem;background:#f5f5f5;border-radius:6px;color:#666;font-size:.875rem;text-align:center}.warning-message{padding:.75rem;background:#fff3e0;border-left:4px solid #ff9800;border-radius:4px;color:#f57c00;font-size:.875rem;margin-top:.5rem}.apply-to-all-section{margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid #e0e0e0}.apply-to-all-section label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem;color:#333}.apply-to-all-section input[type=checkbox]{width:auto;cursor:pointer}.slot-info{padding:.75rem;background:#f0f4ff;border-radius:6px;margin-bottom:1.5rem}.slot-info p{margin:0;font-size:.875rem;color:#667eea;font-weight:500}.border-controls,.background-controls,.scale-controls{margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid #e0e0e0}.border-controls:last-child,.background-controls:last-child,.scale-controls:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.border-controls h4,.background-controls h4,.scale-controls h4{font-size:.875rem;font-weight:600;margin:0 0 .75rem;color:#333}.control-group{margin-bottom:1rem}.control-group:last-child{margin-bottom:0}.control-group label{display:block;font-size:.875rem;margin-bottom:.25rem;color:#666}.control-group input[type=number],.control-group input[type=text],.control-group select{width:100%;padding:.5rem;border:1px solid #e0e0e0;border-radius:4px;font-size:.875rem}.control-group input[type=color]{width:100%;height:40px;padding:.25rem;border:1px solid #e0e0e0;border-radius:4px;cursor:pointer}.color-hex-input{margin-top:.5rem;font-family:Monaco,Courier New,monospace}.control-group input[type=range]{width:100%;cursor:pointer}.control-group input[type=checkbox],.control-group input[type=radio]{width:auto;margin-right:.5rem;cursor:pointer}.reset-button{width:100%;padding:.5rem;background:#f5f5f5;border:1px solid #e0e0e0;border-radius:4px;cursor:pointer;font-size:.875rem;transition:all .2s}.reset-button:hover:not(:disabled){background:#eee;border-color:#d0d0d0}.reset-button:disabled{opacity:.5;cursor:not-allowed}.toast-container{position:fixed;bottom:20px;right:20px;z-index:2000;display:flex;flex-direction:column;gap:10px;max-width:360px;pointer-events:none}.toast{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:8px;background:#fff;color:#1f2937;box-shadow:0 6px 20px #0000002e;border-left:4px solid #6b7280;pointer-events:auto;animation:toast-in .18s ease-out}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.toast-success{border-left-color:#10b981}.toast-error{border-left-color:#ef4444}.toast-info{border-left-color:#3b82f6}.toast-icon{font-size:1rem;font-weight:700}.toast-success .toast-icon{color:#10b981}.toast-error .toast-icon{color:#ef4444}.toast-info .toast-icon{color:#3b82f6}.toast-message{flex:1;font-size:.875rem;line-height:1.3}.toast-close{border:none;background:transparent;color:#9ca3af;cursor:pointer;font-size:.85rem;padding:0 2px;line-height:1}.toast-close:hover{color:#4b5563}.confirm-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1100;background:#00000073;display:flex;align-items:center;justify-content:center;padding:16px;animation:toast-in .15s ease-out}.confirm-dialog{background:#fff;border-radius:10px;padding:22px 24px;max-width:420px;width:100%;box-shadow:0 16px 48px #00000047}.confirm-title{margin:0 0 8px;font-size:1.05rem;color:#111827}.confirm-message{margin:0 0 20px;font-size:.9rem;line-height:1.5;color:#374151}.confirm-actions{display:flex;justify-content:flex-end;gap:10px}.confirm-cancel,.confirm-ok{padding:8px 16px;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;border:1px solid transparent}.confirm-cancel{background:#fff;border-color:#d1d5db;color:#374151}.confirm-cancel:hover{background:#f3f4f6}.confirm-ok{background:#4f46e5;color:#fff}.confirm-ok:hover{background:#4338ca}.confirm-ok.danger{background:#ef4444}.confirm-ok.danger:hover{background:#dc2626}.layer-panel{display:flex;flex-direction:column;height:100%;background:#fff}.layer-panel-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0}.layer-panel-header h3{margin:0;font-size:1rem;font-weight:600;color:#333}.layer-panel-toolbar{display:flex;gap:.5rem;padding:.75rem 1rem;border-bottom:1px solid #e0e0e0;background:#f9fafb}.toolbar-button{flex:1;padding:.5rem .75rem;background:#fff;color:#333;border:1px solid #e0e0e0;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}.toolbar-button:hover{background:#f0f4ff;border-color:#667eea;color:#667eea}.add-layer-button{padding:.5rem 1rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:transform .2s;white-space:nowrap}.add-layer-button:hover{transform:translateY(-1px)}.layer-panel-empty{padding:2rem 1rem;text-align:center;color:#999;font-size:.875rem}.layer-list{flex:1;overflow-y:auto;padding:.5rem}.layer-list-empty{padding:2rem 1rem;text-align:center;color:#999;font-size:.875rem}.layer-item{background:#fff;border:1px solid #e0e0e0;border-radius:6px;margin-bottom:.5rem;transition:all .2s}.layer-item:hover{border-color:#667eea;box-shadow:0 2px 4px #0000001a}.layer-item.selected{border-color:#667eea;background:#f0f4ff}.layer-item-header{display:flex;align-items:center;padding:.75rem;gap:.5rem;cursor:pointer}.layer-drag-handle{background:none;border:none;padding:.25rem;cursor:grab;font-size:.875rem;color:#999;-webkit-user-select:none;user-select:none;transition:color .2s}.layer-drag-handle:hover{color:#667eea}.layer-drag-handle:active{cursor:grabbing}.layer-item.dragging{opacity:.5;box-shadow:0 4px 8px #0003}.layer-expand-button{background:none;border:none;padding:0;cursor:pointer;font-size:.75rem;color:#666;width:20px;text-align:center}.layer-icon{font-size:1.25rem}.layer-name{flex:1;font-size:.875rem;font-weight:500;color:#333}.layer-name-input{flex:1;padding:.25rem .5rem;border:1px solid #667eea;border-radius:4px;font-size:.875rem;font-weight:500}.layer-color-preview{width:24px;height:24px;border-radius:4px;border:1px solid #e0e0e0}.layer-image-preview{width:32px;height:32px;border-radius:4px;overflow:hidden;border:1px solid #e0e0e0}.layer-image-preview img{width:100%;height:100%;object-fit:cover}.layer-item-actions{display:flex;gap:.25rem}.layer-action-button{background:none;border:none;padding:.25rem;cursor:pointer;font-size:1rem;opacity:.6;transition:opacity .2s}.layer-action-button:hover{opacity:1}.layer-item-expanded{padding:.75rem;border-top:1px solid #e0e0e0;background:#fafafa}.layer-item-controls{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;padding-top:1rem;border-top:1px solid #e0e0e0}.layer-reorder-buttons{display:flex;gap:.5rem}.layer-control-button{padding:.5rem 1rem;background:#fff;border:1px solid #e0e0e0;border-radius:4px;cursor:pointer;font-size:1rem;transition:all .2s}.layer-control-button:hover:not(:disabled){background:#f5f5f5;border-color:#667eea}.layer-control-button:disabled{opacity:.3;cursor:not-allowed}.layer-delete-button{padding:.5rem 1rem;background:#ffebee;border:1px solid #ef5350;border-radius:4px;color:#d32f2f;cursor:pointer;font-size:.875rem;transition:all .2s}.layer-delete-button:hover{background:#ef5350;color:#fff}.layer-controls{display:flex;flex-direction:column;gap:1rem}.layer-control-group{display:flex;flex-direction:column;gap:.25rem}.layer-control-group label{font-size:.875rem;font-weight:500;color:#666}.layer-control-group input[type=text],.layer-control-group input[type=number],.layer-control-group select{padding:.5rem;border:1px solid #e0e0e0;border-radius:4px;font-size:.875rem}.layer-control-group input[type=range]{width:100%;cursor:pointer}.layer-control-group input[type=checkbox]{width:auto;margin-right:.5rem}.layer-control-group small{font-size:.75rem;color:#999}.color-control{display:flex;gap:.5rem;align-items:center}.color-control input[type=color]{width:60px;height:40px;padding:.25rem;border:1px solid #e0e0e0;border-radius:4px;cursor:pointer}.color-hex-input{flex:1;font-family:Monaco,Courier New,monospace}.range-value{font-size:.875rem;color:#666;min-width:40px;text-align:right}.add-layer-menu-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0000004d;z-index:1000}.add-layer-menu{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border-radius:8px;box-shadow:0 4px 20px #0003;z-index:1001;width:400px;max-width:90vw}.add-layer-menu-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;border-bottom:1px solid #e0e0e0}.add-layer-menu-header h4{margin:0;font-size:1.125rem;font-weight:600;color:#333}.add-layer-menu-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:#999;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s}.add-layer-menu-close:hover{background:#f5f5f5;color:#333}.add-layer-menu-options{padding:1rem;display:flex;flex-direction:column;gap:.5rem}.add-layer-option{display:flex;align-items:center;gap:1rem;padding:1rem;background:#fff;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s;text-align:left}.add-layer-option:hover{border-color:#667eea;background:#f0f4ff}.add-layer-icon{font-size:2rem;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#f5f5f5;border-radius:8px}.add-layer-option-text{flex:1;display:flex;flex-direction:column;gap:.25rem}.add-layer-option-text strong{font-size:.9375rem;color:#333}.add-layer-option-text small{font-size:.8125rem;color:#999}.layer-panel-info{padding:1rem;border-top:1px solid #e0e0e0;background:#fafafa}.layer-panel-info p{margin:.25rem 0;font-size:.875rem;color:#666}.alignment-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:.5rem}.alignment-button{aspect-ratio:1;padding:.75rem;background:#fff;border:2px solid #e0e0e0;border-radius:6px;font-size:1.25rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.alignment-button:hover{border-color:#667eea;background:#f0f4ff;transform:scale(1.05)}.alignment-button:active{transform:scale(.95)}.apply-to-all-button{padding:.5rem 1rem;background:linear-gradient(135deg,#43e97b,#38f9d7);color:#fff;border:none;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}.apply-to-all-button:hover{transform:translateY(-1px);box-shadow:0 4px 12px #43e97b66}.apply-to-all-button:active{transform:translateY(0)}.preset-manager-button{padding:.5rem 1rem;background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff;border:none;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}.preset-manager-button:hover{transform:translateY(-1px);box-shadow:0 4px 12px #f093fb66}.preset-manager-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:1000}.preset-manager{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border-radius:12px;box-shadow:0 8px 32px #0003;z-index:1001;width:600px;max-width:90vw;max-height:80vh;display:flex;flex-direction:column}.preset-manager-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid #e0e0e0}.preset-manager-header h3{margin:0;font-size:1.25rem;font-weight:600;color:#333}.preset-manager-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:#999;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s}.preset-manager-close:hover{background:#f5f5f5;color:#333}.preset-manager-actions{padding:1rem 1.5rem;display:flex;gap:.75rem;border-bottom:1px solid #e0e0e0}.preset-action-button{padding:.75rem 1.25rem;background:#fff;border:2px solid #e0e0e0;border-radius:8px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:.5rem}.preset-action-button.primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:transparent}.preset-action-button:hover:not(:disabled){border-color:#667eea;transform:translateY(-1px)}.preset-action-button.primary:hover{box-shadow:0 4px 12px #667eea66}.preset-action-button:disabled{opacity:.5;cursor:not-allowed}.preset-save-dialog{padding:1.5rem;background:#f9fafb;border-bottom:1px solid #e0e0e0}.preset-save-dialog h4{margin:0 0 1rem;font-size:1rem;font-weight:600;color:#333}.preset-form-group{margin-bottom:1rem}.preset-form-group label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:#666}.preset-form-group input,.preset-form-group textarea{width:100%;padding:.75rem;border:1px solid #e0e0e0;border-radius:6px;font-size:.875rem;font-family:inherit}.preset-form-group textarea{resize:vertical}.preset-form-actions{display:flex;gap:.75rem;margin-top:1.5rem}.preset-save-button,.preset-cancel-button{padding:.75rem 1.5rem;border:none;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s}.preset-save-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.preset-save-button:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}.preset-cancel-button{background:#fff;color:#666;border:1px solid #e0e0e0}.preset-cancel-button:hover{background:#f5f5f5}.preset-list{flex:1;overflow-y:auto;padding:1.5rem}.preset-list h4{margin:0 0 1rem;font-size:1rem;font-weight:600;color:#333}.preset-empty-state{text-align:center;padding:3rem 1.5rem;color:#999}.preset-empty-state p{margin:0 0 .5rem;font-size:1rem}.preset-empty-state small{font-size:.875rem}.preset-items{display:flex;flex-direction:column;gap:1rem}.preset-item{background:#fff;border:2px solid #e0e0e0;border-radius:8px;padding:1rem;transition:all .2s}.preset-item:hover{border-color:#667eea;box-shadow:0 2px 8px #0000001a}.preset-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.preset-item-header strong{font-size:1rem;color:#333}.preset-layer-count{font-size:.75rem;color:#999;background:#f5f5f5;padding:.25rem .75rem;border-radius:12px}.preset-description{margin:.5rem 0;font-size:.875rem;color:#666;line-height:1.5}.preset-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0}.preset-tag{font-size:.75rem;padding:.25rem .75rem;background:#f0f4ff;color:#667eea;border-radius:12px;font-weight:500}.preset-item-actions{display:flex;gap:.5rem;margin-top:.75rem;padding-top:.75rem;border-top:1px solid #f5f5f5}.preset-load-button,.preset-export-button,.preset-delete-button{padding:.5rem 1rem;border:none;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s}.preset-load-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.preset-load-button:hover{transform:translateY(-1px);box-shadow:0 2px 8px #667eea66}.preset-export-button{background:#fff;color:#667eea;border:1px solid #667eea}.preset-export-button:hover{background:#f0f4ff}.preset-delete-button{background:#ffebee;color:#d32f2f;border:1px solid #ef5350;margin-left:auto}.preset-delete-button:hover:not(:disabled){background:#ef5350;color:#fff}.preset-delete-button:disabled{background:#f5f5f5;color:#bdbdbd;border-color:#e0e0e0;cursor:not-allowed;opacity:.6}.color-type-toggle{display:flex;gap:.5rem;margin-bottom:.75rem}.color-type-toggle button{flex:1;padding:.5rem;background:#fff;border:2px solid #e0e0e0;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s}.color-type-toggle button:hover{border-color:#667eea;background:#f0f4ff}.color-type-toggle button.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:transparent}.gradient-editor{display:flex;flex-direction:column;gap:1rem;padding:1rem;background:#f9fafb;border:1px solid #e0e0e0;border-radius:6px}.gradient-editor-header{display:flex;flex-direction:column;gap:.5rem}.gradient-preview{width:100%;height:60px;border-radius:6px;border:1px solid #e0e0e0}.gradient-control-group{display:flex;flex-direction:column;gap:.5rem}.gradient-control-group label{font-size:.875rem;font-weight:500;color:#666}.gradient-stops{display:flex;flex-direction:column;gap:.75rem}.gradient-stops-header{display:flex;justify-content:space-between;align-items:center}.add-stop-button{padding:.5rem 1rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s}.add-stop-button:hover{transform:translateY(-1px);box-shadow:0 2px 8px #667eea66}.gradient-stop{display:flex;align-items:center;gap:.5rem;padding:.75rem;background:#fff;border:2px solid #e0e0e0;border-radius:6px;cursor:pointer;transition:all .2s}.gradient-stop:hover{border-color:#667eea}.gradient-stop.selected{border-color:#667eea;background:#f0f4ff}.gradient-stop input[type=color]{width:40px;height:40px;padding:.25rem;border:1px solid #e0e0e0;border-radius:4px;cursor:pointer}.gradient-stop input[type=number]{flex:1;padding:.5rem;border:1px solid #e0e0e0;border-radius:4px;font-size:.875rem}.stop-percentage{font-size:.875rem;color:#666;min-width:40px;text-align:right}.remove-stop-button{background:#ffebee;color:#d32f2f;border:none;width:32px;height:32px;border-radius:4px;font-size:1.25rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.remove-stop-button:hover{background:#ef5350;color:#fff}