feat: Terminal aesthetic

1 files changed, 210 insertions, 242 deletions

diff --git a/internal/server/static/style.css b/internal/server/static/style.css
index 9fef180..3f197a7 100644
--- a/internal/server/static/style.css
+++ b/internal/server/static/style.css
@@ -1,6 +1,6 @@
-/* Kaze Status Page - Refined OpenCode-inspired Theme */
+/* Kaze Status Page - Terminal/SSH Theme */
 
-/* Reset and base */
+/* Reset */
 *, *::before, *::after {
     box-sizing: border-box;
 }
@@ -15,29 +15,53 @@ html {
     tab-size: 4;
 }
 
-/* Color scheme support */
 :root {
     color-scheme: light dark;
-    /* Refined color palette */
-    --bg-primary: #ffffff;
-    --bg-secondary: #f8f8f8;
-    --bg-tertiary: #f0f0f0;
-    --border-primary: #e0e0e0;
-    --border-secondary: #ebebeb;
-    --text-primary: #1a1a1a;
-    --text-secondary: #6b6b6b;
-    --text-tertiary: #9b9b9b;
+    /* Dark terminal palette */
+    --bg-primary: #070707;
+    --bg-secondary: #0f0f0f;
+    --bg-tertiary: #1a1a1a;
+    --border-color: #2a2a2a;
+    --text-primary: #ffffff;
+    --text-secondary: #999999;
+    --text-tertiary: #666666;
+    --text-dim: #444444;
+    /* Monochrome status colors */
+    --status-ok: #d0d0d0;
+    --status-warn: #a0a0a0;
+    --status-error: #808080;
+    --status-unknown: #555555;
 }
 
 .dark {
-    --bg-primary: #0d0d0d;
-    --bg-secondary: #151515;
+    --bg-primary: #070707;
+    --bg-secondary: #0f0f0f;
     --bg-tertiary: #1a1a1a;
-    --border-primary: #262626;
-    --border-secondary: #1f1f1f;
-    --text-primary: #ededed;
-    --text-secondary: #a0a0a0;
-    --text-tertiary: #707070;
+    --border-color: #2a2a2a;
+    --text-primary: #ffffff;
+    --text-secondary: #999999;
+    --text-tertiary: #666666;
+    --text-dim: #444444;
+    --status-ok: #d0d0d0;
+    --status-warn: #a0a0a0;
+    --status-error: #808080;
+    --status-unknown: #555555;
+}
+
+/* Light mode - inverse terminal */
+:root:not(.dark) {
+    --bg-primary: #ffffff;
+    --bg-secondary: #f8f8f8;
+    --bg-tertiary: #f0f0f0;
+    --border-color: #e0e0e0;
+    --text-primary: #000000;
+    --text-secondary: #666666;
+    --text-tertiary: #999999;
+    --text-dim: #bbbbbb;
+    --status-ok: #333333;
+    --status-warn: #555555;
+    --status-error: #777777;
+    --status-unknown: #aaaaaa;
 }
 
 /* Font */
@@ -49,141 +73,120 @@ html {
     font-display: swap;
 }
 
-@font-face {
-    font-family: 'JetBrains Mono';
-    src: local('JetBrains Mono Medium'), local('JetBrainsMono-Medium');
-    font-weight: 500;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'JetBrains Mono';
-    src: local('JetBrains Mono Bold'), local('JetBrainsMono-Bold');
-    font-weight: 700;
-    font-style: normal;
-    font-display: swap;
-}
-
-/* Base styles */
+/* Base */
 body {
-    line-height: 1.6;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    background-color: var(--bg-primary);
+    background: var(--bg-primary);
     color: var(--text-primary);
+    font-family: 'JetBrains Mono', Menlo, Monaco, 'Courier New', monospace;
+    font-size: 12px;
+    line-height: 1.5;
 }
 
 /* Utility classes */
-
-/* Font */
 .font-mono {
-    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+    font-family: 'JetBrains Mono', Menlo, Monaco, 'Courier New', monospace;
 }
 
