*{box-sizing:border-box;margin:0;padding:0;font-family:Poppins,sans-serif}body,html{width:100%;height:100%;overflow-x:hidden;background-color:#f4f4f4}body{align-items:center;padding:0;transition:background .3s ease-in-out}@media (prefers-color-scheme:dark){body{background-color:#222;color:#eee}.config-area,.editor,.gallery{background:#333;color:#fff}}header{width:100%;background:#f0f0f0;padding:8px 20px;text-align:left;font-size:1em;font-weight:700}.wrapper{display:flex;flex-direction:column;align-items:center;min-width:320px;height:100vh;margin:0 auto}.gallery,.wrapper{width:100%;padding:0}.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:10px;background:#fff;border-bottom:1px solid #f4f4f4;white-space:nowrap;scrollbar-width:thin}.gallery-item{display:flex;flex-direction:column;justify-content:center;align-items:center;background:#fff;padding:10px;cursor:pointer;transition:transform .3s ease-in-out,box-shadow .3s}.gallery-item img{height:80px;width:auto}.gallery-item:hover{transform:scale(1.1);box-shadow:0 4px 8px rgba(0,0,0,.2)}.gallery-item.selected{border-bottom:3px solid #3fb498}.gallery-item span,.gallery-label{display:block;margin-top:5px;font-size:.9em;text-align:center;color:#333}.container{display:flex;flex-wrap:wrap;width:100%;gap:0}.editor{flex:2;background:#fff;padding:20px;padding-bottom:0;text-align:center;justify-content:center}.editor,.svg-preview{display:flex;align-items:center;height:-moz-fit-content;height:fit-content;overflow:hidden}.svg-preview{position:relative;width:100%;max-height:-moz-fit-content;max-height:fit-content;flex-direction:column;justify-content:flex-start;flex:1;padding-top:20px}.svg-content{display:flex;justify-content:flex-start;align-items:center;padding-right:0}.svg-content,.svg-content svg{width:100%;height:-moz-fit-content;height:fit-content;padding-left:0}.svg-content svg{max-width:100%;max-height:calc(100vh - 250px);-o-object-fit:contain;object-fit:contain}.preview-filename{width:100%;height:-moz-fit-content;height:fit-content;text-align:left;font-size:1em;font-weight:500;margin-bottom:10px;color:#333;padding-left:20px;align-self:flex-start}.config-area{flex:1;background:#fff;padding:20px;overflow-y:auto;flex-grow:1}.color-info-banner{background:#f8fafc;border-left:4px solid #3fb498;margin:15px 0;border-radius:4px;overflow:hidden}.info-toggle{width:100%;display:flex;align-items:center;gap:8px;padding:12px;background:transparent;border:none;cursor:pointer;color:#3fb498;font-weight:500}.info-content{padding:0 12px 12px;display:flex;align-items:flex-start;gap:8px}.color-info-banner .material-icons{color:#3fb498;font-size:20px;flex-shrink:0}.color-info-banner p{margin:0;font-size:.85em;color:#64748b;line-height:1.4}.slide-enter-active,.slide-leave-active{transition:max-height .3s ease-out;max-height:200px;overflow:hidden}.slide-enter-from,.slide-leave-to{max-height:0}.color-controls{display:flex;flex-direction:column;gap:10px;margin-top:15px}.color-input-group{display:flex;align-items:center;gap:8px;height:30px;margin-left:8px}input[type=color]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:30px;height:30px;padding:0;border:2px solid rgba(0,0,0,.1);border-radius:50%;cursor:pointer;background:none}input[type=color]:hover{border-color:rgba(0,0,0,.2);box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.3),0 0 0 1px rgba(0,0,0,.2),0 0 8px rgba(0,0,0,.1);transform:scale(1.05)}input[type=color]:active{transform:scale(.95)}input[type=color]::-webkit-color-swatch-wrapper{padding:2px;border-radius:50%}input[type=color]::-webkit-color-swatch{border-radius:50%;border:none}input[type=color]::-moz-color-swatch{border:none;border-radius:50%}.hex-input{width:90px;height:30px;padding:0 8px;border:1px solid #ddd;border-radius:4px;font-size:14px;text-transform:uppercase}.hex-input:focus{outline:none;border-color:#3fb498;box-shadow:0 0 0 1px #3fb498}.hex-input.invalid{border-color:#f44}.element-control{display:flex;align-items:center;gap:8px;padding:4px 0;transition:background-color .2s}.element-control:hover{background-color:rgba(0,0,0,.05)}label{display:flex;align-items:center;gap:10px;font-size:.9em}.group-label{font-weight:500;color:#2c3e50}.group-color{border:2px solid #3fb498}.children-info{font-size:.8em;color:#666;margin-left:8px}.material-icons{color:#666;font-size:18px}.group-icon{width:18px;text-align:center;color:#3fb498;cursor:pointer}.buttons{margin-top:10px;display:flex;gap:10px;justify-content:flex-end}button{padding:10px 10px;border:none;cursor:pointer;border-radius:5px;transition:.3s;font-size:1em}.reset-btn{background:#ddd;font-size:1.6em;padding:0 15px}.reset-btn:hover{background:#ccc}.download-btn{background:#3fb498;color:#fff}.download-btn:hover{background:#2ea287}.shop-btn{background:#ddd;color:#666;padding:10px 10px;border:none;border-radius:5px;cursor:pointer;transition:.3s;font-size:1em;text-decoration:none;display:flex;align-items:center;gap:6px;justify-content:center;text-align:center}.shop-btn:hover{background:#cfcece}@media (max-width:768px){.wrapper{height:-moz-fit-content;height:fit-content}.container{flex-direction:column;height:auto}.config-area{width:100%}.color-info-banner{order:1;margin-top:20px}.info-toggle{padding:8px 12px}.editor{width:100%;height:auto;padding:10px;display:block;min-height:unset;overflow:visible}.gallery{display:flex;overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}.gallery-item{flex:0 0 auto;width:auto;min-width:80px}.gallery-item img{height:60px}.svg-content{width:100%;height:-moz-fit-content;height:fit-content}.svg-content svg{width:100%;height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain;display:block;aspect-ratio:auto;max-height:none}}@media (max-width:1400px){.svg-content{width:auto}}.how-to-container[data-v-487ba6c9]{width:100%;background:#fff;border-top:1px solid #e5e7eb;position:sticky;bottom:0;z-index:10;height:auto;overflow:visible}.how-to-toggle[data-v-487ba6c9]{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;background:#fff;border:none;cursor:pointer;transition:background-color .2s;color:#333}.how-to-toggle[data-v-487ba6c9]:hover{background-color:#f9fafb}.how-to-content[data-v-487ba6c9]{padding:16px;overflow:hidden}.steps-scroll[data-v-487ba6c9]{overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding-bottom:16px}.steps-wrapper[data-v-487ba6c9]{display:inline-flex;gap:16px;padding-right:16px;min-height:-moz-fit-content;min-height:fit-content}.step-card[data-v-487ba6c9]{flex:0 0 280px;background:#f8fafc;border-radius:8px;padding:16px;transition:transform .2s;white-space:normal}.step-card[data-v-487ba6c9]:hover{transform:scale(1.02)}.step-header[data-v-487ba6c9]{display:flex;align-items:center;gap:12px;margin-bottom:8px}.step-icon[data-v-487ba6c9]{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#dbeafe;color:#3fb498;border-radius:50%;flex-shrink:0}.step-icon .material-icons[data-v-487ba6c9]{font-size:24px;color:#3fb498}h3[data-v-487ba6c9]{font-size:1rem;font-weight:600;color:#1f2937;margin:0}p[data-v-487ba6c9]{font-size:.875rem;color:#4b5563;margin:0}.tip-box[data-v-487ba6c9]{margin-top:16px;padding:12px 16px;background:#dbeafe;border-radius:8px;display:flex;align-items:center;justify-content:center}.tip-box p[data-v-487ba6c9]{color:#1e40af;display:flex;align-items:center;gap:8px}.tip-box .material-icons[data-v-487ba6c9]{color:#3fb498;font-size:20px}.slide-enter-active[data-v-487ba6c9],.slide-leave-active[data-v-487ba6c9]{transition:all .3s ease;max-height:1000px}.slide-enter-from[data-v-487ba6c9],.slide-leave-to[data-v-487ba6c9]{max-height:0;opacity:0;overflow:hidden}@media (max-width:768px){.how-to-container[data-v-487ba6c9]{position:relative;order:-1;border-top:none;border-bottom:1px solid #e5e7eb}.steps-scroll[data-v-487ba6c9]{overflow-y:auto;white-space:normal}}.container[data-v-f899838e]{max-width:1200px;margin:0 auto}@media (max-width:768px){.container[data-v-f899838e]{padding:0 1rem}}.app-container{min-height:100vh;display:flex;flex-direction:column;background-color:#f4f4f4}.main-content{flex:1;display:flex;flex-direction:column;position:relative}::v-deep .editor{height:calc(100vh - 150px);overflow-y:auto}@media (min-width:769px){.main-content{display:flex;flex-direction:column}.how-to-container{order:2}}