diff --git a/src/pages/admin/index.astro b/src/pages/admin/index.astro
index 6bdea2c6..382e3c36 100644
--- a/src/pages/admin/index.astro
+++ b/src/pages/admin/index.astro
@@ -1,4 +1,5 @@
 ---
+import "../../styles/admin.css";
 import { getArchiveEntries } from "../../lib/archive";
 import { speechAdminEntryFromArchiveEntry } from "../../lib/admin-speeches";
 import { calendarEvents, recurringCalendarEvents } from "../../data/events";
@@ -13,15 +14,24 @@ const plausibleDomain = import.meta.env.PUBLIC_PLAUSIBLE_DOMAIN ?? "";
 const today = new Date().toISOString().slice(0, 10);
 const latestEntry = entries[0];
 const latestEntryTitle = latestEntry?.data.title ?? latestEntry?.id ?? "No content yet";
+const latestEntryType = latestEntry?.data.type ?? "content";
+const latestEntryDateIso = latestEntry?.data.published?.slice(0, 10) ?? "";
 const latestEntryDate = latestEntry?.data.published
   ? new Intl.DateTimeFormat("en-IE", { day: "numeric", month: "short", year: "numeric" }).format(new Date(latestEntry.data.published))
   : "No date";
 const totalEvents = calendarEvents.length + recurringCalendarEvents.length;
-const configuredServices = [contactFormEndpoint, plausibleDomain].filter(Boolean).length;
+const contactConfigured = Boolean(contactFormEndpoint);
+const analyticsConfigured = Boolean(plausibleDomain);
+const configuredServices = [contactConfigured, analyticsConfigured].filter(Boolean).length;
 const speechAdminEntries = speechEntries.map((entry) => speechAdminEntryFromArchiveEntry(entry, today));
+const speakerLabels = {
+  rev: "Rev. Sun Myung Moon",
+  mrs: "Dr. Hak Ja Han Moon",
+  other: "Other speaker",
+};
 const adminConfig = {
   analyticsDashboardUrl,
-  contactEndpointConfigured: Boolean(contactFormEndpoint),
+  contactEndpointConfigured: contactConfigured,
   contactSubmissionsUrl,
   plausibleDomain,
 };
