From 2ce438852aa8f5746cac7c7f26e67a8cf6da9b3f Mon Sep 17 00:00:00 2001
From: Daniel Legt <contact@danlegt.com>
Date: Sat, 29 Aug 2026 18:37:36 +0300
Subject: [PATCH] Refactor web interface styles and structure for improved
 design and usability. Update CSS variables for a dark theme, enhance layout
 with glassmorphism effects, and streamline status item rendering in
 JavaScript. Add a danger class to delete buttons for better visibility.

---
 lib/agent/web/app.js     |    8 +-
 lib/agent/web/index.html | 1102 ++++++++++++++++++++++++++++----------
 2 files changed, 833 insertions(+), 277 deletions(-)

diff --git a/lib/agent/web/app.js b/lib/agent/web/app.js
index 6184efa..f618366 100644
--- a/lib/agent/web/app.js
+++ b/lib/agent/web/app.js
@@ -130,12 +130,15 @@
     ];
     setStartup(Boolean(data.startup_enabled));
     statusFields.replaceChildren(
-      ...fields.flatMap(([label, value]) => {
+      ...fields.map(([label, value]) => {
+        const item = document.createElement("div");
+        item.className = "status-item";
         const dt = document.createElement("dt");
         dt.textContent = label;
         const dd = document.createElement("dd");
         dd.textContent = value || "—";
-        return [dt, dd];
+        item.append(dt, dd);
+        return item;
       })
     );
   }
@@ -204,6 +207,7 @@
       const full = joinPath(data.path, entry.name);
       const del = document.createElement("button");
       del.type = "button";
+      del.className = "danger";
       del.textContent = "Delete";
       del.addEventListener("click", (event) => {
         event.stopPropagation();
diff --git a/lib/agent/web/index.html b/lib/agent/web/index.html
index 6b7958b..db22dfc 100644
--- a/lib/agent/web/index.html
+++ b/lib/agent/web/index.html
@@ -5,73 +5,289 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>win64_mp</title>
   <style>
+    /* —— Design tokens —— */
     :root {
-      --bg: #f4f5f7;
-      --card: #fff;
-      --text: #1f2937;
-      --muted: #6b7280;
-      --line: #e5e7eb;
-      --accent: #2563eb;
-      --danger: #b91c1c;
-      --ok: #047857;
+      --bg: #07130f;
+      --bg-deep: #040b09;
+      --surface: #04241e;
+      --surface-raised: #073028;
+      --surface-soft: rgba(3, 48, 39, 0.72);
+      --surface-glass: rgba(2, 44, 34, 0.82);
+      --text: #ebeeef;
+      --text-secondary: #bfc3c4;
+      --text-muted: #868d8f;
+      --accent: #2dd4bf;
+      --accent-bright: #5eead4;
+      --accent-deep: #059669;
+      --accent-ink: #022c22;
+      --border: rgba(94, 234, 212, 0.14);
+      --border-strong: rgba(94, 234, 212, 0.24);
+      --border-active: rgba(94, 234, 212, 0.42);
+      --danger: #f87171;
+      --danger-deep: #b91c1c;
+      --warning: #fbbf24;
+      --success: #34d399;
+      --focus: rgba(94, 234, 212, 0.45);
+      --radius-sm: 9px;
+      --radius-md: 14px;
+      --radius-lg: 20px;
+      --shadow-panel:
+        0 18px 42px rgba(0, 0, 0, 0.28),
+        inset 0 1px 0 rgba(255, 255, 255, 0.05);
+      --shadow-glass:
+        0 16px 36px rgba(0, 0, 0, 0.25),
+        inset 0 1px 0 rgba(255, 255, 255, 0.05);
+      --control-h: 40px;
+      --font:
+        Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+        "Segoe UI", sans-serif;
+      --mono: ui-monospace, "Cascadia Code", Consolas, monospace;
+      --ease: 180ms ease;
+      --max: 1180px;
     }
-    * { box-sizing: border-box; }
+
+    /* —— Reset / base —— */
+    *, *::before, *::after { box-sizing: border-box; }
+    html { color-scheme: dark; }
     body {
       margin: 0;
-      font: 15px/1.45 system-ui, Segoe UI, sans-serif;
+      min-height: 100vh;
+      font: 15px/1.5 var(--font);
       color: var(--text);
-      background: var(--bg);
+      background-color: var(--bg-deep);
+      background-image:
+        radial-gradient(ellipse 90% 55% at 50% -10%, rgba(45, 212, 191, 0.09), transparent 55%),
+        linear-gradient(rgba(94, 234, 212, 0.035) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(94, 234, 212, 0.035) 1px, transparent 1px);
+      background-size: auto, 48px 48px, 48px 48px;
+      background-attachment: fixed;
+      -webkit-font-smoothing: antialiased;
     }
-    header, main { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
-    header {
+    button, input, select, textarea { font: inherit; color: inherit; }
+    button { cursor: pointer; }
+    button:disabled { opacity: 0.42; cursor: not-allowed; }
+    img, canvas { max-width: 100%; height: auto; }
+    a { color: var(--accent); }
+    h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; }
+    p { margin: 0; }
+
+    /* —— Layout —— */
+    .app {
+      width: min(100% - 2rem, var(--max));
+      margin: 0 auto;
+      padding: 1.25rem 0 2.5rem;
+      animation: rise 0.45s ease both;
+    }
+    @keyframes rise {
+      from { opacity: 0; transform: translateY(8px); }
+      to { opacity: 1; transform: none; }
+    }
+
+    /* —— Top bar (glass) —— */
+    .topbar {
       display: flex;
-      align-items: baseline;
+      align-items: center;
       justify-content: space-between;
       gap: 1rem;
-      padding-top: 1.5rem;
-      padding-bottom: 1rem;
+      padding: 0.85rem 1.1rem;
+      margin-bottom: 0.85rem;
+      border-radius: var(--radius-md);
+      background: var(--surface-glass);
+      border: 1px solid var(--border);
+      box-shadow: var(--shadow-glass);
+      backdrop-filter: blur(16px);
+      -webkit-backdrop-filter: blur(16px);
     }
-    h1 { font-size: 1.35rem; margin: 0; }
-    h2 { font-size: 1rem; margin: 0 0 0.85rem; }
-    .badge {
-      font-size: 0.8rem;
-      padding: 0.2rem 0.55rem;
-      border-radius: 999px;
-      background: #e5e7eb;
-      color: var(--muted);
-    }
-    .badge.ok { background: #d1fae5; color: var(--ok); }
-    .badge.bad { background: #fee2e2; color: var(--danger); }
-    nav {
-      max-width: 1100px;
-      margin: 0 auto 1rem;
-      padding: 0 1.25rem;
+    .brand {
       display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      min-width: 0;
+    }
+    .brand-mark {
+      flex: none;
+      width: 34px;
+      height: 34px;
+      border-radius: 10px;
+      display: grid;
+      place-items: center;
+      color: var(--accent-ink);
+      background: linear-gradient(180deg, var(--accent), var(--accent-deep));
+      border: 1px solid rgba(45, 212, 191, 0.5);
+      box-shadow: 0 8px 18px rgba(5, 150, 105, 0.25);
+    }
+    .brand-mark svg { width: 18px; height: 18px; }
+    .brand-text { min-width: 0; }
+    .brand-text h1 {
+      font-size: 1.05rem;
+      line-height: 1.2;
+    }
+    .brand-text p {
+      margin-top: 0.1rem;
+      font-size: 0.78rem;
+      color: var(--text-muted);
+    }
+
+    /* —— Navigation —— */
+    nav.tabs {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.35rem;
+      padding: 0.4rem;
+      margin-bottom: 1rem;
+      border-radius: var(--radius-md);
+      background: var(--surface-glass);
+      border: 1px solid var(--border);
+      box-shadow: var(--shadow-glass);
+      backdrop-filter: blur(16px);
+      -webkit-backdrop-filter: blur(16px);
+    }
+    nav.tabs button {
+      appearance: none;
+      border: 1px solid transparent;
+      background: transparent;
+      color: var(--text-secondary);
+      border-radius: var(--radius-sm);
+      padding: 0.55rem 0.85rem;
+      font-size: 0.9rem;
+      font-weight: 500;
+      transition: background var(--ease), color var(--ease), border-color var(--ease), box-shadow var(--ease);
+    }
+    nav.tabs button:hover {
+      color: var(--text);
+      background: rgba(94, 234, 212, 0.06);
+      border-color: var(--border);
+    }
+    nav.tabs button.active {
+      color: var(--accent-bright);
+      background: rgba(45, 212, 191, 0.12);
+      border-color: var(--border-active);
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+    }
+    nav.tabs button:focus-visible {
+      outline: 2px solid var(--focus);
+      outline-offset: 2px;
+    }
+
+    /* —— Alerts —— */
+    .error {
+      display: none;
+      margin: 0 0 1rem;
+      padding: 0.75rem 1rem;
+      border-radius: var(--radius-sm);
+      border: 1px solid rgba(248, 113, 113, 0.35);
+      background: rgba(127, 29, 29, 0.35);
+      color: #fecaca;
+      font-size: 0.92rem;
+    }
+    .error.show { display: block; }
+
+    /* —— Badges —— */
+    .badge {
+      display: inline-flex;
+      align-items: center;
       gap: 0.4rem;
+      font-size: 0.75rem;
+      font-weight: 600;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+      padding: 0.35rem 0.7rem;
+      border-radius: 999px;
+      border: 1px solid var(--border);
+      background: rgba(3, 48, 39, 0.85);
+      color: var(--text-muted);
     }
-    nav button, .row button, .row select {
-      font: inherit;
-      border: 1px solid var(--line);
-      background: var(--card);
-      border-radius: 6px;
-      padding: 0.4rem 0.75rem;
-      cursor: pointer;
+    .badge::before {
+      content: "";
+      width: 0.45rem;
+      height: 0.45rem;
+      border-radius: 50%;
+      background: currentColor;
+      opacity: 0.85;
     }
-    nav button.active, .row button.primary {
-      background: var(--accent);
-      border-color: var(--accent);
-      color: #fff;
+    .badge.ok {
+      color: var(--success);
+      border-color: rgba(52, 211, 153, 0.35);
+      background: rgba(6, 78, 59, 0.45);
     }
-    button:disabled { opacity: 0.45; cursor: default; }
+    .badge.bad {
+      color: var(--danger);
+      border-color: rgba(248, 113, 113, 0.35);
+      background: rgba(127, 29, 29, 0.4);
+    }
+
+    /* —— Panels / surfaces —— */
     .panel {
       display: none;
-      background: var(--card);
-      border: 1px solid var(--line);
-      border-radius: 10px;
-      padding: 1rem 1.1rem 1.2rem;
-      margin-bottom: 1.5rem;
+      padding: 1.15rem 1.25rem 1.35rem;
+      border-radius: var(--radius-lg);
+      background-color: var(--surface);
+      background-image: linear-gradient(145deg, rgba(45, 212, 191, 0.06), transparent 42%);
+      border: 1px solid var(--border);
+      box-shadow: var(--shadow-panel);
     }
     .panel.active { display: block; }
+    .panel-head {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 0.75rem 1rem;
+      margin-bottom: 1rem;
+      padding-bottom: 0.9rem;
+      border-bottom: 1px solid var(--border);
+    }
+    .panel-head h2 {
+      font-size: 1.05rem;
+      color: var(--text);
+    }
+    .panel-head .lede {
+      margin-top: 0.2rem;
+      font-size: 0.85rem;
+      color: var(--text-muted);
+      max-width: 42rem;
+    }
+    .panel-actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.45rem;
+      align-items: center;
+    }
+    .toolbar {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+      align-items: center;
+      margin-bottom: 0.85rem;
+      padding: 0.65rem 0.75rem;
+      border-radius: var(--radius-md);
+      background: rgba(0, 0, 0, 0.22);
+      border: 1px solid var(--border);
+    }
+    .toolbar.compact { padding: 0.55rem 0.65rem; }
+    .meta {
+      color: var(--text-muted);
+      font-size: 0.85rem;
+    }
+    .hint {
+      flex: 1;
+      min-width: 12rem;
+      padding: 0.65rem 0.8rem;
+      border-radius: var(--radius-sm);
+      border: 1px solid var(--border);
+      background: rgba(0, 0, 0, 0.2);
+      color: var(--text-muted);
+      font-size: 0.88rem;
+    }
+    .sep {
+      width: 1px;
+      align-self: stretch;
+      min-height: 1.5rem;
+      background: var(--border);
+      margin: 0 0.15rem;
+    }
+
+    /* —— Forms —— */
     .row {
       display: flex;
       flex-wrap: wrap;
@@ -79,92 +295,337 @@
       align-items: center;
       margin-bottom: 0.75rem;
     }
-    input, textarea, select {
-      font: inherit;
-      border: 1px solid var(--line);
-      border-radius: 6px;
-      padding: 0.4rem 0.6rem;
+    label {
+      display: inline-flex;
+      flex-direction: column;
+      gap: 0.28rem;
+      font-size: 0.72rem;
+      font-weight: 600;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+      color: var(--text-muted);
+    }
+    label.inline {
+      flex-direction: row;
+      align-items: center;
+      text-transform: none;
+      letter-spacing: 0;
+      font-size: 0.9rem;
+      font-weight: 500;
+      color: var(--text-secondary);
+    }
+    label.check {
+      display: inline-flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 0.5rem;
+      user-select: none;
+      text-transform: none;
+      letter-spacing: 0;
+      font-size: 0.9rem;
+      font-weight: 500;
+      color: var(--text-secondary);
+      padding: 0.45rem 0.7rem;
+      border-radius: var(--radius-sm);
+      border: 1px solid var(--border);
+      background: rgba(0, 0, 0, 0.18);
+      cursor: pointer;
+      transition: border-color var(--ease), background var(--ease);
+    }
+    label.check:hover { border-color: var(--border-strong); }
+    label.check input {
+      width: 1rem;
+      height: 1rem;
+      margin: 0;
+      accent-color: var(--accent);
+    }
+    input[type="text"],
+    input[type="number"],
+    input[type="search"],
+    textarea,
+    select {
+      appearance: none;
+      height: var(--control-h);
+      padding: 0 0.75rem;
+      border-radius: var(--radius-sm);
+      border: 1px solid var(--border);
+      background: rgba(0, 0, 0, 0.28);
+      color: var(--text);
+      transition: border-color var(--ease), box-shadow var(--ease), background var(--ease);
+    }
+    textarea {
+      height: auto;
+      min-height: 5.5rem;
+      padding: 0.7rem 0.8rem;
+      width: 100%;
+      resize: vertical;
+      font-family: var(--mono);
+      font-size: 0.9rem;
+      line-height: 1.45;
+    }
+    select {
+      padding-right: 2rem;
+      background-image:
+        linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
+        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
+      background-position:
+        calc(100% - 14px) calc(50% - 2px),
+        calc(100% - 9px) calc(50% - 2px);
+      background-size: 5px 5px, 5px 5px;
+      background-repeat: no-repeat;
     }
     input[type="text"], textarea { flex: 1; min-width: 12rem; }
-    textarea { width: 100%; min-height: 4.5rem; font-family: ui-monospace, Consolas, monospace; }
-    .meta { color: var(--muted); font-size: 0.9rem; }
-    dl {
-      display: grid;
-      grid-template-columns: 10rem 1fr;
-      gap: 0.35rem 0.8rem;
-      margin: 0;
+    input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 0.85; }
+    input:hover, textarea:hover, select:hover { border-color: var(--border-strong); }
+    input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible {
+      outline: none;
+      border-color: var(--border-active);
+      box-shadow: 0 0 0 3px var(--focus);
     }
-    dt { color: var(--muted); }
-    dd { margin: 0; word-break: break-all; }
-    table { width: 100%; border-collapse: collapse; }
-    th, td { text-align: left; padding: 0.4rem 0.35rem; border-bottom: 1px solid var(--line); }
-    th { color: var(--muted); font-weight: 600; font-size: 0.8rem; }
-    td.name { cursor: pointer; color: var(--accent); }
-    td.name.file { color: var(--text); }
-    td.actions { white-space: nowrap; text-align: right; }
+    input.narrow { width: 5rem; flex: none; min-width: 0; }
+    input.narrow-sm { width: 4.5rem; flex: none; min-width: 0; }
+    select.grow { min-width: 12rem; }
+
+    /* —— Buttons —— */
+    .btn,
+    .row button,
+    .panel-actions button,
+    .toolbar button,
+    .startup-card button,
     td.actions button {
-      font: inherit;
-      border: 1px solid var(--line);
-      background: var(--card);
-      border-radius: 6px;
-      padding: 0.25rem 0.55rem;
-      cursor: pointer;
+      appearance: none;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.4rem;
+      min-height: var(--control-h);
+      padding: 0 0.9rem;
+      border-radius: var(--radius-sm);
+      border: 1px solid var(--border-strong);
+      background: rgba(7, 48, 40, 0.9);
+      color: var(--text-secondary);
+      font-weight: 500;
+      font-size: 0.9rem;
+      transition: background var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease), transform 120ms ease;
+    }
+    .btn:hover:not(:disabled),
+    .row button:hover:not(:disabled),
+    .panel-actions button:hover:not(:disabled),
+    .toolbar button:hover:not(:disabled),
+    .startup-card button:hover:not(:disabled),
+    td.actions button:hover:not(:disabled) {
+      color: var(--text);
+      border-color: var(--border-active);
+      background: rgba(10, 64, 54, 0.95);
+    }
+    .btn:active:not(:disabled),
+    .row button:active:not(:disabled),
+    .panel-actions button:active:not(:disabled),
+    .toolbar button:active:not(:disabled),
+    .startup-card button:active:not(:disabled) {
+      transform: translateY(1px);
+    }
+    .btn.primary,
+    .row button.primary,
+    .panel-actions button.primary,
+    .toolbar button.primary {
+      color: var(--accent-ink);
+      background: linear-gradient(180deg, var(--accent), var(--accent-deep));
+      border-color: rgba(45, 212, 191, 0.5);
+      box-shadow: 0 8px 18px rgba(5, 150, 105, 0.22);
+    }
+    .btn.primary:hover:not(:disabled),
+    .row button.primary:hover:not(:disabled),
+    .panel-actions button.primary:hover:not(:disabled),
+    .toolbar button.primary:hover:not(:disabled) {
+      color: var(--accent-ink);
+      background: linear-gradient(180deg, var(--accent-bright), #10b981);
+    }
+    .btn.danger,
+    .row button.danger,
+    .panel-actions button.danger,
+    .startup-card button.danger,
+    td.actions button.danger {
+      color: #fecaca;
+      border-color: rgba(248, 113, 113, 0.35);
+      background: rgba(127, 29, 29, 0.35);
+    }
+    .btn.danger:hover:not(:disabled),
+    .row button.danger:hover:not(:disabled),
+    .panel-actions button.danger:hover:not(:disabled),
+    .startup-card button.danger:hover:not(:disabled),
+    td.actions button.danger:hover:not(:disabled) {
+      color: #fff;
+      border-color: rgba(248, 113, 113, 0.55);
+      background: rgba(153, 27, 27, 0.55);
+    }
+    td.actions button {
+      min-height: 32px;
+      padding: 0 0.65rem;
+      font-size: 0.8rem;
     }
     td.actions button + button { margin-left: 0.35rem; }
-    pre {
-      margin: 0.5rem 0 0;
-      padding: 0.75rem;
-      background: #0f172a;
-      color: #e2e8f0;
-      border-radius: 8px;
+
+    /* —— Status —— */
+    #status-fields {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+      gap: 0.65rem;
+      margin: 0 0 1rem;
+    }
+    #status-fields .status-item {
+      display: flex;
+      flex-direction: column;
+      gap: 0.2rem;
+      min-width: 0;
+    }
+    #status-fields dt {
+      margin: 0;
+      padding-left: 0.15rem;
+      font-size: 0.7rem;
+      font-weight: 600;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      color: var(--text-muted);
+    }
+    #status-fields dd {
+      margin: 0;
+      padding: 0.7rem 0.8rem;
+      border-radius: var(--radius-sm);
+      border: 1px solid var(--border);
+      background: rgba(0, 0, 0, 0.22);
+      color: var(--text);
+      word-break: break-all;
+      font-size: 0.92rem;
+    }
+    .startup-card {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 0.65rem;
+      padding: 0.85rem 1rem;
+      border-radius: var(--radius-md);
+      border: 1px solid var(--border);
+      background: rgba(0, 0, 0, 0.2);
+    }
+    .startup-card .meta { flex: 1; min-width: 8rem; font-size: 0.92rem; color: var(--text-secondary); }
+
+    /* —— Tables —— */
+    .table-wrap {
       overflow: auto;
-      max-height: 22rem;
-      white-space: pre-wrap;
+      border-radius: var(--radius-md);
+      border: 1px solid var(--border);
+      background: rgba(0, 0, 0, 0.18);
     }
-    .shots { display: flex; flex-wrap: wrap; gap: 0.75rem; }
-    .shots figure { margin: 0; }
-    .shots img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; }
-    #video-canvas {
+    table {
       width: 100%;
-      height: auto;
-      display: block;
-      border: 1px solid var(--line);
-      border-radius: 8px;
-      cursor: crosshair;
-      background: #111;
+      border-collapse: collapse;
+      min-width: 520px;
     }
-    #video-canvas.view-only { cursor: default; }
+    th, td {
+      text-align: left;
+      padding: 0.65rem 0.85rem;
+      border-bottom: 1px solid var(--border);
+      vertical-align: middle;
+    }
+    th {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+      color: var(--text-muted);
+      font-weight: 600;
+      font-size: 0.72rem;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      background: rgba(4, 36, 30, 0.96);
+    }
+    tbody tr { transition: background var(--ease); }
+    tbody tr:hover td { background: rgba(94, 234, 212, 0.04); }
+    tbody tr:last-child td { border-bottom: 0; }
+    td.name { cursor: pointer; color: var(--accent); font-weight: 500; }
+    td.name.file { color: var(--text); font-weight: 400; }
+    td.name.file:hover { color: var(--accent-bright); }
+    td.actions { white-space: nowrap; text-align: right; }
+    td.log-name {
+      cursor: pointer;
+      color: var(--accent);
+      font-weight: 500;
+    }
+    tr.log-row.selected td {
+      background: rgba(45, 212, 191, 0.1);
+    }
+
+    /* —— Media / capture —— */
+    .stage {
+      position: relative;
+      overflow: hidden;
+      border-radius: var(--radius-md);
+      border: 1px solid var(--border);
+      background: #020807;
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
+    }
+    #video-canvas,
     #webcam-canvas {
       width: 100%;
       height: auto;
       display: block;
-      border: 1px solid var(--line);
-      border-radius: 8px;
-      background: #111;
+      vertical-align: middle;
+      background: #020807;
+      cursor: crosshair;
     }
-    label.check {
-      display: inline-flex;
-      align-items: center;
-      gap: 0.4rem;
-      user-select: none;
+    #video-canvas.view-only { cursor: default; }
+    .shots {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+      gap: 0.85rem;
     }
-    label.check input { margin: 0; }
-    .error {
-      display: none;
-      max-width: 1100px;
-      margin: 0 auto 1rem;
-      padding: 0.65rem 1.25rem;
-      color: var(--danger);
+    .shots figure {
+      margin: 0;
+      padding: 0.5rem;
+      border-radius: var(--radius-md);
+      border: 1px solid var(--border);
+      background: rgba(0, 0, 0, 0.22);
     }
+    .shots img {
+      display: block;
+      width: 100%;
+      border-radius: var(--radius-sm);
+      border: 1px solid var(--border);
+    }
+    .shots figcaption { margin-top: 0.45rem; padding: 0 0.15rem; }
+
+    /* —— Code / output —— */
+    pre {
+      margin: 0.5rem 0 0;
+      padding: 0.9rem 1rem;
+      border-radius: var(--radius-md);
+      border: 1px solid var(--border);
+      background: #020807;
+      color: #d1fae5;
+      overflow: auto;
+      max-height: 22rem;
+      white-space: pre-wrap;
+      font-family: var(--mono);
+      font-size: 0.85rem;
+      line-height: 1.5;
+    }
+    #log-view { margin-top: 0.75rem; max-height: 28rem; }
+    #log-view-title {
+      margin: 0.85rem 0 0.35rem;
+      font-size: 0.85rem;
+      color: var(--text-muted);
+    }
+    #video-key-hint { /* kept as id; styled via .hint when both applied */ }
+
+    /* —— Modifier keys —— */
     .mod-btn {
       position: relative;
-      min-width: 3.75rem;
+      min-width: 3.9rem;
       font-weight: 600;
       letter-spacing: 0.02em;
-      background: #f3f4f6;
-      border-color: #d1d5db;
-      color: var(--muted);
-      transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
+      color: var(--text-muted);
+      background: rgba(0, 0, 0, 0.25);
+      border-color: var(--border);
     }
     .mod-btn::before {
       content: "";
@@ -173,184 +634,275 @@
       height: 0.45rem;
       margin-right: 0.35rem;
       border-radius: 50%;
-      background: #9ca3af;
+      background: var(--text-muted);
       vertical-align: 0.05em;
-      transition: background 0.12s, box-shadow 0.12s;
+      transition: background var(--ease), box-shadow var(--ease);
     }
     .mod-btn.active {
-      background: #dbeafe;
-      border-color: var(--accent);
-      color: #1e40af;
-      box-shadow: inset 0 1px 2px rgba(37, 99, 235, 0.12);
+      color: var(--accent-bright);
+      background: rgba(45, 212, 191, 0.14);
+      border-color: var(--border-active);
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
     }
     .mod-btn.active::before {
       background: var(--accent);
-      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
+      box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.25);
     }
-    #video-key-hint {
-      flex: 1;
-      min-width: 12rem;
-      padding: 0.55rem 0.75rem;
-      border: 1px solid var(--line);
-      border-radius: 6px;
-      background: #f9fafb;
-      color: var(--muted);
+
+    .stack-gap { margin-top: 0.85rem; }
+    .empty {
+      padding: 1.25rem;
+      text-align: center;
+      color: var(--text-muted);
       font-size: 0.9rem;
     }
-    td.log-name {
-      cursor: pointer;
-      color: var(--accent);
+
+    /* —— Responsive —— */
+    @media (max-width: 720px) {
+      .app { width: min(100% - 1.25rem, var(--max)); padding-top: 0.85rem; }
+      .topbar { padding: 0.75rem 0.85rem; }
+      .panel { padding: 1rem; border-radius: 16px; }
+      nav.tabs { gap: 0.25rem; }
+      nav.tabs button { flex: 1 1 auto; text-align: center; padding: 0.55rem 0.6rem; font-size: 0.82rem; }
+      #status-fields { grid-template-columns: 1fr; }
+      .toolbar { align-items: stretch; }
+      .toolbar label { flex: 1 1 40%; }
+      input[type="text"] { min-width: 100%; }
+      table { min-width: 460px; }
     }
-    tr.log-row.selected td { background: #eff6ff; }
-    #log-view {
-      margin-top: 0.75rem;
-      max-height: 28rem;
+    @media (max-width: 420px) {
+      .brand-text p { display: none; }
+      .sep { display: none; }
     }
-    #log-view-title {
-      margin: 0 0 0.35rem;
-      font-size: 0.9rem;
-      color: var(--muted);
+
+    /* —— Reduced motion —— */
+    @media (prefers-reduced-motion: reduce) {
+      *, *::before, *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+      }
+      .app { animation: none; }
     }
   </style>
 </head>
 <body>
-  <header>
-    <h1>win64_mp</h1>
-    <span id="health" class="badge">checking</span>
-  </header>
-  <p id="error" class="error"></p>
-  <nav>
-    <button data-tab="status" class="active">Status</button>
-    <button data-tab="files">Files</button>
-    <button data-tab="screenshot">Screenshot</button>
-    <button data-tab="video">Video</button>
-    <button data-tab="webcam">Webcam</button>
-    <button data-tab="exec">Command</button>
-    <button data-tab="logs">Logs</button>
-  </nav>
-  <main>
-    <section id="status" class="panel active">
-      <div class="row">
-        <h2>Host status</h2>
-        <button id="refresh-status" class="primary" type="button">Refresh</button>
+  <div class="app">
+    <header class="topbar">
+      <div class="brand">
+        <div class="brand-mark" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M12 2 4 6v6c0 5 3.5 8.5 8 10 4.5-1.5 8-5 8-10V6l-8-4z"/>
+            <path d="M9 12h6"/>
+          </svg>
+        </div>
+        <div class="brand-text">
+          <h1>win64_mp</h1>
+          <p>Local agent console</p>
+        </div>
       </div>
-      <dl id="status-fields"></dl>
-      <div class="row" style="margin-top:1rem">
-        <span id="startup-state" class="meta">Startup: —</span>
-        <button id="startup-add" type="button">Add to startup</button>
-        <button id="startup-remove" type="button">Remove from startup</button>
-      </div>
-    </section>
-    <section id="files" class="panel">
-      <div class="row">
-        <input id="file-path" type="text" placeholder="Directory path, e.g. C:\Users">
-        <button id="file-up" type="button">Up</button>
-        <button id="file-list" class="primary" type="button">List</button>
-        <button id="file-upload" type="button">Upload</button>
-        <input id="file-picker" type="file" hidden>
-      </div>
-      <p id="file-meta" class="meta"></p>
-      <table>
-        <thead>
-          <tr><th>Name</th><th>Type</th><th>Size</th><th>Modified</th><th></th></tr>
-        </thead>
-        <tbody id="file-rows"></tbody>
-      </table>
-    </section>
-    <section id="screenshot" class="panel">
-      <div class="row">
-        <label>Format
-          <select id="shot-format">
-            <option value="png">PNG</option>
-            <option value="jpeg">JPEG</option>
-          </select>
-        </label>
-        <label>Quality
-          <input id="shot-quality" type="number" min="1" max="100" value="80" style="width:5rem">
-        </label>
-        <button id="shot-capture" class="primary" type="button">Capture</button>
-      </div>
-      <div id="shot-gallery" class="shots"></div>
-    </section>
-    <section id="video" class="panel">
-      <div class="row">
-        <button id="video-start" class="primary" type="button">Start</button>
-        <button id="video-stop" type="button" disabled>Stop</button>
-        <label>FPS
-          <input id="video-fps" type="number" min="1" max="15" value="5" style="width:4.5rem">
-        </label>
-        <label>Quality
-          <input id="video-quality" type="number" min="1" max="100" value="40" style="width:5rem">
-        </label>
-        <label>Monitor
-          <input id="video-monitor" type="number" min="0" value="0" style="width:4.5rem">
-        </label>
-        <label class="check">
-          <input id="video-interact" type="checkbox">
-          Interactable
-        </label>
-      </div>
-      <canvas id="video-canvas" class="view-only" width="1280" height="720"></canvas>
-      <p id="video-meta" class="meta"></p>
-      <div class="row" style="margin-top:0.75rem">
-        <div id="video-key-hint">View only — enable Interactable to send mouse and keyboard</div>
-      </div>
-      <div class="row">
-        <button type="button" class="mod-btn" data-mod="ctrl" aria-pressed="false">Ctrl</button>
-        <button type="button" class="mod-btn" data-mod="alt" aria-pressed="false">Alt</button>
-        <button type="button" class="mod-btn" data-mod="shift" aria-pressed="false">Shift</button>
-        <button type="button" class="mod-btn" data-mod="win" aria-pressed="false">Win</button>
-        <span class="meta">Toggle sticky modifiers · type anywhere on this tab</span>
-      </div>
-    </section>
-    <section id="webcam" class="panel">
-      <div class="row">
-        <button id="webcam-refresh" type="button">Refresh devices</button>
-        <label>Device
-          <select id="webcam-device" style="min-width:12rem"></select>
-        </label>
-        <button id="webcam-start" class="primary" type="button">Start</button>
-        <button id="webcam-stop" type="button" disabled>Stop</button>
-        <label>FPS
-          <input id="webcam-fps" type="number" min="1" max="10" value="2" style="width:4.5rem">
-        </label>
-        <label>Quality
-          <input id="webcam-quality" type="number" min="1" max="100" value="70" style="width:5rem">
-        </label>
-        <button id="webcam-snap" type="button">Snapshot</button>
-      </div>
-      <canvas id="webcam-canvas" width="640" height="480"></canvas>
-      <p id="webcam-meta" class="meta"></p>
-    </section>
-    <section id="exec" class="panel">
-      <div class="row">
-        <textarea id="exec-command" placeholder="ipconfig /all"></textarea>
-      </div>
-      <div class="row">
-        <label>Timeout (sec)
-          <input id="exec-timeout" type="number" min="0" max="120" value="30" style="width:5rem">
-        </label>
-        <button id="exec-run" class="primary" type="button">Run</button>
-      </div>
-      <p id="exec-meta" class="meta"></p>
-      <pre id="exec-out"></pre>
-    </section>
-    <section id="logs" class="panel">
-      <div class="row">
-        <h2>Keystroke logs</h2>
-        <button id="log-refresh" class="primary" type="button">Refresh</button>
-      </div>
-      <p id="log-meta" class="meta"></p>
-      <table>
-        <thead>
-          <tr><th>File</th><th>Size</th><th>Modified</th></tr>
-        </thead>
-        <tbody id="log-rows"></tbody>
-      </table>
-      <p id="log-view-title" class="meta"></p>
-      <pre id="log-view" hidden></pre>
-    </section>
-  </main>
+      <span id="health" class="badge">checking</span>
+    </header>
+
+    <p id="error" class="error" role="alert"></p>
+
+    <nav class="tabs" aria-label="Sections">
+      <button data-tab="status" class="active" type="button">Status</button>
+      <button data-tab="files" type="button">Files</button>
+      <button data-tab="screenshot" type="button">Screenshot</button>
+      <button data-tab="video" type="button">Video</button>
+      <button data-tab="webcam" type="button">Webcam</button>
+      <button data-tab="exec" type="button">Command</button>
+      <button data-tab="logs" type="button">Logs</button>
+    </nav>
+
+    <main>
+      <section id="status" class="panel active">
+        <div class="panel-head">
+          <div>
+            <h2>Host status</h2>
+            <p class="lede">Runtime identity, network, and persistence on this machine.</p>
+          </div>
+          <div class="panel-actions">
+            <button id="refresh-status" class="primary" type="button">Refresh</button>
+          </div>
+        </div>
+        <dl id="status-fields"></dl>
+        <div class="startup-card">
+          <span id="startup-state" class="meta">Startup: —</span>
+          <button id="startup-add" type="button">Add to startup</button>
+          <button id="startup-remove" class="danger" type="button">Remove from startup</button>
+        </div>
+      </section>
+
+      <section id="files" class="panel">
+        <div class="panel-head">
+          <div>
+            <h2>File browser</h2>
+            <p class="lede">Browse, preview, upload, and delete files on the host.</p>
+          </div>
+        </div>
+        <div class="toolbar">
+          <input id="file-path" type="text" placeholder="Directory path, e.g. C:\Users" aria-label="Directory path">
+          <button id="file-up" type="button">Up</button>
+          <button id="file-list" class="primary" type="button">List</button>
+          <button id="file-upload" type="button">Upload</button>
+          <input id="file-picker" type="file" hidden>
+        </div>
+        <p id="file-meta" class="meta"></p>
+        <div class="table-wrap stack-gap">
+          <table>
+            <thead>
+              <tr><th>Name</th><th>Type</th><th>Size</th><th>Modified</th><th></th></tr>
+            </thead>
+            <tbody id="file-rows"></tbody>
+          </table>
+        </div>
+      </section>
+
+      <section id="screenshot" class="panel">
+        <div class="panel-head">
+          <div>
+            <h2>Screenshot</h2>
+            <p class="lede">Capture the primary display as a still image.</p>
+          </div>
+          <div class="panel-actions">
+            <button id="shot-capture" class="primary" type="button">Capture</button>
+          </div>
+        </div>
+        <div class="toolbar">
+          <label>Format
+            <select id="shot-format">
+              <option value="png">PNG</option>
+              <option value="jpeg">JPEG</option>
+            </select>
+          </label>
+          <label>Quality
+            <input id="shot-quality" class="narrow" type="number" min="1" max="100" value="80">
+          </label>
+        </div>
+        <div id="shot-gallery" class="shots"></div>
+      </section>
+
+      <section id="video" class="panel">
+        <div class="panel-head">
+          <div>
+            <h2>Remote desktop</h2>
+            <p class="lede">Live monitor stream. Interaction is off until you enable it.</p>
+          </div>
+          <div class="panel-actions">
+            <button id="video-start" class="primary" type="button">Start</button>
+            <button id="video-stop" type="button" disabled>Stop</button>
+          </div>
+        </div>
+        <div class="toolbar">
+          <label>FPS
+            <input id="video-fps" class="narrow-sm" type="number" min="1" max="15" value="5">
+          </label>
+          <label>Quality
+            <input id="video-quality" class="narrow" type="number" min="1" max="100" value="40">
+          </label>
+          <label>Monitor
+            <input id="video-monitor" class="narrow-sm" type="number" min="0" value="0">
+          </label>
+          <span class="sep" aria-hidden="true"></span>
+          <label class="check">
+            <input id="video-interact" type="checkbox">
+            Interactable
+          </label>
+        </div>
+        <div class="stage">
+          <canvas id="video-canvas" class="view-only" width="1280" height="720"></canvas>
+        </div>
+        <p id="video-meta" class="meta stack-gap"></p>
+        <div class="row stack-gap">
+          <div id="video-key-hint" class="hint">View only — enable Interactable to send mouse and keyboard</div>
+        </div>
+        <div class="row">
+          <button type="button" class="mod-btn" data-mod="ctrl" aria-pressed="false">Ctrl</button>
+          <button type="button" class="mod-btn" data-mod="alt" aria-pressed="false">Alt</button>
+          <button type="button" class="mod-btn" data-mod="shift" aria-pressed="false">Shift</button>
+          <button type="button" class="mod-btn" data-mod="win" aria-pressed="false">Win</button>
+          <span class="meta">Sticky modifiers · type while this tab is active</span>
+        </div>
+      </section>
+
+      <section id="webcam" class="panel">
+        <div class="panel-head">
+          <div>
+            <h2>Webcam</h2>
+            <p class="lede">Host camera feed for computer-vision checks.</p>
+          </div>
+          <div class="panel-actions">
+            <button id="webcam-start" class="primary" type="button">Start</button>
+            <button id="webcam-stop" type="button" disabled>Stop</button>
+            <button id="webcam-snap" type="button">Snapshot</button>
+          </div>
+        </div>
+        <div class="toolbar">
+          <button id="webcam-refresh" type="button">Refresh devices</button>
+          <label>Device
+            <select id="webcam-device" class="grow"></select>
+          </label>
+          <label>FPS
+            <input id="webcam-fps" class="narrow-sm" type="number" min="1" max="10" value="2">
+          </label>
+          <label>Quality
+            <input id="webcam-quality" class="narrow" type="number" min="1" max="100" value="70">
+          </label>
+        </div>
+        <div class="stage">
+          <canvas id="webcam-canvas" width="640" height="480"></canvas>
+        </div>
+        <p id="webcam-meta" class="meta stack-gap"></p>
+      </section>
+
+      <section id="exec" class="panel">
+        <div class="panel-head">
+          <div>
+            <h2>Command</h2>
+            <p class="lede">Run a shell command on the host and inspect stdout/stderr.</p>
+          </div>
+          <div class="panel-actions">
+            <button id="exec-run" class="primary" type="button">Run</button>
+          </div>
+        </div>
+        <div class="row">
+          <textarea id="exec-command" placeholder="ipconfig /all" aria-label="Command"></textarea>
+        </div>
+        <div class="toolbar compact">
+          <label>Timeout (sec)
+            <input id="exec-timeout" class="narrow" type="number" min="0" max="120" value="30">
+          </label>
+        </div>
+        <p id="exec-meta" class="meta"></p>
+        <pre id="exec-out"></pre>
+      </section>
+
+      <section id="logs" class="panel">
+        <div class="panel-head">
+          <div>
+            <h2>Keystroke logs</h2>
+            <p class="lede">Click a file to view · right-click to download.</p>
+          </div>
+          <div class="panel-actions">
+            <button id="log-refresh" class="primary" type="button">Refresh</button>
+          </div>
+        </div>
+        <p id="log-meta" class="meta"></p>
+        <div class="table-wrap stack-gap">
+          <table>
+            <thead>
+              <tr><th>File</th><th>Size</th><th>Modified</th></tr>
+            </thead>
+            <tbody id="log-rows"></tbody>
+          </table>
+        </div>
+        <p id="log-view-title" class="meta"></p>
+        <pre id="log-view" hidden></pre>
+      </section>
+    </main>
+  </div>
   <script src="/app.js"></script>
 </body>
 </html>