Index: src/views/pages/admin-listeners.ejs
===================================================================
--- src/views/pages/admin-listeners.ejs	(revision 732272a320793693be207b1b67af729b1feca30f)
+++ src/views/pages/admin-listeners.ejs	(revision bec9001bcf2d0789872bf444810fec49f0acb5e9)
@@ -1,29 +1,50 @@
-<div class="container admin-listeners-page">
-  <p><a href="/admin" class="btn">&larr; <%= t('aaud.back') %></a></p>
-  <h1><%= t('alis.lis_title') %></h1>
+<%# Beheer -> Media -> Luisteraars (shaer-0nh).
 
+    Deze pagina had zijn eigen <style>-blok met eigen klassen (.lis-*) en week
+    daarmee af van de vier tabs ernaast -- andere breedte, andere kop, andere
+    rij. Nu op dezelfde ax-*-romp; wat overblijft is een lijst zoals audio en
+    playlists er ook een hebben. %>
+<%- include('../partials/admin-styles') %>
+<div class="container ax-page">
+
+  <p><a href="/admin" class="ax-btn">&larr; <%= t('nav.admin') %></a></p>
   <%- include('../partials/media-tabs', { active: 'listeners', audioOn: audioOn }) %>
-
-  <%# Waarom dit een eigen tab is en niet een lijstje bij de volgers: dit zijn
-      accounts die aan de BIBLIOTHEEK hangen. Ze krijgen de muziek en met opzet
-      niet de gewone posts, en dat verschil hoort zichtbaar te zijn -- ook voor
-      wie later moet begrijpen waarom ze niet in de volgerslijst staan. %>
-  <p class="admin-tagline"><%= t('alis.lis_intro') %></p>
+  <header class="ax-header">
+    <div>
+      <h1><%= t('alis.lis_title') %></h1>
+      <%# Waarom dit een eigen tab is en niet een lijstje bij de volgers: dit
+          zijn accounts die aan de BIBLIOTHEEK hangen. Ze krijgen de muziek en
+          met opzet niet de gewone posts, en dat verschil hoort zichtbaar te
+          zijn -- ook voor wie later moet begrijpen waarom ze niet in de
+          volgerslijst staan. %>
+      <p class="ax-tagline"><%= t('alis.lis_intro') %></p>
+    </div>
+  </header>
 
   <% if (!luisteraars.length) { %>
-    <p class="lis-leeg"><%= t('alis.lis_empty') %></p>
+    <div class="ax-empty">
+      <div class="ax-empty-icon">&#127911;</div>
+      <p><%= t('alis.lis_empty') %></p>
+    </div>
   <% } else { %>
-    <p class="lis-telling"><strong><%= luisteraars.length %></strong> <%= t('alis.lis_count') %></p>
-    <ul class="lis-lijst">
+    <p class="ax-tagline" style="margin-bottom:.75rem;"><strong><%= luisteraars.length %></strong> <%= t('alis.lis_count') %></p>
+    <ul class="ax-list">
       <% luisteraars.forEach(function (l) { %>
-        <li class="lis-rij">
-          <span class="lis-naam"><%= l.name || l.handle || l.actor_uri %></span>
-          <% if (l.handle) { %><span class="lis-handle"><%= l.handle %></span><% } %>
-          <span class="lis-meta">
-            <%= t('alis.lis_since') %> <%= formatDate(l.created_at) %>
-            ·
-            <%= t('alis.lis_last') %>:
-            <%= l.last_delivery_at ? formatDate(l.last_delivery_at) : t('alis.lis_never') %>
-          </span>
+        <li class="ax-track">
+          <div class="ax-track-cover">
+            <% if (l.icon) { %><img src="<%= l.icon %>" alt="" loading="lazy" decoding="async"><% } else { %>&#9835;<% } %>
+          </div>
+          <div class="ax-track-meta">
+            <div class="ax-track-title">
+              <%= l.name || l.handle || l.actor_uri %>
+              <% if (l.last_error_at) { %><span class="ax-pill"><%= t('alis.lis_error') %></span><% } %>
+            </div>
+            <div class="ax-track-sub">
+              <% if (l.handle) { %><span><%= l.handle %></span><span class="ax-track-sep">&middot;</span><% } %>
+              <span><%= t('alis.lis_since') %> <%= formatDate(l.created_at) %></span>
+              <span class="ax-track-sep">&middot;</span>
+              <span><%= t('alis.lis_last') %>: <%= l.last_delivery_at ? formatDate(l.last_delivery_at) : t('alis.lis_never') %></span>
+            </div>
+          </div>
         </li>
       <% }); %>
@@ -31,19 +52,2 @@
   <% } %>
 </div>
-
-<style>
-.admin-listeners-page { max-width: 760px; margin: 3rem auto; padding: 0 1rem; }
-.admin-listeners-page h1 { font-family: var(--font-display, serif); font-size: 1.8rem; margin: 0 0 0.4rem; }
-.admin-listeners-page .admin-tagline { color: var(--ink-muted); margin: 0 0 1.5rem; }
-.lis-telling { color: var(--ink-muted); font-size: 0.9rem; }
-.lis-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
-.lis-rij {
-  display: flex; flex-direction: column; gap: 0.15rem;
-  border: 1px solid var(--rule); border-radius: 8px;
-  padding: 0.7rem 0.85rem; background: var(--paper-2);
-}
-.lis-naam { font-weight: 600; }
-.lis-handle { font-size: 0.85rem; color: var(--ink); }
-.lis-meta { font-size: 0.78rem; color: var(--ink-muted); }
-.lis-leeg { color: var(--ink-muted); }
-</style>
Index: src/views/pages/admin-media.ejs
===================================================================
--- src/views/pages/admin-media.ejs	(revision 732272a320793693be207b1b67af729b1feca30f)
+++ src/views/pages/admin-media.ejs	(revision bec9001bcf2d0789872bf444810fec49f0acb5e9)
@@ -1,36 +1,49 @@
-<%# Beheer → Media: image library + cleanup (the Audio half links out to /admin/audio). %>
-<div class="admin-wrap" style="max-width:980px;margin:0 auto;padding:1.5rem 1rem;">
-  <a href="/admin" class="btn" style="margin-bottom:1rem;display:inline-block;">← <%= t('nav.admin') %></a>
-  <h1 style="font-family:var(--display,serif);margin:.2rem 0 1rem;"><%= t('admin.t_media') %></h1>
+<%# Beheer -> Media: de afbeeldingenbibliotheek met opruiming.
+    De audio-helft zit onder /admin/audio, als eigen tab.
 
+    Deze pagina stond volledig op inline styles en viel daarmee buiten het
+    ax-*-systeem waar audio en playlists al op zaten. Nu op dezelfde romp:
+    zelfde breedte, zelfde kop, tabs op dezelfde plek. %>
+<%- include('../partials/admin-styles') %>
+<div class="container ax-page">
+
+  <p><a href="/admin" class="ax-btn">&larr; <%= t('nav.admin') %></a></p>
   <%- include('../partials/media-tabs', { active: 'images', audioOn: audioOn }) %>
+  <header class="ax-header">
+    <div>
+      <h1><%= t('admin.t_media') %></h1>
+      <p class="ax-tagline">
+        <%= items.length %> <%= t('admin.media_count') %><% if (unusedCount) { %> &middot; <strong><%= unusedCount %></strong> <%= t('admin.media_unused') %><% } %>
+      </p>
+    </div>
+  </header>
 
-  <% if (success) { %><p style="background:rgba(60,160,90,.15);border:1px solid rgba(60,160,90,.4);padding:.5rem .8rem;border-radius:8px;"><%= success %></p><% } %>
+  <% if (success) { %><div class="ax-flash ax-flash-ok"><%= success %></div><% } %>
 
-  <div style="display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;">
-    <p style="margin:0;opacity:.75;">
-      <%= items.length %> <%= t('admin.media_count') %><% if (unusedCount) { %> · <strong><%= unusedCount %></strong> <%= t('admin.media_unused') %><% } %>
-    </p>
-    <% if (unusedCount) { %>
-    <button type="button" id="media-cleanup" class="btn" style="background:#b4452e;color:#fff;border-color:#b4452e;">🗑 <%= t('admin.media_cleanup') %> (<%= unusedCount %>)</button>
-    <% } %>
+  <% if (unusedCount) { %>
+  <div class="ax-actions-bar">
+    <button type="button" id="media-cleanup" class="ax-btn ax-btn-danger">&#128465; <%= t('admin.media_cleanup') %> (<%= unusedCount %>)</button>
   </div>
+  <% } %>
 
   <% if (!items.length) { %>
-    <p style="opacity:.7;"><%= t('admin.media_empty') %></p>
+    <div class="ax-empty">
+      <div class="ax-empty-icon">&#128247;</div>
+      <p><%= t('admin.media_empty') %></p>
+    </div>
   <% } else { %>
-  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem;">
+  <div class="ax-grid">
     <% items.forEach(function(it){ %>
-      <div class="media-card" data-file="<%= it.file %>" style="border:1px solid var(--rule,rgba(128,128,128,.25));border-radius:10px;overflow:hidden;background:var(--paper-2,rgba(128,128,128,.06));">
-        <div style="position:relative;aspect-ratio:1;background:#0a0e1a;">
-          <img src="<%= thumb(it.url, 320) %>" alt="" loading="lazy" decoding="async" style="width:100%;height:100%;object-fit:cover;display:block;">
-          <% if (it.hasVideo) { %><span title="animated cover" style="position:absolute;top:6px;right:6px;background:rgba(0,0,0,.6);border-radius:6px;padding:0 6px;font-size:13px;">🎬</span><% } %>
-          <% if (!it.usedCount) { %><span style="position:absolute;top:6px;left:6px;background:#b4452e;color:#fff;border-radius:6px;padding:1px 6px;font-size:11px;"><%= t('admin.media_unused') %></span><% } %>
+      <div class="ax-tile media-card" data-file="<%= it.file %>">
+        <div class="ax-tile-media" style="aspect-ratio:1;">
+          <img src="<%= thumb(it.url, 320) %>" alt="" loading="lazy" decoding="async" style="object-fit:cover;height:100%;">
+          <% if (it.hasVideo) { %><span class="ax-tile-badge ax-tile-badge-r" title="animated cover">&#127916;</span><% } %>
+          <% if (!it.usedCount) { %><span class="ax-tile-badge"><%= t('admin.media_unused') %></span><% } %>
         </div>
-        <div style="padding:.5rem .6rem;font-size:13px;">
-          <div style="opacity:.7;"><%= it.kb %> KB · <%= it.usedCount %>×</div>
-          <div style="display:flex;gap:.4rem;margin-top:.45rem;">
-            <button type="button" class="btn" style="padding:3px 8px;font-size:12px;" data-copy="<%= it.url %>"><%= t('admin.media_copy') %></button>
-            <button type="button" class="btn" style="padding:3px 8px;font-size:12px;background:transparent;border-color:#b4452e;color:#b4452e;" data-del="<%= it.file %>">🗑</button>
+        <div class="ax-tile-body">
+          <div class="ax-tile-meta"><%= it.kb %> KB &middot; <%= it.usedCount %>&times;</div>
+          <div class="ax-tile-actions">
+            <button type="button" class="ax-btn ax-btn-sm" data-copy="<%= it.url %>"><%= t('admin.media_copy') %></button>
+            <button type="button" class="ax-btn ax-btn-sm ax-btn-danger" data-del="<%= it.file %>">&#128465;</button>
           </div>
         </div>
Index: src/views/pages/admin-videos.ejs
===================================================================
--- src/views/pages/admin-videos.ejs	(revision 732272a320793693be207b1b67af729b1feca30f)
+++ src/views/pages/admin-videos.ejs	(revision bec9001bcf2d0789872bf444810fec49f0acb5e9)
@@ -1,34 +1,44 @@
-<%# Beheer → Media → Video's (Robins opdracht, 30-7): the videos C2S uploads
-    brought in (Shaer's composer, the help buoy), with usage and cleanup.
-    Same shape as the image page; the preview is the video itself with
-    preload="metadata", so the browser shows the first frame as its
-    thumbnail until real poster generation lands (bead: ffmpeg ontbreekt). %>
-<div class="admin-wrap" style="max-width:980px;margin:0 auto;padding:1.5rem 1rem;">
-  <a href="/admin" class="btn" style="margin-bottom:1rem;display:inline-block;">← <%= t('nav.admin') %></a>
-  <h1 style="font-family:var(--display,serif);margin:.2rem 0 1rem;"><%= t('admin.t_media') %></h1>
+<%# Beheer -> Media -> Video's (Robins opdracht, 30-7): de video's die via C2S
+    binnenkwamen (Shaers composer, de reddingsboei), met gebruik en opruiming.
 
+    De voorvertoning is de video zelf met preload="metadata", zodat de browser
+    het eerste beeld als miniatuur toont tot echte poster-generatie landt
+    (bead: ffmpeg ontbreekt).
+
+    Zelfde romp als de andere mediapagina's; stond hiervoor op inline styles. %>
+<%- include('../partials/admin-styles') %>
+<div class="container ax-page">
+
+  <p><a href="/admin" class="ax-btn">&larr; <%= t('nav.admin') %></a></p>
   <%- include('../partials/media-tabs', { active: 'videos', audioOn: audioOn }) %>
+  <header class="ax-header">
+    <div>
+      <h1><%= t('admin.t_media') %></h1>
+      <p class="ax-tagline"><%= items.length %> <%= t('admin.videos_count') %></p>
+    </div>
+  </header>
 
-  <% if (success) { %><p style="background:rgba(60,160,90,.15);border:1px solid rgba(60,160,90,.4);padding:.5rem .8rem;border-radius:8px;"><%= success %></p><% } %>
-
-  <p style="margin:0 0 1rem;opacity:.75;"><%= items.length %> <%= t('admin.videos_count') %></p>
+  <% if (success) { %><div class="ax-flash ax-flash-ok"><%= success %></div><% } %>
 
   <% if (!items.length) { %>
-    <p style="opacity:.7;"><%= t('admin.videos_empty') %></p>
+    <div class="ax-empty">
+      <div class="ax-empty-icon">&#127916;</div>
+      <p><%= t('admin.videos_empty') %></p>
+    </div>
   <% } else { %>
-  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;">
+  <div class="ax-grid" style="--ax-tile:220px;">
     <% items.forEach(function(it){ %>
-      <div class="media-card" data-file="<%= it.file %>" style="border:1px solid var(--rule,rgba(128,128,128,.25));border-radius:10px;overflow:hidden;background:var(--paper-2,rgba(128,128,128,.06));">
-        <div style="position:relative;aspect-ratio:16/10;background:#000;">
-          <video src="<%= it.url %>" preload="metadata" controls playsinline style="width:100%;height:100%;object-fit:contain;display:block;"></video>
-          <% if (!it.usedCount) { %><span style="position:absolute;top:6px;left:6px;background:#b4452e;color:#fff;border-radius:6px;padding:1px 6px;font-size:11px;z-index:1;"><%= t('admin.media_unused') %></span><% } %>
+      <div class="ax-tile media-card" data-file="<%= it.file %>">
+        <div class="ax-tile-media" style="aspect-ratio:16/10;background:#000;">
+          <video src="<%= it.url %>" preload="metadata" controls playsinline style="height:100%;object-fit:contain;"></video>
+          <% if (!it.usedCount) { %><span class="ax-tile-badge"><%= t('admin.media_unused') %></span><% } %>
         </div>
-        <div style="padding:.5rem .6rem;font-size:13px;">
-          <div style="opacity:.7;word-break:break-all;"><%= it.file %></div>
-          <div style="opacity:.7;"><%= it.kb %> KB · <%= it.usedCount %>×</div>
-          <div style="display:flex;gap:.4rem;margin-top:.45rem;">
-            <button type="button" class="btn" style="padding:3px 8px;font-size:12px;" data-copy="<%= it.url %>"><%= t('admin.media_copy') %></button>
+        <div class="ax-tile-body">
+          <div class="ax-tile-meta" style="word-break:break-all;"><%= it.file %></div>
+          <div class="ax-tile-meta"><%= it.kb %> KB &middot; <%= it.usedCount %>&times;</div>
+          <div class="ax-tile-actions">
+            <button type="button" class="ax-btn ax-btn-sm" data-copy="<%= it.url %>"><%= t('admin.media_copy') %></button>
             <% if (!it.usedCount) { %>
-            <button type="button" class="btn" style="padding:3px 8px;font-size:12px;background:transparent;border-color:#b4452e;color:#b4452e;" data-del="<%= it.file %>">🗑</button>
+            <button type="button" class="ax-btn ax-btn-sm ax-btn-danger" data-del="<%= it.file %>">&#128465;</button>
             <% } %>
           </div>