是不是 样式没起作用，前端还是乱的 包含各种组件也没有起作用

components/testcase-dashboard.js

@@ -5,16 +5,16 @@ class TestcaseDashboard extends HTMLElement {
             <style>
                 :host {
                     display: block;
-                    --primary: #667eea;
-                    --primary-dark: #764ba2;
+                    font-family: 'Inter', sans-serif;
+                    --primary: #6366f1;
+                    --primary-dark: #4f46e5;
                 }
-                
                 .header {
                     background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
                     color: white;
+                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
                 }
-                
-                .phase-tab {
+.phase-tab {
                     transition: all 0.3s ease;
                     border-bottom: 3px solid transparent;
                     cursor: pointer;
@@ -25,14 +25,47 @@ class TestcaseDashboard extends HTMLElement {
                     color: var(--primary);
                     font-weight: 600;
                 }
-                
                 .pill {
-                    display: inline-block;
+                    display: inline-flex;
+                    align-items: center;
                     font-size: 0.75rem;
                     font-weight: 600;
                     padding: 0.25rem 0.75rem;
                     border-radius: 9999px;
                     text-transform: capitalize;
+                    line-height: 1;
+                }
+
+                table {
+                    width: 100%;
+                    border-collapse: collapse;
+                }
+
+                th, td {
+                    padding: 0.75rem 1.5rem;
+                    text-align: left;
+                    border-bottom: 1px solid #e5e7eb;
+                }
+
+                th {
+                    font-weight: 600;
+                    color: #6b7280;
+                    background-color: #f9fafb;
+                    text-transform: uppercase;
+                    letter-spacing: 0.05em;
+                    font-size: 0.75rem;
+                }
+
+                tr:hover {
+                    background-color: #f9fafb;
+                }
+
+                button {
+                    transition: all 0.2s ease;
+                }
+
+                button:hover {
+                    transform: translateY(-1px);
                 }
 </style>
             
@@ -178,9 +211,16 @@ class TestcaseDashboard extends HTMLElement {
                 </main>
             </div>
         `;
+
+        // Initialize feather icons
+        setTimeout(() => {
+            if (window.feather) {
+                window.feather.replace();
+            }
+        }, 100);
         
         // Add event listeners for tabs
-        const tabs = this.shadowRoot.querySelectorAll('.phase-tab');
+const tabs = this.shadowRoot.querySelectorAll('.phase-tab');
         tabs.forEach(tab => {
             tab.addEventListener('click', () => {
                 tabs.forEach(t => t.classList.remove('active'));

index.html

@@ -4,8 +4,11 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>TestCase Visualizer Pro</title>
+    <meta name="description" content="TestCase Visualizer Pro - Visualize your FSD test cases with clarity">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://unpkg.com/feather-icons"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <link rel="stylesheet" href="style.css">
 </head>
@@ -14,8 +17,11 @@
     
     <script src="components/testcase-dashboard.js"></script>
     <script>
-        feather.replace();
+        document.addEventListener('DOMContentLoaded', function() {
+            if (window.feather) {
+                feather.replace();
+            }
+        });
     </script>
-<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>

style.css

@@ -1,16 +1,21 @@
 
 :root {
-    --primary: #667eea;
-    --primary-dark: #764ba2;
-    --secondary: #f7fafc;
-    --success: #48bb78;
-    --danger: #f56565;
-    --warning: #ed8936;
-    --info: #4299e1;
-    --light: #f8f9fa;
-    --dark: #2d3748;
+    --primary: #6366f1;
+    --primary-dark: #4f46e5;
+    --secondary: #f9fafb;
+    --success: #10b981;
+    --danger: #ef4444;
+    --warning: #f59e0b;
+    --info: #3b82f6;
+    --light: #f8fafc;
+    --dark: #1f2937;
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
 }
-
 /* Base styles */
 body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,