@import"https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap";:root{color-scheme:light;font-family:Quicksand,ui-sans-serif,system-ui,sans-serif;line-height:1.5;--pink-100: #fff0f3;--pink-200: #ffe0e8;--pink-300: #ffc2d1;--pink-400: #ffb3c6;--pink-500: #ff8fab;--pink-600: #f76d9a;--pink-700: #e05585;--cream: #fff8f5;--cream-dark: #fce8e0;--lavender: #e8d5f5;--mint: #d5f5e3;--gold: #ffe6a7;--shadow-soft: 0 2px 12px rgba(247, 109, 154, .15);--shadow-card: 0 4px 24px rgba(247, 109, 154, .12);--radius: 16px;--radius-sm: 10px;--radius-xs: 8px}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:linear-gradient(135deg,#fff0f3,#fce4ec,#f8e8ff 60%,#fff0f3);color:#5a3040}@keyframes sparkle{0%,to{opacity:0;transform:scale(0) rotate(0)}50%{opacity:1;transform:scale(1) rotate(180deg)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes pulse-glow{0%,to{box-shadow:0 0 8px #f76d9a33}50%{box-shadow:0 0 20px #f76d9a66}}.sparkle-container{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:0}.sparkle{position:absolute;width:6px;height:6px;background:var(--pink-400);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);animation:sparkle 3s ease-in-out infinite}.app{position:relative;z-index:1;max-width:520px;margin:0 auto;padding:16px;min-height:100vh;display:flex;flex-direction:column;gap:16px}.header{text-align:center;padding:20px 16px 12px}.header h1{font-size:1.6rem;font-weight:700;color:var(--pink-700);letter-spacing:-.02em;margin-bottom:2px}.header p{font-size:.85rem;color:var(--pink-500);font-weight:500}.name-row{display:flex;align-items:center;gap:10px;background:#fff;border-radius:var(--radius);padding:10px 16px;box-shadow:var(--shadow-soft)}.name-row label{font-weight:600;font-size:.85rem;color:var(--pink-700);white-space:nowrap}.name-row input{flex:1;border:none;outline:none;font-family:inherit;font-size:.95rem;color:#5a3040;background:transparent;padding:4px 0}.name-row input::placeholder{color:var(--pink-300)}.preview-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-card);padding:20px 16px;display:flex;flex-direction:column;align-items:center;gap:12px;animation:pulse-glow 4s ease-in-out infinite}.preview-card .char-name{font-size:1.1rem;font-weight:700;color:var(--pink-700)}.preview-svg-wrap{width:200px;height:280px;animation:float 4s ease-in-out infinite}.preview-svg-wrap svg{width:100%;height:100%}.actions{display:flex;gap:10px}.btn{flex:1;padding:12px 16px;border:none;border-radius:var(--radius-sm);font-family:inherit;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:6px}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn-primary{background:linear-gradient(135deg,var(--pink-500),var(--pink-600));color:#fff;box-shadow:0 3px 12px #f76d9a4d}.btn-primary:hover{box-shadow:0 5px 16px #f76d9a66}.btn-secondary{background:var(--pink-100);color:var(--pink-700)}.btn-secondary:hover{background:var(--pink-200)}.btn-outline{background:#fff;color:var(--pink-600);border:2px solid var(--pink-300)}.btn-outline:hover{background:var(--pink-100);border-color:var(--pink-400)}.tabs{display:flex;gap:6px;overflow-x:auto;padding:2px;-webkit-overflow-scrolling:touch}.tab-btn{padding:8px 14px;border:2px solid transparent;border-radius:999px;background:#fff;font-family:inherit;font-size:.78rem;font-weight:600;color:var(--pink-500);cursor:pointer;white-space:nowrap;transition:all .2s;box-shadow:var(--shadow-soft)}.tab-btn:hover{background:var(--pink-100)}.tab-btn.active{background:linear-gradient(135deg,var(--pink-500),var(--pink-600));color:#fff;border-color:var(--pink-400)}.options-panel{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-card);padding:16px}.option-group{margin-bottom:14px}.option-group:last-child{margin-bottom:0}.option-group-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--pink-500);margin-bottom:8px}.option-swatches{display:flex;flex-wrap:wrap;gap:8px}.swatch-btn{padding:8px 14px;border:2px solid var(--pink-200);border-radius:var(--radius-xs);background:var(--cream);font-family:inherit;font-size:.8rem;font-weight:500;color:#5a3040;cursor:pointer;transition:all .15s}.swatch-btn:hover{border-color:var(--pink-400);background:var(--pink-100)}.swatch-btn.selected{border-color:var(--pink-600);background:var(--pink-100);color:var(--pink-700);box-shadow:0 0 0 2px #f76d9a33}.color-swatch{width:34px;height:34px;border-radius:50%;border:3px solid var(--pink-200);cursor:pointer;transition:all .15s;position:relative}.color-swatch:hover{transform:scale(1.1);border-color:var(--pink-400)}.color-swatch.selected{border-color:var(--pink-600);box-shadow:0 0 0 3px #f76d9a40;transform:scale(1.1)}.color-swatch.selected:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 4px #0003}.toggle-row{display:flex;flex-wrap:wrap;gap:8px}.toggle-btn{padding:8px 14px;border:2px solid var(--pink-200);border-radius:var(--radius-xs);background:var(--cream);font-family:inherit;font-size:.8rem;font-weight:500;color:#5a3040;cursor:pointer;transition:all .15s}.toggle-btn:hover{border-color:var(--pink-400);background:var(--pink-100)}.toggle-btn.on{border-color:var(--pink-600);background:linear-gradient(135deg,var(--pink-100),var(--pink-200));color:var(--pink-700)}.gallery-section{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-card);padding:16px}.gallery-section h3{font-size:.95rem;font-weight:700;color:var(--pink-700);margin-bottom:12px;display:flex;align-items:center;gap:6px}.gallery-empty{text-align:center;padding:24px 16px;color:var(--pink-400);font-size:.85rem;font-weight:500}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}.gallery-card{background:var(--cream);border-radius:var(--radius-sm);padding:12px 8px 10px;text-align:center;border:2px solid var(--pink-200);cursor:pointer;transition:all .2s;position:relative}.gallery-card:hover{border-color:var(--pink-400);transform:translateY(-2px);box-shadow:var(--shadow-soft)}.gallery-card .gc-name{font-size:.8rem;font-weight:700;color:var(--pink-700);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gallery-card .gc-svg{width:80px;height:112px;margin:0 auto}.gallery-card .gc-svg svg{width:100%;height:100%}.gallery-card .gc-delete{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;border:none;background:var(--pink-500);color:#fff;font-size:.7rem;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s}.gallery-card:hover .gc-delete{opacity:1}.gallery-card .gc-load{display:block;width:100%;margin-top:6px;padding:4px;border:1px solid var(--pink-300);border-radius:6px;background:#fff;font-family:inherit;font-size:.7rem;font-weight:600;color:var(--pink-600);cursor:pointer}.gallery-card .gc-load:hover{background:var(--pink-100)}.footer{text-align:center;padding:8px 0 16px;font-size:.75rem;color:var(--pink-400);font-weight:500}@media(max-width:480px){.app{padding:10px;gap:12px}.header h1{font-size:1.3rem}.actions{flex-direction:column}.gallery-grid{grid-template-columns:repeat(2,1fr)}}