diff --git a/steward/templates/_macros.html b/steward/templates/_macros.html
index 2867b70..d5666f1 100644
--- a/steward/templates/_macros.html
+++ b/steward/templates/_macros.html
@@ -29,3 +29,12 @@
 {%- elif value is not none and value >= warn -%}color:var(--yellow);font-weight:600;
 {%- endif -%}
 {%- endmacro %}
+
+{# Inverted emphasis for "higher is better" metrics like uptime %: amber below
+   `warn`, red below `crit`. The mirror of metric_style — same one-place-for-
+   thresholds discipline, opposite direction. Defaults suit SLA percentages. #}
+{% macro uptime_style(value, warn=99.0, crit=95.0) -%}
+{%- if value is not none and value < crit -%}color:var(--red);font-weight:700;
+{%- elif value is not none and value < warn -%}color:var(--yellow);font-weight:600;
+{%- endif -%}
+{%- endmacro %}
diff --git a/steward/templates/hosts/overview_widget.html b/steward/templates/hosts/overview_widget.html
index 2a4868a..581d2db 100644
--- a/steward/templates/hosts/overview_widget.html
+++ b/steward/templates/hosts/overview_widget.html
@@ -1,7 +1,7 @@
 {# Unified Hosts widget — monitor status + agent glance per host, links to the hub.
    Name sits on its own line (never truncated); its data wraps beneath it, grouped
    under the host. Prefer vertical growth over cramming a row. #}
-{% from "_macros.html" import metric_style %}
+{% from "_macros.html" import metric_style, uptime_style %}
 {% if hosts %}
 <div class="host-blocks">
   {% for host in hosts %}
@@ -27,10 +27,10 @@
     <div style="display:flex;flex-wrap:wrap;gap:0.25rem 0.9rem;margin-top:0.25rem;padding-left:1.1rem;
                 font-variant-numeric:tabular-nums;color:var(--text-muted);font-size:0.75rem;">
       {% if host.ping_enabled and ping and ping.response_time_ms is not none %}
-      <span title="Ping latency"><span style="color:var(--text-dim);">ping</span> {{ "%.0f"|format(ping.response_time_ms) }}ms</span>
+      <span title="Ping latency" style="{{ metric_style(ping.response_time_ms, warn=100, crit=250) }}"><span style="color:var(--text-dim);">ping</span> {{ "%.0f"|format(ping.response_time_ms) }}ms</span>
       {% endif %}
       {% if ut.get('24h') is not none %}
-      <span title="Uptime 24h"><span style="color:var(--text-dim);">24h</span> {{ "%.1f"|format(ut['24h']) }}%</span>
+      <span title="Uptime 24h" style="{{ uptime_style(ut['24h']) }}"><span style="color:var(--text-dim);">24h</span> {{ "%.1f"|format(ut['24h']) }}%</span>
       {% endif %}
       {% if a %}
       {% if a.get('cpu_pct') is not none %}<span title="CPU — value + last-hour trend" style="display:inline-flex;align-items:center;gap:0.3rem;{{ metric_style(a.cpu_pct) }}"><span style="color:var(--text-dim);">cpu</span> {{ "%.0f"|format(a.cpu_pct) }}%{% if spark %}<span style="line-height:0;opacity:0.85;">{{ spark | safe }}</span>{% endif %}</span>{% endif %}