Index: src/views/shell.ejs
===================================================================
--- src/views/shell.ejs	(revision 3c196f9b9976494af4dfe1881088bf565b89b053)
+++ src/views/shell.ejs	(revision c869272b9b1102a8007325c0133c1a233861e51b)
@@ -239,8 +239,24 @@
 <body class="<%= bodyClass || 'on-home' %> has-bottom-tab" data-feed-view="<%= _e(safeSite.feed_view_default || 'timeline') %>" data-grid-cols="3" data-site-base="<%= _e((typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '') %>">
 
-<% if (user && user.readonly) { %>
-  <div style="position:sticky;top:0;z-index:50;background:#e8b04b;color:#1a1a1a;text-align:center;font-size:0.85rem;font-weight:600;padding:0.4rem 1rem;">
-    👁️ Demo — alleen-lezen: je kunt alles bekijken, maar niets wijzigen.
+<% if (typeof isViewer !== 'undefined' && isViewer) { %>
+  <div class="viewer-banner" role="status">
+    <span class="viewer-banner-ico" aria-hidden="true">👁️</span>
+    <span class="viewer-banner-text"><strong>Kijker-modus</strong> — je kunt alles bekijken, maar niets wijzigen.</span>
   </div>
+  <style>
+    .viewer-banner {
+      position: sticky; top: 0; z-index: 60;
+      display: flex; align-items: center; justify-content: center; gap: 0.5rem;
+      padding: 0.5rem 1rem;
+      background: linear-gradient(90deg,
+        color-mix(in srgb, var(--accent) 88%, #000) 0%,
+        var(--accent) 100%);
+      color: #fff;
+      font-size: 0.85rem; line-height: 1.3;
+      box-shadow: 0 1px 6px color-mix(in srgb, var(--accent) 45%, transparent);
+    }
+    .viewer-banner-ico { font-size: 1rem; }
+    .viewer-banner-text strong { font-weight: 700; }
+  </style>
 <% } %>
 
