From c781a469f3e53b5559c97aa4cc88e793f9616a76 Mon Sep 17 00:00:00 2001
From: Zac Gaetano <zgaetano@wilddragon.net>
Date: Mon, 18 May 2026 10:49:46 -0400
Subject: [PATCH] =?UTF-8?q?feat(recorders):=20align=20with=20home/projects?=
 =?UTF-8?q?=20aesthetic=20=E2=80=94=20brand-blue=20gradient,=20refreshed?=
 =?UTF-8?q?=20cards,=20tile=20selectors,=20slide-panel=20polish?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 services/web-ui/public/recorders.html | 235 +++++++++-----------------
 1 file changed, 83 insertions(+), 152 deletions(-)

diff --git a/services/web-ui/public/recorders.html b/services/web-ui/public/recorders.html
index 69ec2c8..651cb26 100644
--- a/services/web-ui/public/recorders.html
+++ b/services/web-ui/public/recorders.html
@@ -10,186 +10,117 @@
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="css/common.css?v=3">
   <style>
-    /* Recorder grid */
+    /* ── Recorders page · AMPP-aligned theme ── */
+    .main {
+      background:
+        radial-gradient(ellipse 70% 50% at 50% 0%, oklch(28% 0.10 266 / 0.35), transparent 60%),
+        radial-gradient(ellipse 60% 40% at 90% 100%, oklch(35% 0.16 266 / 0.18), transparent 65%),
+        var(--bg-base);
+    }
+    .page-content { padding: 24px 32px 48px; }
+
     .recorder-grid {
       display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-      gap: var(--sp-4);
+      grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
+      gap: 16px;
     }
 
-    /* Recorder card */
     .recorder-card {
-      background: var(--bg-surface);
-      border: 1px solid var(--border);
-      border-radius: var(--r-lg);
-      padding: var(--sp-4);
-      display: flex;
-      flex-direction: column;
-      gap: var(--sp-3);
-      transition: border-color var(--t-fast);
+      position: relative;
+      background: oklch(13% 0.018 250 / 0.7);
+      border: 1px solid oklch(28% 0.04 260 / 0.5);
+      border-radius: 12px;
+      padding: 16px 18px 14px;
+      display: flex; flex-direction: column;
+      gap: 12px;
+      backdrop-filter: blur(6px);
+      transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
     }
-
-    .recorder-preview{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:var(--r-sm);overflow:hidden;margin:8px 0;border:1px solid var(--border)}
-    .recorder-preview video{width:100%;height:100%;object-fit:contain;display:block}
-    .recorder-preview-stamp{position:absolute;top:8px;left:8px;display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,0.55);backdrop-filter:blur(4px);padding:3px 8px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:0.12em;color:#fff}
-    .recorder-preview-dot{width:6px;height:6px;background:oklch(62% 0.22 25);border-radius:50%;animation:fsPulse 1.4s ease-in-out infinite}
-    @keyframes fsPulse{0%,100%{opacity:0.7}50%{opacity:1}}
+    .recorder-card:hover { border-color: oklch(45% 0.20 266 / 0.4); }
     .recorder-card.recording {
-      border-color: var(--accent-border);
+      border-color: oklch(62% 0.22 25 / 0.55);
+      background: oklch(15% 0.025 260 / 0.8);
+      box-shadow: 0 16px 40px -16px oklch(62% 0.22 25 / 0.25);
     }
+    .recorder-card.error { border-color: oklch(62% 0.22 25 / 0.5); }
 
-    .recorder-card.error {
-      border-color: oklch(62% 0.22 25 / 0.3);
-    }
-
-    /* Card header */
     .recorder-header {
-      display: flex;
-      align-items: flex-start;
-      justify-content: space-between;
-      gap: var(--sp-3);
+      display: flex; align-items: flex-start; justify-content: space-between;
+      gap: 12px;
     }