-/* Colors - Light mode */
-.bg-neutral-50 { background-color: #fafafa; }
+/* Background colors */
+.bg-neutral-50 { background-color: var(--bg-secondary); }
 .bg-neutral-100 { background-color: var(--bg-secondary); }
 .bg-neutral-200 { background-color: var(--bg-tertiary); }
-.bg-neutral-800 { background-color: #262626; }
-.bg-neutral-900 { background-color: #171717; }
-.bg-neutral-950 { background-color: #0a0a0a; }
+.bg-neutral-800 { background-color: var(--bg-tertiary); }
+.bg-neutral-900 { background-color: var(--bg-secondary); }
+.bg-neutral-950 { background-color: var(--bg-primary); }
 .bg-white { background-color: var(--bg-primary); }
 
-.bg-emerald-50 { background-color: #ecfdf5; }
-.bg-emerald-100 { background-color: #d1fae5; }
-.bg-emerald-500 { background-color: #10b981; }
-
-.bg-yellow-50 { background-color: #fefce8; }
-.bg-yellow-100 { background-color: #fef9c3; }
-.bg-yellow-500 { background-color: #eab308; }
-
-.bg-red-50 { background-color: #fef2f2; }
-.bg-red-100 { background-color: #fee2e2; }
-.bg-red-500 { background-color: #ef4444; }
-
-.bg-blue-100 { background-color: #dbeafe; }
-.bg-blue-500 { background-color: #3b82f6; }
-
-.bg-orange-100 { background-color: #ffedd5; }
-
-.text-neutral-100 { color: #f5f5f5; }
-.text-neutral-300 { color: #d4d4d4; }
-.text-neutral-400 { color: var(--text-tertiary); }
-.text-neutral-500 { color: var(--text-secondary); }
-.text-neutral-600 { color: #525252; }
-.text-neutral-700 { color: #404040; }
+/* Status backgrounds */
+.bg-emerald-50 { background-color: var(--bg-secondary); }
+.bg-emerald-100 { background-color: var(--bg-secondary); }
+.bg-emerald-500 { background-color: var(--status-ok); }
+.bg-yellow-50 { background-color: var(--bg-secondary); }
+.bg-yellow-100 { background-color: var(--bg-secondary); }
+.bg-yellow-500 { background-color: var(--status-warn); }
+.bg-red-50 { background-color: var(--bg-secondary); }
+.bg-red-100 { background-color: var(--bg-secondary); }
+.bg-red-500 { background-color: var(--status-error); }
+.bg-blue-100 { background-color: var(--bg-secondary); }
+.bg-blue-500 { background-color: var(--status-ok); }
+.bg-orange-100 { background-color: var(--bg-secondary); }
+
+/* Text colors */
+.text-neutral-100 { color: var(--text-primary); }
+.text-neutral-300 { color: var(--text-secondary); }
+.text-neutral-400 { color: var(--text-secondary); }
+.text-neutral-500 { color: var(--text-tertiary); }
+.text-neutral-600 { color: var(--text-tertiary); }
+.text-neutral-700 { color: var(--text-tertiary); }
 .text-neutral-900 { color: var(--text-primary); }
 
-.text-emerald-300 { color: #6ee7b7; }
-.text-emerald-400 { color: #34d399; }
-.text-emerald-500 { color: #10b981; }
-.text-emerald-600 { color: #059669; }
-.text-emerald-700 { color: #047857; }
-
-.text-yellow-300 { color: #fde047; }
-.text-yellow-400 { color: #facc15; }
-.text-yellow-500 { color: #eab308; }
-.text-yellow-600 { color: #ca8a04; }
-.text-yellow-700 { color: #a16207; }
-
-.text-red-400 { color: #f87171; }
-.text-red-500 { color: #ef4444; }
-.text-red-600 { color: #dc2626; }
-
-.text-blue-300 { color: #93c5fd; }
-.text-blue-500 { color: #3b82f6; }
-.text-blue-700 { color: #1d4ed8; }
-
-.text-orange-700 { color: #c2410c; }
-.text-orange-300 { color: #fdba74; }
+/* Status text colors */
+.text-emerald-300 { color: var(--status-ok); }
+.text-emerald-400 { color: var(--status-ok); }
+.text-emerald-500 { color: var(--status-ok); }
+.text-emerald-600 { color: var(--status-ok); }
+.text-emerald-700 { color: var(--status-ok); }
+.text-yellow-300 { color: var(--status-warn); }
+.text-yellow-400 { color: var(--status-warn); }
+.text-yellow-500 { color: var(--status-warn); }
+.text-yellow-600 { color: var(--status-warn); }
+.text-yellow-700 { color: var(--status-warn); }
+.text-red-400 { color: var(--status-error); }
+.text-red-500 { color: var(--status-error); }
+.text-red-600 { color: var(--status-error); }
+.text-blue-300 { color: var(--status-ok); }
+.text-blue-500 { color: var(--status-ok); }
+.text-blue-700 { color: var(--status-ok); }
+.text-orange-700 { color: var(--status-warn); }
+.text-orange-300 { color: var(--status-warn); }
 
 /* Border colors */
-.border-neutral-200 { border-color: var(--border-primary); }
-.border-neutral-800 { border-color: #262626; }
-.border-emerald-200 { border-color: #a7f3d0; }
-.border-emerald-900 { border-color: #064e3b; }
-.border-yellow-200 { border-color: #fef08a; }
-.border-yellow-900 { border-color: #713f12; }
-.border-red-200 { border-color: #fecaca; }
-.border-red-900 { border-color: #7f1d1d; }
-
-/* Dark mode */
+.border-neutral-200 { border-color: var(--border-color); }
+.border-neutral-800 { border-color: var(--border-color); }
+.border-emerald-200 { border-color: var(--border-color); }
+.border-emerald-900 { border-color: var(--border-color); }
+.border-yellow-200 { border-color: var(--border-color); }
+.border-yellow-900 { border-color: var(--border-color); }
+.border-red-200 { border-color: var(--border-color); }
+.border-red-900 { border-color: var(--border-color); }
+
+/* Dark mode overrides */
 .dark .dark\:bg-neutral-800 { background-color: var(--bg-tertiary); }
 .dark .dark\:bg-neutral-900 { background-color: var(--bg-secondary); }
-.dark .dark\:bg-neutral-900\/50 { background-color: rgba(21, 21, 21, 0.5); }
+.dark .dark\:bg-neutral-900\/50 { background-color: rgba(15, 15, 15, 0.5); }
 .dark .dark\:bg-neutral-950 { background-color: var(--bg-primary); }
-.dark .dark\:bg-emerald-900\/50 { background-color: rgba(6, 78, 59, 0.5); }
-.dark .dark\:bg-emerald-950\/30 { background-color: rgba(2, 44, 34, 0.3); }
-.dark .dark\:bg-yellow-900\/50 { background-color: rgba(113, 63, 18, 0.5); }
-.dark .dark\:bg-yellow-950\/20 { background-color: rgba(66, 32, 6, 0.2); }
-.dark .dark\:bg-yellow-950\/30 { background-color: rgba(66, 32, 6, 0.3); }
-.dark .dark\:bg-red-900\/50 { background-color: rgba(127, 29, 29, 0.5); }
-.dark .dark\:bg-red-950\/30 { background-color: rgba(69, 10, 10, 0.3); }
-.dark .dark\:bg-blue-900\/50 { background-color: rgba(30, 58, 138, 0.5); }
-.dark .dark\:bg-orange-900\/50 { background-color: rgba(124, 45, 18, 0.5); }
+.dark .dark\:bg-emerald-900\/50 { background-color: var(--bg-secondary); }
+.dark .dark\:bg-emerald-950\/30 { background-color: var(--bg-secondary); }
+.dark .dark\:bg-yellow-900\/50 { background-color: var(--bg-secondary); }
+.dark .dark\:bg-yellow-950\/20 { background-color: var(--bg-secondary); }
+.dark .dark\:bg-yellow-950\/30 { background-color: var(--bg-secondary); }
+.dark .dark\:bg-red-900\/50 { background-color: var(--bg-secondary); }
+.dark .dark\:bg-red-950\/30 { background-color: var(--bg-secondary); }
+.dark .dark\:bg-blue-900\/50 { background-color: var(--bg-secondary); }
+.dark .dark\:bg-orange-900\/50 { background-color: var(--bg-secondary); }
 
 .dark .dark\:text-neutral-100 { color: var(--text-primary); }
-.dark .dark\:text-neutral-300 { color: #d4d4d4; }
+.dark .dark\:text-neutral-300 { color: var(--text-secondary); }
 .dark .dark\:text-neutral-400 { color: var(--text-secondary); }
 .dark .dark\:text-neutral-500 { color: var(--text-tertiary); }
-.dark .dark\:text-emerald-300 { color: #6ee7b7; }
-.dark .dark\:text-emerald-400 { color: #34d399; }
-.dark .dark\:text-yellow-300 { color: #fde047; }
-.dark .dark\:text-yellow-400 { color: #facc15; }
-.dark .dark\:text-red-400 { color: #f87171; }
-.dark .dark\:text-blue-300 { color: #93c5fd; }
-.dark .dark\:text-orange-300 { color: #fdba74; }
-
-.dark .dark\:border-neutral-800 { border-color: var(--border-primary); }
-.dark .dark\:border-emerald-900 { border-color: #064e3b; }
-.dark .dark\:border-yellow-900 { border-color: #713f12; }
-.dark .dark\:border-red-900 { border-color: #7f1d1d; }
-
-.dark .dark\:divide-neutral-800 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-primary); }
-
-.dark .dark\:hover\:bg-neutral-800:hover { background-color: rgba(38, 38, 38, 0.5); }
-.dark .dark\:hover\:bg-neutral-900\/50:hover { background-color: rgba(23, 23, 23, 0.5); }
+.dark .dark\:text-emerald-300 { color: var(--status-ok); }
+.dark .dark\:text-emerald-400 { color: var(--status-ok); }
+.dark .dark\:text-yellow-300 { color: var(--status-warn); }
+.dark .dark\:text-yellow-400 { color: var(--status-warn); }
+.dark .dark\:text-red-400 { color: var(--status-error); }
+.dark .dark\:text-blue-300 { color: var(--status-ok); }
+.dark .dark\:text-orange-300 { color: var(--status-warn); }
+
+.dark .dark\:border-neutral-800 { border-color: var(--border-color); }
+.dark .dark\:border-emerald-900 { border-color: var(--border-color); }
+.dark .dark\:border-yellow-900 { border-color: var(--border-color); }
+.dark .dark\:border-red-900 { border-color: var(--border-color); }
+
+.dark .dark\:divide-neutral-800 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-color); }
+
+.dark .dark\:hover\:bg-neutral-800:hover { background-color: #1f1f1f; }
+.dark .dark\:hover\:bg-neutral-900\/50:hover { background-color: rgba(15, 15, 15, 0.5); }
 .dark .dark\:hover\:text-neutral-100:hover { color: var(--text-primary); }
 
 /* Display */
@@ -202,70 +205,70 @@ body {
 
 /* Gap */
 .gap-px { gap: 1px; }
-.gap-2 { gap: 0.5rem; }
-.gap-3 { gap: 0.75rem; }
-.gap-4 { gap: 1rem; }
+.gap-2 { gap: 0.4rem; }
+.gap-3 { gap: 0.6rem; }
+.gap-4 { gap: 0.8rem; }
 
 /* Sizing */
 .w-2 { width: 0.5rem; }
-.w-3 { width: 0.75rem; }
-.w-4 { width: 1rem; }
-.w-5 { width: 1.25rem; }
-.w-8 { width: 2rem; }
+.w-3 { width: 0.625rem; }
+.w-4 { width: 0.75rem; }
+.w-5 { width: 1rem; }
+.w-8 { width: 1.5rem; }
 .h-2 { height: 0.5rem; }
-.h-3 { height: 0.75rem; }
-.h-4 { height: 1rem; }
-.h-5 { height: 1.25rem; }
-.h-6 { height: 1.5rem; }
-.h-8 { height: 2rem; }
+.h-3 { height: 0.625rem; }
+.h-4 { height: 0.75rem; }
+.h-5 { height: 1rem; }
+.h-6 { height: 1.25rem; }
+.h-8 { height: 1.5rem; }
 .min-h-screen { min-height: 100vh; }
 .min-w-0 { min-width: 0px; }
 .max-w-4xl { max-width: 56rem; }
 .max-w-\[200px\] { max-width: 200px; }
 
-/* Spacing */
+/* Spacing - more compact */
 .mx-auto { margin-left: auto; margin-right: auto; }
 .mb-1 { margin-bottom: 0.25rem; }
-.mb-2 { margin-bottom: 0.5rem; }
-.mb-4 { margin-bottom: 1rem; }
-.mb-8 { margin-bottom: 2rem; }
-.mt-2 { margin-top: 0.5rem; }
-.mt-3 { margin-top: 0.75rem; }
-.mt-8 { margin-top: 2rem; }
-.mt-12 { margin-top: 3rem; }
-.p-2 { padding: 0.5rem; }
-.p-4 { padding: 1rem; }
-.px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
-.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
-.px-4 { padding-left: 1rem; padding-right: 1rem; }
-.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
-.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
-.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
-.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
-.pt-6 { padding-top: 1.5rem; }
-
-/* Borders */
+.mb-2 { margin-bottom: 0.4rem; }
+.mb-4 { margin-bottom: 0.8rem; }
+.mb-8 { margin-bottom: 1.6rem; }
+.mt-2 { margin-top: 0.4rem; }
+.mt-3 { margin-top: 0.6rem; }
+.mt-8 { margin-top: 1.6rem; }
+.mt-12 { margin-top: 2.4rem; }
+.p-2 { padding: 0.4rem; }
+.p-4 { padding: 0.8rem; }
+.px-1\.5 { padding-left: 0.3rem; padding-right: 0.3rem; }
+.px-2 { padding-left: 0.4rem; padding-right: 0.4rem; }
+.px-4 { padding-left: 0.8rem; padding-right: 0.8rem; }
+.py-0\.5 { padding-top: 0.1rem; padding-bottom: 0.1rem; }
+.py-1 { padding-top: 0.2rem; padding-bottom: 0.2rem; }
+.py-3 { padding-top: 0.6rem; padding-bottom: 0.6rem; }
+.py-8 { padding-top: 1.6rem; padding-bottom: 1.6rem; }
+.pt-6 { padding-top: 1.2rem; }
+
+/* Borders - sharp terminal style */
 .border { border-width: 1px; }
 .border-b { border-bottom-width: 1px; }
 .border-t { border-top-width: 1px; }
-.rounded-sm { border-radius: 0.25rem; }
-.rounded-md { border-radius: 0.5rem; }
-.rounded-lg { border-radius: 0.75rem; }
-.rounded-full { border-radius: 9999px; }
+.rounded-sm { border-radius: 0; }
+.rounded-md { border-radius: 0; }
+.rounded-lg { border-radius: 0; }
+.rounded-full { border-radius: 0; }
 .divide-y > :not([hidden]) ~ :not([hidden]) { border-top-width: 1px; }
-.divide-neutral-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-secondary); }
+.divide-neutral-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-color); }
 
 /* Typography */
-.text-xs { font-size: 0.75rem; line-height: 1rem; }
-.text-sm { font-size: 0.875rem; line-height: 1.375rem; }
-.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
-.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
-.font-medium { font-weight: 500; }
-.font-semibold { font-weight: 600; }
-.font-bold { font-weight: 700; }
+.text-xs { font-size: 11px; line-height: 1.4; }
+.text-sm { font-size: 12px; line-height: 1.5; }
+.text-lg { font-size: 14px; line-height: 1.5; }
+.text-xl { font-size: 16px; line-height: 1.5; }
+.font-medium { font-weight: 400; }
+.font-semibold { font-weight: 400; }
+.font-bold { font-weight: 400; }
 .uppercase { text-transform: uppercase; }
 .capitalize { text-transform: capitalize; }
-.tracking-tight { letter-spacing: -0.025em; }
+.tracking-tight { letter-spacing: 0; }
 .tracking-wider { letter-spacing: 0.05em; }
 .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .underline { text-decoration-line: underline; }
@@ -277,33 +280,33 @@ body {
 /* Transitions */
 .transition-colors { 
     transition-property: color, background-color, border-color;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 200ms;
+    transition-timing-function: ease;
+    transition-duration: 100ms;
 }
 
 /* Hover */
 .hover\:bg-neutral-200:hover { background-color: var(--bg-tertiary); }
-.hover\:bg-neutral-100\/50:hover { background-color: rgba(248, 248, 248, 0.5); }
+.hover\:bg-neutral-100\/50:hover { background-color: rgba(15, 15, 15, 0.3); }
 .hover\:text-neutral-900:hover { color: var(--text-primary); }
 
 /* Animation */
 @keyframes pulse {
     0%, 100% { opacity: 1; }
-    50% { opacity: 0.6; }
+    50% { opacity: 0.7; }
 }
-.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+.animate-pulse { animation: pulse 2s ease infinite; }
 
 /* Responsive */
 @media (min-width: 640px) {
-    .sm\:py-12 { padding-top: 3rem; padding-bottom: 3rem; }
-    .sm\:mb-12 { margin-bottom: 3rem; }
-    .sm\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
+    .sm\:py-12 { padding-top: 2.4rem; padding-bottom: 2.4rem; }
+    .sm\:mb-12 { margin-bottom: 2.4rem; }
+    .sm\:text-2xl { font-size: 18px; line-height: 1.5; }
 }
 
 /* Space */
-.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }
-.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
-.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }
+.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.6rem; }
+.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.8rem; }
+.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.2rem; }
 
 /* Fill/Stroke */
 svg { fill: none; }
@@ -312,14 +315,14 @@ svg { fill: none; }
 .group-content {
     max-height: 10000px;
     overflow: hidden;
-    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
+    transition: max-height 0.2s ease, opacity 0.15s ease;
     opacity: 1;
 }
 
 .group-content.collapsed {
     max-height: 0;
     opacity: 0;
-    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
+    transition: max-height 0.2s ease, opacity 0.1s ease;
 }
 
 .cursor-pointer {
@@ -327,7 +330,7 @@ svg { fill: none; }
 }
 
 [data-group-icon] {
-    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: transform 0.15s ease;
 }
 
 [data-group-icon].rotated {
@@ -338,17 +341,18 @@ svg { fill: none; }
 .tooltip {
     position: fixed;
     z-index: 1000;
-    padding: 0.625rem 0.875rem;
-    font-size: 0.75rem;
+    padding: 0.5rem 0.7rem;
+    font-size: 11px;
     line-height: 1.5;
-    background-color: #1a1a1a;
-    color: #ededed;
-    border-radius: 0.5rem;
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+    background-color: var(--bg-secondary);
+    color: var(--text-primary);
+    border: 1px solid var(--border-color);
+    border-radius: 0;
+    box-shadow: none;
     pointer-events: none;
     opacity: 0;
     transform: translateY(4px);
-    transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
+    transition: opacity 100ms ease, transform 100ms ease;
     max-width: 280px;
     white-space: normal;
 }
@@ -359,78 +363,42 @@ svg { fill: none; }
 }
 
 .tooltip::before {
-    content: '';
-    position: absolute;
-    bottom: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    border: 6px solid transparent;
-    border-bottom-color: #1a1a1a;
-}
-
-.tooltip.tooltip-top::before {
-    bottom: auto;
-    top: 100%;
-    border-bottom-color: transparent;
-    border-top-color: #1a1a1a;
-}
-
-/* Light mode tooltip */
-:root:not(.dark) .tooltip {
-    background-color: #ffffff;
-    color: #1a1a1a;
-    border: 1px solid var(--border-primary);
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
-}
-
-:root:not(.dark) .tooltip::before {
-    border-bottom-color: #ffffff;
-    margin-bottom: -1px;
-}
-
-:root:not(.dark) .tooltip.tooltip-top::before {
-    border-bottom-color: transparent;
-    border-top-color: #ffffff;
-    margin-bottom: 0;
-    margin-top: -1px;
+    display: none;
 }
 
 /* Tooltip content styling */
 .tooltip-header {
-    font-weight: 500;
-    margin-bottom: 0.375rem;
-    color: inherit;
+    font-weight: 400;
+    margin-bottom: 0.3rem;
+    color: var(--text-primary);
 }
 
 .tooltip-row {
     display: flex;
     justify-content: space-between;
     gap: 1rem;
-    margin-top: 0.25rem;
+    margin-top: 0.2rem;
 }
 
 .tooltip-label {
-    color: #9b9b9b;
-}
-
-:root:not(.dark) .tooltip-label {
-    color: #6b6b6b;
+    color: var(--text-tertiary);
 }
 
 .tooltip-value {
-    font-weight: 500;
+    font-weight: 400;
+    color: var(--text-secondary);
 }
 
 .tooltip-value.success {
-    color: #10b981;
+    color: var(--status-ok);
 }
 
 .tooltip-value.warning {
-    color: #eab308;
+    color: var(--status-warn);
 }
 
 .tooltip-value.error {
-    color: #ef4444;
+    color: var(--status-error);
 }
 
 /* Tooltip trigger */