body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.canvas-container{align-items:center;background:#f3f4f6;border-radius:12px;display:flex;height:400px;justify-content:center;margin-bottom:25px;overflow:hidden;width:100%}.preview-canvas{background:#fff;max-height:100%;max-width:100%;object-fit:contain}.gradient-editor{margin-top:20px}.gradient-preview{background:linear-gradient(90deg,#6366f1,#8b5cf6);border-radius:8px;height:80px;margin-bottom:15px}.control-group{display:flex;flex-direction:column;gap:8px;margin-bottom:15px}.control-group label{font-size:.9rem;font-weight:500}.control-group input[type=range],.control-group select{border:1px solid #e5e7eb;border-radius:6px;padding:8px}.gradient-stops{margin:15px 0}.gradient-stop{align-items:center;display:flex;gap:10px;margin-bottom:10px}.gradient-stop input[type=color]{border:none;border-radius:6px;cursor:pointer;height:40px;width:40px}.gradient-stop input[type=range]{flex:1 1}.gradient-stop span{font-size:.9rem;min-width:40px;text-align:center}.remove-stop-btn{align-items:center;background:#ef4444;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:1.2rem;height:30px;justify-content:center;width:30px}.remove-stop-btn:disabled{background:#9ca3af;cursor:not-allowed}.add-stop-btn{align-items:center;background:#10b981;border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;gap:5px;padding:10px 15px}.add-stop-btn:disabled{background:#9ca3af;cursor:not-allowed}.pattern-editor{margin-top:20px}.pattern-selector{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(3,1fr);margin-bottom:15px}.pattern-option{border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;padding:15px;text-align:center;transition:all .3s ease}.pattern-option.active,.pattern-option:hover{border-color:#6366f1;transform:translateY(-2px)}.pattern-option.active{background:#6366f11a}.pattern-preview{border-radius:6px;height:80px;margin-bottom:10px}.pattern-dots{background-image:radial-gradient(circle at center,#6366f1 20%,#0000 0);background-image:radial-gradient(circle at center,var(--pattern-color,#6366f1) 20%,#0000 20%);background-position:0 0}.selected-pattern-info{background:#f3f4f6;border-radius:6px;padding:10px;text-align:center}.selected-pattern-info p{font-size:.9rem;margin:0}.demo-gallery{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}.demo-thumb{border:1px solid #e5e7eb;border-radius:8px;cursor:pointer;overflow:hidden;text-align:center;transition:all .3s ease}.demo-thumb:hover{box-shadow:0 10px 25px -5px #0000001a;transform:translateY(-5px)}.demo-thumb-img{align-items:center;background:#f3f4f6;display:flex;height:100px;justify-content:center;overflow:hidden}.subject-preview{background:#fff;border:3px solid #6366f1;border:3px solid var(--subject-color,#6366f1);border-radius:50%;height:60px;position:relative;width:60px}.subject-preview:after{color:#6366f1;color:var(--subject-color,#6366f1);content:"Sample";font-size:.7rem;font-weight:500;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);white-space:nowrap}.pattern-preview{height:100%;width:100%}.pattern-stripes{background:repeating-linear-gradient(90deg,#0000,#0000 10px,#6366f1 0,#6366f1 20px);background:repeating-linear-gradient(90deg,#0000,#0000 10px,var(--pattern-color,#6366f1) 10px,var(--pattern-color,#6366f1) 20px)}.pattern-dots{background:radial-gradient(circle,#6366f1 2px,#0000 0);background:radial-gradient(circle,var(--pattern-color,#6366f1) 2px,#0000 2px);background-size:20px 20px}.pattern-grid{background:linear-gradient(90deg,#6366f1 1px,#0000 0),linear-gradient(180deg,#6366f1 1px,#0000 0);background:linear-gradient(to right,var(--pattern-color,#6366f1) 1px,#0000 1px),linear-gradient(to bottom,var(--pattern-color,#6366f1) 1px,#0000 1px);background-size:20px 20px}.demo-thumb span{display:block;font-size:.9rem;font-weight:500;padding:8px}*,:after,:before{box-sizing:border-box;margin:0;padding:0}:root{--primary:#6366f1;--primary-dark:#4f46e5;--secondary:#f3f4f6;--dark:#1f2937;--light:#fff;--gray:#9ca3af;--success:#10b981;--border-radius:12px;--shadow:0 10px 25px -5px #0000001a;--transition:all 0.3s ease}*{box-sizing:border-box;margin:0;padding:0}body{background-color:#f9fafb;color:#1f2937;color:var(--dark);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6}.App{margin:0 auto;max-width:1200px;padding:20px}.app-header{background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-radius:16px;box-shadow:0 10px 25px -5px #0000000d,inset 0 -1px 0 #0000000d;margin-bottom:40px;overflow:hidden;padding-bottom:20px;position:relative;text-align:center}.header-content{position:relative;z-index:2}.logo-container{align-items:center;display:flex;flex-direction:column;gap:20px;justify-content:center}.logo-image{filter:drop-shadow(0 5px 15px rgba(99,102,241,.2));height:90px;object-fit:contain;width:auto}.header-text h1{font-family:Inter,Segoe UI,system-ui,sans-serif;font-size:3.2rem;font-weight:800;letter-spacing:-.5px;margin-bottom:12px;text-transform:uppercase}.gradient-text{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#6366f1,#8b5cf6 50%,#ec4899);-webkit-background-clip:text;background-clip:text;position:relative}.fill-text{color:#1f2937;position:relative}.tagline{color:#6b7280;font-size:1.2rem;font-weight:400;letter-spacing:.3px;line-height:1.6;margin:0 auto;max-width:400px;position:relative}.tagline:after{background:linear-gradient(90deg,#6366f1,#8b5cf6);border-radius:3px;bottom:-15px;content:"";height:3px;left:50%;position:absolute;transform:translateX(-50%);width:40px}.header-decoration{bottom:0;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;z-index:1}.decoration-circle{border-radius:50%;filter:blur(25px);opacity:.4;position:absolute}.circle-1{animation:float 15s ease-in-out infinite;background:linear-gradient(135deg,#6366f1,#6366f199 70%);height:200px;right:-50px;top:-50px;width:200px}.circle-2{animation:float 12s ease-in-out infinite;animation-delay:1s;background:linear-gradient(135deg,#8b5cf6,#8b5cf699 70%);bottom:-30px;height:150px;left:10%;width:150px}.circle-3{animation:float 18s ease-in-out infinite;animation-delay:2s;background:linear-gradient(135deg,#ec4899,#ec489999 70%);height:120px;left:-30px;top:30%;width:120px}@keyframes float{0%,to{transform:translateY(0) translateX(0)}50%{transform:translateY(-10px) translateX(10px)}}@media (max-width:768px){.app-header{margin-bottom:30px;padding-bottom:30px}.logo-image{height:70px}.header-text h1{font-size:2.5rem}.tagline{font-size:1.1rem;padding:0 20px}.circle-1{height:120px;right:-30px;top:-30px;width:120px}.circle-2{bottom:-20px;height:100px;left:5%;width:100px}.circle-3{height:80px;left:-20px;top:20%;width:80px}}.app-container{grid-gap:30px;display:grid;gap:30px;grid-template-columns:1fr 1.2fr}@media (max-width:900px){.app-container{grid-template-columns:1fr}}.controls-panel{height:-webkit-fit-content;height:fit-content}.controls-panel,.preview-panel{background:#fff;background:var(--light);border-radius:12px;border-radius:var(--border-radius);box-shadow:0 10px 25px -5px #0000001a;box-shadow:var(--shadow);padding:25px}.preview-panel{display:flex;flex-direction:column}.control-section{margin-bottom:30px}.control-section h2{align-items:center;border-bottom:1px solid #f3f4f6;border-bottom:1px solid var(--secondary);display:flex;font-size:1.2rem;font-weight:600;gap:10px;margin-bottom:20px;padding-bottom:10px}.control-section h2 i{color:#6366f1;color:var(--primary)}.upload-area{border:2px dashed #9ca3af;border:2px dashed var(--gray);border-radius:12px;border-radius:var(--border-radius);padding:30px;text-align:center;transition:all .3s ease;transition:var(--transition)}.upload-area:hover{border-color:#6366f1;border-color:var(--primary)}.file-input-label{align-items:center;background:#6366f1;background:var(--primary);border:none;border-radius:8px;color:#fff;cursor:pointer;display:inline-flex;font-weight:600;gap:8px;padding:12px 24px;transition:all .3s ease;transition:var(--transition)}.file-input-label:hover{background:#4f46e5;background:var(--primary-dark);transform:translateY(-2px)}.preview-filename{color:#10b981;color:var(--success);font-weight:500;margin-top:15px}.bg-type-selector{grid-gap:10px;display:grid;gap:10px;grid-template-columns:repeat(2,1fr);margin-bottom:25px}.bg-type-selector button{align-items:center;background:#fff;border:2px solid #f3f4f6;border:2px solid var(--secondary);border-radius:8px;cursor:pointer;display:flex;flex-direction:column;gap:8px;padding:15px;text-align:center;transition:all .3s ease;transition:var(--transition)}.bg-type-selector button.active,.bg-type-selector button:hover{border-color:#6366f1;border-color:var(--primary)}.bg-type-selector button.active{background:#6366f11a}.bg-type-selector button i{color:#6366f1;color:var(--primary);font-size:1.5rem}.color-controls{margin-top:20px}.color-picker-container{display:flex;flex-direction:column;gap:15px}.color-picker-container input[type=color]{-webkit-appearance:none;border:none;border-radius:8px;cursor:pointer;height:40px;width:100%}.slider-container{display:flex;flex-direction:column;gap:8px}.slider-container label{font-size:.9rem;font-weight:500}.slider-container input[type=range]{-webkit-appearance:none;background:#f3f4f6;background:var(--secondary);border-radius:4px;height:8px;outline:none;width:100%}.slider-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#6366f1;background:var(--primary);border-radius:50%;cursor:pointer;height:20px;width:20px}.export-btn{align-items:center;background:#10b981;background:var(--success);border:none;border-radius:8px;color:#fff;cursor:pointer;display:flex;font-size:1.1rem;font-weight:600;gap:10px;justify-content:center;padding:16px;transition:all .3s ease;transition:var(--transition);width:100%}.export-btn:hover{background:#0da271;transform:translateY(-2px)}.image-controls{margin-top:20px}.eyedropper-btn{background:#6366f1;border:none;border-radius:5px;color:#fff;cursor:pointer;padding:8px 12px}.eyedropper-btn:hover{background:#4f46e5}
/*# sourceMappingURL=main.7ca3162a.css.map*/