diff --git a/client/status-icon-fix.js b/client/status-icon-fix.js
new file mode 100644
index 000000000..ddbdc8009
--- /dev/null
+++ b/client/status-icon-fix.js
@@ -0,0 +1,45 @@
+(function () {
+  "use strict";
+
+  var ICON_MARKUP =
+    '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="vertical-align:-3px;margin-right:6px;flex-shrink:0">' +
+    '<path d="M15 2.5H12C7.52166 2.5 5.28249 2.5 3.89124 3.89124C2.5 5.28249 2.5 7.52166 2.5 12C2.5 16.4783 2.5 18.7175 3.89124 20.1088C5.28249 21.5 7.52166 21.5 12 21.5C16.4783 21.5 18.7175 21.5 20.1088 20.1088C21.5 18.7175 21.5 16.4783 21.5 12V10" stroke="#22C55E" stroke-width="2" stroke-linecap="round"/>' +
+    '<path d="M8.5 10L12 13.5L21.0002 3.5" stroke="#22C55E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>' +
+    "</svg>";
+
+  function createIcon() {
+    var span = document.createElement("span");
+    span.innerHTML = ICON_MARKUP;
+    return span.firstChild;
+  }
+
+  function fix() {
+    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null);
+    var matches = [];
+    var node;
+    while ((node = walker.nextNode())) {
+      if (node.nodeValue.trim() === "✅") matches.push(node);
+    }
+    matches.forEach(function (textNode) {
+      textNode.parentNode.replaceChild(createIcon(), textNode);
+    });
+  }
+
+  fix();
+  document.addEventListener("DOMContentLoaded", fix);
+  window.addEventListener("load", fix);
+
+  // The Sapper bundle re-renders this section on hydration and on each
+  // data poll, reinstating the emoji text node — watch for that and
+  // swap it back to the SVG. This script runs from a <script> tag in
+  // <nav>, before <main> exists, so observe document.body (already
+  // present when the tag executes) rather than a more specific
+  // container that isn't in the DOM yet.
+  if (window.MutationObserver) {
+    new MutationObserver(fix).observe(document.body, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+    });
+  }
+})();
diff --git a/client/system-status.js b/client/system-status.js
index 1da8fcf35..ae2003bb7 100644
--- a/client/system-status.js
+++ b/client/system-status.js
@@ -9,11 +9,75 @@
   var DAY_MS = 24 * 60 * 60 * 1000;
   var MONTH_NAMES = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 
