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/app_export.html

@@ -17,7 +17,7 @@
         {{end}}
     </select>
 
-    <div id="estimateBox" style="display:none;background:var(--bg-secondary);border-radius:8px;padding:1rem;margin-bottom:1.5rem">
+    <div id="estimateBox" style="display:none;background:var(--bg-2);border-radius:8px;padding:1rem;margin-bottom:1.5rem">
         <div style="display:flex;justify-content:space-between;margin-bottom:.25rem">
             <span>Konfiguráció:</span>
             <span id="estConfig">-</span>
@@ -26,15 +26,15 @@
             <span>Felhasználói adatok:</span>
             <span id="estData">-</span>
         </div>
-        <div style="display:flex;justify-content:space-between;font-weight:600;margin-bottom:.25rem;border-top:1px solid var(--border);padding-top:.5rem">
+        <div style="display:flex;justify-content:space-between;font-weight:600;margin-bottom:.25rem;border-top:1px solid var(--line);padding-top:.5rem">
             <span>Összesen:</span>
-            <span><span id="estTotal">-</span> <span id="estFree" style="color:var(--text-muted)">(szabad: -)</span></span>
+            <span><span id="estTotal">-</span> <span id="estFree" style="color:var(--text-3)">(szabad: -)</span></span>
         </div>
         <div style="display:flex;justify-content:space-between">
             <span>Becsült idő:</span>
             <span id="estTime">-</span>
         </div>
-        <div id="estWarning" style="display:none;color:var(--danger);margin-top:.5rem;font-weight:600"></div>
+        <div id="estWarning" style="display:none;color:var(--crit);margin-top:.5rem;font-weight:600"></div>
     </div>
 
     <h3>Jelszó (opcionális)</h3>
@@ -47,7 +47,7 @@
         <input type="checkbox" id="stopApp" checked style="margin-top:3px">
         <div>
             <strong>Alkalmazás leállítása mentés előtt (ajánlott)</strong>
-            <div style="color:var(--text-muted);font-size:.85rem">Az adatok konzisztenciája érdekében javasolt leállítani az alkalmazást mentés közben.</div>
+            <div style="color:var(--text-3);font-size:.85rem">Az adatok konzisztenciája érdekében javasolt leállítani az alkalmazást mentés közben.</div>
         </div>
     </label>
 
@@ -59,14 +59,14 @@
 <div id="progressCard" class="card" style="max-width:700px;display:none">
     <h3>Folyamat</h3>
     <div id="progressSteps"></div>
-    <div id="progressError" style="display:none;color:var(--danger);margin-top:1rem;font-weight:600"></div>
+    <div id="progressError" style="display:none;color:var(--crit);margin-top:1rem;font-weight:600"></div>
 </div>
 
 <div id="doneCard" class="card" style="max-width:700px;display:none">
-    <h3 style="color:var(--success)">Kész!</h3>
+    <h3 style="color:var(--blue)">Kész!</h3>
     <div style="margin-bottom:1rem">
         <span id="doneFile" style="font-weight:600"></span>
-        <span id="doneSize" style="color:var(--text-muted)"></span>
+        <span id="doneSize" style="color:var(--text-3)"></span>
     </div>
     <a id="doneFBLink" href="#" target="_blank" class="btn btn-outline">Megnyitás FileBrowser-ben &nearr;</a>
 </div>
@@ -190,7 +190,7 @@ function renderSteps(steps) {
         if (s.status === 'running') icon = '&#10227;';
         if (s.status === 'done') icon = '&#10003;';
         if (s.status === 'failed') icon = '&#10007;';
-        var cls = s.status === 'failed' ? 'color:var(--danger)' : s.status === 'done' ? 'color:var(--success)' : s.status === 'running' ? 'color:var(--primary)' : '';
+        var cls = s.status === 'failed' ? 'color:var(--crit)' : s.status === 'done' ? 'color:var(--blue)' : s.status === 'running' ? 'color:var(--blue)' : '';
         html += '<div style="padding:.25rem 0;' + cls + '">' + icon + ' ' + s.label;
         if (s.error) html += ' <span style="font-size:.85rem">(' + s.error + ')</span>';
         html += '</div>';