*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(180deg,#fff 0% 100%);color:#111827}.app-root{min-height:100vh;display:flex;align-items:stretch;justify-content:center;padding:0}.editor{position:relative;width:100%;max-width:980px;background:linear-gradient(180deg,#1b1b1b 5%,#fff);border-radius:24px;box-shadow:0 24px 60px #0206171f;padding:32px 32px 64px;border:1px solid rgba(2,6,23,.06);min-height:100vh}.editor header,.editor .preview,.editor .category-bar,.editor .editor-grid{opacity:0;transform:translateY(8px) scale(.995);will-change:transform,opacity}.editor.is-loaded header,.editor.is-loaded .preview,.editor.is-loaded .category-bar,.editor.is-loaded .editor-grid{animation:fadeUp .48s cubic-bezier(.2,.9,.2,1) both;animation-delay:var(--enter-delay, 0ms)}.editor.is-loaded header{--enter-delay: 0ms}.editor.is-loaded .preview{--enter-delay: 60ms}.editor.is-loaded .category-bar{--enter-delay: .12s}.editor.is-loaded .editor-grid{--enter-delay: .18s}@keyframes fadeUp{0%{opacity:0;transform:translateY(8px) scale(.995)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.editor header,.editor .preview,.editor .category-bar,.editor .editor-grid{opacity:1!important;transform:none!important;animation:none!important}}.preview{display:flex;align-items:center;justify-content:center;gap:20px;padding:8px 0 12px;position:relative;background:transparent;z-index:auto}.preview-left{display:flex;flex-direction:column;align-items:center;gap:10px;position:relative}.preview-avatar:hover{transform:translateY(-6px);box-shadow:0 40px 100px #02061738}.preview-category{font-size:13px;color:#fff;background:#141414f1;box-shadow:0 8px 24px #6366f11f;padding:6px 10px;border-radius:9999px;font-weight:700;text-transform:capitalize;letter-spacing:.02em}.preview-username{font-size:20px;font-weight:800;color:#111827;letter-spacing:-.01em;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:420px){.preview-username{font-size:16px}}.controls{margin-top:6px}.section{margin-bottom:12px}.section h3{font-size:13px;margin:0 0 8px;display:flex;gap:8px;align-items:center;color:#111827}.options-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px}.options-row::-webkit-scrollbar{height:8px}.option-button{padding:8px 12px;border-radius:9999px;background:#f3f4f6;border:none;font-size:13px;white-space:nowrap;cursor:pointer;transition:transform .08s ease,box-shadow .08s ease}.option-button.selected{background:linear-gradient(90deg,#6366f1,#06b6d4);color:#fff;box-shadow:0 8px 24px #6366f11f;transform:translateY(-2px)}.editor-cats{display:flex;gap:8px;padding:8px 0 10px;overflow-x:auto}.icon-btn{width:44px;height:44px;min-width:44px;border-radius:12px;border:none;background:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 14px #0206170f;cursor:pointer;position:relative;transition:transform .08s ease,box-shadow .08s ease}.icon-btn:active{transform:translateY(2px) scale(.98)}.icon-btn:focus-visible{outline:3px solid rgba(99,102,241,.18);outline-offset:3px}.icon-btn svg{width:20px;height:20px;color:#374151;opacity:.9}.icon-btn.selected{background:linear-gradient(90deg,#6366f1,#06b6d4)}.icon-btn.selected svg{color:#fff}.profile-chip{display:flex;gap:8px;align-items:center;padding:6px 8px;border-radius:10px;background:linear-gradient(90deg,#111827,#374151);color:#fff;font-weight:700;cursor:pointer;border:none;transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease;-webkit-tap-highlight-color:transparent}.profile-chip:active{transform:translateY(2px) scale(.98);box-shadow:0 4px 14px #0206171f inset;opacity:.98}.profile-chip:focus-visible{outline:3px solid rgba(99,102,241,.28);outline-offset:3px}.profile-avatar{width:28px;height:28px;border-radius:6px;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #02061714;border:1px solid rgba(255,255,255,.08)}.profile-name{font-size:13px;color:#fff;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:110px}@media(max-width:420px){.profile-name{max-width:80px}}.avatar-style-rail{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;min-width:56px;padding:4px;background:#fff;border-radius:16px;box-shadow:0 16px 40px #0206171f;border:1px solid rgba(2,6,23,.06);z-index:220;pointer-events:auto}.avatar-style-btn{width:40px;height:40px;border-radius:10px;border:none;background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease}.avatar-style-btn:active{transform:translateY(1px) scale(.98)}.avatar-style-icon{width:28px;height:28px;border-radius:9999px;display:flex;align-items:center;justify-content:center}.avatar-style-icon.circle{background:linear-gradient(90deg,#6366f1,#06b6d4);color:#fff;box-shadow:0 8px 20px #6366f11f}.avatar-style-icon.transparent{background:transparent;color:#374151;border:1px solid rgba(2,6,23,.06);box-shadow:none}.avatar-style-btn.selected .avatar-style-icon.transparent{background:#0206170a}.avatar-style-btn.selected .avatar-style-icon.circle{box-shadow:0 12px 30px #6366f12e;transform:translateY(-2px)}@media(max-width:420px){.avatar-style-rail{right:8px;transform:translateY(-50%) scale(.95);padding:6px}}@keyframes vibratePulse{0%{transform:translateY(0) scale(1);box-shadow:0 4px 12px #02061714}30%{transform:translateY(-4px) scale(1.03);box-shadow:0 18px 40px #0206171f}to{transform:translateY(0) scale(1);box-shadow:0 4px 12px #02061714}}.vibrate-fallback{animation:vibratePulse .22s cubic-bezier(.2,.9,.2,1)}.editor-grid{max-height:45vh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:24px}.premium-badge{position:absolute;right:4px;top:3px;background:linear-gradient(135deg,#f97316,#f59e0b,#fb923c);color:#fff;border-radius:9999px;padding:6px;font-size:11px;font-weight:700;box-shadow:0 8px 24px #f9731629;display:flex;gap:6px;align-items:center;justify-content:center;text-transform:uppercase;letter-spacing:.02em}.premium-badge .premium-icon,.premium-badge svg{width:8px;height:8px;color:#fff}.premium-label{font-size:6px;color:#fff;font-weight:700}.swatch{width:34px;height:34px;border-radius:9999px;border:2px solid #fff;box-shadow:0 2px 6px #02061714;cursor:pointer;flex:0 0 auto}.swatch.selected{outline:3px solid #6366f1;outline-offset:3px}.actions{display:flex;gap:8px;margin-top:12px}.primary-btn{flex:1;padding:12px 14px;border-radius:12px;border:none;background:linear-gradient(90deg,#6366f1,#06b6d4);color:#fff;font-weight:700;box-shadow:0 10px 30px #6366f11f;cursor:pointer}.secondary-btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;padding:12px;border-radius:12px;background:#fff;border:1px solid #e6edf3;cursor:pointer;min-width:96px;transition:transform .08s ease,box-shadow .08s ease}.secondary-btn .btn-label{font-weight:700;font-size:14px;color:#111827}.secondary-btn:active{transform:translateY(2px) scale(.996);box-shadow:inset 0 2px 6px #0206170a}.secondary-btn:focus-visible{outline:3px solid rgba(99,102,241,.18);outline-offset:3px}.store{padding-bottom:6px}.category-bar{display:flex;gap:8px;padding:10px 0;overflow-x:auto}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding-top:12px;padding-bottom:24px;margin-bottom:0}.grid-item{position:relative;background:linear-gradient(180deg,#fff,#fbfdff);border-radius:20px;border:1px solid #eef2f7;padding:14px;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;transition:transform .18s cubic-bezier(.2,.9,.2,1),box-shadow .18s cubic-bezier(.2,.9,.2,1)}.grid-item:hover{transform:translateY(-6px);box-shadow:0 22px 60px #02061714}.grid-item.selected{box-shadow:0 6px 24px #6366f11f;transform:translateY(-4px);border-color:#6366f133}.grid-item.locked{cursor:pointer}.grid-item.locked:hover{transform:translateY(-6px);box-shadow:0 22px 60px #02061714}.item-thumb{width:72px;height:72px;border-radius:14px;border:2px solid #fff;box-shadow:0 6px 18px #02061714}.premium-sheet-overlay{position:fixed;inset:0;background:#02061747;display:flex;align-items:flex-end;justify-content:center;z-index:70;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.premium-sheet{width:100%;max-width:420px;margin:16px;border-radius:28px;overflow:hidden;box-shadow:0 24px 60px #0206172e;border:1px solid rgba(2,6,23,.06);background:linear-gradient(180deg,#fff,#fbfdff);transform:translateY(14px);animation:sheetUp .32s cubic-bezier(.2,.9,.2,1) both}.premium-sheet-header{background:linear-gradient(90deg,#6366f1,#06b6d4);padding:12px 14px;display:flex;gap:12px;align-items:center;color:#fff}.premium-sheet-header .sheet-icon{width:36px;height:36px;border-radius:9999px;background:#ffffff1f;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 30px #6366f11f}.premium-sheet-body{padding:14px;text-align:center}.premium-sheet-body h4{margin:0;font-size:15px;font-weight:800;color:#0f172a}.premium-sheet-body p{margin:8px 0 0;color:#374151;font-size:13px}@keyframes sheetUp{0%{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}.grid-label{font-size:12px;color:#374151;text-align:center;font-weight:600}@media(max-width:420px){.editor{padding:14px;border-radius:20px}.preview{padding-top:6px}.grid{grid-template-columns:repeat(3,1fr)}.avatar-style-rail{position:absolute;right:1px;top:50%;transform:translateY(-50%);height:160px;gap:10px;display:flex;z-index:140}.avatar-style-btn{width:44px;height:44px;background:#fff;border-radius:12px;box-shadow:0 8px 20px #02061714;border:1px solid rgba(2,6,23,.06)}.avatar-style-icon{width:28px;height:28px}.item-thumb{width:48px;height:48px}.grid-item{padding:8px}.grid-label{font-size:10px}.preview-username{font-size:16px}}.premium-cta{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:9999px;background:linear-gradient(90deg,#f59e0b,#f97316);color:#fff;font-weight:700;border:none;box-shadow:0 8px 24px #f9731624;cursor:pointer}.modal-overlay{position:fixed;inset:0;background:#02061759;display:flex;align-items:center;justify-content:center;z-index:60;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal{width:60%;max-width:360px;background:linear-gradient(180deg,#fff,#fbfdff);border-radius:34px;padding:16px;box-shadow:0 18px 50px #0206172e;border:1px solid rgba(2,6,23,.06);text-align:center}.modal-header{display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center}.modal-icon{width:40px;height:40px;border-radius:9999px;background:linear-gradient(90deg,#4f46e5,#06b6d4);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 8px 30px #6366f11f}.modal-title{margin:0;font-size:15px;font-weight:800;color:#0f172a}.modal-body{margin-top:8px}.modal-avatar{width:96px;height:96px;border-radius:16px;border:1px solid rgba(2,6,23,.06);box-shadow:0 8px 30px #0206170f;display:block;margin:12px auto}.modal p{margin:0 0 12px;color:#374151;font-size:13px}.modal-actions{display:flex;gap:8px;justify-content:center;margin-top:12px}.modal .primary-btn{padding:8px 14px;border-radius:20px;font-size:14px;min-width:84px}.modal .secondary-btn{padding:8px 10px;min-width:auto}