@@ -33,906 +43,698 @@ const adminConfig = {
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="robots" content="noindex,nofollow" />
-    <title>FamilyFed.ie Admin</title>
+    <meta name="theme-color" content="#18303a" />
+    <title>Overview · FamilyFed.ie Admin</title>
     <link rel="icon" href="/assets/icons/familyfed-favicon.png" type="image/png" />
-    <style>
-      :root {
-        color-scheme: light;
-        --admin-ink: #182227;
-        --admin-muted: #647174;
-        --admin-subtle: #eef3f0;
-        --admin-border: #dbe3df;
-        --admin-panel: #ffffff;
-        --admin-panel-alt: #f8faf8;
-        --admin-accent: #b94b2b;
-        --admin-accent-strong: #84351f;
-        --admin-accent-soft: #fff2ec;
-        --admin-green: #2d6d55;
-        --admin-green-soft: #e8f4ee;
-        --admin-blue: #265c82;
-        --admin-blue-soft: #e9f2f8;
-        --admin-warn: #9a5a14;
-        --admin-warn-soft: #fff6df;
-        --admin-shadow: 0 18px 50px rgba(24, 34, 39, 0.08);
-      }
-
-      * {
-        box-sizing: border-box;
-      }
-
-      html {
-        background: #eef3f0;
-      }
-
-      body {
-        margin: 0;
-        color: var(--admin-ink);
-        background:
-          linear-gradient(180deg, #f9fbf9 0, #eef3f0 330px, #eef3f0 100%),
-          #eef3f0;
-        font-family:
-          Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-          sans-serif;
-        line-height: 1.5;
-      }
-
-      a {
-        color: var(--admin-accent-strong);
-        text-decoration-thickness: 1px;
-        text-underline-offset: 3px;
-      }
-
-      button,
-      input,
-      select,
-      textarea {
-        font: inherit;
-      }
-
-      code {
-        padding: 1px 4px;
-        border-radius: 4px;
-        background: rgba(24, 34, 39, 0.06);
-        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-        font-size: 0.93em;
-      }
-
-      .admin-shell {
-        min-height: 100vh;
-      }
-
-      .admin-header {
-        border-bottom: 1px solid rgba(219, 227, 223, 0.9);
-        background: rgba(255, 255, 255, 0.92);
-        box-shadow: 0 1px 0 rgba(24, 34, 39, 0.03);
-      }
-
-      .admin-header-inner,
-      .admin-main {
-        width: min(1240px, calc(100% - 32px));
-        margin: 0 auto;
-      }
-
-      .admin-header-inner {
-        display: flex;
-        gap: 20px;
-        align-items: center;
-        justify-content: space-between;
-        padding: 18px 0;
-      }
-
-      .admin-brand {
-        display: flex;
-        min-width: 0;
-        gap: 13px;
-        align-items: center;
-      }
-
-      .admin-brand img {
-        width: 44px;
-        height: 44px;
-        border-radius: 8px;
-        box-shadow: 0 7px 18px rgba(24, 34, 39, 0.12);
-      }
-
-      .admin-brand p,
-      .admin-brand h1 {
-        margin: 0;
-      }
-
-      .admin-brand p {
-        color: var(--admin-muted);
-        font-size: 13px;
-      }
-
-      .admin-brand h1 {
-        overflow: hidden;
-        color: var(--admin-ink);
-        font-size: 24px;
-        line-height: 1.15;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .admin-actions {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 8px;
-        justify-content: flex-end;
-      }
-
-      .admin-button,
-      .admin-link-button {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        min-height: 40px;
-        padding: 9px 13px;
-        border: 1px solid var(--admin-border);
-        border-radius: 7px;
-        color: var(--admin-ink);
-        background: var(--admin-panel);
-        box-shadow: 0 1px 1px rgba(24, 34, 39, 0.04);
-        font-weight: 700;
-        font-size: 14px;
-        text-decoration: none;
-        cursor: pointer;
-        transition:
-          border-color 160ms ease,
-          background 160ms ease,
-          color 160ms ease,
-          transform 160ms ease;
-      }
-
-      .admin-button-primary,
-      .admin-link-button-primary {
-        border-color: var(--admin-accent);
-        color: #ffffff;
-        background: var(--admin-accent);
-      }
-
-      .admin-button:hover,
-      .admin-button:focus,
-      .admin-link-button:hover,
-      .admin-link-button:focus {
-        border-color: var(--admin-accent-strong);
-        outline: 3px solid rgba(185, 75, 43, 0.12);
-      }
-
-      .admin-button:hover,
-      .admin-link-button:hover {
-        transform: translateY(-1px);
-      }
-
-      .admin-button:disabled,
-      .admin-link-button[aria-disabled="true"] {
-        border-color: var(--admin-border);
-        color: #95a09f;
-        background: #eef2ef;
-        box-shadow: none;
-        cursor: not-allowed;
-        transform: none;
-      }
-
-      .admin-main {
-        display: grid;
-        gap: 20px;
-        padding: 24px 0 42px;
-      }
-
-      .admin-tabs {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 8px;
-        align-items: center;
-        padding: 6px;
-        border: 1px solid var(--admin-border);
-        border-radius: 8px;
-        background: rgba(255, 255, 255, 0.86);
-        box-shadow: 0 8px 24px rgba(24, 34, 39, 0.06);
-      }
-
-      .admin-tab {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        min-height: 40px;
-        padding: 9px 14px;
-        border: 1px solid transparent;
-        border-radius: 7px;
-        color: var(--admin-muted);
-        background: transparent;
-        font-weight: 800;
-        cursor: pointer;
-      }
-
-      .admin-tab:hover,
-      .admin-tab:focus {
-        color: var(--admin-ink);
-        border-color: var(--admin-border);
-        outline: 3px solid rgba(185, 75, 43, 0.1);
-      }
-
-      .admin-tab[aria-selected="true"] {
-        color: #ffffff;
-        border-color: var(--admin-accent);
-        background: var(--admin-accent);
-        box-shadow: 0 7px 18px rgba(185, 75, 43, 0.18);
-      }
-
-      .admin-tab-settings {
-        margin-left: auto;
-      }
-
-      .admin-tab-panel {
-        display: grid;
-        gap: 20px;
-      }
-
-      .admin-tab-panel[hidden] {
-        display: none;
-      }
-
-      .admin-hero {
-        display: grid;
-        grid-template-columns: minmax(0, 1fr) auto;
-        gap: 18px;
-        align-items: end;
-        padding: 22px;
-        border: 1px solid var(--admin-border);
-        border-radius: 8px;
-        background: var(--admin-panel);
-        box-shadow: var(--admin-shadow);
-      }
-
-      .admin-kicker,
-      .admin-section-label {
-        margin: 0;
-        color: var(--admin-muted);
-        font-weight: 800;
-        font-size: 12px;
-        letter-spacing: 0;
-        text-transform: uppercase;
-      }
-
-      .admin-hero h2 {
-        max-width: 780px;
-        margin: 4px 0 7px;
-        font-size: clamp(28px, 4vw, 42px);
-        line-height: 1.08;
-      }
-
-      .admin-hero p:last-child {
-        max-width: 780px;
-        margin: 0;
-        color: var(--admin-muted);
-      }
-
-      .admin-health {
-        display: grid;
-        min-width: 230px;
-        gap: 8px;
-        padding: 14px;
-        border: 1px solid var(--admin-border);
-        border-radius: 8px;
-        background: var(--admin-panel-alt);
-      }
-
-      .admin-health strong {
-        display: block;
-        font-size: 18px;
-      }
-
-      .admin-health span {
-        color: var(--admin-muted);
-        font-size: 13px;
-      }
-
-      .admin-status-pill {
-        display: inline-flex;
-        width: fit-content;
-        align-items: center;
-        min-height: 28px;
-        padding: 4px 9px;
-        border: 1px solid transparent;
-        border-radius: 999px;
-        font-weight: 800;
-        font-size: 12px;
-      }
-
-      .admin-status-pill.is-ok {
-        border-color: rgba(45, 109, 85, 0.25);
-        color: var(--admin-green);
-        background: var(--admin-green-soft);
-      }
-
-      .admin-status-pill.is-warn {
-        border-color: rgba(154, 90, 20, 0.25);
-        color: var(--admin-warn);
-        background: var(--admin-warn-soft);
-      }
-
-      .admin-stats {
-        display: grid;
-        grid-template-columns: repeat(4, minmax(0, 1fr));
-        gap: 12px;
-      }
-
-      .admin-stat,
-      .admin-panel,
-      .admin-utility-card {
-        border: 1px solid var(--admin-border);
-        border-radius: 8px;
-        background: var(--admin-panel);
-      }
-
-      .admin-stat {
-        display: grid;
-        gap: 7px;
-        min-height: 112px;
-        padding: 16px;
-      }
-
-      .admin-stat strong {
-        overflow-wrap: anywhere;
-        font-size: 30px;
-        line-height: 1;
-      }
-
-      .admin-stat span {
-        color: var(--admin-muted);
-        font-size: 13px;
-      }
-
-      .admin-stat small {
-        align-self: end;
-        color: var(--admin-muted);
-        font-size: 12px;
-      }
-
-      .admin-workspace {
-        display: grid;
-        grid-template-columns: minmax(0, 1fr);
-        gap: 20px;
-        align-items: start;
-      }
-
-      .admin-overview-grid {
-        display: grid;
-        grid-template-columns: repeat(3, minmax(0, 1fr));
-        gap: 18px;
-        align-items: start;
-      }
-
-      .admin-builder-stack,
-      .admin-sidebar {
-        display: grid;
-        gap: 18px;
-      }
-
-      .admin-panel {
-        overflow: hidden;
-      }
-
-      .admin-panel-header {
-        display: flex;
-        gap: 14px;
-        align-items: start;
-        justify-content: space-between;
-        padding: 18px 18px 16px;
-        border-bottom: 1px solid var(--admin-border);
-        background: linear-gradient(180deg, #ffffff, #fbfcfb);
-      }
-
-      .admin-panel-title {
-        min-width: 0;
-      }
-
-      .admin-panel h2,
-      .admin-panel h3 {
-        margin: 0;
-      }
-
-      .admin-panel h2 {
-        font-size: 22px;
-        line-height: 1.2;
-      }
-
-      .admin-panel h3 {
-        font-size: 17px;
-        line-height: 1.25;
-      }
-
-      .admin-note {
-        margin: 7px 0 0;
-        color: var(--admin-muted);
-      }
-
-      .admin-panel-body {
-        display: grid;
-        gap: 14px;
-        padding: 18px;
-      }
-
-      .admin-speech-list {
-        display: grid;
-        gap: 8px;
-        max-height: 420px;
-        overflow: auto;
-        padding-right: 4px;
-      }
-
-      .admin-speech-row {
-        display: grid;
-        grid-template-columns: minmax(0, 1fr) auto;
-        gap: 12px;
-        align-items: center;
-        padding: 12px;
-        border: 1px solid var(--admin-border);
-        border-radius: 7px;
-        background: var(--admin-panel-alt);
-      }
-
-      .admin-speech-row-title {
-        display: block;
-        overflow: hidden;
-        font-weight: 800;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .admin-speech-row-meta {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 8px;
-        margin-top: 3px;
-        color: var(--admin-muted);
-        font-size: 12px;
-      }
-
-      .admin-form {
-        display: grid;
-        gap: 14px;
-      }
-
-      .admin-form-grid {
-        display: grid;
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-        gap: 12px;
-      }
-
-      .admin-field label {
-        display: block;
-        margin-bottom: 6px;
-        font-size: 13px;
-        font-weight: 800;
-      }
-
-      .admin-field input,
-      .admin-field select,
-      .admin-field textarea {
-        width: 100%;
-        min-height: 42px;
-        padding: 9px 10px;
-        border: 1px solid #cdd8d3;
-        border-radius: 7px;
-        color: var(--admin-ink);
-        background: #ffffff;
-        box-shadow: inset 0 1px 1px rgba(24, 34, 39, 0.03);
-      }
-
-      .admin-field textarea {
-        min-height: 145px;
-        resize: vertical;
-      }
-
-      .admin-field input::placeholder,
-      .admin-field textarea::placeholder {
-        color: #98a3a2;
-      }
-
-      .admin-field input:focus,
-      .admin-field select:focus,
-      .admin-field textarea:focus {
-        border-color: var(--admin-accent);
-        outline: 3px solid rgba(185, 75, 43, 0.14);
-      }
-
-      .admin-output {
-        display: grid;
-        gap: 8px;
-      }
-
-      .admin-output-header {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 10px;
-        align-items: center;
-        justify-content: space-between;
-      }
-
-      .admin-output textarea {
-        width: 100%;
-        min-height: 210px;
-        padding: 12px;
-        border: 1px solid var(--admin-border);
-        border-radius: 7px;
-        color: #1b2528;
-        background: #f7faf8;
-        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-        font-size: 13px;
-        line-height: 1.55;
-      }
-
-      .admin-status-list,
-      .admin-link-list {
-        display: grid;
-        gap: 10px;
-        margin: 0;
-        padding: 0;
-        list-style: none;
-      }
-
-      .admin-status-list li,
-      .admin-link-list li,
-      .admin-utility-card {
-        padding: 12px;
-        border-radius: 7px;
-        background: var(--admin-panel-alt);
-      }
-
-      .admin-status-list li,
-      .admin-link-list li {
-        border: 1px solid var(--admin-border);
-      }
-
-      .admin-status-list strong,
-      .admin-link-list strong {
-        display: block;
-        margin-bottom: 3px;
-      }
-
-      .admin-link-list a {
-        display: inline-flex;
-        margin-top: 4px;
-        font-weight: 700;
-      }
-
-      .admin-ok {
-        color: var(--admin-green);
-        font-weight: 700;
-      }
-
-      .admin-missing {
-        color: var(--admin-warn);
-        font-weight: 700;
-      }
-
-      .admin-actions-row {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 8px;
-      }
-
-      .admin-mini-actions {
-        display: grid;
-        gap: 8px;
-      }
-
-      .admin-path,
-      .admin-message {
-        display: block;
-        color: var(--admin-muted);
-        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-        font-size: 12px;
-        overflow-wrap: anywhere;
-      }
-
-      .admin-message {
-        min-height: 18px;
-        font-family:
-          Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-          sans-serif;
-      }
-
-      .admin-message.is-success {
-        color: var(--admin-green);
-        font-weight: 700;
-      }
-
-      .admin-message.is-error {
-        color: var(--admin-accent-strong);
-        font-weight: 700;
-      }
-
-      .admin-utility-card {
-        display: grid;
-        gap: 7px;
-        border: 1px solid rgba(38, 92, 130, 0.2);
-        background: var(--admin-blue-soft);
-      }
-
-      .admin-utility-card p {
-        margin: 0;
-        color: #36505f;
-        font-size: 14px;
-      }
-
-      @media (max-width: 980px) {
-        .admin-hero,
-        .admin-workspace,
-        .admin-overview-grid,
-        .admin-stats,
-        .admin-form-grid {
-          grid-template-columns: 1fr;
-        }
-
-        .admin-health {
-          min-width: 0;
-        }
-      }
-
-      @media (max-width: 680px) {
-        .admin-header-inner {
-          align-items: stretch;
-          flex-direction: column;
-        }
-
-        .admin-actions {
-          justify-content: stretch;
-        }
-
-        .admin-actions .admin-link-button,
-        .admin-tab,
-        .admin-actions-row .admin-button,
-        .admin-actions-row .admin-link-button {
-          flex: 1 1 160px;
-        }
-
-        .admin-tab-settings {
-          margin-left: 0;
-        }
-
-        .admin-brand h1 {
-          white-space: normal;
-        }
-
-        .admin-hero,
-        .admin-panel-header,
-        .admin-panel-body {
-          padding: 16px;
-        }
-
-        .admin-panel-header,
-        .admin-output-header {
-          align-items: stretch;
-          flex-direction: column;
-        }
-      }
-    </style>
   </head>
   <body>
-    <div class="admin-shell">
-      <header class="admin-header">
-        <div class="admin-header-inner">
-          <div class="admin-brand">
-            <img src="/assets/icons/familyfed-logo.webp" alt="" />
-            <div>
-              <p>admin.familyfed.ie</p>
-              <h1>FamilyFed.ie Admin</h1>
-            </div>
-          </div>
-        </div>
-      </header>
+    <a class="admin-skip-link" href="#admin-content">Skip to content</a>
 
-      <main class="admin-main">
-        <nav class="admin-tabs" aria-label="Admin sections" role="tablist">
-          <button class="admin-tab" id="admin-tab-overview" type="button" role="tab" aria-selected="true" aria-controls="admin-panel-overview" data-admin-tab="overview">Overview</button>
-          <button class="admin-tab" id="admin-tab-calendar" type="button" role="tab" aria-selected="false" aria-controls="admin-panel-calendar" data-admin-tab="calendar">Calendar Event</button>
-          <button class="admin-tab" id="admin-tab-speeches" type="button" role="tab" aria-selected="false" aria-controls="admin-panel-speeches" data-admin-tab="speeches">Speeches</button>
-          <button class="admin-tab admin-tab-settings" id="admin-tab-settings" type="button" role="tab" aria-selected="false" aria-controls="admin-panel-settings" data-admin-tab="settings">Settings</button>
+    <div class="admin-app">
+      <aside class="admin-sidebar" aria-label="Admin navigation">
+        <a class="admin-brand" href="/" aria-label="FamilyFed.ie home">
+          <span class="admin-brand-mark">
+            <img src="/assets/icons/familyfed-logo.webp" alt="" />
+          </span>
+          <span class="admin-brand-copy">
+            <strong>FamilyFed.ie</strong>
+            <span>Admin workspace</span>
+          </span>
+        </a>
+
+        <nav class="admin-nav" aria-label="Admin sections" role="tablist">
+          <p class="admin-nav-label">Workspace</p>
+          <button
+            class="admin-nav-button"
+            id="admin-tab-overview"
+            type="button"
+            role="tab"
+            aria-selected="true"
+            aria-controls="admin-panel-overview"
+            data-admin-tab="overview"
+          >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+              <rect x="3" y="3" width="7" height="7" rx="1.5"></rect>
+              <rect x="14" y="3" width="7" height="7" rx="1.5"></rect>
+              <rect x="3" y="14" width="7" height="7" rx="1.5"></rect>
+              <rect x="14" y="14" width="7" height="7" rx="1.5"></rect>
+            </svg>
+            <span>Overview</span>
+          </button>
+          <button
+            class="admin-nav-button"
+            id="admin-tab-calendar"
+            type="button"
+            role="tab"
+            aria-selected="false"
+            aria-controls="admin-panel-calendar"
+            data-admin-tab="calendar"
+          >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+              <rect x="3" y="5" width="18" height="16" rx="2"></rect>
+              <path d="M16 3v4M8 3v4M3 10h18"></path>
+              <path d="M8 14h3M13 14h3M8 17h3"></path>
+            </svg>
+            <span>Events</span>
+          </button>
+          <button
+            class="admin-nav-button"
+            id="admin-tab-speeches"
+            type="button"
+            role="tab"
+            aria-selected="false"
+            aria-controls="admin-panel-speeches"
+            data-admin-tab="speeches"
+          >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+              <path d="M5 3h10l4 4v14H5z"></path>
+              <path d="M15 3v5h5M8 12h8M8 16h8"></path>
+            </svg>
+            <span>Speeches</span>
+          </button>
+          <button
+            class="admin-nav-button"
+            id="admin-tab-settings"
+            type="button"
+            role="tab"
+            aria-selected="false"
+            aria-controls="admin-panel-settings"
+            data-admin-tab="settings"
+          >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+              <circle cx="12" cy="12" r="3"></circle>
+              <path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1-2.8 2.8-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6v.2h-4V21a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1L4.2 17l.1-.1a1.7 1.7 0 0 0 .3-1.9A1.7 1.7 0 0 0 3 14H2.8v-4H3a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9L4.2 7 7 4.2l.1.1A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-1.6v-.2h4V3a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1L19.8 7l-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.6 1h.2v4H21a1.7 1.7 0 0 0-1.6 1Z"></path>
+            </svg>
+            <span>Settings</span>
+          </button>
         </nav>
 
-        <section class="admin-tab-panel" id="admin-panel-overview" role="tabpanel" aria-labelledby="admin-tab-overview" data-admin-panel="overview">
-          <section class="admin-hero" aria-labelledby="admin-dashboard-title">
-            <div>
-              <p class="admin-kicker">Content operations</p>
-              <h2 id="admin-dashboard-title">Manage updates with cleaner handoff files.</h2>
-              <p>
-                Build event snippets and speech files for the static site, then commit the generated content to the repository before deploying.
-              </p>
-            </div>
-            <div class="admin-health" aria-label="Service readiness">
-              <span class={`admin-status-pill ${configuredServices === 2 ? "is-ok" : "is-warn"}`}>
-                {configuredServices === 2 ? "Configured" : "Setup needed"}
-              </span>
-              <strong>{configuredServices}/2 services ready</strong>
-              <span>Contact form and analytics environment variables.</span>
-            </div>
-          </section>
+        <div class="admin-sidebar-note">
+          <strong>Static content tools</strong>
+          <p>This workspace creates snippets and files. Add them to the repository to publish changes.</p>
+        </div>
+      </aside>
 
-          <section class="admin-stats" aria-label="Website overview">
-            <div class="admin-stat">
-              <span>Calendar definitions</span>
-              <strong>{totalEvents}</strong>
-              <small>{recurringCalendarEvents.length} recurring, {calendarEvents.length} dated</small>
-            </div>
-            <div class="admin-stat">
-              <span>Speeches in content</span>
-              <strong>{speechEntries.length}</strong>
-              <small>Generated from <code>content/speeches</code></small>
-            </div>
-            <div class="admin-stat">
-              <span>Blog and news posts</span>
-              <strong>{blogEntries.length}</strong>
-              <small>Generated from <code>content/blog</code></small>
-            </div>
-            <div class="admin-stat">
-              <span>Latest content</span>
-              <strong>{latestEntryDate}</strong>
-              <small>{latestEntryTitle}</small>
-            </div>
-          </section>
+      <div class="admin-page">
+        <header class="admin-topbar">
+          <div class="admin-topbar-copy">
+            <p data-admin-section-description>Website dashboard</p>
+            <h1 data-admin-section-title>Overview</h1>
+          </div>
+          <div class="admin-topbar-actions">
+            <span class={`admin-status-pill ${configuredServices === 2 ? "is-ready" : "is-warning"}`}>
+              {configuredServices === 2 ? "Services ready" : `${configuredServices}/2 services ready`}
+            </span>
+            <a class="admin-link-button" href="/" target="_blank" rel="noreferrer">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+                <path d="M14 5h5v5M19 5l-8 8"></path>
+                <path d="M19 13v6H5V5h6"></path>
+              </svg>
+              View website
+            </a>
+          </div>
+        </header>
 
-        </section>
-
-        <section class="admin-tab-panel" id="admin-panel-calendar" role="tabpanel" aria-labelledby="admin-tab-calendar" data-admin-panel="calendar" hidden>
-          <div class="admin-workspace">
-            <div class="admin-builder-stack">
-              <section class="admin-panel" aria-labelledby="event-builder-title">
-              <div class="admin-panel-header">
-                <div class="admin-panel-title">
-                  <p class="admin-section-label">Calendar</p>
-                  <h2 id="event-builder-title">Add Calendar Event</h2>
-                  <p class="admin-note">Generate a typed calendar entry.</p>
-                </div>
-                <span class="admin-status-pill is-ok">Live preview</span>
+        <main class="admin-main" id="admin-content">
+          <section
+            class="admin-tab-panel"
+            id="admin-panel-overview"
+            role="tabpanel"
+            aria-labelledby="admin-tab-overview"
+            data-admin-panel="overview"
+          >
+            <section class="admin-overview-banner" aria-labelledby="admin-dashboard-title">
+              <div class="admin-banner-copy">
+                <h2 id="admin-dashboard-title">Everything you need to manage the site.</h2>
+                <p>Create calendar updates, find and edit speeches, and check which connected services are ready.</p>
               </div>
-              <div class="admin-panel-body">
-                <form class="admin-form" data-event-form>
-                  <div class="admin-form-grid">
-                    <div class="admin-field">
-                      <label for="event-title">Title</label>
-                      <input id="event-title" name="title" required placeholder="Community gathering" autocomplete="off" />
-                    </div>
-                    <div class="admin-field">
-                      <label for="event-date">Date</label>
-                      <input id="event-date" name="date" type="date" value={today} required />
-                    </div>
-                    <div class="admin-field">
-                      <label for="event-start">Start time</label>
-                      <input id="event-start" name="startTime" type="time" value="11:00" required />
-                    </div>
-                    <div class="admin-field">
-                      <label for="event-end">End time</label>
-                      <input id="event-end" name="endTime" type="time" value="12:00" required />
-                    </div>
-                    <div class="admin-field">
-                      <label for="event-location">Location</label>
-                      <input id="event-location" name="location" value="19 North Great Georges St., Dublin 1, Ireland" required />
-                    </div>
-                    <div class="admin-field">
-                      <label for="event-url">Details URL</label>
-                      <input id="event-url" name="url" placeholder="/events" inputmode="url" />
-                    </div>
-                  </div>
-                  <div class="admin-field">
-                    <label for="event-details">Details</label>
-                    <textarea id="event-details" name="details" required placeholder="Short description shown on the calendar."></textarea>
-                  </div>
-                  <div class="admin-actions-row">
-                    <button class="admin-button admin-button-primary" type="submit">Refresh Snippet</button>
-                    <button class="admin-button" type="button" data-copy="event-output" disabled>Copy Snippet</button>
-                  </div>
-                  <div class="admin-output">
-                    <div class="admin-output-header">
-                      <small class="admin-path" data-event-path>Complete the event fields to generate a snippet.</small>
-                      <span class="admin-message" data-event-message aria-live="polite"></span>
-                    </div>
-                    <textarea id="event-output" aria-label="Generated event snippet" readonly spellcheck="false"></textarea>
-                  </div>
-                </form>
+              <div class="admin-banner-actions" aria-label="Quick actions">
+                <button class="admin-button admin-button-primary" type="button" data-admin-tab-link="calendar">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" aria-hidden="true">
+                    <path d="M12 5v14M5 12h14"></path>
+                  </svg>
+                  Add event
+                </button>
+                <button class="admin-button" type="button" data-admin-tab-link="speeches" data-add-speech>
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" aria-hidden="true">
+                    <path d="M12 5v14M5 12h14"></path>
+                  </svg>
+                  Add speech
+                </button>
+                <a class="admin-link-button" href="/" target="_blank" rel="noreferrer">Open public site</a>
               </div>
             </section>
-            </div>
 
-          </div>
-        </section>
-
-        <section class="admin-tab-panel" id="admin-panel-speeches" role="tabpanel" aria-labelledby="admin-tab-speeches" data-admin-panel="speeches" hidden>
-          <div class="admin-workspace">
-            <div class="admin-builder-stack">
-              <section class="admin-panel" aria-labelledby="speech-list-title">
-                <div class="admin-panel-header">
-                  <div class="admin-panel-title">
-                    <p class="admin-section-label">Speeches</p>
-                    <h2 id="speech-list-title">Existing Speeches</h2>
-                    <p class="admin-note">{speechAdminEntries.length} speeches available to edit.</p>
-                  </div>
-                  <button class="admin-button admin-button-primary" type="button" data-add-speech>Add Speech</button>
+            <section class="admin-stat-grid" aria-label="Website overview">
+              <article class="admin-stat-card">
+                <span class="admin-stat-icon">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+                    <rect x="3" y="5" width="18" height="16" rx="2"></rect>
+                    <path d="M16 3v4M8 3v4M3 10h18"></path>
+                  </svg>
+                </span>
+                <div class="admin-stat-copy">
+                  <span>Calendar events</span>
+                  <strong>{totalEvents}</strong>
+                  <small>{recurringCalendarEvents.length} recurring · {calendarEvents.length} dated</small>
                 </div>
-                <div class="admin-panel-body">
-                  <div class="admin-speech-list">
-                    {speechAdminEntries.map((speech) => (
-                      <div class="admin-speech-row">
-                        <div>
-                          <span class="admin-speech-row-title">{speech.title}</span>
-                          <span class="admin-speech-row-meta">
-                            <span>{speech.speechYear}</span>
-                            <span>{speech.publishedDate}</span>
-                            <span>{speech.path}</span>
-                          </span>
-                        </div>
-                        <button class="admin-button" type="button" data-speech-edit={speech.id}>Edit</button>
-                      </div>
-                    ))}
+              </article>
+              <article class="admin-stat-card">
+                <span class="admin-stat-icon is-warm">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+                    <path d="M5 3h10l4 4v14H5z"></path>
+                    <path d="M15 3v5h5M8 12h8M8 16h8"></path>
+                  </svg>
+                </span>
+                <div class="admin-stat-copy">
+                  <span>Speeches</span>
+                  <strong>{speechEntries.length}</strong>
+                  <small>Available to search and edit</small>
+                </div>
+              </article>
+              <article class="admin-stat-card">
+                <span class="admin-stat-icon">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+                    <path d="M4 5h16v14H4z"></path>
+                    <path d="M8 9h8M8 13h8M8 17h5"></path>
+                  </svg>
+                </span>
+                <div class="admin-stat-copy">
+                  <span>Blog and news</span>
+                  <strong>{blogEntries.length}</strong>
+                  <small>Published content entries</small>
+                </div>
+              </article>
+              <article class="admin-stat-card">
+                <span class="admin-stat-icon is-green">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+                    <path d="M20 6 9 17l-5-5"></path>
+                  </svg>
+                </span>
+                <div class="admin-stat-copy">
+                  <span>Connected services</span>
+                  <strong>{configuredServices}/2</strong>
+                  <small>Contact form and analytics</small>
+                </div>
+              </article>
+            </section>
+
+            <section class="admin-overview-grid" aria-label="Dashboard details">
+              <article class="admin-panel">
+                <header class="admin-panel-header">
+                  <div>
+                    <h3>Latest content</h3>
+                    <p>Most recently dated site entry</p>
                   </div>
+                </header>
+                <div class="admin-panel-body">
+                  <div class="admin-latest-card">
+                    <span class="admin-content-type">{latestEntryType}</span>
+                    <h4>{latestEntryTitle}</h4>
+                    {latestEntryDateIso ? (
+                      <p><time datetime={latestEntryDateIso}>{latestEntryDate}</time></p>
+                    ) : (
+                      <p>{latestEntryDate}</p>
+                    )}
+                  </div>
+                </div>
+              </article>
+
+              <article class="admin-panel">
+                <header class="admin-panel-header">
+                  <div>
+                    <h3>Service status</h3>
+                    <p>Build-time connections</p>
+                  </div>
+                  <button class="admin-button admin-button-quiet" type="button" data-admin-tab-link="settings">Details</button>
+                </header>
+                <div class="admin-panel-body">
+                  <div class="admin-status-stack">
+                    <div class="admin-status-row">
+                      <div class="admin-status-row-copy">
+                        <strong>Contact form</strong>
+                        <small>Visitor submissions</small>
+                      </div>
+                      <span class={`admin-status-pill ${contactConfigured ? "is-ready" : "is-warning"}`}>
+                        {contactConfigured ? "Ready" : "Setup needed"}
+                      </span>
+                    </div>
+                    <div class="admin-status-row">
+                      <div class="admin-status-row-copy">
+                        <strong>Analytics</strong>
+                        <small>Website reporting</small>
+                      </div>
+                      <span class={`admin-status-pill ${analyticsConfigured ? "is-ready" : "is-warning"}`}>
+                        {analyticsConfigured ? "Ready" : "Setup needed"}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </article>
+
+              <article class="admin-panel">
+                <header class="admin-panel-header">
+                  <div>
+                    <h3>Publishing workflow</h3>
+                    <p>How changes reach the website</p>
+                  </div>
+                </header>
+                <div class="admin-panel-body">
+                  <ol class="admin-workflow-list">
+                    <li>Generate the event snippet or speech file here.</li>
+                    <li>Add the generated content to the repository.</li>
+                    <li>Commit and deploy the static site.</li>
+                  </ol>
+                </div>
+              </article>
+            </section>
+          </section>
+
+          <section
+            class="admin-tab-panel"
+            id="admin-panel-calendar"
+            role="tabpanel"
+            aria-labelledby="admin-tab-calendar"
+            data-admin-panel="calendar"
+            hidden
+          >
+            <header class="admin-section-heading">
+              <div>
+                <p class="admin-eyebrow">Calendar</p>
+                <h2>Create a calendar event</h2>
+                <p>Fill in the event details. The repository-ready snippet updates automatically as you type.</p>
+              </div>
+              <div class="admin-section-actions">
+                <a class="admin-link-button" href="/events" target="_blank" rel="noreferrer">View public calendar</a>
+              </div>
+            </header>
+
+            <div class="admin-event-layout">
+              <section class="admin-panel" aria-labelledby="event-details-title">
+                <header class="admin-panel-header">
+                  <div>
+                    <h3 id="event-details-title">Event details</h3>
+                    <p>Required fields are marked with an asterisk.</p>
+                  </div>
+                </header>
+                <div class="admin-panel-body">
+                  <form class="admin-form" data-event-form>
+                    <div class="admin-form-grid">
+                      <div class="admin-field">
+                        <label for="event-title">Title <span aria-hidden="true">*</span></label>
+                        <input id="event-title" name="title" required placeholder="Community gathering" autocomplete="off" />
+                      </div>
+                      <div class="admin-field">
+                        <label for="event-date">Date <span aria-hidden="true">*</span></label>
+                        <input id="event-date" name="date" type="date" value={today} required />
+                      </div>
+                      <div class="admin-field">
+                        <label for="event-start">Start time <span aria-hidden="true">*</span></label>
+                        <input id="event-start" name="startTime" type="time" value="11:00" required />
+                      </div>
+                      <div class="admin-field">
+                        <label for="event-end">End time <span aria-hidden="true">*</span></label>
+                        <input id="event-end" name="endTime" type="time" value="12:00" required />
+                      </div>
+                      <div class="admin-field">
+                        <label for="event-location">Location <span aria-hidden="true">*</span></label>
+                        <input id="event-location" name="location" value="19 North Great Georges St., Dublin 1, Ireland" required />
+                      </div>
+                      <div class="admin-field">
+                        <label for="event-url">Details URL <span class="admin-optional">Optional</span></label>
+                        <input id="event-url" name="url" placeholder="/events" inputmode="url" />
+                        <small class="admin-field-help">Use a local path or a full https:// URL.</small>
+                      </div>
+                    </div>
+                    <div class="admin-field">
+                      <label for="event-details">Description <span aria-hidden="true">*</span></label>
+                      <textarea id="event-details" name="details" required placeholder="Short description shown on the calendar."></textarea>
+                      <small class="admin-field-help">Keep this clear and concise for the public calendar.</small>
+                    </div>
+                    <div class="admin-form-footer">
+                      <span class="admin-field-help">Your changes stay in this browser until you copy the snippet.</span>
+                      <div class="admin-button-row">
+                        <button class="admin-button admin-button-quiet" type="reset">Reset fields</button>
+                        <button class="admin-button" type="submit">Check preview</button>
+                      </div>
+                    </div>
+                  </form>
                 </div>
               </section>
 
-              <section class="admin-panel" aria-labelledby="speech-builder-title">
-              <div class="admin-panel-header">
-                <div class="admin-panel-title">
-                  <p class="admin-section-label">Speeches</p>
-                  <h2 id="speech-builder-title" data-speech-editor-title>Add Speech</h2>
-                  <p class="admin-note" data-speech-editor-note>Generate a Markdown file for <code>content/speeches</code>.</p>
+              <section class="admin-panel admin-preview-panel" aria-labelledby="event-preview-title">
+                <header class="admin-panel-header">
+                  <div>
+                    <h3 id="event-preview-title">Generated snippet</h3>
+                    <p>Ready for <code>src/data/events.ts</code></p>
+                  </div>
+                  <span class="admin-status-pill is-neutral">Live preview</span>
+                </header>
+                <div class="admin-panel-body">
+                  <div class="admin-output-block">
+                    <div class="admin-output-meta">
+                      <strong>Destination</strong>
+                      <span class="admin-path" data-event-path>Complete the required fields to generate a snippet.</span>
+                    </div>
+                    <textarea class="admin-code-output" id="event-output" aria-label="Generated event snippet" readonly spellcheck="false"></textarea>
+                    <span class="admin-message" data-event-message aria-live="polite"></span>
+                    <button class="admin-button admin-button-primary" type="button" data-copy="event-output" disabled>
+                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+                        <rect x="8" y="8" width="11" height="11" rx="2"></rect>
+                        <path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3"></path>
+                      </svg>
+                      Copy snippet
+                    </button>
+                    <div class="admin-handoff-note">
+                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+                        <circle cx="12" cy="12" r="9"></circle>
+                        <path d="M12 10v6M12 7h.01"></path>
+                      </svg>
+                      <span>Copy this object into <code>calendarEvents</code>, then commit and deploy the site.</span>
+                    </div>
+                  </div>
                 </div>
-                <span class="admin-status-pill is-ok">Download ready</span>
-              </div>
-              <div class="admin-panel-body">
-                <form class="admin-form" data-speech-form>
-                  <input type="hidden" name="originalPath" />
-                  <input type="hidden" name="source" />
-                  <input type="hidden" name="categories" />
-                  <input type="hidden" name="tags" />
-                  <div class="admin-form-grid">
-                    <div class="admin-field">
-                      <label for="speech-title">Title</label>
-                      <input id="speech-title" name="title" required placeholder="Speech title" autocomplete="off" />
-                    </div>
-                    <div class="admin-field">
-                      <label for="speech-date">Published date</label>
-                      <input id="speech-date" name="publishedDate" type="date" value={today} required />
-                    </div>
-                    <div class="admin-field">
-                      <label for="speech-year">Speech year</label>
-                      <input id="speech-year" name="speechYear" inputmode="numeric" pattern="[0-9]{4}" value={new Date().getFullYear()} required />
-                    </div>
-                    <div class="admin-field">
-                      <label for="speech-speaker">Speaker</label>
-                      <select id="speech-speaker" name="speaker">
-                        <option value="rev">Rev. Sun Myung Moon</option>
-                        <option value="mrs">Dr. Hak Ja Han Moon</option>
-                        <option value="other">Other speaker</option>
-                      </select>
-                    </div>
-                  </div>
-                  <div class="admin-field">
-                    <label for="speech-body">Speech body</label>
-                    <textarea id="speech-body" name="body" required placeholder="<p>Paste the speech text here.</p>"></textarea>
-                  </div>
-                  <div class="admin-actions-row">
-                    <button class="admin-button admin-button-primary" type="submit">Refresh Markdown</button>
-                    <button class="admin-button" type="button" data-copy="speech-output" disabled>Copy Markdown</button>
-                    <a class="admin-link-button" data-download-speech href="#" aria-disabled="true" tabindex="-1" download>Download .md</a>
-                  </div>
-                  <div class="admin-output">
-                    <div class="admin-output-header">
-                      <small class="admin-path" data-speech-path>Complete the speech fields to generate a file.</small>
-                      <span class="admin-message" data-speech-message aria-live="polite"></span>
-                    </div>
-                    <textarea id="speech-output" aria-label="Generated speech markdown" readonly spellcheck="false"></textarea>
-                  </div>
-                </form>
-              </div>
-            </section>
+              </section>
             </div>
+          </section>
 
-          </div>
-        </section>
+          <section
+            class="admin-tab-panel"
+            id="admin-panel-speeches"
+            role="tabpanel"
+            aria-labelledby="admin-tab-speeches"
+            data-admin-panel="speeches"
+            hidden
+          >
+            <header class="admin-section-heading">
+              <div>
+                <p class="admin-eyebrow">Content library</p>
+                <h2>Manage speeches</h2>
+                <p>Search the archive, open an existing speech, or generate a new Markdown file.</p>
+              </div>
+              <div class="admin-section-actions">
+                <a class="admin-link-button" href="/speeches" target="_blank" rel="noreferrer">View speech archive</a>
+                <button class="admin-button admin-button-primary" type="button" data-add-speech>
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" aria-hidden="true">
+                    <path d="M12 5v14M5 12h14"></path>
+                  </svg>
+                  New speech
+                </button>
+              </div>
+            </header>
 
-        <section class="admin-tab-panel" id="admin-panel-settings" role="tabpanel" aria-labelledby="admin-tab-settings" data-admin-panel="settings" hidden></section>
-      </main>
+            <div class="admin-speech-layout">
+              <section class="admin-panel admin-speech-collection" aria-labelledby="speech-library-title">
+                <header class="admin-panel-header">
+                  <div>
+                    <h3 id="speech-library-title">Speech library</h3>
+                    <p>{speechAdminEntries.length} files in the archive</p>
+                  </div>
+                </header>
+                <div class="admin-speech-toolbar">
+                  <div class="admin-search-wrap">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+                      <circle cx="11" cy="11" r="7"></circle>
+                      <path d="m16 16 5 5"></path>
+                    </svg>
+                    <label for="speech-search" class="admin-visually-hidden">Search speeches</label>
+                    <input id="speech-search" type="search" placeholder="Search title, year or path…" data-speech-search />
+                  </div>
+                  <div class="admin-filter-row">
+                    <label for="speech-speaker-filter" class="admin-visually-hidden">Filter by speaker</label>
+                    <select id="speech-speaker-filter" class="admin-filter-select" data-speech-speaker-filter>
+                      <option value="">All speakers</option>
+                      <option value="rev">Rev. Sun Myung Moon</option>
+                      <option value="mrs">Dr. Hak Ja Han Moon</option>
+                      <option value="other">Other speakers</option>
+                    </select>
+                    <button class="admin-button admin-button-quiet" type="button" data-clear-speech-filters>Clear</button>
+                  </div>
+                  <p class="admin-speech-result-count" data-speech-result-count aria-live="polite"></p>
+                </div>
+                <ul class="admin-speech-list" data-speech-list>
+                  {speechAdminEntries.map((speech) => (
+                    <li
+                      data-speech-row
+                      data-search={`${speech.title} ${speech.path} ${speech.speechYear}`.toLowerCase()}
+                      data-speaker={speech.speaker}
+                    >
+                      <button
+                        class="admin-speech-row"
+                        type="button"
+                        data-speech-edit={speech.id}
+                        aria-label={`Edit ${speech.title}`}
+                      >
+                        <span class="admin-speech-row-copy">
+                          <span class="admin-speech-row-title">{speech.title}</span>
+                          <span class="admin-speech-row-meta">
+                            <span>{speakerLabels[speech.speaker]}</span>
+                            <span>{speech.speechYear}</span>
+                            <time datetime={speech.publishedDate}>{speech.publishedDate}</time>
+                          </span>
+                          <span class="admin-speech-row-path">{speech.path}</span>
+                        </span>
+                        <span class="admin-speech-row-chevron" aria-hidden="true">
+                          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="m9 18 6-6-6-6"></path>
+                          </svg>
+                        </span>
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+                <div class="admin-speech-empty" data-speech-empty hidden>
+                  <strong>No speeches found</strong>
+                  <p>Try a different title, year, or speaker.</p>
+                </div>
+                <div class="admin-speech-list-footer">
+                  <button class="admin-button" type="button" data-speech-show-more>Show more speeches</button>
+                </div>
+              </section>
+
+              <section class="admin-panel admin-speech-editor" aria-labelledby="speech-builder-title" data-speech-editor>
+                <header class="admin-panel-header">
+                  <div>
+                    <h3 id="speech-builder-title" data-speech-editor-title>New speech</h3>
+                    <p data-speech-editor-note>Generate a Markdown file for <code>content/speeches</code>.</p>
+                  </div>
+                  <span class="admin-status-pill is-neutral" data-speech-editor-status>New file</span>
+                </header>
+                <div class="admin-panel-body">
+                  <form class="admin-form" data-speech-form>
+                    <input type="hidden" name="originalPath" />
+                    <input type="hidden" name="source" />
+                    <input type="hidden" name="categories" />
+                    <input type="hidden" name="tags" />
+
+                    <div class="admin-form-grid">
+                      <div class="admin-field">
+                        <label for="speech-title">Title <span aria-hidden="true">*</span></label>
+                        <input id="speech-title" name="title" required placeholder="Speech title" autocomplete="off" />
+                      </div>
+                      <div class="admin-field">
+                        <label for="speech-date">Published date <span aria-hidden="true">*</span></label>
+                        <input id="speech-date" name="publishedDate" type="date" value={today} required />
+                      </div>
+                      <div class="admin-field">
+                        <label for="speech-year">Speech year <span aria-hidden="true">*</span></label>
+                        <input id="speech-year" name="speechYear" inputmode="numeric" pattern="[0-9]{4}" value={new Date().getFullYear()} required />
+                      </div>
+                      <div class="admin-field">
+                        <label for="speech-speaker">Speaker <span aria-hidden="true">*</span></label>
+                        <select id="speech-speaker" name="speaker">
+                          <option value="rev">Rev. Sun Myung Moon</option>
+                          <option value="mrs">Dr. Hak Ja Han Moon</option>
+                          <option value="other">Other speaker</option>
+                        </select>
+                      </div>
+                    </div>
+
+                    <div class="admin-field">
+                      <label for="speech-body">Speech body <span aria-hidden="true">*</span></label>
+                      <textarea class="admin-speech-body" id="speech-body" name="body" required placeholder="<p>Paste the speech text here.</p>"></textarea>
+                      <small class="admin-field-help">Paste the existing HTML content or write simple HTML paragraphs.</small>
+                    </div>
+
+                    <div class="admin-form-footer">
+                      <span class="admin-message" data-speech-message aria-live="polite"></span>
+                      <div class="admin-button-row">
+                        <button class="admin-button" type="button" data-copy="speech-output" disabled>
+                          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+                            <rect x="8" y="8" width="11" height="11" rx="2"></rect>
+                            <path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3"></path>
+                          </svg>
+                          Copy Markdown
+                        </button>
+                        <a class="admin-link-button admin-link-button-primary" data-download-speech href="#" aria-disabled="true" tabindex="-1" download>
+                          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+                            <path d="M12 3v12M7 10l5 5 5-5M5 21h14"></path>
+                          </svg>
+                          Download .md
+                        </a>
+                      </div>
+                    </div>
+
+                    <details class="admin-code-details">
+                      <summary>
+                        <span>Generated Markdown</span>
+                        <span class="admin-path" data-speech-path>Complete the required fields to generate a file.</span>
+                      </summary>
+                      <div class="admin-code-details-body">
+                        <textarea class="admin-code-output" id="speech-output" aria-label="Generated speech markdown" readonly spellcheck="false"></textarea>
+                        <div class="admin-handoff-note">
+                          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+                            <circle cx="12" cy="12" r="9"></circle>
+                            <path d="M12 10v6M12 7h.01"></path>
+                          </svg>
+                          <span>Download or copy the file, add it to the path above, then commit and deploy.</span>
+                        </div>
+                      </div>
+                    </details>
+                  </form>
+                </div>
+              </section>
+            </div>
+          </section>
+
+          <section
+            class="admin-tab-panel"
+            id="admin-panel-settings"
+            role="tabpanel"
+            aria-labelledby="admin-tab-settings"
+            data-admin-panel="settings"
+            hidden
+          >
+            <header class="admin-section-heading">
+              <div>
+                <p class="admin-eyebrow">Configuration</p>
+                <h2>Settings and connections</h2>
+                <p>Check the build-time services used by the public website and review the publishing workflow.</p>
+              </div>
+            </header>
+
+            <div class="admin-settings-grid">
+              <article class="admin-setting-card">
+                <div class="admin-setting-card-header">
+                  <span class="admin-setting-card-icon">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+                      <path d="M3 6h18v12H3z"></path>
+                      <path d="m4 7 8 6 8-6"></path>
+                    </svg>
+                  </span>
+                  <div class="admin-setting-card-title">
+                    <h3>Contact form</h3>
+                    <p>Receives messages submitted from the website.</p>
+                  </div>
+                  <span class={`admin-status-pill ${contactConfigured ? "is-ready" : "is-warning"}`}>
+                    {contactConfigured ? "Connected" : "Not configured"}
+                  </span>
+                </div>
+                <div class="admin-setting-detail">
+                  <span>Environment variable</span>
+                  <strong><code>PUBLIC_CONTACT_FORM_ENDPOINT</code></strong>
+                </div>
+                {contactSubmissionsUrl ? (
+                  <a class="admin-link-button" href={contactSubmissionsUrl} target="_blank" rel="noreferrer">Open submissions</a>
+                ) : (
+                  <p class="admin-field-help">Add <code>PUBLIC_CONTACT_SUBMISSIONS_URL</code> to link the submissions inbox here.</p>
+                )}
+              </article>
+
+              <article class="admin-setting-card">
+                <div class="admin-setting-card-header">
+                  <span class="admin-setting-card-icon">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+                      <path d="M4 20V10M10 20V4M16 20v-7M22 20H2"></path>
+                    </svg>
+                  </span>
+                  <div class="admin-setting-card-title">
+                    <h3>Analytics</h3>
+                    <p>Plausible reporting for public website visits.</p>
+                  </div>
+                  <span class={`admin-status-pill ${analyticsConfigured ? "is-ready" : "is-warning"}`}>
+                    {analyticsConfigured ? "Connected" : "Not configured"}
+                  </span>
+                </div>
+                <div class="admin-setting-detail">
+                  <span>Tracked domain</span>
+                  <strong>{plausibleDomain || <code>PUBLIC_PLAUSIBLE_DOMAIN</code>}</strong>
+                </div>
+                {analyticsDashboardUrl ? (
+                  <a class="admin-link-button" href={analyticsDashboardUrl} target="_blank" rel="noreferrer">Open analytics dashboard</a>
+                ) : (
+                  <p class="admin-field-help">Add <code>PUBLIC_ANALYTICS_DASHBOARD_URL</code> to link reports here.</p>
+                )}
+              </article>
+
+              <article class="admin-setting-card">
+                <div class="admin-setting-card-header">
+                  <span class="admin-setting-card-icon">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+                      <rect x="4" y="10" width="16" height="11" rx="2"></rect>
+                      <path d="M8 10V7a4 4 0 0 1 8 0v3"></path>
+                    </svg>
+                  </span>
+                  <div class="admin-setting-card-title">
+                    <h3>Admin access</h3>
+                    <p>Authentication is enforced by the hosting proxy.</p>
+                  </div>
+                  <span class="admin-status-pill is-neutral">Hosting managed</span>
+                </div>
+                <div class="admin-setting-detail">
+                  <span>Required Pocket ID group</span>
+                  <strong><code>familyfed_admin</code></strong>
+                </div>
+                <p class="admin-field-help">The static page cannot enforce login on its own. Keep the admin host and content endpoints behind the proxy.</p>
+              </article>
+
+              <article class="admin-setting-card">
+                <div class="admin-setting-card-header">
+                  <span class="admin-setting-card-icon">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+                      <path d="M12 3v12M7 10l5 5 5-5M5 21h14"></path>
+                    </svg>
+                  </span>
+                  <div class="admin-setting-card-title">
+                    <h3>Static publishing</h3>
+                    <p>The admin generates handoff files rather than saving directly.</p>
+                  </div>
+                  <span class="admin-status-pill is-neutral">Manual deploy</span>
+                </div>
+                <div class="admin-setting-detail">
+                  <span>Build command</span>
+                  <strong><code>npm run build</code></strong>
+                </div>
+                <a class="admin-link-button" href="/" target="_blank" rel="noreferrer">Open current website</a>
+              </article>
+
+              <article class="admin-setting-card admin-settings-wide">
+                <div class="admin-setting-card-title">
+                  <h3>From admin to published</h3>
+                  <p>Use the same three-step process for events and speeches.</p>
+                </div>
+                <div class="admin-settings-workflow">
+                  <div class="admin-settings-step">
+                    <span>Step 1</span>
+                    <strong>Create</strong>
+                    <p>Complete the form and check the generated output.</p>
+                  </div>
+                  <div class="admin-settings-step">
+                    <span>Step 2</span>
+                    <strong>Add to the repository</strong>
+                    <p>Paste the event snippet or place the downloaded Markdown file.</p>
+                  </div>
+                  <div class="admin-settings-step">
+                    <span>Step 3</span>
+                    <strong>Deploy</strong>
+                    <p>Commit the change and run the normal static-site deployment.</p>
+                  </div>
+                </div>
+              </article>
+            </div>
+          </section>
+        </main>
+      </div>
     </div>
 
     <script is:inline define:vars={{ adminConfig, speechAdminEntries }}>
@@ -940,13 +742,31 @@ const adminConfig = {
         const eventForm = document.querySelector("[data-event-form]");
         const speechForm = document.querySelector("[data-speech-form]");
         const speechDownload = document.querySelector("[data-download-speech]");
+        const speechEditor = document.querySelector("[data-speech-editor]");
         const speechEditorTitle = document.querySelector("[data-speech-editor-title]");
         const speechEditorNote = document.querySelector("[data-speech-editor-note]");
+        const speechEditorStatus = document.querySelector("[data-speech-editor-status]");
+        const adminSectionTitle = document.querySelector("[data-admin-section-title]");
+        const adminSectionDescription = document.querySelector("[data-admin-section-description]");
         const adminTabs = Array.from(document.querySelectorAll("[data-admin-tab]"));
         const adminPanels = Array.from(document.querySelectorAll("[data-admin-panel]"));
         const speechEntryMap = new Map(speechAdminEntries.map((speech) => [speech.id, speech]));
+        const speechRows = Array.from(document.querySelectorAll("[data-speech-row]"));
+        const speechSearch = document.querySelector("[data-speech-search]");
+        const speechSpeakerFilter = document.querySelector("[data-speech-speaker-filter]");
+        const speechResultCount = document.querySelector("[data-speech-result-count]");
+        const speechEmpty = document.querySelector("[data-speech-empty]");
+        const speechShowMore = document.querySelector("[data-speech-show-more]");
+        const sectionMeta = {
+          overview: { title: "Overview", description: "Website dashboard" },
+          calendar: { title: "Events", description: "Calendar content" },
+          speeches: { title: "Speeches", description: "Content library" },
+          settings: { title: "Settings", description: "Connections and publishing" },
+        };
+        let speechVisibleLimit = 24;
+        let speechLoadRequest = 0;
 
-        function activateTab(tabName, shouldFocus = false) {
+        function activateTab(tabName, shouldFocus = false, updateHistory = true) {
           const nextTab = adminTabs.find((tab) => tab.dataset.adminTab === tabName) ?? adminTabs[0];
           const nextTabName = nextTab?.dataset.adminTab;
 
@@ -964,21 +784,37 @@ const adminConfig = {
             panel.hidden = panel.dataset.adminPanel !== nextTabName;
           });
 
+          const meta = sectionMeta[nextTabName] ?? sectionMeta.overview;
+          if (adminSectionTitle) {
+            adminSectionTitle.textContent = meta.title;
+          }
+          if (adminSectionDescription) {
+            adminSectionDescription.textContent = meta.description;
+          }
+          document.title = `${meta.title} · FamilyFed.ie Admin`;
+
+          if (updateHistory && window.location.hash !== `#${nextTabName}`) {
+            window.history.pushState({ adminTab: nextTabName }, "", `#${nextTabName}`);
+          }
+
           if (shouldFocus) {
             nextTab.focus();
           }
         }
 
         adminTabs.forEach((tab, index) => {
-          tab.addEventListener("click", () => activateTab(tab.dataset.adminTab));
+          tab.addEventListener("click", () => {
+            activateTab(tab.dataset.adminTab);
+            window.scrollTo({ top: 0, behavior: "smooth" });
+          });
           tab.addEventListener("keydown", (event) => {
             const currentIndex = adminTabs.indexOf(tab);
             const lastIndex = adminTabs.length - 1;
             let nextIndex = currentIndex;
 
-            if (event.key === "ArrowRight") {
+            if (event.key === "ArrowRight" || event.key === "ArrowDown") {
               nextIndex = currentIndex === lastIndex ? 0 : currentIndex + 1;
-            } else if (event.key === "ArrowLeft") {
+            } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
               nextIndex = currentIndex === 0 ? lastIndex : currentIndex - 1;
             } else if (event.key === "Home") {
               nextIndex = 0;
@@ -990,6 +826,7 @@ const adminConfig = {
 
             event.preventDefault();
             activateTab(adminTabs[nextIndex].dataset.adminTab, true);
+            window.scrollTo({ top: 0, behavior: "smooth" });
           });
 
           tab.tabIndex = index === 0 ? 0 : -1;
@@ -997,11 +834,16 @@ const adminConfig = {
 
         document.querySelectorAll("[data-admin-tab-link]").forEach((button) => {
           button.addEventListener("click", () => {
-            activateTab(button.dataset.adminTabLink, true);
+            activateTab(button.dataset.adminTabLink);
             window.scrollTo({ top: 0, behavior: "smooth" });
           });
         });
 
+        window.addEventListener("popstate", () => {
+          const tabName = window.location.hash.slice(1);
+          activateTab(tabName || "overview", false, false);
+        });
+
         function slugify(value) {
           return value
             .normalize("NFKD")
@@ -1130,6 +972,10 @@ const adminConfig = {
             return "Complete the required event fields.";
           }
 
+          if (!slugify(data.title)) {
+            return "Use at least one letter or number in the event title.";
+          }
+
           if (data.endTime <= data.startTime) {
             return "End time must be later than start time.";
           }
@@ -1146,6 +992,10 @@ const adminConfig = {
             return "Complete the required speech fields.";
           }
 
+          if (!slugify(data.title)) {
+            return "Use at least one letter or number in the speech title.";
+          }
+
           if (!/^\d{4}$/.test(data.speechYear)) {
             return "Speech year must use four digits.";
           }
@@ -1231,14 +1081,31 @@ const adminConfig = {
 
         function setSpeechEditorMode(mode, speech = {}) {
           if (speechEditorTitle) {
-            speechEditorTitle.textContent = mode === "edit" ? "Edit Speech" : "Add Speech";
+            speechEditorTitle.textContent = mode === "edit" ? "Edit speech" : "New speech";
           }
 
           if (speechEditorNote) {
             speechEditorNote.textContent = mode === "edit"
-              ? `Editing ${speech.path}. Copy or download the Markdown when finished.`
+              ? `Editing ${speech.path}. Download or copy the Markdown when finished.`
               : "Generate a Markdown file for content/speeches.";
           }
+
+          if (speechEditorStatus) {
+            speechEditorStatus.textContent = mode === "edit" ? "Editing" : "New file";
+          }
+        }
+
+        function markSelectedSpeech(speechId = "") {
+          speechRows.forEach((row) => {
+            const button = row.querySelector("[data-speech-edit]");
+            const isSelected = button?.dataset.speechEdit === speechId;
+            button?.classList.toggle("is-selected", isSelected);
+            if (isSelected) {
+              button.setAttribute("aria-current", "true");
+            } else {
+              button?.removeAttribute("aria-current");
+            }
+          });
         }
 
         async function loadSpeechEditor(speech) {
@@ -1246,7 +1113,9 @@ const adminConfig = {
             return;
           }
 
+          const requestId = ++speechLoadRequest;
           const message = document.querySelector("[data-speech-message]");
+          markSelectedSpeech(speech.id);
           setMessage(message, "Loading speech body...");
 
           if (!speech.body && speech.bodyUrl) {
@@ -1257,13 +1126,23 @@ const adminConfig = {
                 throw new Error(`Speech body request failed: ${response.status}`);
               }
 
-              speech = { ...speech, ...(await response.json()) };
+              const loadedSpeech = await response.json();
+              if (requestId !== speechLoadRequest) {
+                return;
+              }
+              speech = { ...speech, ...loadedSpeech };
             } catch {
-              setMessage(message, "Could not load that speech body. Try refreshing the admin page.", "error");
+              if (requestId === speechLoadRequest) {
+                setMessage(message, "Could not load that speech body. Try refreshing the admin page.", "error");
+              }
               return;
             }
           }
 
+          if (requestId !== speechLoadRequest) {
+            return;
+          }
+
           setFormValue(speechForm, "title", speech.title);
           setFormValue(speechForm, "publishedDate", speech.publishedDate);
           setFormValue(speechForm, "speechYear", speech.speechYear);
@@ -1274,8 +1153,11 @@ const adminConfig = {
           setFormValue(speechForm, "categories", JSON.stringify(speech.categories ?? []));
           setFormValue(speechForm, "tags", JSON.stringify(speech.tags ?? []));
           setSpeechEditorMode("edit", speech);
-          refreshSpeechOutput(false);
-          speechForm.scrollIntoView({ behavior: "smooth", block: "start" });
+          refreshSpeechOutput(false, false);
+
+          if (window.matchMedia("(max-width: 1000px)").matches) {
+            speechEditor?.scrollIntoView({ behavior: "smooth", block: "start" });
+          }
           speechForm.elements.title?.focus();
         }
 
@@ -1284,6 +1166,7 @@ const adminConfig = {
             return;
           }
 
+          speechLoadRequest += 1;
           speechForm.reset();
           setFormValue(speechForm, "publishedDate", new Date().toISOString().slice(0, 10));
           setFormValue(speechForm, "speechYear", new Date().getFullYear().toString());
@@ -1293,12 +1176,16 @@ const adminConfig = {
           setFormValue(speechForm, "categories", "");
           setFormValue(speechForm, "tags", "");
           setSpeechEditorMode("add");
-          refreshSpeechOutput(false);
-          speechForm.scrollIntoView({ behavior: "smooth", block: "start" });
+          markSelectedSpeech();
+          refreshSpeechOutput(false, false);
+
+          if (window.matchMedia("(max-width: 1000px)").matches) {
+            speechEditor?.scrollIntoView({ behavior: "smooth", block: "start" });
+          }
           speechForm.elements.title?.focus();
         }
 
-        function refreshEventOutput(showSuccess = false) {
+        function refreshEventOutput(showSuccess = false, showErrors = true) {
           if (!eventForm) {
             return false;
           }
@@ -1311,20 +1198,20 @@ const adminConfig = {
 
           if (error) {
             output.value = "";
-            path.textContent = "Complete the event fields to generate a snippet.";
+            path.textContent = "Complete the required fields to generate a snippet.";
             setCopyEnabled("event-output", false);
-            setMessage(message, error, "error");
+            setMessage(message, showErrors ? error : "", showErrors ? "error" : "");
             return false;
           }
 
           output.value = generateEvent(data);
-          path.textContent = "Paste into src/data/events.ts inside calendarEvents.";
+          path.textContent = "src/data/events.ts → calendarEvents";
           setCopyEnabled("event-output", true);
-          setMessage(message, showSuccess ? "Snippet refreshed." : "Ready to copy.", "success");
+          setMessage(message, showSuccess ? "Preview is up to date." : "Ready to copy.", "success");
           return true;
         }
 
-        function refreshSpeechOutput(showSuccess = false) {
+        function refreshSpeechOutput(showSuccess = false, showErrors = true) {
           if (!speechForm) {
             return false;
           }
@@ -1337,10 +1224,10 @@ const adminConfig = {
 
           if (error) {
             output.value = "";
-            path.textContent = "Complete the speech fields to generate a file.";
+            path.textContent = "Complete the required fields to generate a file.";
             setCopyEnabled("speech-output", false);
             resetDownload(speechDownload);
-            setMessage(message, error, "error");
+            setMessage(message, showErrors ? error : "", showErrors ? "error" : "");
             return false;
           }
 
@@ -1349,12 +1236,50 @@ const adminConfig = {
           path.textContent = generated.path;
           setCopyEnabled("speech-output", true);
           setDownload(speechDownload, `${generated.slug}.md`, generated.markdown);
-          setMessage(message, showSuccess ? "Markdown refreshed." : "Ready to copy or download.", "success");
+          setMessage(message, showSuccess ? "Markdown is up to date." : "Ready to copy or download.", "success");
           return true;
         }
 
+        function updateSpeechList(resetLimit = false) {
+          if (resetLimit) {
+            speechVisibleLimit = 24;
+          }
+
+          const query = String(speechSearch?.value || "").trim().toLowerCase();
+          const speaker = String(speechSpeakerFilter?.value || "");
+          const matches = speechRows.filter((row) => {
+            const matchesText = !query || row.dataset.search.includes(query);
+            const matchesSpeaker = !speaker || row.dataset.speaker === speaker;
+            return matchesText && matchesSpeaker;
+          });
+
+          const matchSet = new Set(matches);
+          let visibleMatchIndex = 0;
+          speechRows.forEach((row) => {
+            if (!matchSet.has(row)) {
+              row.hidden = true;
+              return;
+            }
+            row.hidden = visibleMatchIndex >= speechVisibleLimit;
+            visibleMatchIndex += 1;
+          });
+
+          const visibleCount = Math.min(matches.length, speechVisibleLimit);
+          if (speechResultCount) {
+            speechResultCount.textContent = matches.length
+              ? `Showing ${visibleCount} of ${matches.length} matching speeches`
+              : "No matching speeches";
+          }
+          if (speechEmpty) {
+            speechEmpty.hidden = matches.length !== 0;
+          }
+          if (speechShowMore) {
+            speechShowMore.hidden = visibleCount >= matches.length;
+          }
+        }
+
         document.querySelectorAll("[data-copy]").forEach((button) => {
-          const originalText = button.textContent;
+          const originalContents = button.innerHTML;
 
           button.addEventListener("click", async () => {
             const target = document.getElementById(button.dataset.copy);
@@ -1371,7 +1296,7 @@ const adminConfig = {
               button.textContent = "Copied";
               setMessage(message, "Copied to clipboard.", "success");
               window.setTimeout(() => {
-                button.textContent = originalText;
+                button.innerHTML = originalContents;
               }, 1400);
             } catch {
               target.focus();
@@ -1387,7 +1312,14 @@ const adminConfig = {
           }
         });
 
-        document.querySelector("[data-add-speech]")?.addEventListener("click", resetSpeechEditor);
+        document.querySelectorAll("[data-add-speech]").forEach((button) => {
+          button.addEventListener("click", () => {
+            if (button.dataset.adminTabLink !== "speeches") {
+              activateTab("speeches");
+            }
+            resetSpeechEditor();
+          });
+        });
 
         document.querySelectorAll("[data-speech-edit]").forEach((button) => {
           button.addEventListener("click", () => {
@@ -1398,21 +1330,45 @@ const adminConfig = {
           });
         });
 
-        eventForm?.addEventListener("input", () => refreshEventOutput(false));
-        speechForm?.addEventListener("input", () => refreshSpeechOutput(false));
+        speechSearch?.addEventListener("input", () => updateSpeechList(true));
+        speechSpeakerFilter?.addEventListener("change", () => updateSpeechList(true));
+        document.querySelector("[data-clear-speech-filters]")?.addEventListener("click", () => {
+          if (speechSearch) {
+            speechSearch.value = "";
+          }
+          if (speechSpeakerFilter) {
+            speechSpeakerFilter.value = "";
+          }
+          updateSpeechList(true);
+          speechSearch?.focus();
+        });
+        speechShowMore?.addEventListener("click", () => {
+          speechVisibleLimit += 24;
+          updateSpeechList(false);
+        });
+
+        eventForm?.addEventListener("input", () => refreshEventOutput(false, true));
+        speechForm?.addEventListener("input", () => refreshSpeechOutput(false, true));
 
         eventForm?.addEventListener("submit", (event) => {
           event.preventDefault();
-          refreshEventOutput(true);
+          refreshEventOutput(true, true);
         });
 
         speechForm?.addEventListener("submit", (event) => {
           event.preventDefault();
-          refreshSpeechOutput(true);
+          refreshSpeechOutput(true, true);
         });
 
-        refreshEventOutput(false);
-        refreshSpeechOutput(false);
+        eventForm?.addEventListener("reset", () => {
+          window.requestAnimationFrame(() => refreshEventOutput(false, false));
+        });
+
+        const initialTab = window.location.hash.slice(1);
+        activateTab(initialTab || "overview", false, false);
+        updateSpeechList(true);
+        refreshEventOutput(false, false);
+        refreshSpeechOutput(false, false);
         window.familyfedAdmin = adminConfig;
       })();
     </script>
diff --git a/src/styles/admin.css b/src/styles/admin.css
new file mode 100644
index 00000000..d4011749
--- /dev/null
+++ b/src/styles/admin.css
@@ -0,0 +1,1550 @@
+:root {
+  color-scheme: light;
+  --admin-bg: #f3f5f4;
+  --admin-surface: #ffffff;
+  --admin-surface-soft: #f8faf9;
+  --admin-sidebar: #18303a;
+  --admin-sidebar-soft: #24424d;
+  --admin-text: #1c292f;
+  --admin-muted: #66757b;
+  --admin-border: #dce4e1;
+  --admin-border-strong: #cbd7d2;
+  --admin-primary: #b44f2e;
+  --admin-primary-hover: #8f391f;
+  --admin-primary-soft: #fff0e9;
+  --admin-blue: #2f6488;
+  --admin-blue-soft: #eaf3f8;
+  --admin-success: #2d6c52;
+  --admin-success-soft: #e9f5ef;
+  --admin-warning: #916019;
+  --admin-warning-soft: #fff5dd;
+  --admin-danger: #a23c2b;
+  --admin-shadow: 0 10px 30px rgba(24, 48, 58, 0.07);
+  --admin-radius: 12px;
+  --admin-radius-small: 8px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  min-width: 320px;
+  background: var(--admin-bg);
+  scroll-behavior: smooth;
+}
+
+body {
+  min-height: 100vh;
+  margin: 0;
+  color: var(--admin-text);
+  background: var(--admin-bg);
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    sans-serif;
+  font-size: 15px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+button,
+a {
+  -webkit-tap-highlight-color: transparent;
+}
+
+a {
+  color: var(--admin-primary-hover);
+  text-underline-offset: 3px;
+}
+
+code {
+  padding: 2px 5px;
+  border-radius: 5px;
+  background: rgba(28, 41, 47, 0.07);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.9em;
+}
+
+:focus-visible {
+  outline: 3px solid rgba(180, 79, 46, 0.25);
+  outline-offset: 2px;
+}
+
+.admin-skip-link {
+  position: fixed;
+  top: 12px;
+  left: 12px;
+  z-index: 100;
+  padding: 10px 14px;
+  border-radius: var(--admin-radius-small);
+  color: #ffffff;
+  background: var(--admin-primary);
+  font-weight: 800;
+  text-decoration: none;
+  transform: translateY(-160%);
+}
+
+.admin-skip-link:focus {
+  transform: translateY(0);
+}
+
+.admin-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.admin-app {
+  display: grid;
+  grid-template-columns: 258px minmax(0, 1fr);
+  min-height: 100vh;
+}
+
+.admin-sidebar {
+  position: sticky;
+  top: 0;
+  z-index: 30;
+  display: flex;
+  align-self: start;
+  height: 100vh;
+  flex-direction: column;
+  gap: 28px;
+  padding: 26px 18px 20px;
+  color: #ffffff;
+  background:
+    radial-gradient(circle at 5% 0%, rgba(83, 133, 158, 0.34), transparent 34%),
+    var(--admin-sidebar);
+}
+
+.admin-brand {
+  display: flex;
+  min-width: 0;
+  gap: 12px;
+  align-items: center;
+  padding: 0 7px;
+  color: #ffffff;
+  text-decoration: none;
+}
+
+.admin-brand-mark {
+  display: grid;
+  width: 46px;
+  height: 46px;
+  flex: 0 0 46px;
+  place-items: center;
+  border-radius: 13px;
+  background: #ffffff;
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
+}
+
+.admin-brand-mark img {
+  width: 38px;
+  height: 38px;
+  object-fit: contain;
+}
+
+.admin-brand-copy {
+  min-width: 0;
+}
+
+.admin-brand-copy strong,
+.admin-brand-copy span {
+  display: block;
+}
+
+.admin-brand-copy strong {
+  overflow: hidden;
+  font-size: 16px;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.admin-brand-copy span {
+  margin-top: 3px;
+  color: rgba(255, 255, 255, 0.66);
+  font-size: 12px;
+}
+
+.admin-nav {
+  display: grid;
+  gap: 6px;
+}
+
+.admin-nav-label {
+  margin: 0 10px 5px;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.admin-nav-button {
+  display: flex;
+  width: 100%;
+  min-height: 46px;
+  gap: 11px;
+  align-items: center;
+  padding: 10px 12px;
+  border: 1px solid transparent;
+  border-radius: 9px;
+  color: rgba(255, 255, 255, 0.72);
+  background: transparent;
+  font-weight: 700;
+  text-align: left;
+  cursor: pointer;
+  transition: 150ms ease;
+  transition-property: color, background, border-color, transform;
+}
+
+.admin-nav-button svg {
+  width: 19px;
+  height: 19px;
+  flex: 0 0 19px;
+}
+
+.admin-nav-button:hover {
+  color: #ffffff;
+  background: rgba(255, 255, 255, 0.07);
+}
+
+.admin-nav-button[aria-selected="true"] {
+  border-color: rgba(255, 255, 255, 0.08);
+  color: #ffffff;
+  background: var(--admin-sidebar-soft);
+  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.13);
+}
+
+.admin-nav-button[aria-selected="true"]::after {
+  width: 6px;
+  height: 6px;
+  margin-left: auto;
+  border-radius: 50%;
+  background: #ef9a77;
+  content: "";
+}
+
+.admin-sidebar-note {
+  display: grid;
+  gap: 8px;
+  margin-top: auto;
+  padding: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.09);
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.admin-sidebar-note strong {
+  font-size: 13px;
+}
+
+.admin-sidebar-note p {
+  margin: 0;
+  color: rgba(255, 255, 255, 0.62);
+  font-size: 12px;
+  line-height: 1.55;
+}
+
+.admin-page {
+  min-width: 0;
+}
+
+.admin-topbar {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  display: flex;
+  min-height: 82px;
+  gap: 24px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px clamp(22px, 3vw, 42px);
+  border-bottom: 1px solid rgba(220, 228, 225, 0.92);
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(16px);
+}
+
+.admin-topbar-copy {
+  min-width: 0;
+}
+
+.admin-topbar-copy p,
+.admin-topbar-copy h1 {
+  margin: 0;
+}
+
+.admin-topbar-copy p {
+  color: var(--admin-muted);
+  font-size: 12px;
+  font-weight: 750;
+}
+
+.admin-topbar-copy h1 {
+  margin-top: 1px;
+  font-size: 23px;
+  line-height: 1.2;
+}
+
+.admin-topbar-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 9px;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.admin-main {
+  width: min(1440px, 100%);
+  margin: 0 auto;
+  padding: 30px clamp(22px, 3vw, 42px) 52px;
+}
+
+.admin-tab-panel {
+  display: grid;
+  gap: 22px;
+}
+
+.admin-tab-panel[hidden],
+[hidden] {
+  display: none !important;
+}
+
+.admin-section-heading {
+  display: flex;
+  gap: 24px;
+  align-items: end;
+  justify-content: space-between;
+}
+
+.admin-section-heading h2,
+.admin-section-heading p {
+  margin: 0;
+}
+
+.admin-section-heading h2 {
+  margin-top: 3px;
+  font-size: clamp(25px, 3vw, 34px);
+  line-height: 1.16;
+  letter-spacing: -0.025em;
+}
+
+.admin-section-heading > div > p:last-child {
+  max-width: 720px;
+  margin-top: 7px;
+  color: var(--admin-muted);
+}
+
+.admin-eyebrow {
+  color: var(--admin-primary) !important;
+  font-size: 11px;
+  font-weight: 850;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.admin-section-actions,
+.admin-button-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 9px;
+  align-items: center;
+}
+
+.admin-button,
+.admin-link-button {
+  display: inline-flex;
+  min-height: 42px;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  padding: 9px 14px;
+  border: 1px solid var(--admin-border-strong);
+  border-radius: var(--admin-radius-small);
+  color: var(--admin-text);
+  background: var(--admin-surface);
+  box-shadow: 0 1px 2px rgba(24, 48, 58, 0.04);
+  font-weight: 750;
+  font-size: 14px;
+  line-height: 1.2;
+  text-decoration: none;
+  cursor: pointer;
+  transition: 150ms ease;
+  transition-property: border-color, background, color, box-shadow, transform;
+}
+
+.admin-button svg,
+.admin-link-button svg {
+  width: 17px;
+  height: 17px;
+}
+
+.admin-button:hover,
+.admin-link-button:hover {
+  border-color: #b8c7c1;
+  background: #fbfcfb;
+  box-shadow: 0 4px 12px rgba(24, 48, 58, 0.08);
+  transform: translateY(-1px);
+}
+
+.admin-button-primary,
+.admin-link-button-primary {
+  border-color: var(--admin-primary);
+  color: #ffffff;
+  background: var(--admin-primary);
+}
+
+.admin-button-primary:hover,
+.admin-link-button-primary:hover {
+  border-color: var(--admin-primary-hover);
+  color: #ffffff;
+  background: var(--admin-primary-hover);
+}
+
+.admin-button-subtle {
+  border-color: transparent;
+  color: var(--admin-primary-hover);
+  background: var(--admin-primary-soft);
+  box-shadow: none;
+}
+
+.admin-button-quiet {
+  border-color: transparent;
+  color: var(--admin-muted);
+  background: transparent;
+  box-shadow: none;
+}
+
+.admin-button:disabled,
+.admin-link-button[aria-disabled="true"] {
+  border-color: var(--admin-border);
+  color: #95a19d;
+  background: #edf1ef;
+  box-shadow: none;
+  cursor: not-allowed;
+  pointer-events: none;
+  transform: none;
+}
+
+.admin-overview-banner {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 30px;
+  align-items: center;
+  overflow: hidden;
+  padding: 30px;
+  border: 1px solid rgba(47, 100, 136, 0.16);
+  border-radius: 16px;
+  color: #ffffff;
+  background:
+    radial-gradient(circle at 88% 18%, rgba(104, 163, 194, 0.34), transparent 34%),
+    linear-gradient(135deg, #18303a, #244957);
+  box-shadow: var(--admin-shadow);
+}
+
+.admin-overview-banner::after {
+  position: absolute;
+  right: -70px;
+  bottom: -115px;
+  width: 270px;
+  height: 270px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 50%;
+  content: "";
+}
+
+.admin-banner-copy,
+.admin-banner-actions {
+  position: relative;
+  z-index: 1;
+}
+
+.admin-banner-copy h2,
+.admin-banner-copy p {
+  margin: 0;
+}
+
+.admin-banner-copy h2 {
+  max-width: 700px;
+  font-size: clamp(27px, 4vw, 40px);
+  line-height: 1.08;
+  letter-spacing: -0.035em;
+}
+
+.admin-banner-copy p {
+  max-width: 680px;
+  margin-top: 10px;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.admin-banner-actions {
+  display: grid;
+  min-width: 190px;
+  gap: 9px;
+}
+
+.admin-banner-actions .admin-button,
+.admin-banner-actions .admin-link-button {
+  width: 100%;
+}
+
+.admin-banner-actions .admin-button:not(.admin-button-primary),
+.admin-banner-actions .admin-link-button {
+  border-color: rgba(255, 255, 255, 0.16);
+  color: #ffffff;
+  background: rgba(255, 255, 255, 0.08);
+  box-shadow: none;
+}
+
+.admin-banner-actions .admin-button:not(.admin-button-primary):hover,
+.admin-banner-actions .admin-link-button:hover {
+  background: rgba(255, 255, 255, 0.14);
+}
+
+.admin-stat-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.admin-stat-card {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 13px;
+  align-items: start;
+  min-height: 128px;
+  padding: 18px;
+  border: 1px solid var(--admin-border);
+  border-radius: var(--admin-radius);
+  background: var(--admin-surface);
+  box-shadow: 0 3px 16px rgba(24, 48, 58, 0.035);
+}
+
+.admin-stat-icon {
+  display: grid;
+  width: 38px;
+  height: 38px;
+  place-items: center;
+  border-radius: 10px;
+  color: var(--admin-blue);
+  background: var(--admin-blue-soft);
+}
+
+.admin-stat-icon.is-warm {
+  color: var(--admin-primary);
+  background: var(--admin-primary-soft);
+}
+
+.admin-stat-icon.is-green {
+  color: var(--admin-success);
+  background: var(--admin-success-soft);
+}
+
+.admin-stat-icon svg {
+  width: 19px;
+  height: 19px;
+}
+
+.admin-stat-copy {
+  min-width: 0;
+}
+
+.admin-stat-copy span,
+.admin-stat-copy strong,
+.admin-stat-copy small {
+  display: block;
+}
+
+.admin-stat-copy span {
+  color: var(--admin-muted);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.admin-stat-copy strong {
+  margin-top: 4px;
+  overflow-wrap: anywhere;
+  font-size: 25px;
+  line-height: 1.1;
+  letter-spacing: -0.025em;
+}
+
+.admin-stat-copy small {
+  margin-top: 8px;
+  color: var(--admin-muted);
+  font-size: 11px;
+}
+
+.admin-overview-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
+  align-items: stretch;
+}
+
+.admin-panel {
+  overflow: hidden;
+  border: 1px solid var(--admin-border);
+  border-radius: var(--admin-radius);
+  background: var(--admin-surface);
+  box-shadow: 0 3px 16px rgba(24, 48, 58, 0.035);
+}
+
+.admin-panel-header {
+  display: flex;
+  min-height: 76px;
+  gap: 16px;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 18px 20px;
+  border-bottom: 1px solid var(--admin-border);
+}
+
+.admin-panel-header h3,
+.admin-panel-header p {
+  margin: 0;
+}
+
+.admin-panel-header h3 {
+  font-size: 18px;
+  line-height: 1.3;
+}
+
+.admin-panel-header p {
+  margin-top: 4px;
+  color: var(--admin-muted);
+  font-size: 13px;
+}
+
+.admin-panel-body {
+  padding: 20px;
+}
+
+.admin-panel-body-compact {
+  padding: 0;
+}
+
+.admin-latest-card {
+  display: grid;
+  gap: 12px;
+}
+
+.admin-content-type {
+  display: inline-flex;
+  width: fit-content;
+  padding: 4px 8px;
+  border-radius: 999px;
+  color: var(--admin-blue);
+  background: var(--admin-blue-soft);
+  font-size: 11px;
+  font-weight: 800;
+  text-transform: capitalize;
+}
+
+.admin-latest-card h4,
+.admin-latest-card p {
+  margin: 0;
+}
+
+.admin-latest-card h4 {
+  font-size: 18px;
+  line-height: 1.35;
+}
+
+.admin-latest-card p {
+  color: var(--admin-muted);
+  font-size: 13px;
+}
+
+.admin-status-stack {
+  display: grid;
+  gap: 11px;
+}
+
+.admin-status-row {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.admin-status-row-copy {
+  min-width: 0;
+}
+
+.admin-status-row-copy strong,
+.admin-status-row-copy small {
+  display: block;
+}
+
+.admin-status-row-copy strong {
+  font-size: 14px;
+}
+
+.admin-status-row-copy small {
+  margin-top: 2px;
+  color: var(--admin-muted);
+  font-size: 12px;
+}
+
+.admin-status-pill {
+  display: inline-flex;
+  width: fit-content;
+  min-height: 27px;
+  flex: 0 0 auto;
+  gap: 6px;
+  align-items: center;
+  padding: 4px 9px;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 850;
+  white-space: nowrap;
+}
+
+.admin-status-pill::before {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+  content: "";
+}
+
+.admin-status-pill.is-ready {
+  border-color: rgba(45, 108, 82, 0.2);
+  color: var(--admin-success);
+  background: var(--admin-success-soft);
+}
+
+.admin-status-pill.is-warning {
+  border-color: rgba(145, 96, 25, 0.2);
+  color: var(--admin-warning);
+  background: var(--admin-warning-soft);
+}
+
+.admin-status-pill.is-neutral {
+  border-color: rgba(47, 100, 136, 0.18);
+  color: var(--admin-blue);
+  background: var(--admin-blue-soft);
+}
+
+.admin-workflow-list {
+  display: grid;
+  gap: 14px;
+  margin: 0;
+  padding: 0;
+  counter-reset: admin-workflow;
+  list-style: none;
+}
+
+.admin-workflow-list li {
+  display: grid;
+  grid-template-columns: 28px minmax(0, 1fr);
+  gap: 10px;
+  color: var(--admin-muted);
+  font-size: 13px;
+  counter-increment: admin-workflow;
+}
+
+.admin-workflow-list li::before {
+  display: grid;
+  width: 26px;
+  height: 26px;
+  place-items: center;
+  border-radius: 8px;
+  color: var(--admin-primary-hover);
+  background: var(--admin-primary-soft);
+  content: counter(admin-workflow);
+  font-size: 11px;
+  font-weight: 850;
+}
+
+.admin-event-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr);
+  gap: 18px;
+  align-items: start;
+}
+
+.admin-preview-panel {
+  position: sticky;
+  top: 104px;
+}
+
+.admin-form {
+  display: grid;
+  gap: 18px;
+}
+
+.admin-form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 15px;
+}
+
+.admin-field {
+  min-width: 0;
+}
+
+.admin-field label {
+  display: flex;
+  gap: 7px;
+  align-items: baseline;
+  margin-bottom: 7px;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.admin-field .admin-optional {
+  color: var(--admin-muted);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.admin-field input,
+.admin-field select,
+.admin-field textarea,
+.admin-code-output {
+  width: 100%;
+  min-height: 44px;
+  padding: 10px 11px;
+  border: 1px solid var(--admin-border-strong);
+  border-radius: var(--admin-radius-small);
+  color: var(--admin-text);
+  background: #ffffff;
+  box-shadow: inset 0 1px 2px rgba(24, 48, 58, 0.025);
+  transition: 140ms ease;
+  transition-property: border-color, box-shadow;
+}
+
+.admin-field textarea {
+  min-height: 138px;
+  line-height: 1.55;
+  resize: vertical;
+}
+
+.admin-field textarea.admin-speech-body {
+  min-height: 330px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 13px;
+}
+
+.admin-field input::placeholder,
+.admin-field textarea::placeholder {
+  color: #98a5a0;
+}
+
+.admin-field input:focus,
+.admin-field select:focus,
+.admin-field textarea:focus,
+.admin-code-output:focus {
+  border-color: var(--admin-primary);
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(180, 79, 46, 0.13);
+}
+
+.admin-field-help {
+  display: block;
+  margin-top: 6px;
+  color: var(--admin-muted);
+  font-size: 11px;
+}
+
+.admin-form-footer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 2px;
+}
+
+.admin-message {
+  min-height: 20px;
+  color: var(--admin-muted);
+  font-size: 12px;
+}
+
+.admin-message.is-success {
+  color: var(--admin-success);
+  font-weight: 750;
+}
+
+.admin-message.is-error {
+  color: var(--admin-danger);
+  font-weight: 750;
+}
+
+.admin-output-block {
+  display: grid;
+  gap: 12px;
+}
+
+.admin-output-meta {
+  display: grid;
+  gap: 4px;
+}
+
+.admin-output-meta strong {
+  font-size: 12px;
+}
+
+.admin-path {
+  color: var(--admin-muted);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px;
+  overflow-wrap: anywhere;
+}
+
+.admin-code-output {
+  min-height: 380px;
+  color: #233137;
+  background: #f6f9f7;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.55;
+  resize: vertical;
+}
+
+.admin-handoff-note {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 10px;
+  align-items: start;
+  padding: 12px;
+  border: 1px solid rgba(47, 100, 136, 0.16);
+  border-radius: 9px;
+  color: #355664;
+  background: var(--admin-blue-soft);
+  font-size: 12px;
+}
+
+.admin-handoff-note svg {
+  width: 17px;
+  height: 17px;
+  margin-top: 1px;
+  color: var(--admin-blue);
+}
+
+.admin-speech-layout {
+  display: grid;
+  grid-template-columns: minmax(340px, 410px) minmax(0, 1fr);
+  gap: 18px;
+  align-items: start;
+}
+
+.admin-speech-collection {
+  position: sticky;
+  top: 104px;
+}
+
+.admin-speech-toolbar {
+  display: grid;
+  gap: 10px;
+  padding: 14px;
+  border-bottom: 1px solid var(--admin-border);
+  background: var(--admin-surface-soft);
+}
+
+.admin-search-wrap {
+  position: relative;
+}
+
+.admin-search-wrap svg {
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  width: 17px;
+  height: 17px;
+  color: var(--admin-muted);
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+
+.admin-search-wrap input,
+.admin-filter-select {
+  width: 100%;
+  min-height: 42px;
+  border: 1px solid var(--admin-border-strong);
+  border-radius: var(--admin-radius-small);
+  color: var(--admin-text);
+  background: #ffffff;
+}
+
+.admin-search-wrap input {
+  padding: 9px 11px 9px 38px;
+}
+
+.admin-filter-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px;
+}
+
+.admin-filter-select {
+  padding: 8px 10px;
+}
+
+.admin-speech-result-count {
+  min-height: 18px;
+  margin: 0;
+  color: var(--admin-muted);
+  font-size: 11px;
+}
+
+.admin-speech-list {
+  display: grid;
+  max-height: calc(100vh - 330px);
+  min-height: 420px;
+  overflow: auto;
+  overscroll-behavior: contain;
+  margin: 0;
+  padding: 8px;
+  list-style: none;
+  scrollbar-color: #bdc8c4 transparent;
+}
+
+.admin-speech-list > li {
+  min-width: 0;
+}
+
+.admin-speech-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: center;
+  width: 100%;
+  min-height: 76px;
+  padding: 11px 10px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  color: var(--admin-text);
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+}
+
+.admin-speech-list > li + li .admin-speech-row {
+  border-top-color: var(--admin-border);
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.admin-speech-row:hover {
+  border-color: var(--admin-border);
+  background: var(--admin-surface-soft);
+}
+
+.admin-speech-row.is-selected {
+  border-color: rgba(180, 79, 46, 0.25);
+  background: var(--admin-primary-soft);
+}
+
+.admin-speech-row-copy {
+  min-width: 0;
+}
+
+.admin-speech-row-title {
+  display: -webkit-box;
+  overflow: hidden;
+  font-size: 13px;
+  font-weight: 800;
+  line-height: 1.35;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.admin-speech-row-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px 9px;
+  margin-top: 5px;
+  color: var(--admin-muted);
+  font-size: 10px;
+}
+
+.admin-speech-row-path {
+  display: block;
+  overflow: hidden;
+  margin-top: 4px;
+  color: #82908b;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 9px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.admin-speech-row-chevron {
+  display: grid;
+  width: 30px;
+  height: 30px;
+  place-items: center;
+  border-radius: 8px;
+  color: var(--admin-muted);
+  background: #ffffff;
+}
+
+.admin-speech-row-chevron svg {
+  width: 15px;
+  height: 15px;
+}
+
+.admin-speech-empty {
+  padding: 48px 20px;
+  color: var(--admin-muted);
+  text-align: center;
+}
+
+.admin-speech-list-footer {
+  display: grid;
+  padding: 12px 14px 14px;
+  border-top: 1px solid var(--admin-border);
+}
+
+.admin-speech-editor .admin-panel-body {
+  padding: 22px;
+}
+
+.admin-code-details {
+  overflow: hidden;
+  border: 1px solid var(--admin-border);
+  border-radius: var(--admin-radius-small);
+  background: var(--admin-surface-soft);
+}
+
+.admin-code-details summary {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 47px;
+  padding: 10px 12px;
+  font-weight: 800;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.admin-code-details summary .admin-path {
+  max-width: 65%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.admin-code-details[open] summary {
+  border-bottom: 1px solid var(--admin-border);
+}
+
+.admin-code-details-body {
+  display: grid;
+  gap: 10px;
+  padding: 12px;
+}
+
+.admin-code-details .admin-code-output {
+  min-height: 240px;
+}
+
+.admin-settings-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.admin-setting-card {
+  display: grid;
+  gap: 17px;
+  padding: 20px;
+  border: 1px solid var(--admin-border);
+  border-radius: var(--admin-radius);
+  background: var(--admin-surface);
+  box-shadow: 0 3px 16px rgba(24, 48, 58, 0.035);
+}
+
+.admin-setting-card-header {
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.admin-setting-card-icon {
+  display: grid;
+  width: 42px;
+  height: 42px;
+  flex: 0 0 42px;
+  place-items: center;
+  border-radius: 11px;
+  color: var(--admin-blue);
+  background: var(--admin-blue-soft);
+}
+
+.admin-setting-card-icon svg {
+  width: 20px;
+  height: 20px;
+}
+
+.admin-setting-card-title {
+  min-width: 0;
+  flex: 1;
+}
+
+.admin-setting-card-title h3,
+.admin-setting-card-title p {
+  margin: 0;
+}
+
+.admin-setting-card-title h3 {
+  font-size: 17px;
+}
+
+.admin-setting-card-title p {
+  margin-top: 4px;
+  color: var(--admin-muted);
+  font-size: 12px;
+}
+
+.admin-setting-detail {
+  display: grid;
+  gap: 6px;
+  padding: 12px;
+  border-radius: 9px;
+  background: var(--admin-surface-soft);
+}
+
+.admin-setting-detail span,
+.admin-setting-detail strong {
+  display: block;
+}
+
+.admin-setting-detail span {
+  color: var(--admin-muted);
+  font-size: 11px;
+}
+
+.admin-setting-detail strong {
+  font-size: 13px;
+  overflow-wrap: anywhere;
+}
+
+.admin-settings-wide {
+  grid-column: 1 / -1;
+}
+
+.admin-settings-workflow {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.admin-settings-step {
+  padding: 14px;
+  border: 1px solid var(--admin-border);
+  border-radius: 9px;
+  background: var(--admin-surface-soft);
+}
+
+.admin-settings-step span,
+.admin-settings-step strong,
+.admin-settings-step p {
+  display: block;
+  margin: 0;
+}
+
+.admin-settings-step span {
+  color: var(--admin-primary);
+  font-size: 10px;
+  font-weight: 850;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.admin-settings-step strong {
+  margin-top: 4px;
+  font-size: 14px;
+}
+
+.admin-settings-step p {
+  margin-top: 5px;
+  color: var(--admin-muted);
+  font-size: 12px;
+}
+
+@media (max-width: 1220px) {
+  .admin-stat-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .admin-overview-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .admin-overview-grid .admin-panel:last-child {
+    grid-column: 1 / -1;
+  }
+
+  .admin-event-layout {
+    grid-template-columns: minmax(0, 1fr) minmax(310px, 0.68fr);
+  }
+
+  .admin-speech-layout {
+    grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
+  }
+}
+
+@media (max-width: 1000px) {
+  .admin-app {
+    grid-template-columns: 1fr;
+  }
+
+  .admin-sidebar {
+    position: relative;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    height: auto;
+    gap: 20px;
+    align-items: center;
+    padding: 14px 18px;
+  }
+
+  .admin-brand {
+    padding: 0;
+  }
+
+  .admin-brand-mark {
+    width: 42px;
+    height: 42px;
+    flex-basis: 42px;
+  }
+
+  .admin-brand-mark img {
+    width: 35px;
+    height: 35px;
+  }
+
+  .admin-nav {
+    display: flex;
+    min-width: 0;
+    gap: 5px;
+    justify-content: flex-end;
+    overflow-x: auto;
+  }
+
+  .admin-nav-label,
+  .admin-sidebar-note {
+    display: none;
+  }
+
+  .admin-nav-button {
+    width: auto;
+    flex: 0 0 auto;
+    padding: 9px 11px;
+  }
+
+  .admin-nav-button[aria-selected="true"]::after {
+    display: none;
+  }
+
+  .admin-event-layout,
+  .admin-speech-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .admin-preview-panel,
+  .admin-speech-collection {
+    position: static;
+  }
+
+  .admin-speech-list {
+    max-height: 520px;
+    min-height: 0;
+  }
+}
+
+@media (max-width: 720px) {
+  .admin-sidebar {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+
+  .admin-brand {
+    justify-content: center;
+  }
+
+  .admin-nav {
+    justify-content: flex-start;
+  }
+
+  .admin-nav-button {
+    flex: 1 0 auto;
+    justify-content: center;
+  }
+
+  .admin-topbar {
+    min-height: 72px;
+    padding: 13px 18px;
+  }
+
+  .admin-topbar-actions .admin-status-pill {
+    display: none;
+  }
+
+  .admin-main {
+    padding: 22px 16px 40px;
+  }
+
+  .admin-section-heading,
+  .admin-overview-banner {
+    align-items: stretch;
+    grid-template-columns: 1fr;
+  }
+
+  .admin-section-heading {
+    flex-direction: column;
+  }
+
+  .admin-section-actions {
+    width: 100%;
+  }
+
+  .admin-overview-banner {
+    padding: 23px;
+  }
+
+  .admin-banner-actions {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    min-width: 0;
+  }
+
+  .admin-banner-actions .admin-link-button {
+    grid-column: 1 / -1;
+  }
+
+  .admin-overview-grid,
+  .admin-settings-grid,
+  .admin-settings-workflow {
+    grid-template-columns: 1fr;
+  }
+
+  .admin-overview-grid .admin-panel:last-child,
+  .admin-settings-wide {
+    grid-column: auto;
+  }
+
+  .admin-form-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .admin-panel-header,
+  .admin-panel-body,
+  .admin-speech-editor .admin-panel-body {
+    padding-right: 16px;
+    padding-left: 16px;
+  }
+
+  .admin-form-footer {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .admin-form-footer .admin-button-row {
+    width: 100%;
+  }
+
+  .admin-form-footer .admin-button,
+  .admin-form-footer .admin-link-button {
+    flex: 1 1 150px;
+  }
+}
+
+@media (max-width: 520px) {
+  .admin-brand-copy span {
+    display: none;
+  }
+
+  .admin-nav-button {
+    min-width: 70px;
+    gap: 5px;
+    flex-direction: column;
+    font-size: 11px;
+  }
+
+  .admin-topbar-copy p {
+    display: none;
+  }
+
+  .admin-topbar-copy h1 {
+    font-size: 20px;
+  }
+
+  .admin-topbar-actions .admin-link-button {
+    min-height: 39px;
+    padding: 8px 10px;
+  }
+
+  .admin-stat-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .admin-stat-card {
+    min-height: 105px;
+  }
+
+  .admin-banner-actions {
+    grid-template-columns: 1fr;
+  }
+
+  .admin-banner-actions .admin-link-button {
+    grid-column: auto;
+  }
+
+  .admin-section-actions .admin-button,
+  .admin-section-actions .admin-link-button {
+    flex: 1 1 140px;
+  }
+
+  .admin-filter-row {
+    grid-template-columns: 1fr;
+  }
+
+  .admin-speech-row-path {
+    display: none;
+  }
+
+  .admin-code-details summary {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .admin-code-details summary .admin-path {
+    max-width: 100%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+  }
+}