diff --git a/web/ticket-order.js b/web/ticket-order.js
index e2d740a..4e12a29 100644
--- a/web/ticket-order.js
+++ b/web/ticket-order.js
@@ -92,44 +92,44 @@
       
       let markerSvg = '';
       if (isTransfer) {
-          markerSvg += `<circle cx="${x}" cy="${y}" r="15" fill="#ffffff" stroke="#1f2937" stroke-width="2.5" />`;
-          markerSvg += pieSvg(x, y, 11.5, uniqueColors);
-          markerSvg += `<circle class="node-core" cx="${x}" cy="${y}" r="6.5" fill="#ffffff" stroke="#334155" stroke-width="2.25" />`;
+          markerSvg += `<circle cx="${x}" cy="${y}" r="12" fill="#ffffff" stroke="#1f2937" stroke-width="2" />`;
+          markerSvg += pieSvg(x, y, 9, uniqueColors);
+          markerSvg += `<circle class="node-core" cx="${x}" cy="${y}" r="5" fill="#ffffff" stroke="#334155" stroke-width="2" />`;
       } else {
           const color = forceColor || uniqueColors[0] || '#93a2b7';
-          markerSvg += `<circle cx="${x}" cy="${y}" r="12.5" fill="${color}" stroke="${color}" stroke-width="4" />`;
-          markerSvg += `<circle class="node-core" cx="${x}" cy="${y}" r="7" fill="#ffffff" stroke="${color}" stroke-width="2.25" />`;
+          markerSvg += `<circle cx="${x}" cy="${y}" r="10" fill="${color}" stroke="${color}" stroke-width="2.5" />`;
+          markerSvg += `<circle class="node-core" cx="${x}" cy="${y}" r="5" fill="#ffffff" stroke="${color}" stroke-width="2" />`;
       }
       
       const preferTop = i % 2 === 0;
       let labelSvg = '';
-      const codeFontSize = 9;
-      const nameFontSize = 13;
-      const enFontSize = 8.5;
-      const codeW = primaryCode.length * 6 + 10;
+      const codeFontSize = 8;
+      const nameFontSize = 11.5;
+      const enFontSize = 7.5;
+      const codeW = primaryCode.length * 5.5 + 8;
       let textContent = '';
       
       if (preferTop) {
-          const bottomY = y - 22;
+          const bottomY = y - 18;
           const enY = bottomY;
-          const nameY = showEn ? bottomY - 12 : bottomY;
-          const codeY = nameY - 18;
-          textContent += `<rect x="${x - codeW / 2}" y="${codeY - 8}" width="${codeW}" height="12" rx="6" fill="#ffffff" stroke="#cbd5e1" stroke-width="1.5" />`;
-          textContent += `<text x="${x}" y="${codeY + 1}" text-anchor="middle" fill="#64748b" font-size="${codeFontSize}" font-weight="700" letter-spacing="0.02em">${primaryCode}</text>`;
-          textContent += `<text x="${x}" y="${nameY}" text-anchor="middle" fill="#0f172a" font-size="${nameFontSize}" font-weight="800" stroke="#ffffff" stroke-width="4" stroke-linejoin="round" paint-order="stroke fill">${name}</text>`;
+          const nameY = showEn ? bottomY - 10 : bottomY;
+          const codeY = nameY - 13;
+          textContent += `<rect x="${x - codeW / 2}" y="${codeY - 7}" width="${codeW}" height="10" rx="5" fill="#ffffff" stroke="#cbd5e1" stroke-width="1" />`;
+          textContent += `<text x="${x}" y="${codeY + 1.5}" text-anchor="middle" fill="#64748b" font-size="${codeFontSize}" font-weight="700" letter-spacing="0.02em">${primaryCode}</text>`;
+          textContent += `<text x="${x}" y="${nameY}" text-anchor="middle" fill="#0f172a" font-size="${nameFontSize}" font-weight="800" stroke="#ffffff" stroke-width="3" stroke-linejoin="round" paint-order="stroke fill">${name}</text>`;
           if (showEn) {
-              textContent += `<text x="${x}" y="${enY}" text-anchor="middle" fill="#64748b" font-size="${enFontSize}" font-weight="700" stroke="#ffffff" stroke-width="3" stroke-linejoin="round" paint-order="stroke fill">${enName}</text>`;
+              textContent += `<text x="${x}" y="${enY}" text-anchor="middle" fill="#64748b" font-size="${enFontSize}" font-weight="700" stroke="#ffffff" stroke-width="2.5" stroke-linejoin="round" paint-order="stroke fill">${enName}</text>`;
           }
       } else {
-          const topY = y + 34;
+          const topY = y + 26;
           const codeY = topY;
-          const nameY = topY + 18;
-          const enY = nameY + 12;
-          textContent += `<rect x="${x - codeW / 2}" y="${codeY - 8}" width="${codeW}" height="12" rx="6" fill="#ffffff" stroke="#cbd5e1" stroke-width="1.5" />`;
-          textContent += `<text x="${x}" y="${codeY + 1}" text-anchor="middle" fill="#64748b" font-size="${codeFontSize}" font-weight="700" letter-spacing="0.02em">${primaryCode}</text>`;
-          textContent += `<text x="${x}" y="${nameY}" text-anchor="middle" fill="#0f172a" font-size="${nameFontSize}" font-weight="800" stroke="#ffffff" stroke-width="4" stroke-linejoin="round" paint-order="stroke fill">${name}</text>`;
+          const nameY = topY + 13;
+          const enY = nameY + 10;
+          textContent += `<rect x="${x - codeW / 2}" y="${codeY - 7}" width="${codeW}" height="10" rx="5" fill="#ffffff" stroke="#cbd5e1" stroke-width="1" />`;
+          textContent += `<text x="${x}" y="${codeY + 1.5}" text-anchor="middle" fill="#64748b" font-size="${codeFontSize}" font-weight="700" letter-spacing="0.02em">${primaryCode}</text>`;
+          textContent += `<text x="${x}" y="${nameY}" text-anchor="middle" fill="#0f172a" font-size="${nameFontSize}" font-weight="800" stroke="#ffffff" stroke-width="3" stroke-linejoin="round" paint-order="stroke fill">${name}</text>`;
           if (showEn) {
-              textContent += `<text x="${x}" y="${enY}" text-anchor="middle" fill="#64748b" font-size="${enFontSize}" font-weight="700" stroke="#ffffff" stroke-width="3" stroke-linejoin="round" paint-order="stroke fill">${enName}</text>`;
+              textContent += `<text x="${x}" y="${enY}" text-anchor="middle" fill="#64748b" font-size="${enFontSize}" font-weight="700" stroke="#ffffff" stroke-width="2.5" stroke-linejoin="round" paint-order="stroke fill">${enName}</text>`;
           }
       }
       labelSvg += textContent;
