.outline-section{padding:var(--spacing-sm) 0;border-top:1px solid var(--border-color)}.outline-header{margin-bottom:var(--spacing-xs)}.outline-header label{font-size:.875rem;font-weight:500;color:var(--text-primary)}.outline-width-control{margin-bottom:var(--spacing-sm)}.outline-color-row{margin-top:var(--spacing-sm);animation:fadeIn .2s ease-out}.outline-section .color-swatches-row{display:flex;flex-wrap:wrap;gap:var(--spacing-xs)}.outline-section .color-swatch{width:24px;height:24px;border-radius:var(--radius-sm);border:2px solid transparent;cursor:pointer;transition:all .2s ease}.outline-section .color-swatch:hover{transform:scale(1.1)}.outline-section .color-swatch.active{border-color:var(--color-brand-primary);box-shadow:0 0 0 2px #008dd54d}.outline-section .color-swatch.white{border-color:var(--border-color)}.outline-section .color-picker-input{width:24px;height:24px;border:none;padding:0;cursor:pointer;border-radius:var(--radius-sm)}.text-effects-section{padding:var(--spacing-sm) 0;border-top:1px solid var(--border-color)}.effects-header{margin-bottom:var(--spacing-xs)}.effects-header label{font-size:.875rem;font-weight:500;color:var(--text-primary)}.effect-section{margin-bottom:var(--spacing-xs);border:1px solid var(--border-color);border-radius:var(--radius-sm);overflow:hidden}.effect-section.expanded{border-color:var(--color-brand-primary)}.effect-section-header{width:100%;display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);background:var(--bg-secondary);border:none;font-size:.75rem;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all .2s ease}.effect-section-header:hover{background:var(--bg-hover);color:var(--text-primary)}.effect-section.expanded .effect-section-header{background:var(--color-brand-light);color:var(--text-primary)}.effect-section-header svg{flex-shrink:0}.effect-section-header .chevron{margin-left:auto;transition:transform .2s ease}.effect-section-header .chevron.expanded{transform:rotate(180deg)}.effect-indicator{width:6px;height:6px;background:var(--color-brand-primary);border-radius:50%}.effect-section-header.has-effect span:first-of-type{color:var(--text-primary)}.effect-controls{padding:var(--spacing-sm);border-top:1px solid var(--border-color);animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.effect-controls .slider-control{margin-bottom:var(--spacing-xs)}.effect-hint{font-size:.6875rem;color:var(--text-light);margin:var(--spacing-xs) 0;line-height:1.4}.reset-effect-btn{display:block;width:100%;padding:var(--spacing-xs);margin-top:var(--spacing-xs);background:transparent;border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:.75rem;color:var(--text-secondary);cursor:pointer;transition:all .2s ease}.reset-effect-btn:hover{background:var(--bg-hover);border-color:var(--color-brand-primary);color:var(--text-primary)}.bend-slider,.wave-slider{accent-color:var(--color-brand-primary)}.bend-control .slider-track{position:relative}.bend-control .slider-track:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--border-color);transform:translate(-50%)}.pill-tag{display:inline-block;padding:2px 8px;font-size:11px;font-weight:600;font-family:var(--font-family-base);text-transform:uppercase;letter-spacing:.5px;line-height:20px;border-radius:50px;white-space:nowrap}.pill-tag--brand{color:#fff;background:var(--color-brand-lighter, #f56476)}.pill-tag--info{color:var(--color-brand-dark, #373f51);background:var(--color-brand-light, #dfbbb1)}.pill-tag--muted{color:var(--color-text-secondary);background:var(--color-surface, #f9fafb)}.pill-tag--tag-text{color:#fff;background:var(--color-brand-primary, #008dd5)}.pill-tag--tag-svg{color:#fff;background:var(--color-brand-secondary, #e43f6f)}.pill-tag--tag-png{color:#fff;background:var(--color-brand-dark, #373f51)}.context-menu{position:fixed;z-index:10000;background:var(--color-background, #ffffff);border-radius:12px;box-shadow:0 8px 24px #00000026,0 2px 8px #0000001a;padding:8px;min-width:200px;font-family:var(--font-family-base);animation:contextMenuFadeIn .15s ease-out}@keyframes contextMenuFadeIn{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}.context-menu-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:none;background:transparent;border-radius:6px;cursor:pointer;transition:background-color .15s ease;font-family:var(--font-family-base);font-size:var(--font-size-sm);color:var(--color-text-primary);text-align:left}.context-menu-item:hover:not(.disabled){background:var(--bg-hover, #f3f4f6)}.context-menu-item:active:not(.disabled){background:var(--color-border, #e5e7eb)}.context-menu-item.disabled{opacity:.4;cursor:not-allowed}.context-menu-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;--fa-primary-color: var(--color-brand-lighter, #f56476);--fa-secondary-color: var(--color-brand-primary, #008dd5);--fa-secondary-opacity: 1}.context-menu-label{flex:1;font-weight:var(--font-weight-medium)}.context-menu-tag{margin:4px 8px}.context-menu-separator{height:1px;background:var(--color-border, #e5e7eb);margin:4px 0}.login-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:10000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:modalFadeIn .2s ease-out}.login-modal{background:var(--color-background);border-radius:var(--radius-md);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;max-width:450px;width:90%;max-height:90vh;overflow:hidden;animation:modalSlideIn .3s ease-out;border:1px solid var(--color-border)}.login-modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-lg);border-bottom:1px solid var(--color-border)}.login-modal-title{margin:0;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.login-modal-close{background:none;border:none;color:var(--color-text-secondary);cursor:pointer;padding:var(--spacing-sm);border-radius:var(--radius-md);transition:all .2s ease;display:flex;align-items:center;justify-content:center}.login-modal-close:hover{background:var(--color-surface);color:var(--color-text-primary)}.login-modal-body{padding:var(--spacing-lg)}.login-content{text-align:center}.login-logo{margin-bottom:var(--spacing-lg);color:var(--color-brand-primary)}.login-welcome{margin:0 0 var(--spacing-md);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.login-description{margin:0 0 var(--spacing-lg);font-size:var(--font-size-base);color:var(--color-text-secondary);line-height:1.5}.login-error{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md);margin-bottom:var(--spacing-lg);background:#ef44441a;border:1px solid rgba(239,68,68,.2);border-radius:var(--radius-md);color:#ef4444;font-size:var(--font-size-sm)}.login-actions{display:flex;flex-direction:column;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.login-btn{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-md) var(--spacing-lg);border:none;border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);cursor:pointer;transition:all .2s ease;text-decoration:none}.login-btn:disabled{opacity:.6;cursor:not-allowed}.login-btn-primary{background:var(--color-brand-primary);color:#fff}.login-btn-primary:hover:not(:disabled){background:var(--color-teal-dark)}.login-btn-primary:active:not(:disabled){transform:translateY(0)}.login-btn-secondary{background:var(--color-surface);color:var(--color-text-primary);border:1px solid var(--color-border)}.login-btn-secondary:hover:not(:disabled){background:var(--color-border)}.login-btn-secondary:active:not(:disabled){transform:translateY(0)}.login-divider{position:relative;text-align:center;margin:var(--spacing-md) 0}.login-divider:before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:var(--color-border)}.login-divider span{background:var(--color-background);padding:0 var(--spacing-md);color:var(--color-text-secondary);font-size:var(--font-size-sm)}.login-footer{text-align:center}.login-terms{margin:0;font-size:var(--font-size-xs);color:var(--color-text-secondary);line-height:1.4}.login-link{color:var(--color-brand-primary);text-decoration:none}.login-link:hover{text-decoration:underline}.login-spinner{animation:spin 1s linear infinite}@keyframes modalSlideIn{0%{transform:scale(.9) translateY(-20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.generation-loader{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.generation-loader-container{position:relative;display:flex;align-items:center;justify-content:center}.crafting-loader-image{display:block}.generation-loader-sm{min-height:60px}.generation-loader-sm .crafting-loader-image{width:100px;height:auto}.generation-loader-md{min-height:80px}.generation-loader-md .crafting-loader-image{width:140px;height:auto}.generation-loader-lg{min-height:100px}.generation-loader-lg .crafting-loader-image{width:220px;height:auto}.generation-loader-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff3;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:99999;display:flex;align-items:center;justify-content:center}.templates-panel{height:100%;display:flex;flex-direction:column;overflow:hidden}.templates-actions{display:flex;justify-content:space-between;align-items:center;padding-bottom:1rem;border-bottom:1px solid #e5e7eb;background:#fff}.search-container{flex:1;max-width:300px}.search-input{width:100%;padding:.5rem 1rem;border:1px solid #e5e7eb;border-radius:6px;font-size:.875rem;color:#1f2937;background:#fff;transition:all .2s ease}.search-input:focus{outline:none;border-color:var(--color-brand-secondary);box-shadow:0 0 0 2px #e43f6f33}.publish-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--color-brand-primary);color:var(--color-text-primary);border:none;border-radius:var(--radius-md);font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.publish-btn:hover:not(:disabled){background:var(--color-brand-dark);color:#fff;box-shadow:0 4px 12px #373f514d}.publish-btn:disabled{opacity:.5;cursor:not-allowed}.templates-grid{flex:1;padding:1rem 0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;color:#6b7280}.loading-spinner{width:24px;height:24px;border:2px solid #e5e7eb;border-top:2px solid var(--color-brand-secondary);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:.5rem}.empty-state{text-align:center;padding:var(--spacing-xl);color:var(--color-text-secondary)}.empty-icon{font-size:48px;margin-bottom:var(--spacing-md);opacity:.5}.empty-state h4{margin-bottom:var(--spacing-sm);color:var(--color-text-primary)}.empty-state p{margin-bottom:var(--spacing-lg);font-size:var(--font-size-sm)}.retry-btn{background:var(--color-brand-primary);color:#fff;border:none;border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-lg);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:all .2s ease}.retry-btn:hover{background:var(--color-brand-dark)}.template-card{background:#fff;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden;transition:all .2s ease;cursor:pointer;display:flex;flex-direction:column;height:100%}.template-card:hover{box-shadow:0 8px 25px #0000001a;border-color:var(--color-brand-secondary)}.template-preview{position:relative;aspect-ratio:1;background:#f9fafb;overflow:hidden}.template-preview-image{width:100%;height:100%}.template-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#9ca3af}.template-info{padding:1rem;flex:1;display:flex;flex-direction:column}.template-title{margin:0 0 .25rem;font-size:1rem;font-weight:600;color:#1f2937;line-height:1.2}.template-category{margin:0 0 .5rem;font-size:.75rem;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;font-weight:500}.template-tags{display:flex;flex-wrap:wrap;gap:.25rem}.tag{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .5rem;background:#f3f4f6;color:#374151;border-radius:12px;font-size:.625rem;font-weight:500}.tag-more{padding:.125rem .5rem;background:#e5e7eb;color:#6b7280;border-radius:12px;font-size:.625rem;font-weight:500}.template-actions{display:flex;gap:.5rem;padding:0 1rem 1rem}.load-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.25rem;padding:.5rem;background:var(--color-brand-secondary);color:#fff;border:none;border-radius:var(--radius-md);font-size:.75rem;font-weight:500;cursor:pointer;transition:all .2s ease}.load-btn:hover{background:var(--color-brand-primary)}.delete-btn{display:flex;align-items:center;justify-content:center;padding:.5rem;background:#ef4444;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:all .2s ease}.delete-btn:hover{background:#dc2626}.pagination{display:flex;align-items:center;justify-content:center;gap:1rem;padding-top:1rem;border-top:1px solid #e5e7eb;background:#fff}.page-btn{padding:.5rem 1rem;background:#fff;color:#374151;border:1px solid #e5e7eb;border-radius:4px;font-size:.875rem;cursor:pointer;transition:all .2s ease}.page-btn:hover:not(:disabled){background:#f9fafb;border-color:var(--color-brand-secondary)}.page-btn:disabled{opacity:.5;cursor:not-allowed}.page-info{font-size:.875rem;color:#6b7280}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#fff;border-radius:8px;max-width:500px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 25px -5px #0000001a}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;border-bottom:1px solid #e5e7eb}.modal-header h3{margin:0;font-size:1.25rem;font-weight:600;color:#1f2937}.close-btn{background:none;border:none;font-size:1.5rem;color:#6b7280;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.close-btn:hover{color:#1f2937}.modal-body{padding:1.5rem}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:#1f2937}.form-input,.form-select{width:100%;padding:.75rem;border:1px solid #e5e7eb;border-radius:4px;font-size:.875rem;color:#1f2937;background:#fff;transition:all .2s ease}.form-input:focus,.form-select:focus{outline:none;border-color:var(--color-brand-secondary);box-shadow:0 0 0 2px #e43f6f33}.tags-container{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}.tag-remove{background:none;border:none;color:#6b7280;cursor:pointer;padding:0;font-size:.75rem;margin-left:.25rem}.tag-remove:hover{color:#ef4444}.modal-footer{display:flex;gap:1rem;padding:1.5rem;border-top:1px solid #e5e7eb;justify-content:flex-end}.cancel-btn{padding:.75rem 1.5rem;background:#fff;color:#374151;border:1px solid #e5e7eb;border-radius:4px;font-size:.875rem;cursor:pointer;transition:all .2s ease}.cancel-btn:hover{background:#f9fafb;border-color:#d1d5db}.modal-footer .publish-btn{padding:.75rem 1.5rem;font-size:.875rem}.modal-footer .publish-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.elements-panel{height:100%;display:flex;flex-direction:column;overflow:hidden;background:#fff}.elements-panel-header{padding:1rem;border-bottom:1px solid #e5e7eb;background:#fff}.elements-panel-title{margin:0;font-size:1.125rem;font-weight:600;color:#1f2937}.elements-search-container{padding:1rem;border-bottom:1px solid #e5e7eb}.elements-search-input{width:100%;padding:.5rem 1rem;border:1px solid #e5e7eb;border-radius:6px;font-size:.875rem;color:#1f2937;background:#fff;transition:all .2s ease}.elements-search-input:focus{outline:none;border-color:var(--color-brand-secondary);box-shadow:0 0 0 2px #e74c8e33}.elements-grid-container{flex:1;overflow-y:auto;padding:1rem}.elements-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1rem}.elements-grid-item{display:flex;flex-direction:column;cursor:pointer;border-radius:8px;overflow:hidden;background:#f9fafb;border:1px solid #e5e7eb;transition:all .2s ease}.elements-grid-item:hover{box-shadow:0 4px 12px #0000001a;border-color:var(--color-brand-secondary)}.elements-grid-item-image{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:#fff;overflow:hidden}.elements-grid-item-image img{width:100%;height:100%;object-fit:contain}.elements-grid-item-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#f3f4f6;color:#6b7280;font-size:1.5rem;font-weight:600}.elements-grid-item-title{padding:.5rem;font-size:.75rem;color:#4b5563;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#fff}.elements-loading{text-align:center;padding:2rem;color:#6b7280;font-size:.875rem}.elements-empty{text-align:center;padding:3rem 1rem;color:#6b7280}.elements-empty p{margin:.5rem 0;font-size:.875rem}.elements-empty-query{font-size:.75rem;color:#9ca3af}.elements-load-more{display:flex;justify-content:center;padding:1rem;margin-top:1rem}.elements-load-more-btn{padding:.5rem 1.5rem;background:var(--color-brand-primary);color:#fff;border:none;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.elements-load-more-btn:hover:not(:disabled){box-shadow:0 4px 12px #e74c8e4d}.elements-load-more-btn:disabled{opacity:.5;cursor:not-allowed}.elements-results-count{text-align:center;padding:.75rem;font-size:.75rem;color:#6b7280;border-top:1px solid #e5e7eb;margin-top:1rem}.uploads-panel{display:flex;flex-direction:column;height:100%}.uploads-panel .panel-header{padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--color-border)}.uploads-panel .panel-header h3{font-size:var(--font-size-lg);font-weight:600;color:var(--color-text);margin:0 0 var(--spacing-xs) 0}.uploads-panel .panel-header p{font-size:var(--font-size-sm);color:var(--color-text-muted);margin:0}.uploads-panel .panel-content{flex:1;padding:var(--spacing-lg);overflow-y:auto;display:flex;flex-direction:column;gap:var(--spacing-lg)}.upload-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-md);padding:var(--spacing-2xl);border:2px dashed var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);cursor:pointer;transition:all .2s ease;min-height:180px}.upload-dropzone:hover{border-color:var(--color-primary);background:var(--color-surface-hover)}.upload-dropzone.dragging{border-color:var(--color-primary);background:rgba(var(--color-primary-rgb),.1);border-style:solid}.upload-dropzone.uploading{pointer-events:none;opacity:.8}.upload-dropzone .hidden-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.upload-icon{color:var(--color-primary);opacity:.8}.upload-dropzone:hover .upload-icon,.upload-dropzone.dragging .upload-icon{opacity:1}.upload-text{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs)}.upload-title{font-size:var(--font-size-md);font-weight:500;color:var(--color-text)}.upload-subtitle{font-size:var(--font-size-sm);color:var(--color-text-muted)}.upload-loading{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);color:var(--color-primary)}.upload-spinner{width:32px;height:32px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}.upload-info{display:flex;flex-wrap:wrap;gap:var(--spacing-md);padding:var(--spacing-md);background:var(--color-surface);border-radius:var(--radius-md)}.info-item{display:flex;align-items:center;gap:var(--spacing-xs);font-size:var(--font-size-sm);color:var(--color-text-muted)}.info-item svg{color:var(--color-primary);opacity:.7}.upload-tips{padding:var(--spacing-md);background:var(--color-surface);border-radius:var(--radius-md);border-left:3px solid var(--color-primary)}.upload-tips h4{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text);margin:0 0 var(--spacing-sm) 0}.upload-tips ul{margin:0;padding-left:var(--spacing-lg);list-style-type:disc}.upload-tips li{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:var(--spacing-xs)}.upload-tips li:last-child{margin-bottom:0}.mask-panel{height:100%;display:flex;flex-direction:column;overflow:hidden;padding:1rem}.mask-panel-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:.75rem;margin-bottom:.75rem;border-bottom:1px solid var(--color-border)}.mask-panel-header h3{margin:0;font-size:1rem;font-weight:600;color:var(--color-text-primary)}.mask-categories{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem}.mask-category{background:var(--color-bg-secondary);border-radius:8px}.mask-category-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:none;border:none;cursor:pointer;color:var(--color-text-primary);font-weight:500;font-size:.875rem;transition:background .2s ease}.mask-category-header:hover{background:var(--color-bg-tertiary)}.mask-category-title{text-align:left}.mask-category-chevron{transition:transform .2s ease}.mask-category-chevron.expanded{transform:rotate(180deg)}.mask-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(65px,1fr));gap:.5rem;padding:.5rem .75rem .75rem}.mask-item{display:flex;flex-direction:column;cursor:pointer;border-radius:6px;overflow:hidden;background:var(--color-bg-primary);border:2px solid transparent;transition:all .2s ease}.mask-item:hover{border-color:var(--color-brand-secondary);box-shadow:0 2px 8px #0000001a}.mask-item.selected{border-color:var(--color-brand-primary);box-shadow:0 0 0 2px #e74c8e33}.mask-item-image{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:#fff;overflow:hidden}.mask-item-image img{width:100%;height:100%;object-fit:contain}.mask-item-label{padding:.25rem .5rem;font-size:.625rem;color:var(--color-text-secondary);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--color-bg-secondary)}.mask-actions{display:flex;gap:.5rem;padding-top:1rem;border-top:1px solid var(--color-border);margin-top:1rem}.mask-apply-btn{flex:1;padding:.625rem 1rem;background:var(--color-brand-primary);color:#fff;border:none;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.mask-apply-btn:hover:not(:disabled){filter:brightness(.9);box-shadow:0 4px 12px #008dd54d}.mask-apply-btn:disabled{opacity:.5;cursor:not-allowed}.mask-clear-btn{padding:.625rem 1rem;background:var(--color-bg-secondary);color:var(--color-text-secondary);border:1px solid var(--color-border);border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.mask-clear-btn:hover:not(:disabled){background:var(--color-bg-tertiary);color:var(--color-text-primary)}.mask-clear-btn:disabled{opacity:.5;cursor:not-allowed}.mask-tip{margin-top:.75rem;padding:.5rem;font-size:.75rem;color:var(--color-text-tertiary);text-align:center;line-height:1.4}.mask-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;color:var(--color-text-secondary);padding:2rem}.mask-empty-state p{margin:0;font-size:.875rem;line-height:1.5}.mask-mode-pill{position:absolute;top:12px;left:50%;transform:translate(-50%);z-index:10;pointer-events:none;box-shadow:0 2px 8px #e43f6f4d}.mask-rasterise-warning{display:flex;align-items:flex-start;gap:.5rem;margin-top:.75rem;padding:.5rem .75rem;background:#fff8e6;border:1px solid var(--color-warning);border-radius:6px;font-size:.75rem;color:var(--color-text-secondary);line-height:1.5}.mask-rasterise-icon{flex-shrink:0;margin-top:2px;color:var(--color-warning)}.mask-tip-box{margin-top:.75rem;padding:.625rem .75rem;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-left:3px solid var(--color-brand-secondary);border-radius:6px;font-size:.75rem;color:var(--color-text-secondary);line-height:1.5}.mask-tip-box strong{color:var(--color-text-primary);font-weight:600;display:block;margin-bottom:.25rem}.mask-tip-box ol{margin:.25rem 0 0;padding-left:1.25rem}.mask-tip-box ol li{margin-bottom:.125rem}.mask-tip-box .mask-tip-esc{margin-top:.375rem;font-size:.6875rem;color:var(--color-text-light)}.mask-tip-box .mask-tip-esc kbd{background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:3px;padding:0 4px;font-family:inherit;font-size:.625rem}[data-theme=dark] .mask-item-image{background:var(--color-bg-tertiary)}.canvas-size-modal{background:var(--color-background);border-radius:var(--radius-md);width:100%;max-width:900px;max-height:90vh;overflow:hidden;box-shadow:0 20px 40px #00000026;display:flex;flex-direction:column}.canvas-size-modal .modal-header{padding:24px 32px;background:var(--color-background)}.canvas-size-modal .modal-title{font-size:24px}.canvas-size-modal .close-button{background:var(--color-surface);border:none;padding:8px;cursor:pointer;border-radius:50%;color:var(--color-text-secondary);transition:all .2s ease;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.canvas-size-modal .close-button:hover{background:var(--color-brand-lighter);color:var(--color-brand-secondary)}.canvas-size-modal .modal-content{padding:32px;max-width:100%;flex:1 1 auto;min-height:0;overflow:visible;display:flex;flex-direction:column}.canvas-size-modal .modal-scrollable-content{flex:1 1 auto;min-height:300px;max-height:calc(90vh - 280px);overflow-y:auto;padding-right:8px}.canvas-size-modal .modal-scrollable-content::-webkit-scrollbar{width:8px}.canvas-size-modal .modal-scrollable-content::-webkit-scrollbar-track{background:var(--color-surface);border-radius:4px}.canvas-size-modal .modal-scrollable-content::-webkit-scrollbar-thumb{background:var(--color-brand-dark);border-radius:4px}.canvas-size-modal .modal-scrollable-content::-webkit-scrollbar-thumb:hover{background:var(--color-brand-secondary)}.canvas-size-modal .category-tabs{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap;border-bottom:2px solid var(--color-border);padding-bottom:0;flex-shrink:0}.canvas-size-modal .category-tab{background:transparent;border:none;border-bottom:2px solid transparent;padding:12px 20px;border-radius:var(--radius-md) var(--radius-md) 0 0;font-size:14px;font-weight:500;color:var(--color-text-secondary);cursor:pointer;transition:all .2s ease;position:relative;margin-bottom:-2px}.canvas-size-modal .category-tab:hover{color:var(--color-text-primary);background:var(--color-surface)}.canvas-size-modal .category-tab.active{color:var(--color-brand-secondary);background:var(--color-background);border-bottom-color:var(--color-brand-secondary);font-weight:600}.canvas-size-modal .sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:32px}.canvas-size-modal .sizes__box{background:var(--color-background);border:2px solid var(--color-border);border-radius:var(--radius-card);padding:20px;text-align:center;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #0000000d;display:flex;flex-direction:column;align-items:center;gap:12px;min-height:140px;justify-content:center}.canvas-size-modal .sizes__box:hover{border-color:var(--color-brand-secondary);box-shadow:0 4px 16px #e43f6f26}.canvas-size-modal .sizes__box.active{border-color:var(--color-brand-secondary);background:var(--color-brand-light);box-shadow:0 4px 16px #e43f6f33}.canvas-size-modal .size-item-image{width:80px;height:80px;object-fit:contain;border-radius:8px}.canvas-size-modal .size-item-placeholder{width:80px;height:80px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-brand-secondary)}.canvas-size-modal .sizes__box-title{font-size:16px;font-weight:600;color:var(--color-text-primary);margin:0}.canvas-size-modal .sizes__box-dimensions{font-size:14px;color:var(--color-text-secondary);margin:0}.canvas-size-modal .custom-size-form{display:flex;flex-direction:column;gap:24px}.canvas-size-modal .input-row{display:flex;gap:16px}.canvas-size-modal .input-group{flex:1;display:flex;flex-direction:column;gap:8px}.canvas-size-modal .input-group label{font-size:14px;font-weight:600;color:var(--color-text-primary)}.canvas-size-modal .dimension-input{padding:12px 16px;border:2px solid var(--color-border);border-radius:var(--radius-md);font-size:16px;transition:border-color .2s ease;background:var(--color-background);color:var(--color-text-primary)}.canvas-size-modal .dimension-input:focus{outline:none;border-color:var(--color-brand-secondary)}.canvas-size-modal .unit-selection{display:flex;gap:8px;flex-wrap:wrap}.canvas-size-modal .unit-button{background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-secondary);padding:8px 16px;border-radius:var(--radius-md);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.canvas-size-modal .unit-button:hover{background:var(--color-brand-lighter);color:var(--color-text-primary);border-color:var(--color-brand-secondary)}.canvas-size-modal .unit-button.active{background:var(--color-brand-secondary);color:#fff;border-color:var(--color-brand-secondary)}.canvas-size-modal .modal-footer{padding:24px 32px;justify-content:center}.canvas-size-modal .create-button{background:var(--color-brand-primary);color:var(--color-text-primary);border:none;padding:16px 32px;border-radius:var(--radius-md);font-size:18px;font-weight:600;cursor:pointer;transition:all .2s ease;width:100%;max-width:300px}.canvas-size-modal .create-button:hover{background:var(--color-brand-dark);color:#fff;box-shadow:0 4px 16px #373f514d}.canvas-size-modal .create-button:active{transform:translateY(0)}@media (max-width: 768px){.canvas-size-modal{margin:10px;max-height:95vh}.canvas-size-modal .modal-header,.canvas-size-modal .modal-content{padding:20px}.canvas-size-modal .sizes{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.canvas-size-modal .input-row{flex-direction:column}.canvas-size-modal .unit-selection{justify-content:center}.canvas-size-modal .size-item-image{width:60px;height:60px}}@media (max-width: 480px){.canvas-size-modal .sizes{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.canvas-size-modal .sizes__box{padding:16px}.canvas-size-modal .size-item-image{width:50px;height:50px}.canvas-size-modal .sizes__box-title{font-size:14px}.canvas-size-modal .sizes__box-dimensions{font-size:12px}}:root{--color-brand-primary: #008dd5;--color-brand-light: #dfbbb1;--color-brand-lighter: #f56476;--color-brand-dark: #373f51;--color-brand-secondary: #e43f6f;--color-zoom-accent: #373f51;--color-zoom-accent-hover: #2b3241;--color-text-primary: #2D2A26;--color-text-secondary: #6A6A6A;--color-text-light: #9A9A9A;--color-background: #ffffff;--color-surface: #f9fafb;--color-canvas-bg: #f5f5f5;--color-sidebar-bg: #fafafa;--color-panel-bg: #ffffff;--color-border: #e5e7eb;--color-success: #10b981;--color-error: #ef4444;--color-warning: #f59e0b;--color-shadow: rgba(0, 0, 0, .1);--bg-primary: var(--color-background);--bg-secondary: var(--color-surface);--bg-tertiary: var(--color-sidebar-bg);--bg-hover: #f3f4f6;--border-color: var(--color-border);--text-primary: var(--color-text-primary);--text-secondary: var(--color-text-secondary);--accent-color: var(--color-brand-primary);--accent-hover: var(--color-brand-dark)}body.dark-theme{--color-text-primary: #f9fafb;--color-text-secondary: #d1d5db;--color-text-light: #9ca3af;--color-background: #111827;--color-surface: #1f2937;--color-canvas-bg: #1e293b;--color-sidebar-bg: #1f2937;--color-panel-bg: #1f2937;--color-border: #374151;--color-shadow: rgba(0, 0, 0, .3);--bg-primary: var(--color-background);--bg-secondary: var(--color-surface);--bg-tertiary: var(--color-sidebar-bg);--bg-hover: #374151;--border-color: var(--color-border);--text-primary: var(--color-text-primary);--text-secondary: var(--color-text-secondary);--accent-color: var(--color-brand-primary);--accent-hover: var(--color-brand-dark)}:root{--font-family-base: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.75rem;--font-size-4xl: 2.5rem;--font-weight-light: 300;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.2;--line-height-normal: 1.6;--line-height-relaxed: 1.8;--letter-spacing-tight: -.025em;--letter-spacing-normal: 0;--letter-spacing-wide: .025em}:root{--spacing-unit: .25rem;--spacing-xs: var(--spacing-unit);--spacing-sm: calc(var(--spacing-unit) * 2);--spacing-md: calc(var(--spacing-unit) * 4);--spacing-lg: calc(var(--spacing-unit) * 6);--spacing-xl: calc(var(--spacing-unit) * 8);--spacing-2xl: calc(var(--spacing-unit) * 12);--spacing-3xl: calc(var(--spacing-unit) * 16);--top-bar-height: 80px;--sidebar-width: 110px;--panel-width: 400px;--radius-sm: 4px;--radius-md: 25px;--radius-lg: 50px;--radius-xl: 50px;--radius-card: 15px;--radius-full: 50%}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family-base);font-size:var(--font-size-base);line-height:var(--line-height-normal);color:var(--color-text-primary);background:var(--color-background);height:100vh;overflow:hidden}body:has(.welcome-screen){height:auto;min-height:100vh;overflow:visible}.app{height:100vh;display:flex;flex-direction:column;overflow:hidden}.app:has(.welcome-screen){height:auto;min-height:100vh;overflow:visible}.main-content{display:flex;height:calc(100vh - var(--top-bar-height));margin-top:var(--top-bar-height);margin-left:var(--sidebar-width);position:relative;overflow:hidden;transition:margin-left .3s ease}.main-content:has(.left-sidebar:not(.visible)){margin-left:0}.main-content.no-sidebar{margin-left:0}.canvas-container{flex:1;min-width:0}.main-zoom-controls{position:absolute;top:20px;right:20px;z-index:100;background:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:8px;box-shadow:var(--shadow)}.main-zoom-controls .zoom-controls{display:flex;align-items:center;gap:8px}.main-zoom-controls .zoom-btn{background:none;border:none;border-radius:var(--border-radius);padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.main-zoom-controls .zoom-btn:hover{background:none}.main-zoom-controls .zoom-percentage{font-size:12px;font-weight:500;color:var(--text-color);min-width:40px;text-align:center}@media (max-width: 768px){.main-content{margin-left:0}.left-sidebar{transform:translate(-100%)}.left-sidebar.visible{transform:translate(0)}.main-zoom-controls{top:10px;right:10px}}.processing-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#ffffffe6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:2000}.processing-content{text-align:center;background:var(--color-background);padding:var(--spacing-xl);border-radius:var(--radius-xl);box-shadow:0 8px 32px var(--color-shadow);border:1px solid var(--color-border)}.spinner{width:40px;height:40px;border:3px solid var(--color-border);border-top:3px solid var(--color-zoom-accent);border-radius:var(--radius-full);animation:spin 1s linear infinite;margin:0 auto var(--spacing-md)}.processing-message{color:var(--color-text-primary);font-weight:var(--font-weight-medium);margin:0}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (prefers-contrast: high){:root{--color-border: #000000;--color-shadow: rgba(0, 0, 0, .3)}}@media (max-width: 1024px){.right-panel{position:fixed;top:var(--top-bar-height);right:0;bottom:0;z-index:1000;transform:translate(100%);transition:transform .3s ease}.right-panel.open{transform:translate(0)}}@media (max-width: 768px){:root{--sidebar-width: 160px;--panel-width: 280px}.top-bar-center{margin:0 var(--spacing-md)}.chat-input-container{max-width:300px}}@media (max-width: 480px){:root{--sidebar-width: 140px;--panel-width: 100vw}.top-bar{padding:0 var(--spacing-md)}.top-bar-center{margin:0 var(--spacing-sm)}.chat-input-container{max-width:250px;padding:calc(var(--spacing-sm) * .75) var(--spacing-sm)}.chat-input{font-size:var(--font-size-sm)}}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.hidden{display:none}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-row-reverse{flex-direction:row-reverse}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.flex-wrap-reverse{flex-wrap:wrap-reverse}.flex-1{flex:1 1 0%}.flex-auto{flex:1 1 auto}.flex-initial{flex:0 1 auto}.flex-none{flex:none}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-evenly{justify-content:space-evenly}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.self-auto{align-self:auto}.self-start{align-self:flex-start}.self-end{align-self:flex-end}.self-center{align-self:center}.self-stretch{align-self:stretch}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.gap-0{gap:0}.gap-1{gap:var(--spacing-xs)}.gap-2{gap:var(--spacing-sm)}.gap-3{gap:var(--spacing-md)}.gap-4{gap:var(--spacing-lg)}.gap-5{gap:var(--spacing-xl)}.gap-x-0{column-gap:0}.gap-x-1{column-gap:var(--spacing-xs)}.gap-x-2{column-gap:var(--spacing-sm)}.gap-x-3{column-gap:var(--spacing-md)}.gap-x-4{column-gap:var(--spacing-lg)}.gap-x-5{column-gap:var(--spacing-xl)}.gap-y-0{row-gap:0}.gap-y-1{row-gap:var(--spacing-xs)}.gap-y-2{row-gap:var(--spacing-sm)}.gap-y-3{row-gap:var(--spacing-md)}.gap-y-4{row-gap:var(--spacing-lg)}.gap-y-5{row-gap:var(--spacing-xl)}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}.static{position:static}.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}.top-50{top:50%}.left-50{left:50%}.w-full{width:100%}.w-auto{width:auto}.w-screen{width:100vw}.w-1\/2{width:50%}.w-1\/3{width:33.333333%}.w-2\/3{width:66.666667%}.w-1\/4{width:25%}.w-3\/4{width:75%}.h-full{height:100%}.h-auto{height:auto}.h-screen{height:100vh}.h-1\/2{height:50%}.h-1\/3{height:33.333333%}.h-2\/3{height:66.666667%}.h-1\/4{height:25%}.h-3\/4{height:75%}.min-w-0{min-width:0}.min-w-full{min-width:100%}.max-w-full{max-width:100%}.max-w-screen-sm{max-width:640px}.max-w-screen-md{max-width:768px}.max-w-screen-lg{max-width:1024px}.max-w-screen-xl{max-width:1280px}.min-h-0{min-height:0}.min-h-full{min-height:100%}.max-h-full{max-height:100%}.max-h-screen{max-height:100vh}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-scroll{overflow:scroll}.overflow-x-auto{overflow-x:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-x-scroll{overflow-x:scroll}.overflow-y-auto{overflow-y:auto}.overflow-y-hidden{overflow-y:hidden}.overflow-y-scroll{overflow-y:scroll}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.z-auto{z-index:auto}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform-none{transform:none}.origin-center{transform-origin:center}.origin-top{transform-origin:top}.origin-top-right{transform-origin:top right}.origin-right{transform-origin:right}.origin-bottom-right{transform-origin:bottom right}.origin-bottom{transform-origin:bottom}.origin-bottom-left{transform-origin:bottom left}.origin-left{transform-origin:left}.origin-top-left{transform-origin:top left}.scale-0{transform:scale(0)}.scale-50{transform:scale(.5)}.scale-75{transform:scale(.75)}.scale-90{transform:scale(.9)}.scale-95{transform:scale(.95)}.scale-100{transform:scale(1)}.scale-105{transform:scale(1.05)}.scale-110{transform:scale(1.1)}.scale-125{transform:scale(1.25)}.scale-150{transform:scale(1.5)}.rotate-0{transform:rotate(0)}.rotate-1{transform:rotate(1deg)}.rotate-2{transform:rotate(2deg)}.rotate-3{transform:rotate(3deg)}.rotate-6{transform:rotate(6deg)}.rotate-12{transform:rotate(12deg)}.rotate-45{transform:rotate(45deg)}.rotate-90{transform:rotate(90deg)}.rotate-180{transform:rotate(180deg)}.translate-x-0{transform:translate(0)}.translate-x-1{transform:translate(var(--spacing-xs))}.translate-x-2{transform:translate(var(--spacing-sm))}.translate-x-3{transform:translate(var(--spacing-md))}.translate-x-4{transform:translate(var(--spacing-lg))}.translate-x-5{transform:translate(var(--spacing-xl))}.translate-x-full{transform:translate(100%)}.translate-x-1\/2{transform:translate(50%)}.translate-y-0{transform:translateY(0)}.translate-y-1{transform:translateY(var(--spacing-xs))}.translate-y-2{transform:translateY(var(--spacing-sm))}.translate-y-3{transform:translateY(var(--spacing-md))}.translate-y-4{transform:translateY(var(--spacing-lg))}.translate-y-5{transform:translateY(var(--spacing-xl))}.translate-y-full{transform:translateY(100%)}.translate-y-1\/2{transform:translateY(50%)}@media (max-width: 640px){.sm\:flex{display:flex}.sm\:hidden{display:none}.sm\:grid{display:grid}.sm\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:w-full{width:100%}.sm\:h-full{height:100%}}@media (max-width: 768px){.md\:flex{display:flex}.md\:hidden{display:none}.md\:grid{display:grid}.md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:w-full{width:100%}.md\:h-full{height:100%}}@media (max-width: 1024px){.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:grid{display:grid}.lg\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:w-full{width:100%}.lg\:h-full{height:100%}}.range-slider{width:100%;height:4px;border-radius:2px;background:var(--color-border);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.range-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--color-brand-primary);cursor:pointer;border:2px solid var(--color-surface)}.range-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--color-brand-primary);cursor:pointer;border:2px solid var(--color-surface)}.range-slider:focus{outline:none}.range-slider:focus::-webkit-slider-thumb{box-shadow:0 0 0 2px #007acc1a}.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;color:var(--color-text-primary)}.checkbox-label input[type=checkbox]{width:16px;height:16px;accent-color:var(--color-brand-primary)}.color-picker{width:32px;height:32px;border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:none;border-radius:var(--radius-sm)}.color-picker:focus{outline:none;border-color:var(--color-brand-primary);box-shadow:0 0 0 2px #007acc1a}.select-control{padding:6px 24px 6px 8px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-background);color:var(--color-text-primary);font-size:12px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");background-position:right 8px center;background-repeat:no-repeat;background-size:12px}.select-control:focus{outline:none;border-color:var(--color-brand-primary);box-shadow:0 0 0 2px #007acc1a}.number-input{padding:6px 8px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-background);color:var(--color-text-primary);font-size:12px;width:60px;text-align:center}.number-input:focus{outline:none;border-color:var(--color-brand-primary);box-shadow:0 0 0 2px #007acc1a}.toggle-switch{position:relative;display:inline-block;width:40px;height:20px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--color-border);transition:.2s;border-radius:20px}.toggle-slider:before{position:absolute;content:"";height:16px;width:16px;left:2px;bottom:2px;background-color:#fff;transition:.2s;border-radius:50%}input:checked+.toggle-slider{background-color:var(--color-brand-primary)}input:checked+.toggle-slider:before{transform:translate(20px)}body.dark-theme .range-slider{background:var(--color-border)}body.dark-theme .range-slider::-webkit-slider-thumb{border-color:var(--color-surface)}body.dark-theme .checkbox-label{color:var(--color-text-primary)}body.dark-theme .color-picker{border-color:var(--color-border)}body.dark-theme .select-control,body.dark-theme .number-input{background:var(--color-surface);border-color:var(--color-border);color:var(--color-text-primary)}body.dark-theme .toggle-slider{background-color:var(--color-border)}@media (max-width: 768px){.color-picker{width:28px;height:28px}.number-input{width:50px;font-size:11px}.select-control{font-size:11px;padding:5px 6px}}.advanced-tool-btn.active{background:var(--color-teal-light);border-color:var(--color-brand-primary);color:var(--color-teal-dark)}.advanced-tool-btn span:first-child{font-size:20px}.advanced-tool-btn span:nth-child(2){font-size:12px;font-weight:600;color:var(--color-text-primary)}.advanced-tool-btn small{font-size:10px;color:var(--color-text-secondary)}.offset-section{margin-bottom:20px}.offset-controls{display:flex;flex-direction:column;gap:12px;margin-top:12px}.offset-setting{display:flex;align-items:center;gap:8px}.offset-setting label{font-size:12px;font-weight:500;color:var(--color-text-primary);min-width:60px}.offset-slider{flex:1;height:4px;border-radius:2px;background:var(--color-border);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.offset-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--color-brand-primary);cursor:pointer;border:2px solid var(--color-surface)}.offset-color-picker{width:32px;height:32px;border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer}.offset-style-select{padding:6px 8px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-background);color:var(--color-text-primary);font-size:12px;cursor:pointer}.layer-operations-section{margin-bottom:20px}.layer-controls{display:flex;flex-direction:column;gap:8px;margin-top:12px}.layer-control-btn{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-background);color:var(--color-text-primary);cursor:pointer;transition:all .2s ease;font-size:12px}.layer-control-btn:hover{background:var(--color-surface);border-color:var(--color-brand-primary)}.layer-control-btn.active{background:var(--color-teal-light);border-color:var(--color-brand-primary);color:var(--color-teal-dark)}.layer-control-btn i{font-size:14px}.canvas-tools-section{margin-bottom:20px}.canvas-tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.canvas-tool-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-background);cursor:pointer;transition:all .2s ease;text-align:center}.canvas-tool-btn:hover{background:var(--color-surface);border-color:var(--color-brand-primary)}.canvas-tool-btn.active{background:var(--color-teal-light);border-color:var(--color-brand-primary);color:var(--color-teal-dark)}.canvas-tool-btn i{font-size:16px}.canvas-tool-btn span{font-size:10px;font-weight:500}.zoom-controls-section{margin-bottom:20px}.zoom-slider-container{display:flex;align-items:center;gap:12px}.zoom-percentage{font-size:12px;font-weight:500;color:var(--color-text-primary);min-width:40px;text-align:center}.zoom-buttons{display:flex;gap:4px}.zoom-btn{width:28px;height:28px;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-primary);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;font-size:12px}body.dark-theme .advanced-tool-btn{background:var(--color-surface);border-color:var(--color-border)}body.dark-theme .advanced-tool-btn:hover{background:var(--color-background)}body.dark-theme .advanced-tool-btn.active{background:var(--color-teal-light);border-color:var(--color-brand-primary);color:var(--color-teal-dark)}body.dark-theme .offset-color-picker{border-color:var(--color-border)}body.dark-theme .offset-style-select,body.dark-theme .layer-control-btn{background:var(--color-surface);border-color:var(--color-border);color:var(--color-text-primary)}body.dark-theme .layer-control-btn:hover{background:var(--color-background)}body.dark-theme .layer-control-btn.active{background:var(--color-teal-light);border-color:var(--color-brand-primary);color:var(--color-teal-dark)}body.dark-theme .canvas-tool-btn{background:var(--color-surface);border-color:var(--color-border)}body.dark-theme .canvas-tool-btn:hover{background:var(--color-background)}body.dark-theme .canvas-tool-btn.active{background:var(--color-teal-light);border-color:var(--color-brand-primary);color:var(--color-teal-dark)}body.dark-theme .zoom-slider{background:var(--color-border)}body.dark-theme .zoom-btn{background:none;border:none;color:var(--color-text-primary)}body.dark-theme .zoom-btn:hover{background:none}@media (max-width: 768px){.advanced-tools-grid{grid-template-columns:1fr}.canvas-tools-grid{grid-template-columns:repeat(2,1fr)}.offset-setting{flex-direction:column;align-items:flex-start;gap:4px}.offset-setting label{min-width:auto}.zoom-slider-container{flex-direction:column;gap:8px}.zoom-buttons{justify-content:center}}@media (max-width: 480px){.canvas-tools-grid{grid-template-columns:1fr}.advanced-tool-btn,.canvas-tool-btn{padding:8px 4px}}.panel{display:flex;flex-direction:column;height:100%;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--color-border);background:var(--color-surface);flex-shrink:0}.panel-content{flex:1;overflow-y:auto;padding:var(--spacing-lg);position:relative}.panel-loader-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#ffffffe6;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;gap:var(--spacing-md)}.panel-loader-message{margin:0;font-size:var(--font-size-sm);color:var(--color-text-secondary);text-align:center}body.dark-theme .panel-loader-overlay{background:#111827e6}.panel-scrollable-content{flex:1;overflow-y:auto;padding:var(--spacing-lg)}.panel-footer{padding:var(--spacing-lg);border-top:1px solid var(--color-border);background:var(--color-surface);flex-shrink:0}.panel-section{margin-bottom:var(--spacing-lg)}.panel-section:last-child{margin-bottom:0}.panel-section-title{font-size:14px;font-weight:600;color:var(--color-text-primary);margin-bottom:var(--spacing-sm)}.panel-grid{display:grid;gap:var(--spacing-sm)}.panel-grid-2{grid-template-columns:repeat(2,1fr)}.panel-grid-3{grid-template-columns:repeat(3,1fr)}.panel-grid-4{grid-template-columns:repeat(4,1fr)}body.dark-theme .panel{background:var(--color-surface);border-color:var(--color-border)}@media (max-width: 768px){.panel-grid-2,.panel-grid-3,.panel-grid-4{grid-template-columns:1fr}.panel-header{padding:var(--spacing-sm) var(--spacing-md)}.panel-content,.panel-scrollable-content,.panel-footer{padding:var(--spacing-md)}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background);color:var(--color-text-primary);font-family:inherit;font-size:14px;font-weight:500;line-height:1;cursor:pointer;transition:all .2s ease;text-decoration:none;-webkit-user-select:none;user-select:none;white-space:nowrap}.btn:hover{background:var(--color-surface);border-color:var(--color-brand-primary)}.btn:focus{outline:none;border-color:var(--color-brand-primary);box-shadow:0 0 0 2px #e74c8e1a}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-primary{background:var(--color-brand-primary);border-color:var(--color-brand-primary);color:#fff;transition:background-color .15s ease,border-color .15s ease,transform .15s ease}.btn-primary:hover:not(:disabled){background:#008dd5e6;border-color:#008dd5e6}.btn-primary:active:not(:disabled){background:var(--color-brand-primary);border-color:var(--color-brand-primary);transform:translateY(0)}.btn-secondary{background:var(--color-surface);border-color:var(--color-border);color:var(--color-text-primary)}.btn-secondary:hover{background:var(--color-background);border-color:var(--color-brand-primary)}.btn-ghost{background:transparent;border-color:transparent;color:var(--color-text-primary)}.btn-ghost:hover{background:var(--color-surface);border-color:var(--color-border)}.btn-danger{background:var(--color-error);border-color:var(--color-error);color:#fff}.btn-danger:hover{background:#dc2626;border-color:#dc2626}.btn-success{background:var(--color-success);border-color:var(--color-success);color:#fff}.btn-success:hover{background:#059669;border-color:#059669}.btn-warning{background:var(--color-warning);border-color:var(--color-warning);color:#fff}.btn-warning:hover{background:#d97706;border-color:#d97706}.btn-sm{padding:6px 12px;font-size:12px;gap:6px}.btn-lg{padding:14px 20px;font-size:16px;gap:10px}.btn-xl{padding:16px 24px;font-size:18px;gap:12px}.btn-full{width:100%}.btn-block{display:flex;width:100%}.btn-icon{padding:8px;min-width:36px;height:36px}.btn-icon.btn-sm{padding:6px;min-width:28px;height:28px}.btn-icon.btn-lg{padding:12px;min-width:44px;height:44px}.btn-loading{position:relative;color:transparent}.btn-loading:after{content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid currentColor;border-radius:50%;border-top-color:transparent;animation:btn-spin .6s linear infinite}@keyframes btn-spin{to{transform:rotate(360deg)}}.btn-group{display:inline-flex;border-radius:var(--radius-md);overflow:hidden}.btn-group .btn{border-radius:0;border-right-width:0}.btn-group .btn:first-child{border-top-left-radius:var(--radius-md);border-bottom-left-radius:var(--radius-md)}.btn-group .btn:last-child{border-top-right-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md);border-right-width:1px}.btn-upload{position:relative;overflow:hidden}.btn-upload input[type=file]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.btn-toggle{background:var(--color-surface);border-color:var(--color-border)}.btn-toggle.active{background:var(--color-brand-primary);border-color:var(--color-brand-primary);color:#fff}.btn-toggle.active:hover{background:var(--color-brand-dark);border-color:var(--color-brand-dark)}body.dark-theme .btn{background:var(--color-surface);border-color:var(--color-border);color:var(--color-text-primary)}body.dark-theme .btn:hover{background:var(--color-background);border-color:var(--color-brand-primary)}body.dark-theme .btn-secondary{background:var(--color-surface);border-color:var(--color-border);color:var(--color-text-primary)}body.dark-theme .btn-ghost{background:transparent;border-color:transparent;color:var(--color-text-primary)}body.dark-theme .btn-ghost:hover{background:var(--color-surface);border-color:var(--color-border)}@media (max-width: 768px){.btn{padding:8px 12px;font-size:13px}.btn-lg{padding:12px 16px;font-size:15px}.btn-xl{padding:14px 20px;font-size:16px}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--spacing-md);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal{background:var(--color-background);border-radius:var(--radius-md);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;max-width:90vw;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;animation:modal-enter .2s ease-out}@keyframes modal-enter{0%{opacity:0;transform:scale(.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-lg);border-bottom:1px solid var(--color-border);flex-shrink:0}.modal-title{margin:0;font-size:20px;font-weight:600;color:var(--color-text-primary)}.modal-close{background:transparent;border:none;color:var(--color-text-secondary);cursor:pointer;padding:8px;border-radius:var(--radius-sm);transition:all .2s ease;display:flex;align-items:center;justify-content:center}.modal-close:hover{background:var(--color-surface);color:var(--color-text-primary)}.modal-body,.modal-content{flex:1;padding:var(--spacing-lg);overflow-y:auto}.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing-sm);padding:var(--spacing-lg);border-top:1px solid var(--color-border);flex-shrink:0}.modal-footer-left{justify-content:flex-start}.modal-footer-center{justify-content:center}.modal-footer-space-between{justify-content:space-between}.modal-sm{width:400px}.modal-md{width:600px}.modal-lg{width:800px}.modal-xl{width:1000px}.modal-full{width:95vw;height:95vh}.modal-confirmation{max-width:500px}.modal-form{min-width:500px}.modal-gallery{width:90vw;height:80vh}.modal-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;cursor:pointer}.modal:focus{outline:none}.modal-loading{position:relative;min-height:200px}.modal-loading:after{content:"";position:absolute;top:50%;left:50%;width:32px;height:32px;margin:-16px 0 0 -16px;border:3px solid var(--color-border);border-radius:50%;border-top-color:var(--color-brand-primary);animation:modal-spin .8s linear infinite}@keyframes modal-spin{to{transform:rotate(360deg)}}.modal-body::-webkit-scrollbar,.modal-content::-webkit-scrollbar{width:6px}.modal-body::-webkit-scrollbar-track,.modal-content::-webkit-scrollbar-track{background:var(--color-surface)}.modal-body::-webkit-scrollbar-thumb,.modal-content::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}.modal-body::-webkit-scrollbar-thumb:hover,.modal-content::-webkit-scrollbar-thumb:hover{background:var(--color-text-light)}body.dark-theme .modal{background:var(--color-surface);border:1px solid var(--color-border)}body.dark-theme .modal-header{border-bottom-color:var(--color-border)}body.dark-theme .modal-footer{border-top-color:var(--color-border)}body.dark-theme .modal-title{color:var(--color-text-primary)}body.dark-theme .modal-close{color:var(--color-text-secondary)}body.dark-theme .modal-close:hover{background:var(--color-background);color:var(--color-text-primary)}@media (max-width: 768px){.modal-overlay{padding:var(--spacing-sm)}.modal{max-width:95vw;max-height:95vh}.modal-sm,.modal-md,.modal-lg,.modal-xl{width:95vw}.modal-header,.modal-body,.modal-content{padding:var(--spacing-md)}.modal-footer{padding:var(--spacing-md);flex-direction:column;gap:var(--spacing-sm)}.modal-footer .btn{width:100%}}@media (max-width: 480px){.modal-overlay{padding:0}.modal{max-width:100vw;max-height:100vh;border-radius:0}}.form{display:flex;flex-direction:column;gap:var(--spacing-md)}.form-row{display:flex;gap:var(--spacing-md);align-items:flex-end}.form-group{display:flex;flex-direction:column;gap:var(--spacing-xs)}.form-group-inline{flex-direction:row;align-items:center;gap:var(--spacing-sm)}.form-label{font-size:14px;font-weight:500;color:var(--color-text-primary);margin-bottom:var(--spacing-xs)}.form-label-required:after{content:" *";color:var(--color-error)}.form-input{width:100%;padding:12px 16px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background);color:var(--color-text-primary);font-family:inherit;font-size:14px;line-height:1.5;transition:all .2s ease;box-sizing:border-box}.form-input:focus{outline:none;border-color:var(--color-brand-primary);box-shadow:0 0 0 2px #e74c8e1a}.form-input:disabled{opacity:.5;cursor:not-allowed;background:var(--color-surface)}.form-input::placeholder{color:var(--color-text-light)}.form-textarea{width:100%;min-height:100px;padding:12px 16px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background);color:var(--color-text-primary);font-family:inherit;font-size:14px;line-height:1.5;resize:vertical;transition:all .2s ease;box-sizing:border-box}.form-textarea:focus{outline:none;border-color:var(--color-brand-primary);box-shadow:0 0 0 2px #e74c8e1a}.form-textarea:disabled{opacity:.5;cursor:not-allowed;background:var(--color-surface)}.form-textarea::placeholder{color:var(--color-text-light)}.form-select{width:100%;padding:12px 40px 12px 16px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background);color:var(--color-text-primary);font-family:inherit;font-size:14px;line-height:1.5;cursor:pointer;transition:all .2s ease;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");background-position:right 12px center;background-repeat:no-repeat;background-size:16px}.form-select:focus{outline:none;border-color:var(--color-brand-primary);box-shadow:0 0 0 2px #e74c8e1a}.form-select:disabled{opacity:.5;cursor:not-allowed;background:var(--color-surface)}.form-checkbox{display:flex;align-items:center;gap:var(--spacing-sm);cursor:pointer}.form-checkbox input[type=checkbox]{width:16px;height:16px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-background);cursor:pointer;transition:all .2s ease}.form-checkbox input[type=checkbox]:checked{background:var(--color-brand-primary);border-color:var(--color-brand-primary);background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");background-size:12px;background-position:center;background-repeat:no-repeat}.form-checkbox input[type=checkbox]:focus{outline:none;border-color:var(--color-brand-primary);box-shadow:0 0 0 2px #e74c8e1a}.form-checkbox input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}.form-radio{display:flex;align-items:center;gap:var(--spacing-sm);cursor:pointer}.form-radio input[type=radio]{width:16px;height:16px;border:1px solid var(--color-border);border-radius:50%;background:var(--color-background);cursor:pointer;transition:all .2s ease}.form-radio input[type=radio]:checked{background:var(--color-brand-primary);border-color:var(--color-brand-primary);background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");background-size:8px;background-position:center;background-repeat:no-repeat}.form-radio input[type=radio]:focus{outline:none;border-color:var(--color-brand-primary);box-shadow:0 0 0 2px #e74c8e1a}.form-radio input[type=radio]:disabled{opacity:.5;cursor:not-allowed}.form-range{width:100%;height:6px;border-radius:3px;background:var(--color-border);outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-range::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--color-brand-primary);cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0000001a}.form-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--color-brand-primary);cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0000001a}.form-range:focus{outline:none}.form-range:focus::-webkit-slider-thumb{box-shadow:0 0 0 2px #e74c8e1a}.form-color{width:40px;height:40px;border:2px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background);cursor:pointer;transition:all .2s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0}.form-color::-webkit-color-swatch-wrapper{padding:0}.form-color::-webkit-color-swatch{border:none;border-radius:var(--radius-sm)}.form-color:focus{outline:none;border-color:var(--color-brand-primary);box-shadow:0 0 0 2px #e74c8e1a}.form-file{position:relative;display:inline-block;cursor:pointer}.form-file input[type=file]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.form-file-label{display:inline-flex;align-items:center;gap:var(--spacing-sm);padding:12px 16px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background);color:var(--color-text-primary);font-size:14px;cursor:pointer;transition:all .2s ease}.form-file-label:hover{background:var(--color-surface);border-color:var(--color-brand-primary)}.form-input.error,.form-textarea.error,.form-select.error{border-color:var(--color-error)}.form-input.error:focus,.form-textarea.error:focus,.form-select.error:focus{border-color:var(--color-error);box-shadow:0 0 0 2px #ef44441a}.form-error{font-size:12px;color:var(--color-error);margin-top:var(--spacing-xs)}.form-help,.form-hint{font-size:12px;color:var(--color-text-secondary);margin-top:var(--spacing-xs)}.preview-pixels{font-size:12px;color:var(--color-text-secondary);text-align:center;margin-top:var(--spacing-xs)}.form-section{margin-bottom:var(--spacing-lg)}.form-section-title{font-size:14px;font-weight:600;color:var(--color-text-primary);margin-bottom:var(--spacing-sm);padding-bottom:var(--spacing-xs);border-bottom:1px solid var(--color-border)}.ruler-visibility-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-sm)}.form-input.success,.form-textarea.success,.form-select.success{border-color:var(--color-success)}.form-input.success:focus,.form-textarea.success:focus,.form-select.success:focus{border-color:var(--color-success);box-shadow:0 0 0 2px #10b9811a}body.dark-theme .form-input,body.dark-theme .form-textarea,body.dark-theme .form-select{background:var(--color-surface);border-color:var(--color-border);color:var(--color-text-primary)}body.dark-theme .form-input:focus,body.dark-theme .form-textarea:focus,body.dark-theme .form-select:focus{border-color:var(--color-brand-primary)}body.dark-theme .form-input:disabled,body.dark-theme .form-textarea:disabled,body.dark-theme .form-select:disabled{background:var(--color-background)}body.dark-theme .form-checkbox input[type=checkbox],body.dark-theme .form-radio input[type=radio]{background:var(--color-surface);border-color:var(--color-border)}body.dark-theme .form-range{background:var(--color-border)}body.dark-theme .form-color{background:var(--color-surface);border-color:var(--color-border)}body.dark-theme .form-file-label{background:var(--color-surface);border-color:var(--color-border);color:var(--color-text-primary)}body.dark-theme .form-file-label:hover{background:var(--color-background)}@media (max-width: 768px){.form-row{flex-direction:column;gap:var(--spacing-sm)}.form-row .form-group{flex:none}.form-group-inline{flex-direction:column;align-items:flex-start}.form-input,.form-textarea,.form-select{font-size:16px}}.top-bar{display:flex;justify-content:space-between;align-items:center;padding:0 var(--spacing-lg);background:var(--color-background);border-bottom:none;box-shadow:none;height:var(--top-bar-height);min-height:var(--top-bar-height);max-height:var(--top-bar-height);position:fixed;top:0;left:0;right:0;z-index:1000;overflow:hidden}.top-bar-left{display:flex;align-items:center;gap:var(--spacing-md);flex:1}.menu-toggle{background:none;border:none;color:var(--color-brand-secondary);cursor:pointer;padding:var(--spacing-sm);border-radius:var(--radius-md);transition:all .2s ease;display:flex;align-items:center;justify-content:center}.menu-toggle:hover{background:var(--color-surface);color:var(--color-brand-secondary);opacity:.8}.menu-toggle .fa-icon-wrapper,.menu-toggle .fa-icon-wrapper svg{color:var(--color-brand-secondary)!important;fill:currentColor!important}.menu-toggle.active{background:var(--color-teal-light);color:var(--color-teal-dark)}.menu-icon-wrapper{display:inline-flex;align-items:center;justify-content:center;perspective:1000px}.menu-icon-wrapper .fa-icon-wrapper{display:inline-flex;animation:fa-flip .3s ease}@keyframes fa-flip{0%{transform:rotateY(0);opacity:1}50%{transform:rotateY(90deg);opacity:.5}to{transform:rotateY(0);opacity:1}}.logo{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-brand-primary);letter-spacing:var(--letter-spacing-tight);transition:all .2s ease;-webkit-user-select:none;user-select:none;display:flex;align-items:center;cursor:pointer;margin:0;padding:0}.logo-image{height:32px;width:auto;transition:all .2s ease}.logo:hover .logo-image{transform:scale(1.05);opacity:.9}.top-bar-center{flex:1;display:flex;justify-content:center;align-items:center;gap:var(--spacing-md);max-width:900px;margin:0 var(--spacing-md);height:100%;min-width:0}.project-name-container{display:flex;align-items:center;justify-content:center;min-width:120px;max-width:250px;flex-shrink:1;background:transparent;border:1px solid transparent;border-radius:var(--radius-md);transition:all .2s ease;position:relative}.project-name-container:hover{border-color:var(--color-brand-light)}.project-name-container.editing{background:var(--color-surface);border-color:var(--color-brand-primary);box-shadow:0 0 0 2px #008dd533}.project-name-input-wrapper{display:flex;align-items:center;width:100%;position:relative}.project-name-input{width:100%;border:none;background:transparent;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);color:var(--color-text-primary);text-align:center;outline:none;padding:var(--spacing-sm) var(--spacing-md);transition:all .2s ease}.project-name-input::placeholder{color:var(--color-text-secondary);opacity:.8}.project-name-display{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;white-space:nowrap;overflow:hidden;max-width:100%}.project-name-label{font-size:var(--font-size-base);font-weight:var(--font-weight-medium);color:var(--color-text-primary);flex-shrink:0}.project-name-value{font-size:var(--font-size-base);font-weight:var(--font-weight-medium);color:var(--color-text-primary);overflow:hidden;text-overflow:ellipsis}.project-name-edit-icon{opacity:0;transition:opacity .2s ease;color:var(--color-text-light);flex-shrink:0;margin-left:var(--spacing-xs);display:flex;align-items:center;justify-content:center}.project-name-container:hover .project-name-edit-icon{opacity:1}.char-counter{position:absolute;right:var(--spacing-xs);top:50%;transform:translateY(-50%);font-size:10px;color:var(--color-text-light);pointer-events:none;background:var(--color-surface);padding:0 2px;border-radius:2px}.char-counter-warning{color:var(--color-warning)}.char-counter-error{color:var(--color-error);font-weight:600}.top-bar .chat-input-container{position:relative;display:flex;align-items:center;background:var(--color-surface);border:1px solid var(--color-brand-light);border-radius:var(--radius-md);padding:var(--spacing-xs) var(--spacing-sm);min-width:200px;max-width:400px;flex:1;transition:all .2s ease;transform:none;bottom:auto;left:auto;width:auto}.top-bar .chat-input-container:hover{border-color:var(--color-brand-primary)}.top-bar .chat-input-container:focus-within{border-color:var(--color-brand-primary);box-shadow:0 0 0 2px #008dd533}.chat-input{flex:1;border:none;background:transparent;font-size:var(--font-size-base);color:#40b0a0;outline:none;padding:var(--spacing-sm) 0}.chat-input:focus{outline:none}.chat-input::placeholder{color:#40b0a0;opacity:.8}.chat-submit-btn{background:none;border:none;color:#40b0a0;cursor:pointer;padding:var(--spacing-xs);border-radius:var(--radius-full);transition:all .2s ease;display:flex;align-items:center;justify-content:center}.chat-submit-btn:hover{background:#40b0a01a;color:#40b0a0}.history-controls{display:flex;align-items:center;gap:var(--spacing-xs)}.undo-btn,.redo-btn,.undo-button,.redo-button{background:none;border:none;color:var(--color-brand-secondary);cursor:pointer;padding:var(--spacing-sm);border-radius:var(--radius-md);transition:all .2s ease;display:flex;align-items:center;justify-content:center}.undo-btn:hover:not(:disabled),.redo-btn:hover:not(:disabled),.undo-button:hover:not(:disabled),.redo-button:hover:not(:disabled){background:var(--color-surface);color:var(--color-brand-secondary);opacity:.8}.undo-btn .fa-icon-wrapper,.redo-btn .fa-icon-wrapper,.undo-button .fa-icon-wrapper,.redo-button .fa-icon-wrapper,.undo-btn .fa-icon-wrapper svg,.redo-btn .fa-icon-wrapper svg,.undo-button .fa-icon-wrapper svg,.redo-button .fa-icon-wrapper svg{color:var(--color-brand-secondary)!important;fill:currentColor!important}.undo-btn:disabled,.redo-btn:disabled,.undo-button:disabled,.redo-button:disabled{opacity:.4;cursor:not-allowed}.redo-btn img,.redo-button img{transform:scaleX(-1)}.top-bar-right{display:flex;align-items:center;gap:var(--spacing-md)}.save-button,.settings-button,.download-button,.restart-button,.theme-toggle,.profile-button{background:transparent!important;border:none!important;color:var(--color-text-secondary)!important;cursor:pointer;padding:var(--spacing-sm);border-radius:0!important;transition:all .2s ease;display:flex;align-items:center;justify-content:center;box-shadow:none!important;outline:none!important;width:auto;min-width:40px;height:40px;gap:var(--spacing-xs);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.restart-button{padding:var(--spacing-sm) var(--spacing-md)}.save-button:hover,.settings-button:hover,.download-button:hover,.restart-button:hover,.theme-toggle:hover,.profile-button:hover{background:#0000000d!important;color:var(--color-text-primary)!important;box-shadow:none!important;outline:none!important;border-radius:var(--radius-sm)!important}.save-button:active,.settings-button:active,.download-button:active,.restart-button:active,.theme-toggle:active,.profile-button:active{outline:none!important;box-shadow:none!important;transform:translateY(0)}.save-button svg,.settings-button svg,.download-button svg,.restart-button svg,.theme-toggle svg,.profile-button svg,.save-button img,.settings-button img,.download-button img,.restart-button img,.theme-toggle img,.profile-button img{width:20px!important;height:20px!important;color:var(--color-brand-secondary)!important;stroke:currentColor!important;fill:none!important}.save-button:hover svg,.settings-button:hover svg,.download-button:hover svg,.restart-button:hover svg,.theme-toggle:hover svg,.profile-button:hover svg,.save-button:hover img,.settings-button:hover img,.download-button:hover img,.restart-button:hover img,.theme-toggle:hover img,.profile-button:hover img{color:var(--color-brand-secondary)!important;opacity:.8}.save-button .fa-icon-wrapper,.settings-button .fa-icon-wrapper,.download-button .fa-icon-wrapper,.restart-button .fa-icon-wrapper,.theme-toggle .fa-icon-wrapper,.profile-button .fa-icon-wrapper,.save-button .fa-icon-wrapper svg,.settings-button .fa-icon-wrapper svg,.download-button .fa-icon-wrapper svg,.restart-button .fa-icon-wrapper svg,.theme-toggle .fa-icon-wrapper svg,.profile-button .fa-icon-wrapper svg{color:var(--color-brand-secondary)!important;fill:currentColor!important}.file-menu-container{position:relative;margin-left:var(--spacing-md);z-index:2001}.file-menu-btn{background:none;border:1px solid var(--color-border);color:var(--color-text-secondary);cursor:pointer;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);transition:all .2s ease;display:flex;align-items:center;gap:var(--spacing-xs);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.file-menu-btn:hover{background:var(--color-surface);color:var(--color-text-primary);border-color:var(--color-brand-primary)}.file-menu-btn.active{background:var(--color-teal-light);color:var(--color-teal-dark);border-color:var(--color-brand-primary)}.file-dropdown{position:relative;background:var(--color-surface);border:1px solid var(--color-border);border-radius:10px;box-shadow:0 10px 25px -5px var(--color-shadow);min-width:200px;z-index:9999;padding:var(--spacing-xs) 0;max-height:400px;overflow-y:auto;left:120px}.file-dropdown.show{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}.file-menu-item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;transition:all .2s ease;color:var(--color-text-primary);font-size:var(--font-size-sm);border-bottom:1px solid transparent}.file-menu-item:last-child{border-bottom:none}.file-menu-item:hover{background:var(--color-background);color:var(--color-teal-dark)}.file-menu-item svg{color:var(--color-text-secondary);flex-shrink:0}.file-menu-item:hover svg{color:var(--color-brand-primary)}.file-menu-item--danger{color:var(--color-error, #ef4444)}.file-menu-item--danger:hover{background:#ef44441a;color:var(--color-error, #ef4444)}.file-menu-item--danger svg{color:var(--color-error, #ef4444)}.file-menu-item--danger:hover svg{color:var(--color-error, #ef4444)}.file-menu-divider{height:1px;background:var(--color-border);margin:var(--spacing-xs) 0}.top-bar-chat-container{display:flex;align-items:center;justify-content:center;flex:1;max-width:600px;margin:0 20px}.top-bar-chat-input-wrapper{display:flex;align-items:center;background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:8px 12px;width:100%;max-width:500px;transition:border-color .2s ease}.top-bar-chat-input-wrapper:focus-within{border-color:var(--color-brand-primary);box-shadow:0 0 0 3px #e74c8e1a}.top-bar-chat-input{flex:1;border:none;outline:none;background:transparent;color:var(--color-text-primary);font-size:var(--font-size-base);padding:var(--spacing-sm) var(--spacing-xs);min-width:0}.top-bar-chat-input:focus{outline:none}.top-bar-chat-input::placeholder{color:var(--color-text-light)}.top-bar-chat-submit-btn{background:var(--color-brand-primary);border:none;border-radius:50%;padding:var(--spacing-xs);cursor:pointer;color:#fff;transition:all .2s ease;display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0}.top-bar-chat-submit-btn:hover:not(:disabled){background:var(--color-brand-dark);transform:translateY(-1px)}.top-bar-chat-submit-btn:active:not(:disabled){transform:translateY(0)}.top-bar-chat-submit-btn:disabled{background:var(--color-text-light);cursor:not-allowed;transform:none}.top-bar-chat-submit-btn.generating{background:var(--color-brand-dark);cursor:not-allowed}.top-bar-chat-submit-btn svg,.top-bar-chat-submit-btn .fa-icon-wrapper,.top-bar-chat-submit-btn .fa-icon-wrapper svg{width:16px;height:16px;color:#fff!important;fill:currentColor!important}.top-bar-chat-input:disabled{color:var(--color-text-light);cursor:not-allowed}@media (max-width: 1024px){.top-bar-center{gap:var(--spacing-sm);margin:0 var(--spacing-sm)}.top-bar .chat-input-container{min-width:150px;max-width:300px}.project-name-container{min-width:100px;max-width:150px}}@media (max-width: 768px){.top-bar{padding:0 var(--spacing-sm)}.top-bar-center{gap:var(--spacing-xs);margin:0 var(--spacing-xs)}.top-bar .chat-input-container{min-width:120px;max-width:200px;padding:var(--spacing-xs)}.top-bar-chat-input{font-size:var(--font-size-sm)}.project-name-container{min-width:80px;max-width:120px}.project-name-input{font-size:var(--font-size-sm);padding:var(--spacing-xs) var(--spacing-sm)}.top-bar-chat-submit-btn{width:28px;height:28px}.top-bar-chat-submit-btn svg,.top-bar-chat-submit-btn .fa-icon-wrapper,.top-bar-chat-submit-btn .fa-icon-wrapper svg{width:14px;height:14px}.top-bar-right{gap:var(--spacing-xs)}}@media (max-width: 480px){.top-bar-center{flex-direction:column;gap:var(--spacing-xs);padding:var(--spacing-xs) 0}.top-bar .chat-input-container{width:100%;max-width:none}.project-name-container{display:none}}.file-menu-overlay{position:fixed;top:60px;left:20px;z-index:9999;display:flex;justify-content:flex-start;pointer-events:none}.file-menu-overlay .file-dropdown{pointer-events:auto;margin-top:var(--spacing-sm)}.user-profile-container{position:relative}.user-avatar{width:32px;height:32px;border-radius:50%;background:var(--color-brand-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:var(--font-weight-bold);font-size:var(--font-size-sm)}.user-dropdown{position:absolute;top:100%;right:0;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:0 10px 25px -5px var(--color-shadow);min-width:250px;z-index:9999;margin-top:var(--spacing-sm);overflow:hidden}.user-info{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);background:var(--color-background)}.user-avatar-large{width:48px;height:48px;border-radius:50%;background:var(--color-brand-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:var(--font-weight-bold);font-size:var(--font-size-lg)}.user-details{flex:1}.user-name{font-weight:var(--font-weight-semibold);color:var(--color-text-primary);font-size:var(--font-size-base);margin-bottom:var(--spacing-xs)}.user-email{color:var(--color-text-secondary);font-size:var(--font-size-sm)}.dropdown-separator{height:1px;background:var(--color-border);margin:0}.dropdown-actions{padding:var(--spacing-xs) 0}.dropdown-item{width:100%;background:none;border:none;color:var(--color-text-primary);cursor:pointer;padding:var(--spacing-sm) var(--spacing-md);text-align:left;font-size:var(--font-size-sm);transition:all .2s ease;display:flex;align-items:center;gap:var(--spacing-sm)}.dropdown-item:hover{background:var(--color-background);color:var(--color-teal-dark)}.dropdown-item:active{background:var(--color-surface)}.left-sidebar{position:fixed;left:0;top:var(--top-bar-height);width:var(--sidebar-width);height:calc(100vh - var(--top-bar-height));background:var(--color-sidebar-bg);border-right:1px solid var(--color-border);overflow-y:auto;flex-shrink:0;transition:width .3s ease;z-index:999}.left-sidebar.collapsed{width:0;overflow:hidden}.sidebar-menu{padding:var(--spacing-lg) 0;display:flex;flex-direction:column;height:100%}.menu-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:var(--spacing-md) var(--spacing-sm);cursor:pointer;transition:all .2s ease;color:var(--color-text-secondary);font-weight:var(--font-weight-medium);text-align:center;min-width:80px;background:transparent;border-radius:var(--radius-md);margin:2px var(--spacing-sm);position:relative;flex-shrink:0}.menu-item:hover{background:var(--color-brand-lighter);color:var(--color-background)}.menu-item:hover span{color:var(--color-background)}.menu-item:hover svg{color:var(--color-background);fill:var(--color-background)}.menu-item.active{background:var(--color-brand-light);color:var(--color-brand-secondary)}.menu-item svg{flex-shrink:0}.menu-item img{flex-shrink:0;width:28px;height:28px;display:block}.menu-item span{font-size:.7rem;line-height:1.1;color:var(--color-text-primary);font-weight:500;margin-top:2px;display:block;text-align:center;white-space:nowrap;transition:color .2s ease}.menu-spacer{flex:1;min-height:var(--spacing-2xl);margin-bottom:var(--spacing-md)}@media (max-width: 768px){.menu-item{padding:var(--spacing-md) var(--spacing-sm);margin:var(--spacing-xs) var(--spacing-xs);gap:4px}.menu-item img{width:28px;height:28px}.menu-item span{font-size:.7rem;margin-top:2px}.sidebar-menu{padding:var(--spacing-sm) 0}}@media (max-width: 480px){.menu-item{padding:var(--spacing-sm) var(--spacing-xs);margin:var(--spacing-xs) 2px;gap:3px}.menu-item img{width:24px;height:24px}.menu-item span{font-size:.65rem;margin-top:1px}.sidebar-menu{padding:var(--spacing-xs) 0}}.canvas-container{position:relative;width:100%;height:100%;overflow:hidden;background:#f8f9fa}.canvas-stage-container{position:absolute;background:transparent;overflow:hidden}.canvas-container .canvas-stage-container{top:0;left:0;width:100%;height:100%}.canvas-area{width:100%;height:100%;position:relative;cursor:grab;-webkit-user-select:none;user-select:none}.canvas-area:active{cursor:grabbing}.canvas-content{width:100%;height:100%;position:relative;min-height:400px}.canvas-layer{position:absolute;-webkit-user-select:none;user-select:none;transition:transform .1s ease}.image-layer{cursor:grab}.image-layer:active{cursor:grabbing}.text-layer{cursor:grab;padding:8px;border-radius:4px;transition:all .2s ease}.text-layer:hover{background:#0000000d}.text-layer:active{cursor:grabbing}.layer-selection-box{position:absolute;top:-8px;left:-8px;right:-8px;bottom:-8px;border:2px solid var(--accent-color);border-radius:6px;pointer-events:none;z-index:1001}.text-selection-box{border-radius:8px;background:#40b0a01a}.selection-handle{position:absolute;width:12px;height:12px;background:var(--accent-color);border:2px solid white;border-radius:50%;pointer-events:all;cursor:pointer;z-index:1002;transition:all .2s ease}.selection-handle:hover{transform:scale(1.2);box-shadow:0 2px 8px #0000004d}.selection-handle.top-left{top:-6px;left:-6px;cursor:nw-resize}.selection-handle.top-right{top:-6px;right:-6px;cursor:ne-resize}.selection-handle.bottom-left{bottom:-6px;left:-6px;cursor:sw-resize}.selection-handle.bottom-right{bottom:-6px;right:-6px;cursor:se-resize}.selection-handle.top-center{top:-6px;left:50%;transform:translate(-50%);cursor:ns-resize}.selection-handle.middle-left{top:50%;left:-6px;transform:translateY(-50%);cursor:ew-resize}.selection-handle.middle-right{top:50%;right:-6px;transform:translateY(-50%);cursor:ew-resize}.selection-handle.bottom-center{bottom:-6px;left:50%;transform:translate(-50%);cursor:ns-resize}.selection-handle.top-center:hover,.selection-handle.bottom-center:hover{transform:translate(-50%)}.selection-handle.middle-left:hover,.selection-handle.middle-right:hover{transform:translateY(-50%)}.resize-handle{background:var(--accent-color);border:2px solid white;box-shadow:0 2px 4px #0003}.resize-handle:hover{background:var(--accent-hover)}.rotate-handle{background:var(--accent-color);border:2px solid white;box-shadow:0 2px 4px #0003;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:grab}.rotate-handle:hover{background:var(--accent-hover);transform:translate(-50%) scale(1.2)}.rotate-handle:active{cursor:grabbing}.rotate-handle svg{width:16px;height:16px;color:#fff}.zoom-controls{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:16px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:25px;padding:8px 16px;box-shadow:0 4px 12px #0000001a;z-index:100}.zoom-btn{width:32px;height:32px;border:none;border-radius:50%;background:none;color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.zoom-btn:hover{background:none;color:var(--text-primary);transform:scale(1.1)}.zoom-slider-container{display:flex;align-items:center;gap:12px;min-width:120px}.zoom-slider{flex:1;height:4px;border-radius:2px;background:var(--border-color);outline:none;-webkit-appearance:none}.zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent-color);cursor:pointer;transition:all .2s ease}.zoom-slider::-webkit-slider-thumb:hover{background:var(--accent-hover);transform:scale(1.2)}.zoom-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent-color);cursor:pointer;border:none;transition:all .2s ease}.zoom-slider::-moz-range-thumb:hover{background:var(--accent-hover);transform:scale(1.2)}.zoom-percentage{font-size:14px;font-weight:500;color:var(--text-primary);min-width:45px;text-align:center}@media (max-width: 768px){.zoom-controls{bottom:10px;padding:6px 12px;gap:12px}.zoom-btn{width:28px;height:28px}.zoom-slider-container{min-width:100px}.zoom-percentage{font-size:12px;min-width:40px}}.canvas-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text-secondary);text-align:center;padding:40px}.canvas-placeholder svg{margin-bottom:20px;opacity:.5}.canvas-placeholder h3{margin:0 0 12px;font-size:20px;font-weight:600}.canvas-placeholder p{margin:0;font-size:16px;opacity:.8}.canvas-image-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:var(--spacing-md)}.canvas-image{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--radius-md);box-shadow:0 4px 20px #0000001a}.chat-input-container{position:absolute;bottom:var(--spacing-md);left:50%;transform:translate(-50%);width:90%;max-width:500px}.chat-input-wrapper{display:flex;gap:var(--spacing-sm);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-sm);box-shadow:0 4px 20px #0000001a}.chat-input{flex:1;border:none;outline:none;background:transparent;color:var(--color-text-primary);font-size:var(--font-size-sm);padding:var(--spacing-sm)}.chat-input::placeholder{color:var(--color-text-light)}.chat-submit-btn{background:var(--color-brand-primary);border:none;border-radius:var(--radius-md);width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;color:#fff}.chat-submit-btn:hover{background:var(--color-brand-dark)}.chat-submit-btn:active{transform:scale(.95)}.text-layer{transition:all .2s ease}.text-layer:hover{outline:1px solid rgba(0,212,255,.3);outline-offset:1px}.text-bounding-box{pointer-events:none;transition:all .1s ease}.corner-handle{position:absolute;width:12px;height:12px;background-color:#00d4ff;border:2px solid #fff;border-radius:2px;pointer-events:auto;box-shadow:0 2px 4px #0003;transition:all .2s ease}.corner-handle:hover{background-color:#ff6b35;transform:scale(1.1);box-shadow:0 3px 6px #0000004d}.edge-handle{position:absolute;background-color:#00d4ff;border:1px solid #fff;border-radius:2px;pointer-events:auto;transition:all .2s ease;opacity:.8}.edge-handle:hover{background-color:#ff6b35;opacity:1;transform:scale(1.1)}.rotation-handle{position:absolute;width:16px;height:16px;background-color:#00d4ff;border:2px solid #fff;border-radius:50%;pointer-events:auto;box-shadow:0 2px 4px #0003;transition:all .2s ease;cursor:grab}.rotation-handle:hover{background-color:#ff6b35;transform:scale(1.1);box-shadow:0 3px 6px #0000004d}.rotation-handle:active{cursor:grabbing}.rotation-line{pointer-events:none;opacity:.7}.resize-handle-nw{cursor:nw-resize}.resize-handle-ne{cursor:ne-resize}.resize-handle-sw{cursor:sw-resize}.resize-handle-se{cursor:se-resize}.resize-handle-n,.resize-handle-s{cursor:ns-resize}.resize-handle-e,.resize-handle-w{cursor:ew-resize}.zoom-controls{position:absolute;bottom:2rem;left:50%;transform:translate(-50%);display:flex;align-items:center;justify-content:center;gap:1rem;padding:.75rem 1.5rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:0 4px 12px #0000001a;z-index:100}.zoom-btn{background:none;border:none;color:var(--color-text-secondary);cursor:pointer;padding:.5rem;border-radius:var(--radius-md);transition:all .2s ease;display:flex;align-items:center;justify-content:center;width:32px;height:32px}.zoom-btn:hover{background:none;color:var(--color-text-primary)}.zoom-slider-container{display:flex;align-items:center;gap:.75rem;min-width:200px}.zoom-slider{flex:1;height:4px;border-radius:2px;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-border);cursor:pointer}.zoom-slider::-webkit-slider-runnable-track{width:100%;height:4px;border-radius:2px;border:none;background:var(--color-border)}.zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:var(--color-zoom-accent);border-radius:50%;cursor:pointer;transition:all .2s ease;margin-top:-6px;border:2px solid white;box-shadow:0 2px 4px #0003}.zoom-slider::-webkit-slider-thumb:hover{background:var(--color-zoom-accent-hover);transform:scale(1.1)}.zoom-slider::-moz-range-track{width:100%;height:4px;border-radius:2px;border:none;background:var(--color-border)}.zoom-slider::-moz-range-thumb{width:16px;height:16px;background:var(--color-zoom-accent);border-radius:50%;cursor:pointer;border:2px solid white;transition:all .2s ease;box-shadow:0 2px 4px #0003}.zoom-slider::-moz-range-thumb:hover{background:var(--color-zoom-accent-hover);transform:scale(1.1)}.zoom-percentage{font-size:.875rem;font-weight:500;color:var(--color-text-secondary);min-width:40px;text-align:center}.right-panel{background:var(--color-panel-bg);border-left:1px solid var(--color-border);display:flex;flex-direction:column;height:calc(100vh - var(--top-bar-height, 80px));overflow:hidden;position:fixed;right:0;top:var(--top-bar-height, 80px);transform:translate(100%);transition:transform .3s ease,left .3s ease;width:var(--right-panel-width, 320px);z-index:1000}.right-panel.open{transform:translate(0)}.right-panel.resizing{transition:none}.right-panel[style*="left: 0"]{left:0}.right-panel[style*="left: var(--sidebar-width)"]{left:var(--sidebar-width)}.panel-header{align-items:center;background:var(--color-surface);border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;padding:var(--spacing-md) var(--spacing-lg)}.panel-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.panel-close{background:none;border:none;color:var(--color-text-secondary);cursor:pointer;padding:var(--spacing-xs);border-radius:var(--radius-sm);transition:all .2s ease;display:flex;align-items:center;justify-content:center}.panel-close:hover{background:var(--color-border);color:var(--color-text-primary)}.panel-close-left{position:absolute;right:-16px;top:50%;transform:translateY(-50%);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);cursor:pointer;padding:var(--spacing-sm);transition:all .2s ease;display:flex;align-items:center;justify-content:center;width:32px;height:32px;z-index:101}.panel-close-left:hover{background:var(--color-border);color:var(--color-text-primary)}.panel-content{flex:1;padding:0;overflow-y:auto;position:relative;z-index:1}.panel-placeholder{text-align:center;color:var(--color-text-secondary);padding:var(--spacing-xl) var(--spacing-md)}.panel-placeholder svg{width:48px;height:48px;margin-bottom:var(--spacing-md);opacity:.5}.panel-placeholder h4{margin-bottom:var(--spacing-sm);color:var(--color-text-primary)}.panel-placeholder p{font-size:var(--font-size-sm);line-height:var(--line-height-normal)}.panel-resize-handle{position:absolute;right:-4px;top:0;bottom:0;width:8px;cursor:col-resize;display:flex;align-items:center;justify-content:center;z-index:1001;transition:background-color .2s ease;background:linear-gradient(to left,transparent 0%,transparent 50%,rgba(0,0,0,.05) 50%,transparent 100%)}.panel-resize-handle:hover{background:linear-gradient(to left,transparent 0%,transparent 50%,rgba(0,0,0,.15) 50%,transparent 100%)}.panel-resize-handle:active{background:linear-gradient(to left,transparent 0%,transparent 50%,rgba(0,0,0,.25) 50%,transparent 100%)}body.dark-theme .panel-resize-handle{background:linear-gradient(to left,transparent 0%,transparent 50%,rgba(255,255,255,.05) 50%,transparent 100%)}body.dark-theme .panel-resize-handle:hover{background:linear-gradient(to left,transparent 0%,transparent 50%,rgba(255,255,255,.15) 50%,transparent 100%)}body.dark-theme .panel-resize-handle:active{background:linear-gradient(to left,transparent 0%,transparent 50%,rgba(255,255,255,.25) 50%,transparent 100%)}@media (max-width: 768px){.panel-resize-handle{width:12px;right:-6px}}.right-panel.resizing *{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.layers-panel{padding:var(--spacing-md);height:100%;display:flex;flex-direction:column;overflow:hidden}.layers-header{margin-bottom:var(--spacing-md);flex-shrink:0;display:flex;gap:var(--spacing-sm)}.layers-list{flex:1;overflow-y:auto;margin-bottom:var(--spacing-md);border:1px solid var(--color-border)}.layers-empty{display:flex;align-items:center;justify-content:center;height:100%}.layers-actions{display:flex;gap:var(--spacing-sm);padding-top:var(--spacing-md);border-top:1px solid var(--color-border);flex-shrink:0}.layer-item{padding:var(--spacing-xs) var(--spacing-sm);border-bottom:1px solid var(--color-border);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:space-between;min-height:44px;gap:var(--spacing-xs)}.layer-item:last-child{border-bottom:none}.layer-item:hover{background:var(--color-surface-hover)}.layer-item.selected{background:var(--color-brand-primary);border-color:var(--color-brand-primary);color:#fff}.layer-item.locked{opacity:.6;background:var(--color-surface)}.layer-checkbox{display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;padding:2px}.layer-checkbox input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}.layer-checkbox-custom{width:16px;height:16px;border:2px solid var(--color-border);border-radius:var(--radius-xs);background:var(--color-surface);display:flex;align-items:center;justify-content:center;transition:all .15s ease}.layer-checkbox:hover .layer-checkbox-custom{border-color:var(--color-brand-primary)}.layer-checkbox input[type=checkbox]:checked+.layer-checkbox-custom{background:var(--color-brand-primary);border-color:var(--color-brand-primary)}.layer-checkbox input[type=checkbox]:checked+.layer-checkbox-custom:after{content:"";width:4px;height:8px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg);margin-bottom:2px}.layer-item.selected .layer-checkbox-custom{border-color:#ffffff80}.layer-item.selected .layer-checkbox input[type=checkbox]:checked+.layer-checkbox-custom{background:#fff;border-color:#fff}.layer-item.selected .layer-checkbox input[type=checkbox]:checked+.layer-checkbox-custom:after{border-color:var(--color-brand-primary)}.layer-content{display:flex;align-items:center;gap:var(--spacing-sm);flex:1;min-width:0}.layer-preview-container{width:24px;height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--color-surface-secondary);border-radius:var(--radius-sm);overflow:hidden}.layer-preview{width:100%;height:100%;object-fit:contain}.layer-preview-text{display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary)}.layer-preview-empty{background:var(--color-surface-secondary);border-radius:var(--radius-sm)}.layer-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--color-surface-secondary);border-radius:var(--radius-sm);flex-shrink:0}.layer-icon svg{width:16px;height:16px;stroke:var(--color-text-secondary)}.layer-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.layer-name-editable{flex:1;min-width:0}.layer-name{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text);outline:none;border-radius:var(--radius-xs);padding:2px 4px;transition:all .2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:text;display:block}.layer-item.selected .layer-name{color:#fff}.layer-name-input{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text);background:var(--color-surface-hover);border:2px solid var(--color-brand-primary);border-radius:var(--radius-xs);padding:2px 4px;outline:none;width:100%;font-family:inherit}.layer-item.selected .layer-name-input{color:#fff;background:#00000026;border-color:#ffffff80}.layer-item.selected .layer-name-input::placeholder{color:#ffffffb3}.layer-type{font-size:var(--font-size-xs);color:var(--color-text-secondary);text-transform:capitalize}.layer-controls{display:flex;flex-direction:row;align-items:center;gap:2px;flex-shrink:0;opacity:0;transition:opacity .15s ease}.layer-item:hover .layer-controls,.layer-item.selected .layer-controls{opacity:1}.layer-control-btn{width:22px;height:22px;border:none;background:transparent;cursor:pointer;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;transition:all .15s ease;color:var(--color-text-secondary);padding:0}.layer-control-btn:hover:not(:disabled){background:var(--color-surface-hover);color:var(--color-text-primary)}.layer-control-btn:disabled{opacity:.3;cursor:not-allowed}.layer-item.selected .layer-control-btn{color:#fffc}.layer-item.selected .layer-control-btn:hover:not(:disabled){background:#fff3;color:#fff}.layer-control-btn.visible{color:var(--color-brand-primary)}.layer-control-btn.hidden{color:var(--color-text-disabled)}.layer-control-btn.locked{color:var(--color-warning)}.layer-control-btn svg{width:14px;height:14px}.layer-delete{color:var(--color-error, #ef4444)!important}.layer-delete:hover:not(:disabled){background:var(--color-error, #ef4444)!important;color:#fff!important}.layer-item.selected .layer-delete{color:#ef4444e6!important}.layer-item.selected .layer-delete:hover:not(:disabled){background:#ef4444!important;color:#fff!important}.layers-list:empty:after{content:"No layers yet. Click 'Add Layer' to get started!";display:block;text-align:center;padding:var(--spacing-lg);color:var(--color-text-secondary);font-size:var(--font-size-sm);font-style:italic}.layers-list::-webkit-scrollbar{width:6px}.layers-list::-webkit-scrollbar-track{background:var(--color-background-secondary);border-radius:3px}.layers-list::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}.layers-list::-webkit-scrollbar-thumb:hover{background:var(--color-text-tertiary)}.layer-item.dragging{opacity:.5;cursor:grabbing}.layer-item.hidden{opacity:.5}.layer-item.hidden .layer-name{text-decoration:line-through;color:var(--color-text-disabled)}.layer-item.locked{opacity:.6}.layer-item.locked .layer-name{text-decoration:line-through}.layer-control-btn.layer-lock{color:var(--color-warning, #f59e0b)}.layer-item.selected .layer-control-btn.layer-lock{color:#f59e0be6}@media (max-width: 768px){.layers-panel{padding:var(--spacing-sm)}.layer-item{min-height:40px;padding:var(--spacing-xs)}.layer-name{font-size:var(--font-size-xs)}.layer-control-btn{width:20px;height:20px}.layer-control-btn svg{width:12px;height:12px}}.text-panel{height:100%;display:flex;flex-direction:column;overflow:hidden}.text-panel .panel-header{padding:var(--spacing-md);flex-shrink:0;background:var(--color-background);border-bottom:1px solid var(--color-border)}.text-panel .panel-header h3{margin:0 0 var(--spacing-xs) 0;color:var(--color-text-primary);font-size:1.125rem;font-weight:600}.text-panel .panel-header p{margin:0;color:var(--color-text-secondary);font-size:.875rem}.text-panel .panel-content{flex:1;overflow-y:auto;padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-md)}.text-panel .text-input-section{flex-shrink:0}.text-panel .text-input-main{width:100%;padding:var(--spacing-sm) var(--spacing-md);border:2px solid var(--color-border);border-radius:var(--radius-md);font-size:1rem;color:var(--color-text-primary);background:var(--color-background);transition:all .2s ease}.text-panel .text-input-main:focus{outline:none;border-color:var(--color-brand-primary);box-shadow:0 0 0 3px #008dd533}.text-panel .text-input-main::placeholder{color:var(--color-text-light)}.text-panel .add-text-btn{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-sm) var(--spacing-md);background:var(--color-brand-primary);color:var(--color-text-primary);border:2px solid var(--color-brand-primary);border-radius:var(--radius-md);font-size:.9375rem;font-weight:600;cursor:pointer;transition:all .2s ease;flex-shrink:0}.text-panel .add-text-btn:hover{background:var(--color-brand-dark);border-color:var(--color-brand-dark)}.text-panel .add-text-btn:active{transform:scale(.98)}.text-panel .font-search-section{flex-shrink:0}.text-panel .font-search-container{position:relative;width:100%}.text-panel .font-search-container .search-icon{position:absolute;left:var(--spacing-sm);top:50%;transform:translateY(-50%);color:var(--color-text-light);pointer-events:none}.text-panel .font-search-input{width:100%;padding:var(--spacing-sm) var(--spacing-md);padding-left:calc(var(--spacing-md) + 18px);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:.875rem;color:var(--color-text-primary);background:var(--color-surface);transition:all .2s ease}.text-panel .font-search-input:focus{outline:none;border-color:var(--color-brand-primary);background:var(--color-background)}.text-panel .font-search-input::placeholder{color:var(--color-text-light)}.text-panel .font-grid-section{flex:1;overflow-y:auto;min-height:200px}.text-panel .font-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-xl);color:var(--color-text-secondary)}.text-panel .font-loading .loading-spinner{width:32px;height:32px;border:3px solid var(--color-border);border-top-color:var(--color-brand-primary);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:var(--spacing-sm)}.text-panel .font-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-xl);color:var(--color-text-secondary);text-align:center}.text-panel .font-empty-query{font-size:.75rem;color:var(--color-text-light);margin-top:var(--spacing-xs)}.text-panel .font-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-xs)}.text-panel .font-card{aspect-ratio:100 / 67;border:2px solid transparent;border-radius:var(--radius-sm);background:var(--color-surface);cursor:pointer;transition:all .2s ease;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:var(--spacing-xs)}.text-panel .font-card:hover{border-color:var(--color-brand-primary);box-shadow:0 2px 8px #008dd54d}.text-panel .font-card:focus{outline:none}.text-panel .font-card:focus-visible{outline:2px solid var(--color-brand-primary);outline-offset:2px}.text-panel .font-card.active{border-color:var(--color-brand-primary);box-shadow:0 2px 8px #008dd566;background:var(--color-brand-light)}.text-panel .font-preview-image{width:100%;height:100%;object-fit:contain}.text-panel .font-preview-text{font-size:.75rem;color:var(--color-text-primary);text-align:center;word-break:break-word;line-height:1.2}.generate-panel{position:relative;padding:20px;height:100%;overflow-y:auto;background:#fff;border-left:1px solid #e5e7eb}.panel-header{padding-bottom:16px;border-bottom:1px solid #e5e7eb}.panel-header h3{margin:0 0 8px;font-size:18px;font-weight:600;color:#111827}.panel-header p{margin:0;font-size:14px;color:#6b7280}.panel-content{display:flex;flex-direction:column;gap:24px}.prompt-section{margin-bottom:16px}.prompt-section h4{margin:0 0 8px;font-size:14px;font-weight:600;color:#111827}.prompt-input{width:100%;padding:12px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;font-family:inherit;resize:vertical;background:#fff;transition:border-color .2s ease}.prompt-input:focus{outline:none;border-color:var(--color-brand-secondary);box-shadow:0 0 0 3px #e43f6f1a}.prompt-input::placeholder{color:#9ca3af}.generate-button{width:100%;padding:12px 24px;background:var(--color-brand-primary);color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-bottom:16px}.generate-button:hover:not(:disabled){background:var(--color-brand-dark)}.generate-button:disabled{background:#9ca3af;cursor:not-allowed;transform:none}.selected-info{padding:16px;background:#f8fafc;border-radius:8px;border:1px solid #e2e8f0}.selected-info h4{margin:0 0 12px;font-size:14px;font-weight:600;color:#111827}.selected-style-info{margin-top:12px;padding-top:12px;border-top:1px solid #e2e8f0}.selected-style-info h5{margin:0 0 8px;font-size:13px;font-weight:600;color:#374151}.style-description{margin:0;font-size:12px;color:#6b7280;line-height:1.4}.style-description strong{color:#374151}.loading{display:flex;align-items:center;justify-content:center;padding:20px;color:#6b7280;font-size:14px}.loading:before{content:"";width:16px;height:16px;border:2px solid #e5e7eb;border-top:2px solid var(--color-brand-secondary);border-radius:50%;animation:spin 1s linear infinite;margin-right:8px}@media (max-width: 768px){.generate-panel{padding:16px}}.text-layer-dialog{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999}.dialog-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;padding:var(--spacing-lg)}.dialog-content{background:var(--color-background);border-radius:var(--radius-lg);padding:var(--spacing-xl);box-shadow:0 8px 32px var(--color-shadow);border:1px solid var(--color-border);max-width:400px;width:100%;max-height:90vh;overflow-y:auto}.dialog-content h3{margin:0 0 var(--spacing-lg) 0;color:var(--color-text-primary);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold)}.form-group{margin-bottom:var(--spacing-md)}.form-row{display:flex;gap:var(--spacing-md)}.form-row .form-group{flex:1}.form-group label{display:block;margin-bottom:var(--spacing-xs);color:var(--color-text-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.form-group input,.form-group select{width:100%;padding:var(--spacing-sm);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-background);color:var(--color-text-primary);font-size:var(--font-size-sm);transition:border-color .2s ease}.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--color-brand-primary);box-shadow:0 0 0 2px var(--color-brand-light)}.form-group input[type=color]{height:40px;padding:2px;cursor:pointer}.form-group input[type=number]{text-align:center}.dialog-buttons{display:flex;gap:var(--spacing-sm);justify-content:flex-end;margin-top:var(--spacing-lg);padding-top:var(--spacing-md);border-top:1px solid var(--color-border)}.btn{padding:var(--spacing-sm) var(--spacing-md);border:none;border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:all .2s ease;min-width:80px}.btn-primary{background:var(--color-brand-primary);color:#fff}.btn-primary:hover{background:var(--color-brand-dark)}.btn-secondary{background:var(--color-background-secondary);color:var(--color-text-primary);border:1px solid var(--color-border)}.btn-secondary:hover{background:var(--color-background-tertiary)}.btn-danger{background:#dc3545;color:#fff}.btn-danger:hover{background:#c82333}.text-layer{position:absolute;pointer-events:auto;cursor:move;-webkit-user-select:none;user-select:none;transition:opacity .2s ease;line-height:1.2}.text-layer:hover{outline:2px dashed rgba(255,255,255,.5);outline-offset:2px}.text-layer.dragging{cursor:grabbing;opacity:.8}.text-layer.locked{cursor:default;pointer-events:none}input[type=range]{width:100%;margin:var(--spacing-xs) 0;accent-color:var(--color-brand-primary)}.form-group span{display:inline-block;min-width:50px;font-size:var(--font-size-sm);color:var(--color-text-secondary);font-weight:var(--font-weight-medium);text-align:center;margin-left:var(--spacing-sm)}.color-controls{display:flex;align-items:center;gap:var(--spacing-md)}.color-favorites{display:flex;gap:var(--spacing-xs);flex-wrap:wrap}.color-swatch{width:32px;height:32px;border-radius:var(--radius-sm);border:2px solid var(--color-border);cursor:pointer;transition:all .2s ease;position:relative}.color-swatch:hover{transform:scale(1.1);box-shadow:0 2px 8px #0003}.color-swatch.active{border-color:var(--color-brand-primary);transform:scale(1.1);box-shadow:0 0 0 2px #40b0a04d}.color-swatch[data-color="#ffffff"]{border-color:var(--color-text-tertiary)}.color-swatch[data-color="#ffffff"].active{border-color:var(--color-brand-primary)}input[type=color]{width:40px;height:32px;border:2px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;background:none;padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:calc(var(--radius-sm) - 2px)}input[type=color]::-webkit-color-swatch-wrapper{padding:0;border:none;border-radius:calc(var(--radius-sm) - 2px)}@media (max-width: 640px){.dialog-content{margin:var(--spacing-md);padding:var(--spacing-lg)}.form-row{flex-direction:column;gap:var(--spacing-sm)}.dialog-buttons{flex-direction:column}.btn{width:100%}.color-favorites{justify-content:center}.color-controls{flex-direction:column;align-items:stretch;gap:var(--spacing-sm)}}.text-edit-dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:transparent;z-index:10000;pointer-events:none}.text-edit-dialog{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);box-shadow:0 8px 32px #00000026,0 4px 16px #0000001a;width:300px;max-height:520px;overflow:hidden;display:flex;flex-direction:column;animation:dialogSlideIn .2s ease-out;-webkit-user-select:none;user-select:none;pointer-events:auto}.draggable-dialog{position:fixed!important;z-index:10001}@keyframes dialogSlideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-sm) var(--spacing-md);border-bottom:1px solid var(--border-color);background:var(--bg-secondary)}.drag-handle{cursor:move;-webkit-user-select:none;user-select:none}.drag-handle:active{cursor:grabbing}.dialog-header h3{margin:0;font-size:16px;font-weight:600;color:var(--text-primary)}.dialog-close{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:var(--spacing-xs);border-radius:var(--radius-sm);transition:all .2s ease;display:flex;align-items:center;justify-content:center}.dialog-close:hover{background:var(--bg-hover);color:var(--text-primary)}.dialog-content{padding:var(--spacing-sm);overflow-y:auto;flex:1;border:none;border-radius:0;box-shadow:none;background:transparent}.form-group{margin-bottom:var(--spacing-sm)}.form-group label{display:block;margin-bottom:var(--spacing-xs);font-weight:500;color:var(--text-primary);font-size:12px}.text-input-main{width:100%;padding:var(--spacing-sm);border:2px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-secondary);color:var(--text-primary);font-size:16px;font-weight:500;transition:border-color .2s ease}.text-input-main:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px #e74c8e1a}.form-group input[type=text],.form-group select{width:100%;padding:var(--spacing-xs) var(--spacing-sm);border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-secondary);color:var(--text-primary);font-size:14px;transition:border-color .2s ease}.form-group input[type=text]:focus,.form-group select:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px #e74c8e1a}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.form-row.compact{gap:var(--spacing-xs);margin-bottom:var(--spacing-sm)}.font-select{padding:var(--spacing-xs);border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-secondary);color:var(--text-primary);font-size:13px}.size-controls{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.size-controls label{font-size:12px;font-weight:500;color:var(--text-primary);min-width:40px}.size-slider{flex:1;height:4px;border-radius:2px;background:var(--border-color);outline:none;-webkit-appearance:none}.size-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent-color);cursor:pointer}.size-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent-color);cursor:pointer;border:none}.size-input{width:55px;padding:var(--spacing-xs);border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-secondary);color:var(--text-primary);font-size:12px;text-align:center}.size-input:focus{outline:none;border-color:var(--accent-color)}.size-input::-webkit-inner-spin-button,.size-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.size-unit{font-size:11px;color:var(--text-secondary);margin-left:-.25rem}.value-display{font-size:12px;color:var(--text-secondary);min-width:35px;text-align:center}.slider-group{display:flex;align-items:center;gap:var(--spacing-xs)}.slider-group label{font-size:12px;margin:0;min-width:50px}.slider,.rotation-slider{flex:1;height:4px;border-radius:2px;background:var(--border-color);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.slider::-webkit-slider-thumb,.rotation-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent-color);cursor:pointer}.slider::-moz-range-thumb,.rotation-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent-color);cursor:pointer;border:none}.rotation-controls{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.rotation-controls label{font-size:12px;font-weight:500;color:var(--text-primary);min-width:60px}.typography-controls{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.number-input-control{display:flex;flex-direction:column;gap:4px;flex:1}.number-input-label{font-size:11px;font-weight:500;color:var(--text-secondary)}.number-input-wrapper{display:flex;align-items:center;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);height:32px;padding:0 6px;transition:border-color .2s ease}.number-input-wrapper:focus-within{border-color:var(--accent-color)}.number-input-icon{display:flex;align-items:center;justify-content:center;color:var(--text-secondary);margin-right:4px}.number-input-icon svg{width:14px;height:14px}.number-input-field{flex:1;width:100%;min-width:0;border:none;background:transparent;color:var(--text-primary);font-size:13px;font-weight:500;text-align:center;outline:none;padding:0;-moz-appearance:textfield}.number-input-field::-webkit-outer-spin-button,.number-input-field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.number-input-unit{font-size:11px;color:var(--text-secondary);margin-left:2px;margin-right:4px}.number-input-arrows{display:flex;flex-direction:column;gap:1px}.number-input-arrow{display:flex;align-items:center;justify-content:center;width:16px;height:12px;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;padding:0;border-radius:2px;transition:all .15s ease}.number-input-arrow:hover{background:var(--bg-hover);color:var(--accent-color)}.number-input-arrow:active{background:var(--border-color)}.number-input-arrow svg{width:10px;height:10px}.button-group{display:flex;gap:var(--spacing-xs)}.button-group.compact{gap:2px}.button-group .btn{flex:1;padding:var(--spacing-xs) var(--spacing-sm);font-size:13px}.style-controls-row{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.weight-buttons,.align-buttons{display:flex;gap:var(--spacing-xs)}.style-btn{width:28px;height:28px;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-secondary);color:var(--text-primary);cursor:pointer;transition:all .15s ease;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500}.style-btn:hover{background:var(--bg-hover);border-color:var(--accent-color)}.style-btn.active{background:var(--accent-color);color:#fff;border-color:var(--accent-color)}.color-section{margin-bottom:var(--spacing-sm)}.color-header{margin-bottom:var(--spacing-xs)}.color-header label{margin:0;font-size:12px;font-weight:500}.color-swatches-row{display:flex;align-items:center;gap:var(--spacing-xs);flex-wrap:wrap}.color-swatch{width:24px;height:24px;border:2px solid transparent;border-radius:var(--radius-sm);cursor:pointer;transition:all .15s ease;position:relative;flex-shrink:0}.color-swatch:hover{transform:scale(1.1);border-color:var(--text-secondary)}.color-swatch.active{border-color:var(--accent-color);box-shadow:0 0 0 2px #e74c8e4d}.color-swatch.active:after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:10px;font-weight:700;text-shadow:0 0 2px rgba(0,0,0,.8)}.color-picker-input{width:24px;height:24px;border:1px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;background:none;padding:0;flex-shrink:0}.color-picker-input::-webkit-color-swatch-wrapper{padding:2px}.color-picker-input::-webkit-color-swatch{border:none;border-radius:2px}.advanced-color-controls{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:var(--spacing-sm);margin-top:var(--spacing-xs)}.rgb-inputs{display:flex;gap:var(--spacing-xs);margin-bottom:var(--spacing-sm)}.rgb-input-group{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs)}.rgb-input-group label{font-size:11px;font-weight:500;color:var(--text-secondary);margin:0}.rgb-input{width:50px;padding:var(--spacing-xs);border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-primary);color:var(--text-primary);font-size:12px;text-align:center}.rgb-input:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 2px #e74c8e1a}.current-color-display{display:flex;align-items:center;gap:var(--spacing-xs);justify-content:center}.color-preview-box{width:24px;height:24px;border:2px solid var(--border-color);border-radius:var(--radius-sm);box-shadow:0 1px 3px var(--color-shadow)}.hex-value{font-family:Courier New,monospace;font-size:12px;color:var(--text-secondary);font-weight:500}.color-picker-small{width:40px;height:32px;border:1px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;background:none}.shadow-controls{background:var(--bg-secondary);padding:var(--spacing-md);border-radius:var(--radius-sm);border:1px solid var(--border-color)}.shadow-controls .form-row{margin-bottom:var(--spacing-md)}.shadow-controls .form-row:last-child{margin-bottom:0}.text-preview{font-size:16px;line-height:1.4;word-wrap:break-word;overflow-wrap:break-word;transition:all .2s ease}.text-preview:hover{border-color:var(--accent-color);box-shadow:0 2px 8px #0000001a}.dialog-footer{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-xs) var(--spacing-sm);border-top:1px solid var(--border-color);background:var(--bg-secondary)}.dialog-actions{display:flex;gap:var(--spacing-xs)}.btn{padding:var(--spacing-xs) var(--spacing-sm);border:none;border-radius:var(--radius-sm);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s ease;display:inline-flex;align-items:center;justify-content:center;min-width:70px}.btn-primary{background:var(--accent-color);color:#fff}.btn-primary:hover{background:var(--accent-hover)}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background:var(--bg-hover)}.btn-danger{background:#ef4444;color:#fff}.btn-danger:hover{background:#dc2626}@media (max-width: 768px){.text-edit-dialog{width:280px;max-height:450px}.dialog-content{padding:10px}.style-btn{width:26px;height:26px;font-size:11px}.color-swatch{width:22px;height:22px}}.dark-theme .text-edit-dialog{background:var(--bg-primary);border-color:var(--border-color)}.dark-theme .dialog-header,.dark-theme .dialog-footer{background:var(--bg-secondary)}.dark-theme .shadow-controls{background:var(--bg-tertiary)}.font-selector-container{position:relative}.font-selector-trigger{width:100%;padding:var(--spacing-xs) var(--spacing-sm);border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-secondary);color:var(--text-primary);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:border-color .2s ease;text-align:left}.font-selector-trigger:hover{border-color:var(--accent-color)}.font-selector-trigger:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px #e74c8e1a}.selected-font-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.font-selector-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);box-shadow:0 10px 25px -5px var(--color-shadow);z-index:1000;overflow:hidden;animation:dropdownSlideIn .15s ease-out}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.font-search-wrapper{padding:var(--spacing-xs);border-bottom:1px solid var(--border-color)}.font-search-wrapper .font-search-input{width:100%;padding:var(--spacing-xs) var(--spacing-sm);border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-secondary);color:var(--text-primary);font-size:13px;transition:border-color .2s ease}.font-search-wrapper .font-search-input:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 2px #e74c8e1a}.font-search-wrapper .font-search-input::placeholder{color:var(--text-secondary)}.font-list-container{max-height:200px;overflow-y:auto}.font-list-container::-webkit-scrollbar{width:6px}.font-list-container::-webkit-scrollbar-track{background:transparent}.font-list-container::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}.font-list-container::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.font-loading-indicator{display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);padding:var(--spacing-md);color:var(--text-secondary);font-size:13px}.loading-spinner-small{width:16px;height:16px;border:2px solid var(--border-color);border-top-color:var(--accent-color);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.font-no-results{padding:var(--spacing-md);text-align:center;color:var(--text-secondary);font-size:13px}.font-list{padding:var(--spacing-xs)}.font-list-item{width:100%;display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-sm);border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-primary);cursor:pointer;transition:background-color .15s ease;text-align:left}.font-list-item:hover{background:var(--bg-hover)}.font-list-item.active{background:#e74c8e1a}.font-item-preview{width:40px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--bg-secondary);border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0}.font-item-preview-image{max-width:100%;max-height:100%;object-fit:contain}.font-item-preview-text{font-size:18px;font-weight:700;color:var(--text-primary)}.font-item-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.font-item-name{font-size:13px;font-weight:500;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.font-item-category{font-size:11px;color:var(--text-secondary)}.font-item-check{flex-shrink:0;color:var(--accent-color)}.font-panel-link{margin-top:var(--spacing-sm);padding-top:var(--spacing-sm);border-top:1px solid var(--border-color)}.font-panel-button{width:100%;padding:var(--spacing-sm);border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-secondary);color:var(--text-primary);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:all .2s ease;text-align:left}.font-panel-button:hover{border-color:var(--accent-color);background:var(--bg-hover)}.font-panel-button .font-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.font-panel-button svg{flex-shrink:0;color:var(--text-secondary)}.settings-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.settings-content{background:var(--color-surface);border-radius:var(--radius-md);box-shadow:0 20px 25px -5px var(--color-shadow);width:90%;max-width:400px;max-height:80vh;overflow:hidden;border:1px solid var(--color-border)}.settings-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-lg);border-bottom:1px solid var(--color-border)}.settings-header h3{margin:0;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.settings-close{background:none;border:none;color:var(--color-text-secondary);cursor:pointer;padding:var(--spacing-sm);border-radius:var(--radius-md);transition:all .2s ease;display:flex;align-items:center;justify-content:center}.settings-close:hover{background:var(--color-background);color:var(--color-text-primary)}.settings-body{padding:var(--spacing-lg)}.setting-group:last-child{margin-bottom:0}.settings-footer{padding:var(--spacing-lg);border-top:1px solid var(--color-border);display:flex;justify-content:flex-end}.settings-save{background:var(--color-brand-primary);color:#fff;border:none;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);cursor:pointer;transition:all .2s ease}.settings-save:hover{background:#40b0a0}.settings-save:active{transform:translateY(0)}.settings-button{background:none;border:1px solid var(--color-border);color:var(--color-text-secondary);cursor:pointer;padding:var(--spacing-sm);border-radius:var(--radius-md);transition:all .2s ease;display:flex;align-items:center;justify-content:center;margin-right:var(--spacing-sm)}.settings-button:hover{background:var(--color-surface);color:var(--color-text-primary);border-color:var(--color-brand-primary)}.download-button{background:none;border:1px solid var(--color-border);color:var(--color-text-secondary);cursor:pointer;padding:var(--spacing-sm);border-radius:var(--radius-md);transition:all .2s ease;display:flex;align-items:center;justify-content:center;margin-right:var(--spacing-sm)}.download-button:hover{background:var(--color-surface);color:var(--color-text-primary);border-color:var(--color-brand-primary)}.project-selection-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:all .3s ease}.project-selection-modal.show{opacity:1;visibility:visible}.project-selection-content{background:var(--color-surface);border-radius:var(--radius-md);box-shadow:0 20px 25px -5px var(--color-shadow);width:90%;max-width:800px;max-height:80vh;overflow:hidden;border:1px solid var(--color-border);transform:scale(.9);transition:transform .3s ease}.project-selection-modal.show .project-selection-content{transform:scale(1)}.project-selection-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-lg);border-bottom:1px solid var(--color-border)}.project-selection-header h3{margin:0;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.project-selection-close{background:none;border:none;color:var(--color-text-secondary);cursor:pointer;padding:var(--spacing-sm);border-radius:var(--radius-md);transition:all .2s ease;display:flex;align-items:center;justify-content:center}.project-selection-close:hover{background:var(--color-background);color:var(--color-text-primary)}.project-selection-body{padding:var(--spacing-lg);max-height:60vh;overflow-y:auto}.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--spacing-md)}.project-item{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-md);cursor:pointer;transition:all .2s ease;text-align:center}.project-item:hover{border-color:var(--color-brand-primary);box-shadow:0 4px 12px var(--color-shadow)}.project-thumbnail{width:100%;height:120px;border-radius:var(--radius-sm);overflow:hidden;margin-bottom:var(--spacing-sm);display:flex;align-items:center;justify-content:center;background:var(--color-canvas-bg)}.project-thumbnail img{width:100%;height:100%;object-fit:cover}.project-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--color-text-secondary);opacity:.6}.project-info{text-align:left}.project-title{margin:0 0 var(--spacing-xs) 0;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary);line-height:1.2}.project-date{margin:0;font-size:var(--font-size-xs);color:var(--color-text-secondary)}.download-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.download-content{background:var(--color-surface);border-radius:var(--radius-md);box-shadow:0 20px 25px -5px var(--color-shadow);width:90%;max-width:450px;max-height:80vh;overflow:hidden;border:1px solid var(--color-border)}.download-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-lg);border-bottom:1px solid var(--color-border)}.download-header h3{margin:0;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.download-close{background:none;border:none;color:var(--color-text-secondary);cursor:pointer;padding:var(--spacing-sm);border-radius:var(--radius-md);transition:all .2s ease;display:flex;align-items:center;justify-content:center}.download-close:hover{background:var(--color-background);color:var(--color-text-primary)}.download-body{padding:var(--spacing-lg)}.download-footer{padding:var(--spacing-lg);border-top:1px solid var(--color-border);display:flex;justify-content:space-between;gap:var(--spacing-md)}.download-cancel{background:var(--color-background);color:var(--color-text-primary);border:1px solid var(--color-border);padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);cursor:pointer;transition:all .2s ease}.download-cancel:hover{background:var(--color-surface);border-color:var(--color-text-secondary)}.download-save{background:var(--color-brand-primary);color:#fff;border:none;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);cursor:pointer;transition:all .2s ease}.download-save:hover{background:#40b0a0}.download-save:active{transform:translateY(0)}.download-save:disabled{background:var(--color-text-tertiary);cursor:not-allowed;transform:none}.setting-group{margin-bottom:var(--spacing-lg)}.setting-group label{display:block;margin-bottom:var(--spacing-sm);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.setting-select{width:100%;padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background);color:var(--color-text-primary);font-size:var(--font-size-base);transition:all .2s ease}.setting-select:focus{outline:none;border-color:var(--color-brand-primary);box-shadow:0 0 0 2px #40b0a01a}.setting-input{width:100%;padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background);color:var(--color-text-primary);font-size:var(--font-size-base);transition:all .2s ease;margin-bottom:var(--spacing-sm)}.setting-input:focus{outline:none;border-color:var(--color-brand-primary);box-shadow:0 0 0 2px #40b0a01a}.welcome-screen{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;min-height:calc(100vh - var(--top-bar-height));padding:var(--spacing-xl);background:var(--color-canvas-bg);overflow-y:auto}.welcome-content{width:100%;text-align:center;padding:0 var(--spacing-xl)}.welcome-title{font-size:var(--font-size-3xl);font-weight:var(--font-weight-normal);color:var(--color-text-primary);margin:var(--spacing-2xl) auto;line-height:1.2}.welcome-chat-container{margin-bottom:var(--spacing-3xl)}.welcome-chat-input-container{display:flex;align-items:center;background:var(--color-background);border:none;border-radius:var(--radius-md);padding:var(--spacing-md);box-shadow:none;transition:all .3s ease;max-width:500px;margin:0 auto}.welcome-chat-input-container:focus-within{border-color:var(--color-brand-primary);box-shadow:none}.welcome-chat-input{flex:1;border:none;outline:none;font-size:var(--font-size-lg);color:var(--color-text-primary);background:transparent;padding:var(--spacing-sm) var(--spacing-md)}.welcome-chat-input:focus{outline:none}.welcome-chat-input::placeholder{color:var(--color-text-light)}.welcome-chat-submit-btn{background:var(--color-brand-primary);color:#fff;border:none;border-radius:50%;padding:var(--spacing-sm);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;width:40px;height:40px}.welcome-chat-submit-btn:hover:not(:disabled){background:var(--color-teal-dark);transform:translateY(-1px)}.welcome-chat-submit-btn:disabled{background:var(--color-text-light);cursor:not-allowed;transform:none}.welcome-chat-submit-btn.generating{background:var(--color-teal-dark);cursor:not-allowed}.loading-bar-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.loading-bar{width:24px;height:4px;background:#ffffff4d;border-radius:2px;overflow:hidden;position:relative}.loading-bar-fill{height:100%;background:#fff;border-radius:2px;animation:loading-progress 2s ease-in-out infinite;position:absolute;top:0;left:0}@keyframes loading-progress{0%{width:0%;left:0%}50%{width:100%;left:0%}to{width:0%;left:100%}}.generation-status{margin-top:var(--spacing-md);padding:var(--spacing-md);background:var(--color-surface);border-radius:var(--radius-lg);border:1px solid var(--color-border);max-width:500px;margin-left:auto;margin-right:auto}.generation-status p{margin:0;color:var(--color-text-primary)}.generation-status .generation-prompt{font-style:italic;color:var(--color-text-light);margin-top:var(--spacing-xs);font-size:var(--font-size-sm)}.welcome-chat-input:disabled{color:var(--color-text-light);cursor:not-allowed}.projects-section{margin:2rem 0;padding:1.5rem;background:var(--color-surface);border-radius:var(--radius-lg);border:1px solid var(--color-border)}.projects-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg);flex-wrap:wrap;gap:var(--spacing-md)}.projects-title{margin:0;font-size:1.25rem;font-weight:600;color:var(--color-text-primary);display:flex;align-items:center;gap:.5rem}.projects-toggle{display:flex;gap:var(--spacing-sm)}.toggle-btn{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:all .2s ease}.toggle-btn:hover:not(:disabled){background:var(--color-background);border-color:var(--color-brand-primary);color:var(--color-brand-primary)}.toggle-btn:active{transform:translateY(1px)}.toggle-btn:disabled{opacity:.5;cursor:not-allowed}.toggle-btn-all{background:var(--color-brand-primary);color:#fff;border-color:var(--color-brand-primary)}.toggle-btn-all:hover:not(:disabled){background:var(--color-teal-dark);color:#fff}.toggle-btn-recent{background:var(--color-brand-primary);color:#fff;border-color:var(--color-brand-primary)}.toggle-btn-recent:hover:not(:disabled){background:var(--color-brand-dark);color:#fff}.recent-projects{margin:2rem 0;padding:1.5rem;background:var(--color-background);border-radius:var(--radius-card);border:none}.recent-projects-title{margin:0 0 1rem;font-size:1.25rem;font-weight:600;color:var(--color-text-primary);display:flex;align-items:center;gap:.5rem}.loading-indicator{font-size:.875rem;font-weight:400;color:var(--color-text-light)}.projects-loading{display:flex;justify-content:center;align-items:center;padding:2rem;color:var(--color-text-light)}.projects-empty{text-align:center;padding:2rem;color:var(--color-text-light)}.projects-empty p{margin:0;font-size:.875rem}.recent-projects-loading{display:flex;justify-content:center;align-items:center;padding:2rem;color:var(--color-text-light)}.projects-grid,.recent-projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1rem}.project-item{display:flex;flex-direction:column;align-items:center;padding:1rem;background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-card);cursor:pointer;transition:all .2s ease;text-align:center;position:relative}.recent-project-item{display:flex;flex-direction:column;align-items:center;padding:1rem;background:var(--color-background);border:none;border-radius:var(--radius-card);cursor:pointer;transition:all .2s ease;text-align:center;position:relative}.recent-project-item:hover{box-shadow:0 4px 12px #0000001a}.project-thumbnail{width:60px;height:60px;margin-bottom:.75rem;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);overflow:hidden;background:var(--color-canvas-bg)}.recent-project-thumbnail{width:60px;height:60px;margin-bottom:.75rem;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);overflow:hidden;background:transparent;background-size:contain;background-position:center;background-repeat:no-repeat;position:relative}.project-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--color-text-light);background:var(--color-canvas-bg);border-radius:var(--radius-sm)}.project-name{font-weight:500;color:var(--color-text-primary);margin-bottom:.25rem;font-size:.875rem;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-date{font-size:.75rem;color:var(--color-text-light);font-weight:400}.project-info{display:flex;flex-direction:column;align-items:center;flex:1;min-width:0}.recent-project-name{font-weight:500;color:var(--color-text-primary);margin-bottom:.25rem;font-size:.875rem;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recent-project-date{font-size:.75rem;color:var(--color-text-light);font-weight:400}.recent-project-info{display:flex;flex-direction:column;align-items:center;flex:1;min-width:0}.delete-project-btn{position:absolute;top:.5rem;right:.5rem;background:var(--color-error);color:#fff;border:none;border-radius:var(--radius-sm);width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;opacity:0;transform:scale(.8)}.recent-project-item:hover .delete-project-btn{opacity:1;transform:scale(1)}.delete-project-btn:hover{background:var(--color-error);filter:brightness(.9);transform:scale(1.1)}.delete-project-btn:active{transform:scale(.95)}.recent-projects-empty{text-align:center;padding:2rem;color:var(--color-text-light)}.recent-projects-empty p{margin:0;font-size:.875rem}.loading-spinner{display:inline-block;animation:spin 1s linear infinite}.welcome-actions{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap;margin-top:2rem}.welcome-action-btn{display:flex;flex-direction:column;align-items:center;gap:.75rem;background:var(--color-background);border:none;border-radius:var(--radius-card);padding:1.5rem;cursor:pointer;transition:all .2s ease;min-width:140px;color:var(--color-text-primary);font-weight:500;text-decoration:none;outline:none;box-shadow:none}.welcome-action-btn:hover{transform:translateY(-2px);box-shadow:0 4px 0 var(--color-brand-lighter)}.welcome-action-btn:active{transform:translateY(2px);box-shadow:2px 2px 0 var(--color-brand-lighter)}.welcome-action-btn:focus{outline:none;box-shadow:none}.welcome-action-btn:focus-visible{outline:none;box-shadow:none}.welcome-action-btn svg,.welcome-action-btn .fa-icon-wrapper,.welcome-action-btn .fa-icon-wrapper svg{color:var(--color-brand-dark)!important;fill:currentColor!important;transition:color .2s ease}.welcome-action-btn:hover svg,.welcome-action-btn:hover .fa-icon-wrapper,.welcome-action-btn:hover .fa-icon-wrapper svg{color:var(--color-brand-secondary)!important;fill:currentColor!important}@media (max-width: 768px){.welcome-title{font-size:var(--font-size-2xl)}.welcome-chat-input-container{max-width:100%}.welcome-actions{flex-direction:column;align-items:center}.welcome-action-btn{width:100%;max-width:300px}.recent-projects-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem}.recent-project-item{padding:.75rem}.recent-project-thumbnail{width:50px;height:50px;margin-bottom:.5rem}.recent-project-name{font-size:.8rem}.recent-project-date{font-size:.7rem}}.recent-projects{margin:2rem auto;margin-bottom:var(--spacing-2xl);max-width:1000px;background:var(--color-background);border-radius:var(--radius-card)}.recent-projects-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg)}.recent-projects-header-actions{display:flex;align-items:center;gap:var(--spacing-sm)}.recent-projects-title{margin:0;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.collapse-recent-work-btn{display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-xs);cursor:pointer;transition:all .2s ease;color:var(--color-text-secondary);width:32px;height:32px;transform:rotate(180deg)}.collapse-recent-work-btn:hover{background:var(--color-surface);border-color:var(--color-brand-primary);color:var(--color-brand-primary)}.collapse-recent-work-btn svg{transition:transform .2s ease}.collapse-recent-work-btn svg.rotated{transform:rotate(180deg)}.recent-projects.collapsed .recent-projects-content{display:none}.show-all-btn{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-secondary);font-size:var(--font-size-sm);cursor:pointer;transition:all .2s ease;text-decoration:none}.show-all-btn:hover{background:var(--color-border);color:var(--color-text-primary)}.show-all-btn:disabled{opacity:.5;cursor:not-allowed}.show-all-btn svg{width:16px;height:16px}.recent-projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--spacing-lg);margin-bottom:var(--spacing-lg)}.recent-project-item{display:flex;flex-direction:column;align-items:center;padding:var(--spacing-lg);background:var(--color-surface);border:none;border-radius:var(--radius-card);cursor:pointer;transition:all .2s ease;text-align:center;position:relative;min-height:160px}.recent-project-item:hover{border-color:var(--color-brand-primary);box-shadow:0 8px 25px #0000001a}.recent-project-thumbnail{width:60px;height:60px;margin-bottom:var(--spacing-md);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);overflow:hidden;background:transparent;background-size:contain;background-position:center;background-repeat:no-repeat;position:relative;flex-shrink:0}.thumbnail-image{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;transition:opacity .3s ease}.thumbnail-image.loading{opacity:0}.thumbnail-image.loaded{opacity:1}.thumbnail-loading-skeleton{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--color-background-secondary, #f0f0f0);border-radius:var(--radius-sm);overflow:hidden}.skeleton-shimmer{width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);animation:shimmer 1.5s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.dark-theme .thumbnail-loading-skeleton,[data-theme=dark] .thumbnail-loading-skeleton{background:var(--color-background-tertiary, #2a2a2a)}.dark-theme .skeleton-shimmer,[data-theme=dark] .skeleton-shimmer{background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.1) 50%,transparent 100%)}.recent-project-item.opening{pointer-events:none;opacity:.7}.opening-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0006;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);z-index:10}.opening-spinner{color:#fff}.opening-spinner svg{animation:spin 1s linear infinite}.recent-project-info{display:flex;flex-direction:column;align-items:center;flex:1;min-width:0;margin-bottom:var(--spacing-sm)}.recent-project-name{font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin-bottom:var(--spacing-xs);font-size:var(--font-size-sm);line-height:1.3;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recent-projects-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-3xl);color:var(--color-text-light)}.recent-projects-empty{text-align:center;padding:var(--spacing-3xl);color:var(--color-text-light)}.recent-projects-empty p{margin:0;font-size:var(--font-size-base)}.recent-projects-title-section{display:flex;flex-direction:column;gap:var(--spacing-sm)}.recent-tabs{display:flex;gap:var(--spacing-xs)}.tab-btn{padding:var(--spacing-xs) var(--spacing-sm);border:1px solid var(--color-border);background:var(--color-background);color:var(--color-text-secondary);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:all .2s ease;outline:none}.tab-btn:hover{background:var(--color-brand-lighter);border-color:var(--color-brand-secondary);color:var(--color-text-primary)}.tab-btn.active{background:var(--color-brand-secondary);color:#fff;border-color:var(--color-brand-secondary);outline:none;box-shadow:none}.tab-btn.active:hover{background:var(--color-brand-secondary);border-color:var(--color-brand-secondary);outline:none;box-shadow:none}.tab-btn:focus{outline:none;box-shadow:none}.template-suggestions{width:100%}.template-suggestions-title{margin:0 0 var(--spacing-md) 0;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);color:var(--color-text-primary);text-align:center}.template-suggestions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-md);margin-bottom:var(--spacing-md)}.template-suggestion-card{display:flex;flex-direction:column;align-items:center;padding:var(--spacing-md);background:var(--color-background);border:2px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;transition:all .2s ease;text-align:center;min-height:140px}.template-suggestion-card:hover:not(:disabled){border-color:var(--color-brand-primary);box-shadow:0 4px 12px #4fd1c733}.template-suggestion-card:disabled{opacity:.6;cursor:not-allowed}.template-suggestion-thumbnail{width:80px;height:80px;margin-bottom:var(--spacing-sm);border-radius:var(--radius-md);object-fit:cover;background:var(--color-canvas-bg)}.template-suggestion-placeholder{width:80px;height:80px;margin-bottom:var(--spacing-sm);display:flex;align-items:center;justify-content:center;color:var(--color-text-light);background:var(--color-canvas-bg);border-radius:var(--radius-md)}.template-suggestion-info{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);width:100%}.template-suggestion-name{font-weight:var(--font-weight-medium);color:var(--color-text-primary);font-size:var(--font-size-sm);line-height:1.3;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.template-suggestion-category{font-size:var(--font-size-xs);color:var(--color-text-light);font-weight:var(--font-weight-normal)}.template-suggestions-cancel{width:100%;padding:var(--spacing-sm);background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:var(--font-size-sm);cursor:pointer;transition:all .2s ease}.template-suggestions-cancel:hover{background:var(--color-surface);border-color:var(--color-text-secondary);color:var(--color-text-primary)}@media (max-width: 768px){.template-suggestions-grid{grid-template-columns:1fr;gap:var(--spacing-sm)}.template-suggestion-card{min-height:120px;padding:var(--spacing-sm)}.template-suggestion-thumbnail,.template-suggestion-placeholder{width:60px;height:60px}}.welcome-footer{margin-top:0;padding:calc(var(--spacing-xl) * 2) var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);text-align:center;color:var(--color-background);font-size:var(--font-size-sm);width:100%;position:relative;background-color:var(--color-canvas-bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='520' viewBox='0 0 1440 520' fill='none'%3E%3Cpath d='M298.833 510.24C229.807 509.31 164.885 494.943 91.4721 494.943C45 494.943 24.2283 501.429 0 501.064V19.427C69.7414 21.604 138.199 13.5852 207.677 9.45107C305.027 3.65845 404.272 14.4622 501.647 17.6897C647.328 22.5183 788.721 2.09137 933.477 0.10909C1009.34 -0.929747 1079.37 5.64656 1154.12 11.5067C1217.66 16.4881 1253.52 7.09719 1317.26 7.09719C1391.5 7.09719 1398.87 14.1011 1440 15.3117V513.329C1388.73 509.109 1354.85 520.876 1303.5 519.344C1257.33 517.966 1184.26 500.11 1138 501.064C1080 502.259 1032.4 510.165 974.574 512.594C881.574 516.5 759.29 499.248 666.204 494.947C527.196 488.526 437.954 512.113 298.833 510.24Z' fill='%23008dd5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:top center;background-size:cover;align-self:stretch}.progress-bar-container{position:fixed;top:0;left:0;right:0;height:3px;background:transparent;z-index:1001;pointer-events:none}.progress-bar{width:100%;height:100%;background:#4fd1c733;overflow:hidden;position:relative}.progress-bar-fill{height:100%;background:var(--color-brand-primary);border-radius:0 2px 2px 0;transition:width .3s ease-out;position:absolute;top:0;left:0;width:0%}.advanced-zoom-controls{position:fixed;bottom:20px;right:20px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:0 4px 12px #00000026;padding:12px;z-index:1000}.zoom-controls-container{display:flex;align-items:center;gap:8px}.zoom-btn{background:none;border:none;border-radius:var(--radius-md);padding:8px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;min-width:32px;height:32px}.zoom-btn:hover{background:none}.zoom-btn:active{transform:scale(.95)}.zoom-slider-container{display:flex;align-items:center;gap:8px;min-width:120px}.zoom-slider{flex:1;height:4px;border-radius:2px;background:var(--color-border);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--color-brand-primary);cursor:pointer;border:2px solid var(--color-surface)}.zoom-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--color-brand-primary);cursor:pointer;border:2px solid var(--color-surface)}.zoom-percentage{font-size:12px;font-weight:500;color:var(--color-text-secondary);min-width:40px;text-align:center}.confirmation-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:10000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:modalFadeIn .2s ease-out}.confirmation-modal{background:var(--color-background);border-radius:var(--radius-md);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;max-width:400px;width:90%;max-height:90vh;overflow:hidden;animation:modalSlideIn .3s ease-out;border:1px solid var(--color-border)}.confirmation-modal-header{padding:var(--spacing-lg) var(--spacing-lg) var(--spacing-md);border-bottom:1px solid var(--color-border)}.confirmation-modal-title{margin:0;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);line-height:1.4}.confirmation-modal-body{padding:var(--spacing-lg)}.confirmation-modal-message{margin:0;font-size:var(--font-size-base);color:var(--color-text-secondary);line-height:1.5;margin-bottom:var(--spacing-md)}.confirmation-modal-checkbox{display:flex;align-items:center;gap:var(--spacing-sm);cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-top:var(--spacing-md)}.confirmation-modal-checkbox input[type=checkbox]{cursor:pointer;width:18px;height:18px;accent-color:var(--color-brand-primary)}.confirmation-modal-checkbox:hover{color:var(--color-text-primary)}.confirmation-modal-footer{padding:var(--spacing-md) var(--spacing-lg) var(--spacing-lg);display:flex;gap:var(--spacing-md);justify-content:flex-end;border-top:1px solid var(--color-border)}.cancel-btn{background:var(--color-surface);color:var(--color-text-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-lg);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:all .2s ease;min-width:80px}.cancel-btn:hover{background:var(--color-border);color:var(--color-text-primary)}.cancel-btn:active{transform:translateY(1px)}.confirm-btn{border:none;border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-lg);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:all .2s ease;min-width:80px;color:#fff}.confirm-btn-primary{background:var(--color-brand-primary)}.confirm-btn-primary:hover{background:var(--color-teal-dark)}.confirm-btn-primary:active{transform:translateY(0)}.confirm-btn-danger{background:var(--color-error)}.confirm-btn-danger:hover{background:var(--color-error);filter:brightness(.9)}.confirm-btn-danger:active{transform:translateY(0)}.confirm-btn-secondary{background:var(--color-text-secondary)}.confirm-btn-secondary:hover{background:var(--color-text-primary)}.confirm-btn-secondary:active{transform:translateY(0)}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalSlideIn{0%{opacity:0;transform:scale(.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}@media (max-width: 480px){.confirmation-modal{width:95%;margin:var(--spacing-md)}.confirmation-modal-footer{flex-direction:column-reverse}.cancel-btn,.confirm-btn{width:100%;min-width:auto}}body.dark-theme .confirmation-modal{background:var(--color-surface);border-color:var(--color-border)}body.dark-theme .confirmation-modal-header,body.dark-theme .confirmation-modal-footer{border-color:var(--color-border)}body.dark-theme .cancel-btn{background:var(--color-surface);border-color:var(--color-border);color:var(--color-text-secondary)}body.dark-theme .cancel-btn:hover{background:var(--color-border);color:var(--color-text-primary)}.projects-modal{max-width:1200px;width:90vw;max-height:90vh;background:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;overflow:hidden}.projects-modal .modal-header{padding:var(--spacing-lg);border-bottom:1px solid var(--color-border);background:var(--color-surface);display:flex;justify-content:space-between;align-items:center}.projects-modal .modal-header h2{margin:0;font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.projects-modal .close-button{background:none;border:none;color:var(--color-text-secondary);cursor:pointer;padding:var(--spacing-sm);border-radius:var(--radius-sm);transition:all .2s ease;display:flex;align-items:center;justify-content:center}.projects-modal .close-button:hover{background:var(--color-background);color:var(--color-text-primary)}.projects-modal .modal-tabs{display:flex;border-bottom:1px solid var(--color-border);background:var(--color-surface)}.projects-modal .tab-button{flex:1;padding:var(--spacing-md) var(--spacing-lg);background:none;border:none;color:var(--color-text-secondary);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);border-bottom:2px solid transparent}.projects-modal .tab-button:hover{background:var(--color-background);color:var(--color-text-primary)}.projects-modal .tab-button.active{color:var(--color-brand-primary);border-bottom-color:var(--color-brand-primary);background:var(--color-background)}.projects-modal .tab-button svg{opacity:.7}.projects-modal .tab-button.active svg{opacity:1}.projects-modal .modal-controls{padding:var(--spacing-lg);border-bottom:1px solid var(--color-border);background:var(--color-surface);display:flex;gap:var(--spacing-lg);align-items:center}.projects-modal .search-container{flex:1;position:relative}.projects-modal .search-input{width:100%;padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background);color:var(--color-text-primary);font-size:var(--font-size-sm);outline:none;transition:border-color .2s ease}.projects-modal .search-input:focus{border-color:var(--color-brand-primary)}.projects-modal .sort-container{display:flex;align-items:center;gap:var(--spacing-sm)}.projects-modal .sort-select{padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background);color:var(--color-text-primary);font-size:var(--font-size-sm);cursor:pointer;outline:none;transition:border-color .2s ease}.projects-modal .sort-select:focus{border-color:var(--color-brand-primary)}.projects-modal .modal-body{flex:1;padding:var(--spacing-lg);overflow-y:auto;background:var(--color-background)}.projects-modal .loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-xxl);color:var(--color-text-secondary)}.projects-modal .loading-spinner{width:40px;height:40px;border:3px solid var(--color-border);border-top:3px solid var(--color-brand-primary);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:var(--spacing-md)}.projects-modal .empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-xxl);text-align:center;color:var(--color-text-secondary)}.projects-modal .empty-state svg{margin-bottom:var(--spacing-lg);opacity:.5}.projects-modal .empty-state h3{margin:0 0 var(--spacing-sm) 0;color:var(--color-text-primary);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold)}.projects-modal .empty-state p{margin:0;font-size:var(--font-size-sm);line-height:1.5}.projects-modal .items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--spacing-lg)}.projects-modal .item-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);overflow:hidden;transition:all .2s ease;position:relative}.projects-modal .item-card:hover{border-color:var(--color-brand-primary);box-shadow:var(--shadow-md)}.projects-modal .item-thumbnail{position:relative;width:100%;height:200px;overflow:hidden;cursor:pointer;background:transparent;background-size:contain;background-position:center;background-repeat:no-repeat;transition:transform .2s ease;display:flex;align-items:center;justify-content:center}.projects-modal .item-thumbnail img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}.projects-modal .item-thumbnail:hover{transform:scale(1.02)}.projects-modal .placeholder-thumbnail{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--color-text-tertiary)}.projects-modal .item-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#000000b3;color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease;font-weight:var(--font-weight-medium)}.projects-modal .item-thumbnail:hover .item-overlay{opacity:1}.projects-modal .item-info{padding:var(--spacing-md)}.projects-modal .item-title{margin:0 0 var(--spacing-sm) 0;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);cursor:pointer;transition:color .2s ease;line-height:1.4}.projects-modal .item-title:hover{color:var(--color-brand-primary)}.projects-modal .item-meta{margin:0 0 var(--spacing-xs) 0;font-size:var(--font-size-sm);color:var(--color-text-secondary);font-family:var(--font-family-mono)}.projects-modal .item-date{margin:0;font-size:var(--font-size-xs);color:var(--color-text-tertiary)}.projects-modal .item-actions{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);display:flex;gap:var(--spacing-xs);opacity:0;transition:all .2s ease}.projects-modal .item-card:hover .item-actions{opacity:1}.projects-modal .add-to-project-button{background:#22c55ee6;color:#fff;border:none;border-radius:var(--radius-sm);padding:var(--spacing-xs) var(--spacing-sm);cursor:pointer;display:flex;align-items:center;gap:var(--spacing-xs);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);transition:all .2s ease;white-space:nowrap}.projects-modal .add-to-project-button:hover{background:#22c55e;transform:scale(1.05)}.projects-modal .add-to-project-button svg{width:14px;height:14px}.projects-modal .delete-button{background:#dc2626e6;color:#fff;border:none;border-radius:var(--radius-sm);width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.projects-modal .delete-button:hover{background:#dc2626;transform:scale(1.1)}@media (max-width: 768px){.projects-modal{width:95vw;max-height:95vh}.projects-modal .modal-controls{flex-direction:column;gap:var(--spacing-md)}.projects-modal .items-grid{grid-template-columns:1fr;gap:var(--spacing-md)}.projects-modal .modal-tabs{flex-direction:column}.projects-modal .tab-button{border-bottom:none;border-right:2px solid transparent}.projects-modal .tab-button.active{border-right-color:var(--color-brand-primary);border-bottom-color:transparent}}.projects-modal .loading-image-container{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.projects-modal .loading-image{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:opacity .3s ease}.projects-modal .loading-image.loading{opacity:0}.projects-modal .loading-image.loaded{opacity:1}.projects-modal .loading-image-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--color-text-tertiary)}.loading-overlay-fullscreen{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#fffffff2;display:flex;align-items:center;justify-content:center;z-index:9999;animation:fadeIn .2s ease-out}.dark-theme .loading-overlay-fullscreen,[data-theme=dark] .loading-overlay-fullscreen{background:#1e1e1ef2}.loading-overlay-content{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-lg, 1.5rem)}.loading-overlay-image{width:200px;height:auto}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.ai-edit-panel{padding:16px}.selected-layer-info{display:flex;align-items:center;gap:8px;margin-top:8px;padding:8px 12px;background:var(--color-brand-light);border-radius:var(--radius-sm);font-size:var(--font-size-sm)}.layer-indicator{font-size:16px}.layer-name{font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.layer-warning{color:var(--color-orange-primary);font-weight:var(--font-weight-medium)}.no-selection-info{margin-top:8px;padding:8px 12px;background:var(--color-background);border:1px dashed var(--color-border);border-radius:var(--radius-sm);text-align:center}.selection-hint{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.edit-types-section{margin-bottom:20px}.edit-types-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}.edit-type-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background);cursor:pointer;transition:all .2s ease;text-align:center}.edit-type-btn:hover{background:var(--color-surface);border-color:var(--color-brand-primary)}.edit-type-btn.active{background:var(--color-brand-light);border-color:var(--color-brand-secondary);color:var(--color-brand-secondary)}.edit-type-icon{font-size:20px}.edit-type-label{font-size:12px;font-weight:500}.edit-prompt-section{margin-bottom:20px}.edit-prompt-input{width:100%;min-height:80px;padding:12px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background);color:var(--color-text-primary);font-family:inherit;font-size:14px;resize:vertical;margin-top:8px}.edit-prompt-input:focus{outline:none;border-color:var(--color-brand-primary);box-shadow:0 0 0 2px #007acc1a}.edit-prompt-counter{text-align:right;font-size:12px;color:var(--color-text-secondary);margin-top:4px}.advanced-ai-tools-section{margin-bottom:20px}.advanced-tools-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}.advanced-tool-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background);cursor:pointer;transition:all .2s ease;text-align:center}.advanced-tool-btn:hover{background:var(--color-surface);border-color:var(--color-brand-primary)}.advanced-tool-btn small{font-size:10px;color:var(--color-text-secondary);margin-top:2px}.coming-soon-notice{margin-top:12px;padding:8px 12px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);text-align:center}.coming-soon-notice p{margin:0;font-size:12px;color:var(--color-text-secondary)}.instagram-filters-section{margin-bottom:20px}.filters-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.filter-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background);cursor:pointer;transition:all .2s ease;text-align:center;font-size:11px}.filter-btn:hover:not(:disabled){background:var(--color-surface);border-color:var(--color-brand-primary)}.filter-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.filter-btn:disabled:hover{background:var(--color-background);border-color:var(--color-border);transform:none}.filter-btn span:first-child{font-size:16px}.filter-btn span:last-child{font-weight:500;font-size:10px}.apply-edit-btn{width:100%;padding:12px;background:var(--color-brand-primary);color:#fff;border:none;border-radius:var(--radius-md);font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:8px}.apply-edit-btn:hover:not(:disabled){background:var(--color-brand-dark)}.apply-edit-btn:disabled{opacity:.6;cursor:not-allowed}.apply-edit-btn.processing{cursor:not-allowed}.loading-spinner{width:16px;height:16px;border:2px solid transparent;border-top:2px solid white;border-radius:50%;animation:spin 1s linear infinite}body.dark-theme .edit-type-btn{background:var(--color-surface);border-color:var(--color-border);color:var(--color-text-primary)}body.dark-theme .edit-type-btn:hover{background:var(--color-background);border-color:var(--color-brand-primary)}body.dark-theme .edit-type-btn.active{background:var(--color-brand-light);border-color:var(--color-brand-secondary);color:var(--color-brand-secondary)}body.dark-theme .edit-prompt-input,body.dark-theme .quick-action-btn{background:var(--color-surface);border-color:var(--color-border);color:var(--color-text-primary)}body.dark-theme .quick-action-btn:hover{background:var(--color-background);border-color:var(--color-brand-primary)}body.dark-theme .filter-btn{background:var(--color-surface);border-color:var(--color-border);color:var(--color-text-primary)}body.dark-theme .filter-btn:hover{background:var(--color-background);border-color:var(--color-brand-primary)}@media (max-width: 768px){.edit-types-grid,.quick-actions-grid{grid-template-columns:1fr}.filters-grid{grid-template-columns:repeat(2,1fr)}.ai-edit-panel{padding:12px}}.magic-expand-section{margin-bottom:20px}.magic-expand-toggle-btn{display:flex;align-items:center;gap:8px;width:100%;padding:12px 16px;background:var(--color-brand-light);border:1px solid var(--color-brand-secondary);border-radius:var(--radius-md);cursor:pointer;transition:all .2s ease;text-align:left;font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.magic-expand-toggle-btn:hover{background:var(--color-brand-primary);border-color:var(--color-brand-secondary);box-shadow:0 2px 8px #0000001a}.magic-expand-toggle-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.magic-expand-toggle-btn .toggle-arrow{margin-left:auto;font-size:12px;transition:transform .2s ease}.magic-expand-options-panel{margin-top:12px;padding:16px;background:var(--color-background-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.magic-expand-directions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}.magic-expand-direction-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border:1px solid #0ea5e9;border-radius:var(--radius-md);cursor:pointer;transition:all .2s ease;text-align:center;position:relative;overflow:hidden}.magic-expand-direction-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.magic-expand-direction-btn:hover:before{left:100%}.magic-expand-direction-btn:hover{background:linear-gradient(135deg,#0ea5e9,#0284c7);border-color:#0284c7;box-shadow:0 4px 12px #00000026}.magic-expand-direction-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.magic-expand-direction-btn:disabled:hover{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border-color:#0ea5e9;transform:none;box-shadow:none}.magic-expand-direction-btn .direction-icon{font-size:20px}.magic-expand-direction-btn .direction-text{font-weight:var(--font-weight-medium);color:var(--color-text-primary);text-transform:capitalize}.magic-expand-custom-prompt{margin-bottom:16px;padding:12px;background:var(--color-background-primary);border:1px solid var(--color-border);border-radius:var(--radius-sm)}.custom-prompt-label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);margin-bottom:8px}.custom-prompt-input{width:100%;padding:8px 12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-family:inherit;resize:vertical;min-height:60px;background:var(--color-background-primary);color:var(--color-text-primary)}.custom-prompt-input:focus{outline:none;border-color:var(--color-brand-primary);box-shadow:0 0 0 2px #3b82f61a}.custom-prompt-input::placeholder{color:var(--color-text-tertiary)}.custom-prompt-counter{font-size:var(--font-size-xs);color:var(--color-text-tertiary);text-align:right;margin-top:4px}.ai-edit-tip{margin:12px 0 0;padding:10px 12px;font-size:12px;color:var(--color-text-secondary);background-color:var(--color-surface-hover, #f9fafb);border-radius:6px;line-height:1.4}body.dark-theme .ai-edit-tip{background-color:var(--color-surface)}.magic-fill-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;display:flex;align-items:flex-start;justify-content:flex-end;padding:20px;pointer-events:none}.magic-fill-overlay-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:auto}.magic-fill-overlay-content{position:relative;z-index:1001;max-width:90vw;max-height:90vh;overflow:auto;pointer-events:auto}.magic-fill-panel{padding:24px;background:var(--color-background);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-width:320px;width:100%}.magic-fill-panel .panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.magic-fill-panel .panel-header h3{margin:0;font-size:18px;font-weight:600;color:var(--color-text-primary)}.magic-fill-panel .close-btn{background:none;border:none;font-size:20px;color:var(--color-text-secondary);cursor:pointer;padding:4px;line-height:1}.magic-fill-panel .close-btn:hover{color:var(--color-text-primary)}.magic-fill-panel .brush-section{margin-bottom:24px}.magic-fill-panel .brush-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.magic-fill-panel .brush-label span:first-child{font-size:14px;font-weight:500;color:var(--color-text-primary)}.magic-fill-panel .brush-size-label{font-size:12px;color:var(--color-text-secondary)}.magic-fill-panel .brush-preview-container{display:flex;justify-content:center;margin-bottom:16px;padding:20px;background:#fff;border-radius:var(--radius-md);border:1px solid var(--color-border)}.magic-fill-panel .brush-preview{border-radius:50%;background:#ffb3ba;opacity:.8}.magic-fill-panel .brush-size-slider{width:100%;height:6px;border-radius:3px;background:var(--color-border);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.magic-fill-panel .brush-size-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--color-brand-primary);cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0000001a}.magic-fill-panel .brush-size-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--color-brand-primary);cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0000001a}.magic-fill-panel .text-prompt-section{margin-bottom:24px}.magic-fill-panel .text-prompt-section label{display:block;margin-bottom:8px;font-size:14px;font-weight:500;color:var(--color-text-primary)}.magic-fill-panel .text-prompt-textarea{width:100%;padding:12px;border:2px solid var(--color-brand-primary);border-radius:var(--radius-md);background:var(--color-background);color:var(--color-text-primary);font-size:14px;font-family:inherit;resize:vertical;min-height:100px;outline:none;transition:border-color .2s ease}.magic-fill-panel .text-prompt-textarea:focus{border-color:var(--color-teal-dark)}.magic-fill-panel .text-prompt-textarea::placeholder{color:var(--color-text-tertiary)}.magic-fill-panel .create-btn{width:100%;padding:12px 16px;background:var(--color-brand-primary);color:#fff;border:none;border-radius:var(--radius-md);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:8px}.magic-fill-panel .create-btn:hover:not(:disabled){background:var(--color-teal-dark)}.magic-fill-panel .create-btn:disabled{opacity:.6;cursor:not-allowed}.magic-fill-panel .loading-spinner{width:16px;height:16px;border:2px solid transparent;border-top:2px solid currentColor;border-radius:50%;animation:spin 1s linear infinite}body.dark-theme .magic-fill-panel{background:var(--color-surface);border:1px solid var(--color-border)}body.dark-theme .magic-fill-panel .brush-size-slider{background:var(--color-border)}body.dark-theme .magic-fill-panel .brush-size-slider::-webkit-slider-thumb{background:var(--color-brand-primary);border-color:var(--color-surface)}body.dark-theme .magic-fill-panel .brush-size-slider::-moz-range-thumb{background:var(--color-brand-primary);border-color:var(--color-surface)}body.dark-theme .magic-fill-panel .prompt-textarea,body.dark-theme .magic-fill-panel .clear-btn{background:var(--color-background);border-color:var(--color-border);color:var(--color-text-primary)}@media (max-width: 768px){.magic-fill-panel{padding:16px;max-width:100%}.magic-fill-panel .action-buttons{flex-direction:column}.magic-fill-panel .clear-btn,.magic-fill-panel .apply-btn{width:100%}}.sticker-panel{padding:20px}.sticker-panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.sticker-panel-header-content{display:flex;align-items:center;gap:8px}.sticker-panel-title{margin:0;font-size:18px;font-weight:600}.sticker-weight-section{margin-bottom:24px}.sticker-weight-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.sticker-weight-label{font-size:14px;font-weight:500;color:#333}.sticker-weight-badge{background-color:#f3f4f6;border-radius:4px;padding:4px 8px;font-size:12px;font-weight:600;color:#333}.sticker-slider-container{position:relative;height:15px;margin-bottom:8px}.sticker-slider-track{position:absolute;top:50%;transform:translateY(-50%);left:0;width:100%;height:3px;background-color:#e5e7eb;border-radius:2px}.sticker-slider-fill{position:absolute;top:50%;transform:translateY(-50%);left:0;height:3px;background-color:var(--color-brand-secondary);border-radius:2px}.sticker-slider-marker{position:absolute;top:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;background-color:#d1d5db;cursor:pointer;z-index:1;transition:background-color .2s}.sticker-slider-marker.active{background-color:var(--color-brand-secondary)}.sticker-slider-marker:hover{transform:translate(-50%,-50%) scale(1.2)}.sticker-slider-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:50%;background-color:var(--color-brand-secondary);cursor:pointer;box-shadow:0 2px 4px #0003;z-index:2}.sticker-slider-labels{display:flex;justify-content:space-between;font-size:11px;color:#6b7280}.sticker-step-labels{display:flex;justify-content:space-between;margin-top:8px}.sticker-step-label{background:none;border:none;padding:4px 0;font-size:11px;color:var(--color-text-secondary);cursor:pointer;transition:color .2s;white-space:nowrap}.sticker-step-label:hover{color:var(--color-text-primary)}.sticker-step-label.active{color:var(--color-brand-secondary);font-weight:600}.sticker-color-section{margin-bottom:24px}.sticker-color-label{display:block;font-size:14px;font-weight:500;color:#333;margin-bottom:12px}.sticker-color-picker-container{display:flex;flex-wrap:wrap;gap:8px}.sticker-color-picker-btn{width:35px;height:35px;border-radius:4px;border:none;cursor:pointer;background-image:linear-gradient(45deg,red,#ff7f00,#ff0,#0f0,#00f,indigo,#9400d3);background-size:200% 200%;background-position:center;box-shadow:0 1px 3px #0003;outline-offset:2px}.sticker-color-picker-btn.active{outline:2px solid #60a5fa}.sticker-color-swatch{width:35px;height:35px;border-radius:4px;cursor:pointer;box-shadow:0 1px 3px #0003;outline-offset:2px;border:none}.sticker-color-swatch.white{border:1px solid var(--color-brand-secondary)}.sticker-color-swatch.selected{outline:2px solid #60a5fa}.sticker-create-btn{width:100%;padding:12px;background-color:var(--color-brand-primary);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600;font-size:14px;margin-top:8px;transition:background-color .2s}.sticker-create-btn:hover:not(:disabled){background-color:var(--color-brand-dark)}.sticker-create-btn:disabled{background-color:#9ca3af;cursor:not-allowed}.sticker-button-group{display:flex;flex-direction:column;gap:8px;margin-top:8px}.sticker-button-group .sticker-create-btn{margin-top:0}.sticker-clear-btn{width:100%;padding:10px;background-color:transparent;color:var(--color-text-secondary);border:1px solid var(--color-border);border-radius:8px;cursor:pointer;font-weight:500;font-size:14px;transition:all .2s}.sticker-clear-btn:hover:not(:disabled){background-color:var(--color-surface-hover);border-color:var(--color-text-secondary)}.sticker-clear-btn:disabled{opacity:.5;cursor:not-allowed}.sticker-empty-state{padding:16px;background-color:#fff3cd;border-radius:8px;color:#856404}.sticker-empty-state p{margin:0;font-size:14px}.sticker-divider{border:none;border-top:1px solid #e5e7eb;margin:24px 0}.sticker-remove-bg-section{margin-bottom:24px}.sticker-checkbox-label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333;cursor:pointer;-webkit-user-select:none;user-select:none}.sticker-checkbox{width:18px;height:18px;cursor:pointer;accent-color:var(--color-brand-secondary)}.sticker-checkbox-help{margin:8px 0 0 26px;font-size:12px;color:#6b7280;font-style:italic}body.dark-theme .sticker-weight-label,body.dark-theme .sticker-color-label{color:var(--color-text-primary)}body.dark-theme .sticker-weight-badge{background-color:var(--color-surface);color:var(--color-text-primary)}body.dark-theme .sticker-slider-track{background-color:var(--color-border)}body.dark-theme .sticker-slider-labels{color:var(--color-text-secondary)}body.dark-theme .sticker-empty-state{background-color:#fff3cd1a;color:var(--color-text-secondary)}.sticker-tip{margin:16px 0 0;padding:10px 12px;font-size:12px;color:var(--color-text-secondary);background-color:var(--color-surface-hover, #f9fafb);border-radius:6px;line-height:1.4}body.dark-theme .sticker-tip{background-color:var(--color-surface)}.add-image-panel{padding:16px}.upload-section{margin-bottom:20px}.upload-area{border:2px dashed var(--color-border);border-radius:var(--radius-lg);padding:40px 20px;text-align:center;transition:all .2s ease;margin-top:8px}.upload-area.drag-active{border-color:var(--color-brand-primary);background:var(--color-brand-light)}.upload-content{display:flex;flex-direction:column;align-items:center;gap:12px}.upload-icon{font-size:48px;color:var(--color-text-secondary)}.upload-content h5{margin:0;font-size:18px;color:var(--color-text-primary)}.upload-content p{margin:0;color:var(--color-text-secondary)}.browse-btn{padding:10px 20px;background:var(--color-brand-primary);color:#fff;border:none;border-radius:var(--radius-md);font-weight:600;cursor:pointer;transition:all .2s ease}.browse-btn:hover:not(:disabled){background:var(--color-brand-dark);color:#fff}.browse-btn:disabled{opacity:.6;cursor:not-allowed}.upload-hint{font-size:12px;color:var(--color-text-light)}.stock-images-section{margin-bottom:20px}.stock-images-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:8px}.stock-image-item{display:flex;flex-direction:column;gap:8px;padding:8px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background);cursor:pointer;transition:all .2s ease}.stock-image-item:hover{background:var(--color-surface);border-color:var(--color-brand-primary)}.stock-image-preview{width:100%;height:80px;border-radius:var(--radius-sm);overflow:hidden;background:var(--color-surface);display:flex;align-items:center;justify-content:center}.stock-image-preview img{width:100%;height:100%;object-fit:cover}.stock-image-label{font-size:12px;text-align:center;color:var(--color-text-primary)}.library-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.browse-library-btn{padding:6px 12px;background:var(--color-brand-primary);color:#fff;border:none;border-radius:var(--radius-sm);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease}.browse-library-btn:hover{background:var(--color-brand-dark);color:#fff}.full-library-section{margin-top:12px}.library-controls{margin-bottom:16px}.search-input{width:100%;padding:8px 12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-background);color:var(--color-text-primary);font-size:14px}.search-input:focus{outline:none;border-color:var(--color-brand-primary)}.tab-buttons{display:flex;gap:8px}.tab-btn{padding:6px 12px;background:var(--color-surface);color:var(--color-text-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:12px;cursor:pointer;transition:all .2s ease}.tab-btn.active{background:var(--color-brand-primary);color:#fff;border-color:var(--color-brand-primary)}.tab-btn:hover:not(.active){background:var(--color-background);border-color:var(--color-brand-primary)}.library-assets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;max-height:400px;overflow-y:auto;margin-bottom:12px}.library-asset-card{display:flex;flex-direction:column;gap:8px;padding:8px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background);transition:all .2s ease}.library-asset-card:hover{background:var(--color-surface);border-color:var(--color-brand-primary)}.asset-preview{width:100%;height:80px;border-radius:var(--radius-sm);overflow:hidden;background:var(--color-surface);display:flex;align-items:center;justify-content:center}.asset-preview img{width:100%;height:100%;object-fit:cover}.asset-placeholder{display:flex;align-items:center;justify-content:center;color:var(--color-text-light)}.asset-info{text-align:center}.asset-title{font-size:11px;font-weight:600;color:var(--color-text-primary);margin:0 0 4px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.asset-popularity{font-size:10px;color:var(--color-text-light);margin:0}.asset-actions{display:flex;justify-content:center}.add-btn{padding:4px 8px;background:var(--color-brand-primary);color:#fff;border:none;border-radius:var(--radius-sm);font-size:10px;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:4px}.add-btn:hover{background:var(--color-brand-dark);color:#fff}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;color:var(--color-text-secondary)}.loading-spinner{width:24px;height:24px;border:2px solid var(--color-border);border-top:2px solid var(--color-brand-primary);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:12px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;color:var(--color-text-secondary)}.empty-icon{font-size:48px;margin-bottom:12px}.empty-state h4{margin:0 0 8px;color:var(--color-text-primary)}.empty-state p{margin:0;font-size:14px}.library-stats{text-align:center;padding:8px;background:var(--color-surface);border-radius:var(--radius-sm);margin-top:12px}.library-stats p{margin:0;font-size:12px;color:var(--color-text-secondary)}body.dark-theme .upload-area{border-color:var(--color-border)}body.dark-theme .upload-area.drag-active{border-color:var(--color-brand-primary);background:var(--color-brand-light)}body.dark-theme .upload-icon{color:var(--color-text-secondary)}body.dark-theme .upload-content h5{color:var(--color-text-primary)}body.dark-theme .upload-content p{color:var(--color-text-secondary)}body.dark-theme .stock-image-item{background:var(--color-surface);border-color:var(--color-border)}body.dark-theme .stock-image-item:hover{background:var(--color-background);border-color:var(--color-brand-primary)}body.dark-theme .stock-image-preview{background:var(--color-background)}body.dark-theme .stock-image-label{color:var(--color-text-primary)}@media (max-width: 768px){.stock-images-grid{grid-template-columns:1fr}.upload-area{padding:30px 15px}.upload-icon{font-size:36px}.add-image-panel{padding:12px}}@media (max-width: 480px){.upload-area{padding:20px 10px}.upload-icon{font-size:32px}.upload-content h5{font-size:16px}}.generate-panel{display:flex;flex-direction:column;height:100%;background:var(--color-background);position:relative;padding:0}.generate-panel .panel-content{flex:1;overflow-y:auto;padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-lg)}.generate-panel .generation-loader-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#ffffffe6;display:flex;align-items:center;justify-content:center;z-index:100;border-radius:var(--radius-sm)}body.dark-theme .generate-panel .generation-loader-overlay{background:#111827e6}.generate-panel h4{margin:0 0 var(--spacing-sm) 0;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.generate-panel .prompt-section{display:flex;flex-direction:column}.generate-panel .prompt-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-sm)}.generate-panel .prompt-header h4{margin:0}.generate-panel .prompt-input{width:100%;min-height:80px;padding:var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text-primary);font-size:var(--font-size-sm);font-family:inherit;resize:vertical;transition:border-color .2s ease,box-shadow .2s ease}.generate-panel .prompt-input:focus{outline:none;border-color:var(--color-brand-primary);box-shadow:0 0 0 3px #008dd526}.generate-panel .prompt-input::placeholder{color:var(--color-text-light)}.generate-panel .prompt-input.prompt-input-error{border-color:var(--color-brand-secondary);box-shadow:0 0 0 3px #e43f6f26}.generate-panel .prompt-input.prompt-input-error:focus{border-color:var(--color-brand-secondary);box-shadow:0 0 0 3px #e43f6f40}.generate-panel .suggestions-section{display:flex;flex-direction:column}.generate-panel .suggestions-list{display:flex;flex-direction:column;gap:var(--spacing-xs)}.generate-panel .suggestion-chip{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;transition:all .2s ease;text-align:left;width:100%}.generate-panel .suggestion-chip:hover{border-color:var(--color-brand-primary);background:var(--bg-hover)}.generate-panel .suggestion-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;background:var(--color-brand-primary);color:#fff;border-radius:var(--radius-full);font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);flex-shrink:0}.generate-panel .suggestion-text{font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.generate-panel .style-selection{display:flex;flex-direction:column}.generate-panel .style-grid-new{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-sm)}.generate-panel .style-card-new{position:relative;aspect-ratio:4 / 3;border-radius:var(--radius-sm);border:2px solid transparent;cursor:pointer;overflow:hidden;background-size:cover;background-position:center;background-color:var(--color-surface);transition:all .2s ease}.generate-panel .style-card-new:hover{border-color:var(--color-brand-primary);box-shadow:0 4px 12px var(--color-shadow)}.generate-panel .style-card-new.selected{border-color:var(--color-brand-primary);box-shadow:0 0 0 3px #008dd54d}.generate-panel .style-card-overlay{position:absolute;bottom:0;left:0;right:0;padding:var(--spacing-md) var(--spacing-sm) var(--spacing-sm);background:linear-gradient(to top,#000000b3,#0000);display:flex;align-items:flex-end}.generate-panel .style-card-name{color:#fff;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);text-shadow:0 1px 2px rgba(0,0,0,.5)}.generate-panel .no-styles{grid-column:1 / -1;text-align:center;padding:var(--spacing-xl);color:var(--color-text-light);font-size:var(--font-size-sm)}.generate-panel .loading{text-align:center;padding:var(--spacing-lg);color:var(--color-text-light);font-size:var(--font-size-sm)}.generate-panel .generate-button-container{position:sticky;bottom:0;background:var(--color-surface);padding:var(--spacing-md) var(--spacing-lg);border-top:1px solid var(--color-border);flex-shrink:0;z-index:10}.generate-panel .generate-button{width:100%;padding:var(--spacing-md) var(--spacing-lg);background:var(--color-brand-primary);color:#fff;border:none;border-radius:var(--radius-sm);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all .2s ease}.generate-panel .generate-button:hover:not(:disabled){background:var(--color-brand-dark)}.generate-panel .generate-button:disabled{background:var(--color-border);cursor:not-allowed;transform:none}body.dark-theme .generate-panel{background:var(--color-surface)}body.dark-theme .generate-panel .generate-button-container,body.dark-theme .generate-panel .prompt-input,body.dark-theme .generate-panel .suggestion-chip{background:var(--color-background);border-color:var(--color-border)}body.dark-theme .generate-panel .suggestion-chip:hover{background:var(--bg-hover)}body.dark-theme .generate-panel .style-card-new{background-color:var(--color-background)}@media (max-width: 480px){.generate-panel .style-grid-new{grid-template-columns:1fr}.generate-panel .panel-content{padding:var(--spacing-md)}}.panel-header{padding:16px;border-bottom:1px solid var(--color-border);background:var(--color-surface)}.panel-header h3{margin:0 0 4px;font-size:18px;font-weight:600;color:var(--color-text-primary)}.panel-header p{margin:0;font-size:14px;color:var(--color-text-secondary)}.panel-content{flex:1;overflow-y:auto}.panel-footer{padding:16px;border-top:1px solid var(--color-border);background:var(--color-surface)}.feedback-btn{display:flex;align-items:center;gap:8px;padding:10px 20px;background:var(--color-brand-primary);color:#fff;border:none;border-radius:var(--radius-md);font-weight:600;cursor:pointer;transition:all .2s ease;margin:0 auto}.feedback-btn:hover{background:var(--color-teal-dark)}.support-quick-actions{margin-top:20px}body.dark-theme .panel-header{background:var(--color-surface);border-bottom-color:var(--color-border)}body.dark-theme .panel-header h3{color:var(--color-text-primary)}body.dark-theme .panel-header p{color:var(--color-text-secondary)}body.dark-theme .panel-footer{background:var(--color-surface);border-top-color:var(--color-border)}@media (max-width: 768px){.panel-header,.panel-footer{padding:12px}}html{font-family:"Source Sans 3",-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}body{margin:0;padding:0;font-family:"Source Sans 3",-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5;color:var(--color-text-primary);background:var(--color-background)}