-
-    .recorder-id {
-      display: flex;
-      flex-direction: column;
-      gap: var(--sp-1);
-      min-width: 0;
-    }
-
+    .recorder-id { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
     .recorder-name {
-      font-size: var(--text-base);
-      font-weight: 500;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+      font-size: 15px; font-weight: 600;
+      letter-spacing: -0.005em;
+      color: var(--text-primary);
+      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
     }
+    .recorder-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+    .recorder-actions { display: flex; gap: 4px; flex-shrink: 0; }
 
-    .recorder-badges {
-      display: flex;
-      align-items: center;
-      gap: var(--sp-2);
-    }
+    .recorder-status-row { display: flex; align-items: center; gap: 10px; padding: 2px 0; }
+    .recorder-status-row .text-sm { font-size: 13px; font-weight: 500; }
+    .recorder-timer { margin-left: auto; font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: oklch(70% 0.18 266); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
+    .recorder-card.recording .recorder-timer { color: oklch(62% 0.22 25); }
 
-    .recorder-actions {
-      display: flex;
-      gap: var(--sp-1);
-      flex-shrink: 0;
-    }
+    .signal-strip { position: relative; height: 4px; background: oklch(20% 0.04 260); border-radius: 2px; overflow: hidden; }
+    .signal-strip-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: linear-gradient(90deg, oklch(55% 0.20 266), oklch(70% 0.18 266)); animation: signalSlide 2.4s linear infinite; }
+    .signal-strip--warn .signal-strip-fill { background: oklch(82% 0.15 90); }
+    .signal-strip--bad  .signal-strip-fill { background: oklch(62% 0.22 25); animation: none; opacity: 0.4; }
+    .signal-strip--idle .signal-strip-fill { background: oklch(35% 0.04 260); animation: none; opacity: 0.4; }
+    @keyframes signalSlide { 0% { transform: translateX(-100%) } 100% { transform: translateX(100%) } }
 
-    /* Status row */
-    .recorder-status-row {
-      display: flex;
-      align-items: center;
-      gap: var(--sp-3);
-    }
+    .recorder-preview { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 8px; overflow: hidden; border: 1px solid oklch(28% 0.04 260 / 0.5); }
+    .recorder-preview video { width: 100%; height: 100%; object-fit: contain; display: block; }
+    .recorder-preview-stamp { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; background: oklch(10% 0.015 250 / 0.7); backdrop-filter: blur(6px); padding: 4px 10px; border-radius: 999px; border: 1px solid oklch(62% 0.22 25 / 0.5); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: #fff; }
+    .recorder-preview-dot { width: 6px; height: 6px; background: oklch(62% 0.22 25); border-radius: 50%; animation: fsPulse 1.4s ease-in-out infinite; box-shadow: 0 0 8px oklch(62% 0.22 25); }
+    @keyframes fsPulse { 0%,100% { opacity: 0.7 } 50% { opacity: 1 } }
 
-    .recorder-timer {
-      font-size: var(--text-sm);
-      font-variant-numeric: tabular-nums;
-      color: var(--accent);
-      font-weight: 500;
-      letter-spacing: 0.02em;
-    }
+    .recorder-source { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: oklch(11% 0.018 250 / 0.6); border: 1px solid oklch(28% 0.04 260 / 0.4); border-radius: 6px; font-size: 12px; color: var(--text-secondary); font-family: var(--font-mono); letter-spacing: 0.01em; }
+    .recorder-source svg { color: var(--text-tertiary); }
 
-    .recorder-timer.hidden { display: none; }
+    .recorder-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid oklch(28% 0.04 260 / 0.4); }
+    .recorder-footer-meta { font-size: 11px; color: var(--text-tertiary); font-family: var(--font-mono); letter-spacing: 0.02em; }
+    .recorder-controls { display: flex; gap: 6px; }
 
-    /* Source info */
-    .recorder-source {
-      display: flex;
-      align-items: center;
-      gap: var(--sp-2);
-      font-size: var(--text-xs);
+    /* Source-type + mode selectors — brand-blue tile feel */
+    .source-type-row, .mode-row { display: flex; gap: 8px; }
+    .source-type-btn, .mode-btn {
+      flex: 1; padding: 10px 12px;
+      background: oklch(13% 0.018 250 / 0.6);
+      border: 1px solid oklch(28% 0.04 260 / 0.45);
+      border-radius: 8px;
+      font-size: 13px; font-weight: 500;
       color: var(--text-secondary);
+      cursor: pointer; text-align: center;
+      letter-spacing: 0.04em;
+      transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
     }
-
-    /* Connection info banner */
-    .recorder-connect-info {
-      margin-top: var(--sp-1);
-    }
-
-    /* Card footer */
-    .recorder-footer {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: var(--sp-3);
-      padding-top: var(--sp-2);
-      border-top: 1px solid var(--border);
-    }
-
-    .recorder-footer-meta {
-      font-size: var(--text-xs);
-      color: var(--text-tertiary);
-    }
-
-    .recorder-controls {
-      display: flex;
-      gap: var(--sp-2);
-    }
-
-    /* Form sections */
-    .form-section-label {
-      font-size: var(--text-xs);
-      font-weight: 500;
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
-      color: var(--text-tertiary);
-      padding-bottom: var(--sp-3);
-      border-bottom: 1px solid var(--border);
-    }
-
-    /* Source type radio row */
-    .source-type-row {
-      display: flex;
-      gap: var(--sp-2);
-    }
-
-    .source-type-btn {
-      flex: 1;
-      padding: var(--sp-2) var(--sp-3);
-      background: var(--bg-surface);
-      border: 1px solid var(--border);
-      border-radius: var(--r-md);
-      font-size: var(--text-sm);
-      color: var(--text-secondary);
-      cursor: pointer;
-      text-align: center;
-      transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
-    }
-
-    .source-type-btn:hover {
-      border-color: var(--border-strong);
+    .source-type-btn:hover, .mode-btn:hover {
+      border-color: oklch(45% 0.20 266 / 0.5);
       color: var(--text-primary);
     }
-
-    .source-type-btn.active {
-      border-color: var(--accent-border);
-      background: var(--accent-subtle);
-      color: var(--accent);
-      font-weight: 500;
+    .source-type-btn.active, .mode-btn.active {
+      border-color: oklch(55% 0.20 266 / 0.7);
+      background: oklch(20% 0.08 266 / 0.45);
+      color: oklch(78% 0.14 266);
+      font-weight: 600;
     }
 
-    /* Mode selector */
-    .mode-row {
-      display: flex;
-      gap: var(--sp-2);
+    .form-section-label {
+      font-size: 11px; font-weight: 600;
+      letter-spacing: 0.18em; text-transform: uppercase;
+      color: var(--text-tertiary);
+      padding: 14px 0 8px;
     }
 
-    .mode-btn {
-      flex: 1;
-      padding: var(--sp-2) var(--sp-3);
-      background: var(--bg-surface);
-      border: 1px solid var(--border);
-      border-radius: var(--r-md);
-      font-size: var(--text-sm);
-      color: var(--text-secondary);
-      cursor: pointer;
-      transition: all var(--t-fast);
-    }
+    .recorder-connect-info { margin-top: 4px; }
 
-    .mode-btn:hover { border-color: var(--border-strong); color: var(--text-primary); }
-    .mode-btn.active { border-color: var(--accent-border); background: var(--accent-subtle); color: var(--accent); font-weight: 500; }
+    /* Slide panel polish */
+    .slide-panel { background: oklch(11% 0.018 250 / 0.98); border-left: 1px solid oklch(28% 0.04 260 / 0.6); }
+    .slide-panel-header { border-bottom: 1px solid oklch(28% 0.04 260 / 0.4); padding: 18px 22px; }
+    .slide-panel-title { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
+    .slide-panel-body { padding: 18px 22px; }
   </style>
 </head>
 <body>