enh: Traffic dashboard redesign

src/assets/design-system.css

@@ -52,7 +52,7 @@
   --color-info-600: #2563eb;
   --color-info-700: #1e40af;
 
-  /* Border Radius */
+  /* Border Radius (scale: 2, 4, 6, 8, 12) */
   --radius-xs: 2px;
   --radius-sm: 4px;
   --radius-md: 6px;
@@ -119,7 +119,7 @@
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-2) var(--space-4);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-weight: var(--font-medium);
   font-size: var(--text-md);
   cursor: pointer;
@@ -178,7 +178,7 @@
 .form-input {
   padding: var(--space-2) var(--space-3);
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-size: var(--text-md);
   transition: all var(--transition-base);
 }
@@ -192,7 +192,7 @@
 /* Card */
 .card {
   background: white;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   border: 1px solid var(--color-gray-200);
   overflow: hidden;
   transition: all var(--transition-base);
@@ -364,7 +364,7 @@
   align-items: center;
   padding: var(--space-12);
   background: white;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   text-align: center;
   gap: var(--space-4);
 }

src/components/ConfirmModal.vue

@@ -95,7 +95,7 @@ const confirmButtonClass = computed(() => {
 
 .confirm-modal {
   background: white;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   box-shadow: var(--shadow-xl);
   width: 420px;
   max-width: 90vw;
@@ -162,7 +162,7 @@ const confirmButtonClass = computed(() => {
   padding: var(--space-2) var(--space-3);
   background: var(--color-warning-50);
   color: var(--color-warning-700);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-size: var(--text-sm);
 }
 
@@ -179,7 +179,7 @@ const confirmButtonClass = computed(() => {
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-2) var(--space-4);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-weight: var(--font-medium);
   font-size: var(--text-md);
   cursor: pointer;

src/components/ContainerTerminal.vue

@@ -275,7 +275,7 @@ defineExpose({
   height: 100%;
   min-height: 400px;
   background: #1a1b26;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   overflow: hidden;
 }
 

src/components/DeploymentCard.vue

@@ -50,7 +50,7 @@ defineEmits<{
 <style scoped>
 .deployment-card {
   background: white;
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   overflow: hidden;
   display: flex;
   flex-direction: column;

src/components/DeploymentTrafficStats.vue

@@ -166,7 +166,7 @@ onMounted(() => {
 <style scoped>
 .deployment-traffic {
   background: white;
-  border-radius: 12px;
+  border-radius: var(--radius-sm);
   border: 1px solid #e5e7eb;
   padding: 1rem;
 }
@@ -204,7 +204,7 @@ onMounted(() => {
 .time-select {
   padding: 0.375rem 0.5rem;
   border: 1px solid #e5e7eb;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   font-size: 0.75rem;
   color: #374151;
   background: white;
@@ -258,7 +258,7 @@ onMounted(() => {
 .status-distribution {
   display: flex;
   height: 8px;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   overflow: hidden;
   background: #f3f4f6;
 }
@@ -345,7 +345,7 @@ onMounted(() => {
   align-items: center;
   padding: 0.375rem 0.5rem;
   background: #f9fafb;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
 }
 
 .path-name {
@@ -383,7 +383,7 @@ onMounted(() => {
   padding: 0.5rem;
   font-size: 0.875rem;
   font-weight: 500;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   border: none;
   cursor: pointer;
   transition: all 0.2s;

src/components/FileBrowser.vue

@@ -954,7 +954,7 @@ onMounted(() => {
 
 .modal-container {
   background: white;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   box-shadow: var(--shadow-xl);
   max-width: 90vw;
   animation: slideIn 0.2s ease;
@@ -1018,7 +1018,7 @@ onMounted(() => {
   width: 100%;
   padding: var(--space-2) var(--space-3);
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-size: var(--text-md);
 }
 
@@ -1033,7 +1033,7 @@ onMounted(() => {
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-2) var(--space-4);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   font-weight: var(--font-medium);
   font-size: var(--text-md);
   cursor: pointer;
@@ -1081,7 +1081,7 @@ onMounted(() => {
 .view-mode-toggle {
   display: flex;
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   overflow: hidden;
   margin-left: var(--space-2);
 }
@@ -1126,7 +1126,7 @@ onMounted(() => {
   align-items: center;
   padding: var(--space-3);
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   cursor: pointer;
   transition: all var(--transition-base);
   position: relative;

src/components/LogViewer.vue

@@ -475,7 +475,7 @@ onUnmounted(() => {
 
 .terminal-container :deep(.xterm-viewport::-webkit-scrollbar-thumb) {
   background: #2a2e3d;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
 }
 
 .terminal-container :deep(.xterm-viewport::-webkit-scrollbar-thumb:hover) {