.app-container{display:flex;flex-direction:column;height:100%;max-width:600px;margin:0 auto;background:var(--panel-bg);box-shadow:0 0 20px rgba(0,0,0,.1)}.preview-area{flex:1;display:flex;justify-content:center;align-items:center;background:radial-gradient(circle at center,#fff 0,#e9edef 100%);position:relative;padding:20px}#avatar-svg{width:280px;height:280px;filter:drop-shadow(0 10px 15px rgba(0,0,0,.1));transition:transform .3s cubic-bezier(.175, .885, .32, 1.275)}.action-bar{position:absolute;top:15px;right:15px;display:flex;gap:10px}.controls-area{height:50%;background:#fff;display:flex;flex-direction:column;border-top:1px solid var(--border-color)}.category-tabs{display:flex;overflow-x:auto;padding:10px;gap:10px;border-bottom:1px solid var(--border-color);scrollbar-width:none}.category-tabs::-webkit-scrollbar{display:none}.cat-btn{border:none;background:#f0f2f5;padding:8px 16px;border-radius:20px;font-size:.9rem;white-space:nowrap;color:#555;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:6px}.cat-btn:hover{background:#e0e0e0}.cat-btn.active{background:var(--primary-color);color:#fff;font-weight:600}.options-grid{flex:1;overflow-y:auto;padding:15px;display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:12px;align-content:start}.option-card{aspect-ratio:1;background:#fff;border:2px solid #eee;border-radius:12px;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:all .2s;position:relative}.option-card:hover{border-color:#bbb}.option-card.active{border-color:var(--primary-color);background-color:rgba(37,211,102,.05)}.option-card svg{width:70%;height:70%}.color-bar{padding:12px 15px;background:#f8f9fa;border-top:1px solid #eee;display:flex;gap:10px;overflow-x:auto;align-items:center}.color-dot{width:30px;height:30px;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,.2);cursor:pointer;flex-shrink:0;position:relative}.color-dot.active{transform:scale(1.1);border-color:var(--primary-color)}