-  var root = document.getElementById("system-status-rows");
-  var rangeLabel = document.getElementById("system-status-range");
-  var prevBtn = document.querySelector('.status-nav-btn[data-dir="prev"]');
-  var nextBtn = document.querySelector('.status-nav-btn[data-dir="next"]');
-  if (!root) return;
+  var SPINNER =
+    '<div class="loading"><svg height="38" stroke="#aaa" width="38" xmlns="http://www.w3.org/2000/svg">' +
+    '<g fill="none" fill-rule="evenodd"><g stroke-width="2" transform="translate(1 1)">' +
+    '<circle cx="18" cy="18" r="18" stroke-opacity=".5"></circle>' +
+    '<path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" dur="1s" ' +
+    'from="0 18 18" repeatCount="indefinite" to="360 18 18" type="rotate"></animateTransform></path>' +
+    "</g></g></svg></div>";
+
+  var SECTION_HTML =
+    '<section id="system-status" class="system-status" aria-labelledby="system-status-heading">' +
+    '<div class="f changed"><h2 id="system-status-heading">System status</h2>' +
+    '<div class="status-nav">' +
+    '<button type="button" class="status-nav-btn" data-dir="prev" aria-label="Previous period" disabled>‹</button>' +
+    '<span class="status-range" id="system-status-range">Loading…</span>' +
+    '<button type="button" class="status-nav-btn" data-dir="next" aria-label="Next period" disabled>›</button>' +
+    "</div></div>" +
+    '<div id="system-status-rows" class="status-rows">' +
+    SPINNER +
+    "</div></section>";
+
+  // Sapper hydrates over the SSR'd DOM and discards any element it
+  // doesn't recognize as part of its own component tree — so this
+  // section can't just be static markup in index.html, it has to be
+  // built and (re-)inserted from script, and watched in case
+  // hydration tears it out from under us.
+  function findAnchor() {
+    return document.querySelector(".f.changed");
+  }
+
+  function buildSection() {
+    var wrapper = document.createElement("div");
+    wrapper.innerHTML = SECTION_HTML;
+    return wrapper.firstElementChild;
+  }
+
+  var refs = null; // { root, rangeLabel, prevBtn, nextBtn }
+
+  function ensureSection() {
+    var existing = document.getElementById("system-status");
+    if (existing) return existing;
+
+    var anchor = findAnchor();
+    if (!anchor || !anchor.parentNode) return null;
+
+    var section = buildSection();
+    anchor.parentNode.insertBefore(section, anchor);
+
+    refs = {
+      root: section.querySelector("#system-status-rows"),
+      rangeLabel: section.querySelector("#system-status-range"),
+      prevBtn: section.querySelector('.status-nav-btn[data-dir="prev"]'),
+      nextBtn: section.querySelector('.status-nav-btn[data-dir="next"]'),
+    };
+    refs.prevBtn.addEventListener("click", onPrev);
+    refs.nextBtn.addEventListener("click", onNext);
+
+    if (state.ready) render();
+    else if (state.error) showError();
+
+    return section;
+  }
+
+  function watchForRemoval() {
+    var host = document.querySelector("main.container") || document.body;
+    if (!host || !window.MutationObserver) return;
+    new MutationObserver(function () {
+      if (!document.getElementById("system-status")) ensureSection();
+    }).observe(host, { childList: true });
+  }
 
   function toDateOnly(d) {
     return new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate()));
@@ -130,82 +194,102 @@
     return row;
   }
 
