feat: update toast close button with SVG icon and improve styling

webapp/src/components/ToastHost.tsx

@@ -12,8 +12,10 @@ export default function ToastHost({ toasts, onClose }: ToastHostProps) {
       {toasts.map((toast) => (
         <li key={toast.id} className={`toast-item ${toast.type}`}>
           <div className="toast-text">{toast.text}</div>
-          <button type="button" className="toast-close" onClick={() => onClose(toast.id)}>
-            x
+          <button type="button" className="toast-close" onClick={() => onClose(toast.id)} aria-label="关闭通知">
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
+              <path d="M3 3l8 8M11 3l-8 8" />
+            </svg>
           </button>
           <div className="toast-progress" />
         </li>

webapp/src/styles/overlays.css

@@ -209,14 +209,29 @@
 }
 
 .toast-close {
-  @apply cursor-pointer border-0 bg-transparent text-xl;
+  @apply flex cursor-pointer items-center justify-center border-0;
+  flex-shrink: 0;
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  background: transparent;
   color: inherit;
-  transition: transform var(--dur-fast) var(--ease-out-soft), opacity var(--dur-fast) var(--ease-smooth);
+  -webkit-tap-highlight-color: transparent;
+  transition: background 120ms ease, opacity 120ms ease;
 }
 
 .toast-close:hover {
-  transform: scale(1.08);
-  opacity: 0.84;
+  background: rgba(0, 0, 0, 0.08);
+}
+
+.toast-close:active {
+  background: rgba(0, 0, 0, 0.14);
+}
+
+.toast-close:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: -2px;
+  border-radius: 8px;
 }
 
 .toast-progress {