feat: 更新图标和样式，添加底部弹层滑动效果

public/echo-icon.svg

@@ -0,0 +1,68 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" fill="none">
+  <defs>
+    <!-- Warm background gradient, same as design/icon.html brand-gradient -->
+    <linearGradient id="echo-bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#FF6B6B" />
+      <stop offset="100%" stop-color="#FFCC70" />
+    </linearGradient>
+
+    <!-- Clip everything to the rounded square so nothing can spill out -->
+    <clipPath id="echo-clip">
+      <rect x="7" y="7" width="86" height="86" rx="24" />
+    </clipPath>
+  </defs>
+
+  <!-- All shapes are clipped inside the rounded background -->
+  <g clip-path="url(#echo-clip)">
+    <!-- Rounded background -->
+    <rect x="7" y="7" width="86" height="86" rx="24" fill="url(#echo-bg)" />
+
+    <!-- Receipt body (slightly rotated) -->
+    <path
+      d="M32 22 H 68 C 73 22 76 25 76 30 V 78 L 68 73 L 60 78 L 52 73 L 44 78 L 36 73 L 28 78 V 30 C 28 25 31 22 36 22 Z"
+      fill="#FFFFFF"
+      transform="rotate(-6 50 50)"
+    />
+
+    <!-- Receipt content -->
+    <g transform="rotate(-6 50 50)">
+      <!-- Title bar -->
+      <rect x="36" y="32" width="20" height="4" rx="2" fill="#FF8A65" fill-opacity="0.3" />
+      <!-- Amount bar -->
+      <rect x="36" y="42" width="34" height="4" rx="2" fill="#FFCC70" fill-opacity="0.5" />
+
+      <!-- Center plus circle -->
+      <circle cx="52" cy="60" r="9" stroke="#FF6B6B" stroke-width="2.5" fill="none" />
+      <path
+        d="M52 56 V 64 M48 60 H 56"
+        stroke="#FF6B6B"
+        stroke-width="2.5"
+        stroke-linecap="round"
+      />
+    </g>
+
+    <!-- Right-top signal waves (pulled inward so they visually stay inside background) -->
+    <path
+      d="M76 30 Q84 38 82 48"
+      stroke="#FFFFFF"
+      stroke-width="5"
+      stroke-linecap="round"
+      stroke-opacity="0.7"
+    />
+    <path
+      d="M80 24 Q88 36 86 52"
+      stroke="#FFFFFF"
+      stroke-width="4"
+      stroke-linecap="round"
+      stroke-opacity="0.3"
+    />
+
+    <!-- Left-side small sparkle -->
+    <path
+      d="M25 35 L 27 35 M26 34 L 26 36"
+      stroke="#FFFFFF"
+      stroke-width="2"
+      stroke-opacity="0.8"
+    />
+  </g>
+</svg>