-  function init(sites, issuesBySlug, startBySlug) {
+  var state = {
+    ready: false,
+    error: false,
+    sites: null,
+    issuesBySlug: {},
+    startBySlug: {},
+    windowEnd: toDateOnly(new Date()),
+  };
+
+  function render() {
+    if (!refs || !refs.root) return;
     var today = toDateOnly(new Date());
-    var windowEnd = today;
-
-    function render() {
-      var windowStart = addDays(windowEnd, -(WINDOW_DAYS - 1));
-      root.innerHTML = "";
-      sites.forEach(function (site) {
-        var events = issuesBySlug[site.slug] || [];
-        var siteStart = startBySlug[site.slug] || null;
-        root.appendChild(renderRow(site, events, siteStart, windowStart, windowEnd));
-      });
-      rangeLabel.textContent = formatRange(windowStart, windowEnd);
-
-      var earliestStart = sites.reduce(function (min, site) {
-        var s = startBySlug[site.slug];
-        if (!s) return min;
-        return !min || s < min ? s : min;
-      }, null);
-      prevBtn.disabled = !!earliestStart && windowStart <= earliestStart;
-      nextBtn.disabled = windowEnd >= today;
-    }
+    var windowStart = addDays(state.windowEnd, -(WINDOW_DAYS - 1));
 
-    prevBtn.addEventListener("click", function () {
-      windowEnd = addDays(windowEnd, -WINDOW_DAYS);
-      render();
-    });
-    nextBtn.addEventListener("click", function () {
-      windowEnd = addDays(windowEnd, WINDOW_DAYS);
-      if (windowEnd > today) windowEnd = today;
-      render();
+    refs.root.innerHTML = "";
+    state.sites.forEach(function (site) {
+      var events = state.issuesBySlug[site.slug] || [];
+      var siteStart = state.startBySlug[site.slug] || null;
+      refs.root.appendChild(renderRow(site, events, siteStart, windowStart, state.windowEnd));
     });
+    refs.rangeLabel.textContent = formatRange(windowStart, state.windowEnd);
 
+    var earliestStart = state.sites.reduce(function (min, site) {
+      var s = state.startBySlug[site.slug];
+      if (!s) return min;
+      return !min || s < min ? s : min;
+    }, null);
+    refs.prevBtn.disabled = !!earliestStart && windowStart <= earliestStart;
+    refs.nextBtn.disabled = state.windowEnd >= today;
+  }
+
+  function showError() {
+    if (!refs || !refs.root) return;
+    refs.root.innerHTML = "";
+    refs.root.appendChild(el("p", "status-error", "Status data is unavailable right now."));
+    refs.rangeLabel.textContent = "";
+    refs.prevBtn.disabled = true;
+    refs.nextBtn.disabled = true;
+  }
+
+  function onPrev() {
+    state.windowEnd = addDays(state.windowEnd, -WINDOW_DAYS);
     render();
   }
 
-  fetchJson(RAW_BASE + "summary.json")
-    .then(function (sites) {
-      var startBySlug = {};
-      var startFetches = sites.map(function (site) {
-        return fetch(RAW_BASE + site.slug + ".yml")
-          .then(function (res) {
-            return res.ok ? res.text() : "";
-          })
-          .then(function (text) {
-            var m = text.match(/startTime:\s*([^\n]+)/);
-            if (m) startBySlug[site.slug] = toDateOnly(new Date(m[1].trim()));
-          })
-          .catch(function () {});
-      });
+  function onNext() {
+    var today = toDateOnly(new Date());
+    state.windowEnd = addDays(state.windowEnd, WINDOW_DAYS);
+    if (state.windowEnd > today) state.windowEnd = today;
+    render();
+  }
 
-      var issuesBySlug = {};
-      var issuesFetch = fetchJson(ISSUES_URL)
-        .then(function (issues) {
-          var events = issues.map(classifyIssue).filter(Boolean);
-          // Single-monitor setup: attribute all events to every site.
-          sites.forEach(function (site) {
-            issuesBySlug[site.slug] = events;
-          });
-        })
-        .catch(function () {
-          // Rate-limited or offline — fall back to an all-green bar.
-          sites.forEach(function (site) {
-            issuesBySlug[site.slug] = [];
-          });
+  function loadData() {
+    fetchJson(RAW_BASE + "summary.json")
+      .then(function (sites) {
+        state.sites = sites;
+
+        var startFetches = sites.map(function (site) {
+          return fetch(RAW_BASE + site.slug + ".yml")
+            .then(function (res) {
+              return res.ok ? res.text() : "";
+            })
+            .then(function (text) {
+              var m = text.match(/startTime:\s*([^\n]+)/);
+              if (m) state.startBySlug[site.slug] = toDateOnly(new Date(m[1].trim()));
+            })
+            .catch(function () {});
         });
 
-      return Promise.all(startFetches.concat([issuesFetch])).then(function () {
-        init(sites, issuesBySlug, startBySlug);
+        var issuesFetch = fetchJson(ISSUES_URL)
+          .then(function (issues) {
+            var events = issues.map(classifyIssue).filter(Boolean);
+            sites.forEach(function (site) {
+              state.issuesBySlug[site.slug] = events;
+            });
+          })
+          .catch(function () {
+            // Rate-limited or offline — fall back to an all-green bar.
+            sites.forEach(function (site) {
+              state.issuesBySlug[site.slug] = [];
+            });
+          });
+
+        return Promise.all(startFetches.concat([issuesFetch]));
+      })
+      .then(function () {
+        state.ready = true;
+        render();
+      })
+      .catch(function () {
+        state.error = true;
+        showError();
       });
-    })
-    .catch(function () {
-      root.innerHTML = "";
-      root.appendChild(el("p", "status-error", "Status data is unavailable right now."));
-      rangeLabel.textContent = "";
-      prevBtn.disabled = true;
-      nextBtn.disabled = true;
-    });
+  }
+
+  ensureSection();
+  watchForRemoval();
+  loadData();
 })();
diff --git a/global.css b/global.css
index 7fb91b706..33cc898d8 100644
--- a/global.css
+++ b/global.css
@@ -354,14 +354,38 @@ article.up::after {
   background: var(--up-border-left-color);
 }
 
-/* The top summary banner already carries its own status emoji —
-   the corner dot is redundant there, so drop it. */
+/* The top summary banner carries its own status icon (see
+   status-icon-fix.js) — the corner dot is redundant there. */
 article.up:not(.link)::after,
 article.degraded:not(.link)::after,
 article.down:not(.link)::after {
   display: none;
 }
 
+/* Real SVG icon replacing the bundle's hardcoded emoji. The icon
+   itself is a self-contained outline glyph, colored via
+   currentColor to match its status. */
+.status-banner-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-right: 0.5rem;
+  vertical-align: -4px;
+}
+
+.status-banner-icon.up {
+  color: var(--up-border-left-color);
+}
+
+.status-banner-icon.degraded {
+  color: var(--degraded-border-left-color);
+}
+
+.status-banner-icon.down {
+  color: var(--down-border-left-color);
+}
+
 /* Pulse ring on live/healthy status dots — signals "actively
    monitored", not just a static state. Square to match the dot. */
 article.up.link::before {
@@ -515,12 +539,26 @@ article.degraded-active {
 .live-status article.svelte-fqsq6s.svelte-fqsq6s.svelte-fqsq6s,
 .live-status article.graph.svelte-fqsq6s.svelte-fqsq6s.svelte-fqsq6s {
   position: relative;
-  padding-right: 1.25rem;
+  padding-right: 200px;
+  min-height: 96px;
 }
 
-/* Sparkline background-image removed — card shows status text only */
 .live-status article.graph.svelte-fqsq6s.svelte-fqsq6s.svelte-fqsq6s {
-  background-image: none !important;
+  background-image: var(--background);
+  background-size: auto 48px;
+  background-repeat: no-repeat;
+  background-position: right 1.25rem bottom 1rem;
+  opacity: var(--graph-opacity);
+  filter: var(--graph-filter);
+}
+
+/* The response-time chart on a monitor's detail page is drawn on a
+   <canvas> with its teal line color baked into the compiled bundle
+   (not a CSS variable) — hue-shift it to the theme's green instead
+   of hand-patching the minified JS. Same rotation as the sparkline
+   above, so both read as the same base green. */
+main canvas {
+  filter: var(--graph-filter);
 }
 
 .live-status .icon,
@@ -653,7 +691,6 @@ article.degraded-active {
   min-width: 4px;
   height: 28px;
   background: var(--up-border-left-color);
-  opacity: 0.85;
 }
 
 .status-cell.degraded {
diff --git a/index.html b/index.html
index c6d8dda31..e9cac467a 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
           'beforeend',
           '<link rel="stylesheet" href={`${config.path}/themes/light.css`} onload="document.documentElement.style.display = \'\'">',
         );
-      } </script> <link href=/themes/light.css rel=stylesheet media=(prefers-color-scheme:light)> <link href=/themes/dark.css rel=stylesheet media=(prefers-color-scheme:dark)><link href=/global.css rel=stylesheet><link href=https://raw.githubusercontent.com/CommandCodeAI/commandcode-status/master/assets/favicon.svg rel=icon type=image/svg><link href=/logo-192.png rel=icon type=image/png> <link href=/client/client.9b2e11fb.js rel=modulepreload as=script crossorigin=use-credentials><link href=/client/client-31a52aa5.css rel=preload as=style><link href=/client/index.1e36db55.js rel=modulepreload as=script crossorigin=use-credentials><link href=/client/createOctokit.5dd4437e.js rel=modulepreload as=script crossorigin=use-credentials><link href=/client/inject_styles.803b7e80.js rel=modulepreload as=script crossorigin=use-credentials><link href=/client/createOctokit-a85f76c7.css rel=preload as=style><link href=/client/index-b0b6455a.css rel=preload as=style></head> <body> <div id=sapper> <nav class=svelte-a08hsz><div class="svelte-a08hsz container"><div><a class="svelte-a08hsz logo" href=https://status.commandcode.ai><img alt="" class=svelte-a08hsz src=https://commandcode.ai/logov2/logo-bg-transparent-fg-dark.svg> <div>Status</div></a></div> <script src=/client/nav-label-fix.js></script> <ul class=svelte-a08hsz><li><a class=svelte-a08hsz href=https://commandcode.ai target=_self>Command Code</a> <li><a class=svelte-a08hsz href=/ target=_self aria-current=page>Status</a> <li><a class=svelte-a08hsz href=https://github.com/CommandCodeAI/commandcode-status/issues target=_self>Subscribe on GitHub</a> </li> </ul></div> </nav> <main class=container> <header class=svelte-ngkazm> </header> <section class=svelte-8lnl4f><div class="svelte-68jxue loading"><svg class=svelte-68jxue height=38 stroke=#aaa width=38 xmlns=http://www.w3.org/2000/svg><g fill=none fill-rule=evenodd><g stroke-width=2 transform="translate(1 1)"><circle cx=18 cy=18 r=18 stroke-opacity=.5></circle><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName=transform dur=1s from="0 18 18" repeatCount=indefinite to="360 18 18" type=rotate></animateTransform></path></g></g></svg></div> </section> <section class=svelte-8lnl4f><div class="svelte-68jxue loading"><svg class=svelte-68jxue height=38 stroke=#aaa width=38 xmlns=http://www.w3.org/2000/svg><g fill=none fill-rule=evenodd><g stroke-width=2 transform="translate(1 1)"><circle cx=18 cy=18 r=18 stroke-opacity=.5></circle><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName=transform dur=1s from="0 18 18" repeatCount=indefinite to="360 18 18" type=rotate></animateTransform></path></g></g></svg></div> </section> <section id=system-status class=system-status aria-labelledby=system-status-heading> <div class="f changed"><h2 id=system-status-heading>System status</h2> <div class=status-nav><button type=button class=status-nav-btn data-dir=prev aria-label="Previous period" disabled>‹</button> <span class=status-range id=system-status-range>Loading…</span> <button type=button class=status-nav-btn data-dir=next aria-label="Next period" disabled>›</button></div></div> <div id=system-status-rows class=status-rows><div class=loading><svg height=38 stroke=#aaa width=38 xmlns=http://www.w3.org/2000/svg><g fill=none fill-rule=evenodd><g stroke-width=2 transform="translate(1 1)"><circle cx=18 cy=18 r=18 stroke-opacity=.5></circle><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName=transform dur=1s from="0 18 18" repeatCount=indefinite to="360 18 18" type=rotate></animateTransform></path></g></g></svg></div></div></section> <script defer src=/client/system-status.js></script> <div class="svelte-fqsq6s f changed"><h2>Live Status</h2> <form class="svelte-fqsq6s f r"><div><input class=svelte-fqsq6s id=data_day name=d type=radio value=day><label class=svelte-fqsq6s for=data_day>24h</label></div> <div><input class=svelte-fqsq6s id=data_week name=d type=radio value=week checked><label class=svelte-fqsq6s for=data_week>7d</label></div> <div><input class=svelte-fqsq6s id=data_month name=d type=radio value=month><label class=svelte-fqsq6s for=data_month>30d</label></div> <div><input class=svelte-fqsq6s id=data_year name=d type=radio value=year><label class=svelte-fqsq6s for=data_year>1y</label></div> <div><input class=svelte-fqsq6s id=data_all name=d type=radio value=all><label class=svelte-fqsq6s for=data_all>all</label></div></form></div> <section class="svelte-fqsq6s live-status"><div class="svelte-68jxue loading"><svg class=svelte-68jxue height=38 stroke=#aaa width=38 xmlns=http://www.w3.org/2000/svg><g fill=none fill-rule=evenodd><g stroke-width=2 transform="translate(1 1)"><circle cx=18 cy=18 r=18 stroke-opacity=.5></circle><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName=transform dur=1s from="0 18 18" repeatCount=indefinite to="360 18 18" type=rotate></animateTransform></path></g></g></svg></div> </section> <section><div class="svelte-68jxue loading"><svg class=svelte-68jxue height=38 stroke=#aaa width=38 xmlns=http://www.w3.org/2000/svg><g fill=none fill-rule=evenodd><g stroke-width=2 transform="translate(1 1)"><circle cx=18 cy=18 r=18 stroke-opacity=.5></circle><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName=transform dur=1s from="0 18 18" repeatCount=indefinite to="360 18 18" type=rotate></animateTransform></path></g></g></svg></div> </section> <section><div class="svelte-68jxue loading"><svg class=svelte-68jxue height=38 stroke=#aaa width=38 xmlns=http://www.w3.org/2000/svg><g fill=none fill-rule=evenodd><g stroke-width=2 transform="translate(1 1)"><circle cx=18 cy=18 r=18 stroke-opacity=.5></circle><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName=transform dur=1s from="0 18 18" repeatCount=indefinite to="360 18 18" type=rotate></animateTransform></path></g></g></svg></div></section></main> <footer class=svelte-jbr799><p></p> </footer></div> <script> try {
+      } </script> <link href=/themes/light.css rel=stylesheet media=(prefers-color-scheme:light)> <link href=/themes/dark.css rel=stylesheet media=(prefers-color-scheme:dark)><link href=/global.css rel=stylesheet><link href=https://raw.githubusercontent.com/CommandCodeAI/commandcode-status/master/assets/favicon.svg rel=icon type=image/svg><link href=/logo-192.png rel=icon type=image/png> <link href=/client/client.9b2e11fb.js rel=modulepreload as=script crossorigin=use-credentials><link href=/client/client-31a52aa5.css rel=preload as=style><link href=/client/index.1e36db55.js rel=modulepreload as=script crossorigin=use-credentials><link href=/client/createOctokit.5dd4437e.js rel=modulepreload as=script crossorigin=use-credentials><link href=/client/inject_styles.803b7e80.js rel=modulepreload as=script crossorigin=use-credentials><link href=/client/createOctokit-a85f76c7.css rel=preload as=style><link href=/client/index-b0b6455a.css rel=preload as=style></head> <body> <div id=sapper> <nav class=svelte-a08hsz><div class="svelte-a08hsz container"><div><a class="svelte-a08hsz logo" href=https://status.commandcode.ai><img alt="" class=svelte-a08hsz src=https://commandcode.ai/logov2/logo-bg-transparent-fg-dark.svg> <div>Status</div></a></div> <script src=/client/nav-label-fix.js></script> <script src=/client/status-icon-fix.js></script> <ul class=svelte-a08hsz><li><a class=svelte-a08hsz href=https://commandcode.ai target=_self>Command Code</a> <li><a class=svelte-a08hsz href=/ target=_self aria-current=page>Status</a> <li><a class=svelte-a08hsz href=https://github.com/CommandCodeAI/commandcode-status/issues target=_self>Subscribe on GitHub</a> </li> </ul></div> </nav> <main class=container> <header class=svelte-ngkazm> </header> <section class=svelte-8lnl4f><div class="svelte-68jxue loading"><svg class=svelte-68jxue height=38 stroke=#aaa width=38 xmlns=http://www.w3.org/2000/svg><g fill=none fill-rule=evenodd><g stroke-width=2 transform="translate(1 1)"><circle cx=18 cy=18 r=18 stroke-opacity=.5></circle><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName=transform dur=1s from="0 18 18" repeatCount=indefinite to="360 18 18" type=rotate></animateTransform></path></g></g></svg></div> </section> <section class=svelte-8lnl4f><div class="svelte-68jxue loading"><svg class=svelte-68jxue height=38 stroke=#aaa width=38 xmlns=http://www.w3.org/2000/svg><g fill=none fill-rule=evenodd><g stroke-width=2 transform="translate(1 1)"><circle cx=18 cy=18 r=18 stroke-opacity=.5></circle><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName=transform dur=1s from="0 18 18" repeatCount=indefinite to="360 18 18" type=rotate></animateTransform></path></g></g></svg></div> </section> <script defer src=/client/system-status.js></script> <div class="svelte-fqsq6s f changed"><h2>Live Status</h2> <form class="svelte-fqsq6s f r"><div><input class=svelte-fqsq6s id=data_day name=d type=radio value=day><label class=svelte-fqsq6s for=data_day>24h</label></div> <div><input class=svelte-fqsq6s id=data_week name=d type=radio value=week checked><label class=svelte-fqsq6s for=data_week>7d</label></div> <div><input class=svelte-fqsq6s id=data_month name=d type=radio value=month><label class=svelte-fqsq6s for=data_month>30d</label></div> <div><input class=svelte-fqsq6s id=data_year name=d type=radio value=year><label class=svelte-fqsq6s for=data_year>1y</label></div> <div><input class=svelte-fqsq6s id=data_all name=d type=radio value=all><label class=svelte-fqsq6s for=data_all>all</label></div></form></div> <section class="svelte-fqsq6s live-status"><div class="svelte-68jxue loading"><svg class=svelte-68jxue height=38 stroke=#aaa width=38 xmlns=http://www.w3.org/2000/svg><g fill=none fill-rule=evenodd><g stroke-width=2 transform="translate(1 1)"><circle cx=18 cy=18 r=18 stroke-opacity=.5></circle><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName=transform dur=1s from="0 18 18" repeatCount=indefinite to="360 18 18" type=rotate></animateTransform></path></g></g></svg></div> </section> <section><div class="svelte-68jxue loading"><svg class=svelte-68jxue height=38 stroke=#aaa width=38 xmlns=http://www.w3.org/2000/svg><g fill=none fill-rule=evenodd><g stroke-width=2 transform="translate(1 1)"><circle cx=18 cy=18 r=18 stroke-opacity=.5></circle><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName=transform dur=1s from="0 18 18" repeatCount=indefinite to="360 18 18" type=rotate></animateTransform></path></g></g></svg></div> </section> <section><div class="svelte-68jxue loading"><svg class=svelte-68jxue height=38 stroke=#aaa width=38 xmlns=http://www.w3.org/2000/svg><g fill=none fill-rule=evenodd><g stroke-width=2 transform="translate(1 1)"><circle cx=18 cy=18 r=18 stroke-opacity=.5></circle><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName=transform dur=1s from="0 18 18" repeatCount=indefinite to="360 18 18" type=rotate></animateTransform></path></g></g></svg></div></section></main> <footer class=svelte-jbr799><p></p> </footer></div> <script> try {
         if (typeof window !== "undefined" && window.navigator && navigator.serviceWorker) {
           navigator.serviceWorker.getRegistrations().then(function (registrations) {
             for (let registration of registrations) {
diff --git a/themes/dark.css b/themes/dark.css
index 2e0d7d310..6e539a0bf 100644
--- a/themes/dark.css
+++ b/themes/dark.css
@@ -25,5 +25,5 @@
   --submit-button-background-color: #18181b;
   --submit-button-color: #f4f4f5;
   --graph-opacity: 0.85;
-  --graph-filter: none;
+  --graph-filter: hue-rotate(-26deg);
 }
diff --git a/themes/light.css b/themes/light.css
index f5115a8ef..3f4bbb5ef 100644
--- a/themes/light.css
+++ b/themes/light.css
@@ -24,5 +24,5 @@
   --submit-button-background-color: #f4f4f5;
   --submit-button-color: #18181b;
   --graph-opacity: 1;
-  --graph-filter: none;
+  --graph-filter: hue-rotate(-26deg);
 }
diff --git a/themes/night.css b/themes/night.css
index 55fce0018..48027cc8e 100644
--- a/themes/night.css
+++ b/themes/night.css
@@ -25,5 +25,5 @@
   --submit-button-background-color: #161b22;
   --submit-button-color: #c9d1d9;
   --graph-opacity: 0.85;
-  --graph-filter: none;
+  --graph-filter: hue-rotate(-40deg);
 }
diff --git a/themes/ocean.css b/themes/ocean.css
index 231eb8184..6a591c2dd 100644
--- a/themes/ocean.css
+++ b/themes/ocean.css
@@ -25,5 +25,5 @@
   --submit-button-background-color: #111a30;
   --submit-button-color: #f0f4ff;
   --graph-opacity: 0.85;
-  --graph-filter: none;
+  --graph-filter: hue-rotate(-26deg);
 }