.drop-zone{border:2px dashed var(--border-color);border-radius:var(--radius-md);padding:40px 20px;text-align:center;cursor:pointer;transition:all .2s;background:var(--bg-tool)}.drop-zone:hover{border-color:var(--accent-secondary);background:#0ea5e90d}.drop-zone svg{color:var(--accent-primary);margin-bottom:12px}.drop-zone p{margin:0;color:var(--text-primary)}.drop-zone p.text-muted{color:var(--text-muted);font-size:.9rem;margin-top:4px}.image-preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:10px;margin-top:20px}.image-thumb{aspect-ratio:1;background-size:cover;background-position:center;border-radius:var(--radius-md);position:relative;border:1px solid var(--border-color);overflow:hidden}.remove-thumb{position:absolute;top:4px;right:4px;width:24px;height:24px;padding:0;border:none;background:#ef4444e6;color:#fff;border-radius:50%;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}.image-thumb:hover .remove-thumb{opacity:1}.upload-section{margin-bottom:30px}.controls-section{background:var(--bg-tool);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:20px;margin-bottom:30px}.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:20px}.control-group{display:flex;flex-direction:column;gap:8px}.control-group label{color:var(--text-primary);font-weight:500;font-size:.95rem}.control-group select,.control-group input[type=color]{padding:10px;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-secondary);color:var(--text-primary);font-size:.95rem}.control-group select:disabled,.control-group input:disabled{opacity:.5;cursor:not-allowed}.slider-with-value{display:flex;gap:12px;align-items:center}.slider-with-value input[type=range]{flex:1}.slider-with-value span{min-width:40px;text-align:right;color:var(--text-secondary);font-size:.9rem}.color-picker-wrapper{display:flex;gap:10px;align-items:center}.color-picker-wrapper input[type=color]{width:50px;height:40px;padding:4px;cursor:pointer}.color-picker-wrapper span{color:var(--text-secondary);font-family:JetBrains Mono,monospace;font-size:.9rem}.custom-size-inputs{display:flex;gap:10px;align-items:center}.custom-size-inputs input{flex:1;padding:10px;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-secondary);color:var(--text-primary)}.custom-size-inputs span{color:var(--text-secondary)}.preview-section{background:var(--bg-tool);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:20px;margin-bottom:30px}.preview-section h3{margin:0 0 15px;color:var(--text-primary)}.canvas-wrapper{position:relative;background:var(--bg-secondary);border-radius:var(--radius-sm);overflow:auto;max-height:600px;display:flex;align-items:center;justify-content:center}.canvas-wrapper canvas{display:block;max-width:100%;max-height:100%;border-radius:var(--radius-sm)}.no-images-msg{color:var(--text-muted);font-size:.95rem;margin:0}.download-section{margin-bottom:30px}.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 24px;border:none;border-radius:var(--radius-md);font-weight:600;font-size:.95rem;cursor:pointer;transition:all .2s}.btn-primary{background:var(--accent-primary);color:#fff}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 16px #6c3ce14d}.btn:disabled{opacity:.5;cursor:not-allowed}.seo-content{margin-top:40px;padding-top:30px;border-top:1px solid var(--border-color)}.seo-content h2{color:var(--text-primary);margin-top:30px;margin-bottom:15px;font-size:1.3rem}.seo-content h4{color:var(--text-primary);margin:15px 0 8px}.seo-content p{color:var(--text-secondary);line-height:1.6;margin:10px 0}.seo-content ul{color:var(--text-secondary);line-height:1.8;padding-left:20px}.seo-content li{margin:8px 0}.faq-item{background:var(--bg-tool);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:15px;margin:15px 0}.faq-item h4{margin-top:0;color:var(--accent-primary)}.faq-item p{margin:10px 0 0}@media(max-width:768px){.settings-grid{grid-template-columns:1fr}.controls-section{padding:15px}.custom-size-inputs{flex-direction:column}.custom-size-inputs span{display:none}}
