D0 Part 3: deploy + backups + monitoring in v2

- deploy.html: stacked memory bar -> meter track with two segments
  (committed solid blue, new app 35%-opacity blue), neutral threshold
  ticks; integration status badges -> tags; meta pills -> metarows;
  3-step deploy progress icons -> sprite (check/x/triangle-alert/
  spinning rotate-cw); emoji -> icons or plain text incl. the JS
  confirm string.
- backups.html: storage bars -> meters, disconnected drives render an
  empty track with a neutral 'Leválasztva' (no red), drive-state badges
  -> warn tags, checkmark/warning glyphs -> sprite icons, JS flash/info
  strings de-emojified.
- monitoring.html: bars -> meters in both template and JS-generated
  host-storage markup (usageColorClass now emits nominal/warn/crit);
  Chart.js palette per spec (cpu #2EA8F5, memory #8E7CE8, temp #E0A93E,
  load #5EC4B6 — categorical data series keep distinct hues); tooltip/
  grid/tick colors moved to v2 literals; mem-dist palette rebalanced.
- Templates repo-wide: legacy var(--*) names in inline styles and JS
  string literals renamed to v2 tokens (old names no longer resolve).
- style.css: memory-bar family rewritten for the two-segment meter,
  .ico-spin animation added (reduced-motion respected).

controller/internal/web/templates/style.css

@@ -854,60 +854,38 @@ select.form-control option { background: var(--bg-2); color: var(--text-1); }
     color: var(--text-3);
     font-family: var(--font-data);
 }
-.memory-bar-stacked {
-    width: 100%;
-    height: 10px;
-    border-radius: var(--radius);
+/* Deploy-page memory meter — two segments on the meter track:
+   committed = solid blue, new app = blue at 35% opacity (v2). */
+.meter-track-stacked {
+    height: 3px;
     display: flex;
-    overflow: hidden;
+    overflow: visible;
     position: relative;
-    background: linear-gradient(to right,
-        var(--blue-dim) 0%, var(--blue-dim) 70%,
-        var(--warn-dim) 70%, var(--warn-dim) 85%,
-        var(--crit-dim) 85%, var(--crit-dim) 100%
-    );
+    background: var(--line-soft);
 }
-.memory-bar-stacked::before {
+.meter-track-stacked::before,
+.meter-track-stacked::after {
     content: '';
     position: absolute;
-    left: 70%;
-    top: -1px;
-    bottom: -1px;
-    width: 2px;
-    background: var(--warn);
-    border-radius: 0;
-    opacity: 0.5;
-    z-index: 2;
-}
-.memory-bar-stacked::after {
-    content: '';
-    position: absolute;
-    left: 85%;
-    top: -1px;
-    bottom: -1px;
-    width: 2px;
-    background: var(--crit);
-    border-radius: 0;
-    opacity: 0.5;
+    top: -2px;
+    bottom: -2px;
+    width: 1px;
+    background: var(--line);
     z-index: 2;
 }
+.meter-track-stacked::before { left: 70%; }
+.meter-track-stacked::after { left: 85%; }
 .memory-bar-segment {
     height: 100%;
     position: relative;
     z-index: 1;
     transition: width 0.3s ease;
 }
-.memory-bar-segment:not([style*="width:0%"]) {
-    min-width: 3px;
-}
 .memory-bar-committed {
     background: var(--blue);
-    border-radius: 0;
 }
 .memory-bar-new {
-    background: var(--blue-dim);
-    border-right: 2px solid var(--blue-bright);
-    border-radius: 0;
+    background: rgba(0,131,216,.35);
 }
 .memory-bar-legend {
     display: flex;
@@ -920,7 +898,7 @@ select.form-control option { background: var(--bg-2); color: var(--text-1); }
     align-items: center;
     gap: 0.35rem;
     font-size: .75rem;
-    color: var(--text-2);
+    color: var(--text-3);
     white-space: nowrap;
 }
 .memory-legend-dot {
@@ -934,8 +912,7 @@ select.form-control option { background: var(--bg-2); color: var(--text-1); }
     background: var(--blue);
 }
 .memory-legend-new {
-    background: var(--blue-dim);
-    border: 1px solid var(--blue-bright);
+    background: rgba(0,131,216,.35);
 }
 .memory-dist-bar {
     width: 100%;
@@ -3252,3 +3229,8 @@ span.mono, .mono { font-family: var(--font-data); }
 .list .row.state-run::before,
 .list .row.state-progress::before { background: var(--blue); }
 .list .row.state-warn::before { background: var(--warn); }
+
+/* Spinning progress icon (deploy steps, async tasks) */
+.ico-spin { animation: ico-spin 1s linear infinite; }
+@keyframes ico-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .ico-spin { animation: none; } }