diff --git a/panel/frontend/src/chartTheme.js b/panel/frontend/src/chartTheme.js
index d91d367..67388a2 100644
--- a/panel/frontend/src/chartTheme.js
+++ b/panel/frontend/src/chartTheme.js
@@ -14,6 +14,10 @@
 export const SERIES_IN = CHART_COLORS[0] // сетевой приём
 export const SERIES_OUT = CHART_COLORS[1] // сетевая отдача
 
+// Одиночная серия-«герой» (персональный график сервиса): светлее CHART_COLORS[0]
+// (контраст на #1E2522 ~7.5:1 против 5.5:1) — тонкая линия на большой карте читается
+export const SERIES_MAIN = '#5BC795' // verdant $color-secondary
+
 export const INK = {
   text: '#C3D6CB', // $color-text-light — заголовки
   muted: '#A4B8AA', // $color-text-medium — оси, легенда
diff --git a/panel/frontend/src/components/ChartLine.vue b/panel/frontend/src/components/ChartLine.vue
index 4200482..b395dfa 100644
--- a/panel/frontend/src/components/ChartLine.vue
+++ b/panel/frontend/src/components/ChartLine.vue
@@ -6,7 +6,7 @@
 import { Chart } from 'chart.js/auto'
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
-import { INK } from '../chartTheme.js'
+import { CHART_COLORS, INK } from '../chartTheme.js'
 
 const props = defineProps({
   labels: { type: Array, default: () => [] },
@@ -17,6 +17,10 @@
   height: { type: Number, default: 220 },
 })
 
+// цвет не задан — берём первую позицию палитры: дефолт chart.js —
+// почти чёрная rgba(0,0,0,.1), на тёмной поверхности линия не видна
+const colorOf = (ds) => ds.color || CHART_COLORS[0]
+
 const canvas = ref(null)
 let chart = null
 
@@ -28,8 +32,8 @@
       datasets: props.datasets.map((ds) => ({
         label: ds.label,
         data: ds.data,
-        borderColor: ds.color,
-        backgroundColor: ds.color + '26',
+        borderColor: colorOf(ds),
+        backgroundColor: colorOf(ds) + '26',
         borderWidth: 2,
         // мало точек — линии нет, показываем точку, чтобы график не был пустым
         pointRadius: (ctx) => (ctx.dataset.data.length < 3 ? 3 : 0),
@@ -88,6 +92,8 @@
       if (chart.data.datasets[i]) {
         chart.data.datasets[i].label = ds.label
         chart.data.datasets[i].data = ds.data
+        chart.data.datasets[i].borderColor = colorOf(ds)
+        chart.data.datasets[i].backgroundColor = colorOf(ds) + '26'
       }
     })
     chart.update('none')
diff --git a/panel/frontend/src/pages/ServicePage.vue b/panel/frontend/src/pages/ServicePage.vue
index 665f898..446e070 100644
--- a/panel/frontend/src/pages/ServicePage.vue
+++ b/panel/frontend/src/pages/ServicePage.vue
@@ -9,6 +9,7 @@
 
 import { api } from '../api.js'
 import ChartLine from '../components/ChartLine.vue'
+import { SERIES_MAIN } from '../chartTheme.js'
 import { fmtAgo, fmtUptime } from '../format.js'
 import { t } from '../i18n/index.js'
 
@@ -98,7 +99,12 @@
 
 const chartLabels = computed(() => samples.value.map((p) => timeLabel(p.ts)))
 const chartDatasets = computed(() => [
-  { label: t('services.latency', { n: '' }).trim(), data: samples.value.map((p) => (p.state === 'up' ? p.latency_ms : null)) },
+  {
+    label: t('services.latency', { n: '' }).trim(),
+    data: samples.value.map((p) => (p.state === 'up' ? p.latency_ms : null)),
+    color: SERIES_MAIN,
+    fill: true,
+  },
 ])
 
 // --- Состояние / самосвидетельство -------------------------------------------