@@ -143,7 +143,7 @@
       
       return `
       <g class="${classList}" data-code="${primaryCode}" data-canonical="${canonical}" onclick="handleStationClick('${primaryCode}')" style="cursor:pointer">
-          <rect x="${x - 20}" y="${y - 20}" width="40" height="40" fill="transparent" />
+          <rect x="${x - 16}" y="${y - 16}" width="32" height="32" fill="transparent" />
           ${markerSvg}
           ${labelSvg}
       </g>`;
@@ -159,7 +159,7 @@
           const bg = isActive ? li.color : '#f8fafc';
           const fg = isActive ? getContrastColor(li.color) : '#334155';
           const border = isActive ? li.color : '#cbd5e1';
-          html += `<button class="tvm-line-btn" style="padding: 8px 16px; border: 2px solid ${border}; background: ${bg}; color: ${fg}; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 14px; transition: all 0.2s;" onclick="selectTvmLine(${i})">${li.name}</button>`;
+          html += `<button class="tvm-line-btn" style="padding: 6px 12px; border: 1.5px solid ${border}; background: ${bg}; color: ${fg}; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 13px; transition: all 0.25s ease;" onclick="selectTvmLine(${i})">${li.name}</button>`;
       }
       container.innerHTML = html;
   }
@@ -179,9 +179,9 @@
           return;
       }
       
-      const startX = 80;
-      const gapX = 90;
-      const y = 80;
+      const startX = 40;
+      const gapX = 65;
+      const y = 60;
       const pts = [];
       
       for (let i = 0; i < li.stops.length; i++) {
@@ -201,16 +201,17 @@
       if (pts.length >= 2) {
           let d = `M ${pts[0].x} ${y}`;
           for(let i=1; i<pts.length; i++) d += ` L ${pts[i].x} ${y}`;
-          svgContent += `<path d="${d}" fill="none" stroke="${li.color}" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" />`;
+          svgContent += `<path d="${d}" fill="none" stroke="${li.color}" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" />`;
       }
       
       for (let i = 0; i < pts.length; i++) {
           svgContent += renderStationNode(pts[i].x, pts[i].y, pts[i].code, i, li.color);
       }
       
-      const width = startX + pts.length * gapX + 80;
-      const height = 160;
-      container.innerHTML = `<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" style="display:block; margin:auto;">${svgContent}</svg>`;
+      const width = startX + pts.length * gapX + 40;
+      const height = 120;
+      // 添加 tvm-animate 类实现动画过渡
+      container.innerHTML = `<svg class="tvm-animate" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" style="display:block;">${svgContent}</svg>`;
   }
 
   function renderTvmRoute() {
@@ -236,9 +237,9 @@
       container.style.display = 'flex';
       if (title) title.style.display = 'block';
       
-      const startX = 80;
-      const gapX = 90;
-      const y = 80;
+      const startX = 40;
+      const gapX = 65;
+      const y = 60;
       
       let svgContent = '';
       
@@ -265,7 +266,7 @@
       }
       
       for (const seg of segments) {
-          svgContent += `<line x1="${seg.x1}" y1="${y}" x2="${seg.x2}" y2="${y}" stroke="${seg.color}" stroke-width="8" stroke-linecap="round" />`;
+          svgContent += `<line x1="${seg.x1}" y1="${y}" x2="${seg.x2}" y2="${y}" stroke="${seg.color}" stroke-width="6" stroke-linecap="round" />`;
       }
       
       const pathD = `M ${startX} ${y} L ${startX + (routeCodes.length - 1) * gapX} ${y}`;
@@ -277,7 +278,7 @@
       for (let i = 0; i < numArrows; i++) {
           svgContent += `
           <g>
-              <path d="M -6 -5 L 4 0 L -6 5" fill="none" stroke="#854d0e" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
+              <path d="M -5 -4 L 3 0 L -5 4" fill="none" stroke="#854d0e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
               <animateMotion dur="${duration}s" repeatCount="indefinite" path="${pathD}" rotate="auto" begin="-${i * interval}s" calcMode="linear" />
           </g>
           `;
@@ -287,9 +288,9 @@
           svgContent += renderStationNode(startX + i * gapX, y, routeCodes[i], i);
       }
       
-      const width = startX + routeCodes.length * gapX + 80;
-      const height = 160;
-      container.innerHTML = `<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" style="display:block; margin:auto;">${svgContent}</svg>`;
+      const width = startX + routeCodes.length * gapX + 40;
+      const height = 120;
+      container.innerHTML = `<svg class="tvm-animate" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" style="display:block;">${svgContent}</svg>`;
   }
 
   async function renderSystemMap() {
@@ -383,12 +384,25 @@
               if (uniq.length >= 2) stationTransfer.add(c);
           }
           
+          const fadeStyle = `<style>
+            @keyframes tvmFadeIn {
+                from { opacity: 0; transform: translateX(-10px); }
+                to { opacity: 1; transform: translateX(0); }
+            }
+            .tvm-animate { animation: tvmFadeIn 0.3s ease-out forwards; }
+            .tvm-scroll-container { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
+            .tvm-scroll-container::-webkit-scrollbar { height: 4px; }
+            .tvm-scroll-container::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }
+            .tvm-scroll-container::-webkit-scrollbar-track { background: transparent; }
+          </style>`;
+
           mapContainer.innerHTML = `
-            <div class="tvm-layout" style="display: flex; flex-direction: column; gap: 20px; width: 100%;">
-                <div class="tvm-lines" id="tvmLines" style="display: flex; flex-wrap: wrap; gap: 8px;"></div>
-                <div class="tvm-single-line" id="tvmSingleLine" style="overflow-x: auto; padding: 10px 0; min-height: 160px; display: flex; align-items: center; justify-content: flex-start;"></div>
-                <div class="tvm-route-title" style="font-weight: bold; margin-bottom: -10px; color: #475569; display: none; font-size: 16px;" id="tvmRouteTitle">已选路径</div>
-                <div class="tvm-route" id="tvmRoute" style="overflow-x: auto; padding: 10px 0; border-top: 2px dashed #cbd5e1; min-height: 160px; display: none; align-items: center; justify-content: flex-start;"></div>
+            ${fadeStyle}
+            <div class="tvm-layout" style="display: flex; flex-direction: column; gap: 16px; width: 100%;">
+                <div class="tvm-lines" id="tvmLines" style="display: flex; flex-wrap: wrap; gap: 6px;"></div>
+                <div class="tvm-single-line tvm-scroll-container" id="tvmSingleLine" style="overflow-x: auto; padding: 10px 0; min-height: 120px; display: flex; align-items: center; justify-content: flex-start;"></div>
+                <div class="tvm-route-title" style="font-weight: bold; margin-bottom: -12px; color: #475569; display: none; font-size: 14px;" id="tvmRouteTitle">已选路径</div>
+                <div class="tvm-route tvm-scroll-container" id="tvmRoute" style="overflow-x: auto; padding: 10px 0; border-top: 1.5px dashed #cbd5e1; min-height: 120px; display: none; align-items: center; justify-content: flex-start;"></div>
             </div>
           `;