diff --git a/web/src/App.tsx b/web/src/App.tsx
index 29f9a517c..7cc61a3ce 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -41,6 +41,7 @@ import {
   Play,
   Radio,
   RefreshCw,
+  ScrollText,
   Search,
   Server,
   Settings,
@@ -56,7 +57,9 @@ import chicoryMarkUrl from '../../design-system/assets/chicory-mark.svg';
 import { ChannelBuilderScreen } from './builder/ChannelBuilder';
 import { ChannelEditScreen } from './screens/ChannelEditScreen';
 import { CollectionsScreen } from './screens/CollectionsScreen';
+import { LogsScreen } from './screens/LogsScreen';
 import { SettingsScreen } from './screens/SettingsScreen';
+import { TroubleshootingScreen } from './screens/TroubleshootingScreen';
 import { navigateToPath } from './routing';
 import {
   Badge,
@@ -132,7 +135,9 @@ type ScreenId =
   | 'playouts'
   | 'collections'
   | 'libraries'
-  | 'settings';
+  | 'settings'
+  | 'logs'
+  | 'troubleshooting';
 
 interface ScreenRoute {
   id: ScreenId;
@@ -266,6 +271,28 @@ const routes: ScreenRoute[] = [
     primaryAction: 'Save Changes',
     placeholder: 'Settings workspace',
     allowSubPaths: true
+  },
+  {
+    id: 'logs',
+    path: '/app/logs',
+    label: 'Logs',
+    title: 'Logs',
+    kicker: 'System',
+    description: 'Recent server log entries with level and free-text filtering.',
+    icon: <ScrollText aria-hidden="true" size={16} />,
+    primaryAction: 'Refresh',
+    placeholder: 'Logs workspace'
+  },
+  {
+    id: 'troubleshooting',
+    path: '/app/troubleshooting',
+    label: 'Troubleshooting',
+    title: 'Troubleshooting',
+    kicker: 'System',
+    description: 'Version, environment, hardware and FFmpeg capability diagnostics.',
+    icon: <Stethoscope aria-hidden="true" size={16} />,
+    primaryAction: 'Refresh',
+    placeholder: 'Troubleshooting workspace'
   }
 ];
 
@@ -280,7 +307,7 @@ const primaryNavIds: ScreenId[] = [
   'playouts'
 ];
 const mediaNavIds: ScreenId[] = ['collections', 'libraries'];
-const systemNavIds: ScreenId[] = ['settings'];
+const systemNavIds: ScreenId[] = ['settings', 'logs', 'troubleshooting'];
 
 function normalizePath(pathname: string): string {
   return pathname.replace(/\/+$/, '') || '/app';
@@ -2887,6 +2914,14 @@ function ScreenContent({
     return <CollectionsScreen />;
   }
 
+  if (route.id === 'logs') {
+    return <LogsScreen />;
+  }
+
+  if (route.id === 'troubleshooting') {
+    return <TroubleshootingScreen />;
+  }
+
   return <PlaceholderScreen route={route} />;
 }
 
diff --git a/web/src/api/index.ts b/web/src/api/index.ts
index 48f9a1267..0a0074244 100644
--- a/web/src/api/index.ts
+++ b/web/src/api/index.ts
@@ -8,8 +8,10 @@ export * from './dashboard';
 export * from './guide';
 export * from './libraries';
 export * from './libraryBrowse';
+export * from './logs';
 export * from './pickers';
 export * from './playouts';
 export * from './schedules';
 export * from './settings';
+export * from './troubleshoot';
 export * from './useChannelsQuery';
diff --git a/web/src/api/logs.test.ts b/web/src/api/logs.test.ts
new file mode 100644
index 000000000..c8cf43e09
--- /dev/null
+++ b/web/src/api/logs.test.ts
@@ -0,0 +1,57 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { getLogs } from './logs';
+
+const samplePage = {
+  totalCount: 2,
+  page: [
+    { timestamp: '2026-07-07T00:00:00Z', level: 'Warning', message: 'uh oh' },
+    { timestamp: '2026-07-07T00:01:00Z', level: 'Information', message: 'all good' }
+  ]
+};
+
+describe('getLogs', () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    vi.restoreAllMocks();
+  });
+
+  it('GETs /api/logs with no query string when called without params', async () => {
+    const fetchSpy = vi.spyOn(window, 'fetch').mockResolvedValue(
+      new Response(JSON.stringify(samplePage), {
+        headers: { 'Content-Type': 'application/json' },
+        status: 200
+      })
+    );
+
+    await expect(getLogs()).resolves.toMatchObject({ totalCount: 2 });
+
+    const [url, init] = fetchSpy.mock.calls[0];
+    expect(url).toBe('/api/logs');
+    expect((init?.method ?? 'GET').toUpperCase()).toBe('GET');
+  });
+
+  it('builds the query string from filter, pageNum and pageSize', async () => {
+    const fetchSpy = vi.spyOn(window, 'fetch').mockResolvedValue(
+      new Response(JSON.stringify(samplePage), {
+        headers: { 'Content-Type': 'application/json' },
+        status: 200
+      })
+    );
+
+    await getLogs({ filter: 'boom', pageNum: 2, pageSize: 50 });
+
+    const [url] = fetchSpy.mock.calls[0];
+    expect(url).toBe('/api/logs?filter=boom&pageNum=2&pageSize=50');
+  });
+
+  it('rejects with the ApiError status on failure', async () => {
+    vi.spyOn(window, 'fetch').mockResolvedValue(
+      new Response(JSON.stringify({ status: 500, title: 'Server Error' }), {
+        headers: { 'Content-Type': 'application/json' },
+        status: 500
+      })
+    );
+
+    await expect(getLogs()).rejects.toMatchObject({ status: 500 });
+  });
+});
diff --git a/web/src/api/logs.ts b/web/src/api/logs.ts
new file mode 100644
index 000000000..5d2269800
--- /dev/null
+++ b/web/src/api/logs.ts
@@ -0,0 +1,43 @@
+import { ApiError, request } from './client';
+import type { components } from './generated/v1';
+
+export type LogEntry = components['schemas']['LogEntryResponseModel'];
+export type PagedLogEntries = components['schemas']['PagedLogEntriesResponseModel'];
+
+export interface GetLogsParams {
+  filter?: string;
+  pageNum?: number;
+  pageSize?: number;
+}
+
+export function getLogs(params: GetLogsParams = {}): Promise<PagedLogEntries> {
+  const searchParams = new URLSearchParams();
+
+  if (params.filter) {
+    searchParams.set('filter', params.filter);
+  }
+
+  if (params.pageNum != null) {
+    searchParams.set('pageNum', String(params.pageNum));
+  }
+
+  if (params.pageSize != null) {
+    searchParams.set('pageSize', String(params.pageSize));
+  }
+
+  const queryString = searchParams.toString();
+
+  return request<PagedLogEntries>(`/api/logs${queryString ? `?${queryString}` : ''}`);
+}
+
+export function messageFromLogsError(error: unknown, fallback = 'Unable to load logs'): string {
+  if (error instanceof ApiError) {
+    return error.detail ?? error.message;
+  }
+
+  if (error instanceof Error) {
+    return error.message;
+  }
+
+  return fallback;
+}
diff --git a/web/src/api/troubleshoot.test.ts b/web/src/api/troubleshoot.test.ts
new file mode 100644
index 000000000..fa54e4b8c
--- /dev/null
+++ b/web/src/api/troubleshoot.test.ts
@@ -0,0 +1,43 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { getTroubleshootingInfo } from './troubleshoot';
+
+const sampleInfo = {
+  generalJson: '{"Version":"1.2.3"}',
+  nvidiaCapabilities: 'nvidia output',
+  qsvCapabilities: null,
+  vaapiCapabilities: null,
+  videoToolboxCapabilities: null
+};
+
+describe('getTroubleshootingInfo', () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    vi.restoreAllMocks();
+  });
+
+  it('GETs /api/troubleshoot/info and returns the info payload', async () => {
+    const fetchSpy = vi.spyOn(window, 'fetch').mockResolvedValue(
+      new Response(JSON.stringify(sampleInfo), {
+        headers: { 'Content-Type': 'application/json' },
+        status: 200
+      })
+    );
+
+    await expect(getTroubleshootingInfo()).resolves.toMatchObject({ nvidiaCapabilities: 'nvidia output' });
+
+    const [url, init] = fetchSpy.mock.calls[0];
+    expect(url).toBe('/api/troubleshoot/info');
+    expect((init?.method ?? 'GET').toUpperCase()).toBe('GET');
+  });
+
+  it('rejects with the ApiError status on failure', async () => {
+    vi.spyOn(window, 'fetch').mockResolvedValue(
+      new Response(JSON.stringify({ status: 500, title: 'Server Error' }), {
+        headers: { 'Content-Type': 'application/json' },
+        status: 500
+      })
+    );
+
+    await expect(getTroubleshootingInfo()).rejects.toMatchObject({ status: 500 });
+  });
+});
diff --git a/web/src/api/troubleshoot.ts b/web/src/api/troubleshoot.ts
new file mode 100644
index 000000000..b8a316d4c
--- /dev/null
+++ b/web/src/api/troubleshoot.ts
@@ -0,0 +1,20 @@
+import { ApiError, request } from './client';
+import type { components } from './generated/v1';
+
+export type TroubleshootingInfo = components['schemas']['TroubleshootingInfoResponseModel'];
+
+export function getTroubleshootingInfo(): Promise<TroubleshootingInfo> {
+  return request<TroubleshootingInfo>('/api/troubleshoot/info');
+}
+
+export function messageFromTroubleshootError(error: unknown, fallback = 'Unable to load troubleshooting info'): string {
+  if (error instanceof ApiError) {
+    return error.detail ?? error.message;
+  }
+
+  if (error instanceof Error) {
+    return error.message;
+  }
+
+  return fallback;
+}
diff --git a/web/src/screens/LogsScreen.tsx b/web/src/screens/LogsScreen.tsx
new file mode 100644
index 000000000..86f2d2715
--- /dev/null
+++ b/web/src/screens/LogsScreen.tsx
@@ -0,0 +1,196 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { ChevronLeft, ChevronRight, Info, RefreshCw, Search, TriangleAlert } from 'lucide-react';
+import { Badge, Button, Card, IconButton, Input, Select, Spinner } from '../components';
+import { getLogs, messageFromLogsError, type LogEntry } from '../api';
+
+const PAGE_SIZE_OPTIONS = ['25', '50', '100'];
+
+const LEVEL_TONE: Record<string, 'neutral' | 'accent' | 'ok' | 'warn' | 'error'> = {
+  Debug: 'neutral',
+  Error: 'error',
+  Fatal: 'error',
+  Information: 'accent',
+  Verbose: 'neutral',
+  Warning: 'warn'
+};
+
+type LogsState =
+  | { entries: LogEntry[]; error: null; status: 'success'; totalCount: number }
+  | { entries: []; error: string; status: 'error'; totalCount: 0 }
+  | { entries: []; error: null; status: 'loading'; totalCount: 0 };
+
+function formatTimestamp(value: string): string {
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? value : date.toLocaleString();
+}
+
+export function LogsScreen() {
+  const [filterInput, setFilterInput] = useState('');
+  const [filter, setFilter] = useState('');
+  const [pageNum, setPageNum] = useState(0);
+  const [pageSize, setPageSize] = useState(50);
+  const [state, setState] = useState<LogsState>({ entries: [], error: null, status: 'loading', totalCount: 0 });
+  const activeRef = useRef(true);
+
+  useEffect(() => {
+    activeRef.current = true;
+    return () => {
+      activeRef.current = false;
+    };
+  }, []);
+
+  // Debounce free-text filtering: the filter is applied server-side (GetRecentLogEntries scans
+  // the newest log file per request), so we wait for the user to pause typing before refetching.
+  useEffect(() => {
+    const handle = window.setTimeout(() => {
+      setPageNum(0);
+      setFilter(filterInput.trim());
+    }, 300);
+
+    return () => window.clearTimeout(handle);
+  }, [filterInput]);
+
+  // Fetch only; state updates happen in the async callbacks (never synchronously in the
+  // effect body) so a stale table stays visible during refetches instead of flashing to
+  // a loading spinner on every filter keystroke or page change.
+  const load = useCallback(() => {
+    getLogs({ filter, pageNum, pageSize })
+      .then((paged) => {
+        if (activeRef.current) {
+          setState({ entries: paged.page ?? [], error: null, status: 'success', totalCount: paged.totalCount ?? 0 });
+        }
+      })
+      .catch((error: unknown) => {
+        if (activeRef.current) {
+          setState({ entries: [], error: messageFromLogsError(error), status: 'error', totalCount: 0 });
+        }
+      });
+  }, [filter, pageNum, pageSize]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const refresh = () => {
+    setState({ entries: [], error: null, status: 'loading', totalCount: 0 });
+    load();
+  };
+
+  const totalPages = state.status === 'success' ? Math.max(1, Math.ceil(state.totalCount / pageSize)) : 1;
+
+  return (
+    <div className="ctv-collections">
+      <div className="ctv-channels-actionbar">
+        <Input
+          leadingIcon={<Search aria-hidden="true" size={14} />}
+          onChange={(event) => setFilterInput(event.target.value)}
+          placeholder="Filter by level or message…"
+          value={filterInput}
+        />
+        <span className="ctv-channels-spacer" />
+        <Select
+          onChange={(event) => {
+            setPageNum(0);
+            setPageSize(Number(event.target.value));
+          }}
+          options={PAGE_SIZE_OPTIONS}
+          style={{ width: 96 }}
+          value={String(pageSize)}
+        />
+        <Button
+          onClick={refresh}
+          size="sm"
+          startIcon={<RefreshCw aria-hidden="true" size={14} />}
+          variant="secondary"
+        >
+          Refresh
+        </Button>
+      </div>
+
+      {state.status === 'error' && (
+        <div className="ctv-channels-error" role="alert">
+          <TriangleAlert aria-hidden="true" size={15} />
+          <span>{state.error}</span>
+          <span className="ctv-channels-spacer" />
+          <Button onClick={refresh} size="sm" variant="secondary">
+            Retry
+          </Button>
+        </div>
+      )}
+
+      <Card padded={false}>
+        {state.status === 'loading' ? (
+          <div className="ctv-collections-loading" role="status">
+            <Spinner size={18} />
+            <span>Loading logs…</span>
+          </div>
+        ) : state.entries.length === 0 ? (
+          <div className="ctv-collections-empty">
+            {filter ? 'No log entries match this filter.' : 'No log entries found.'}
+          </div>
+        ) : (
+          <div className="ctv-channels-table-frame">
+            <div className="ctv-channels-table-scroll">
+              <table aria-label="Recent log entries" className="ctv-channels-table">
+                <thead>
+                  <tr>
+                    <th>Timestamp</th>
+                    <th>Level</th>
+                    <th>Message</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {state.entries.map((entry, index) => (
+                    <tr key={`${entry.timestamp}-${index}`}>
+                      <td style={{ fontFamily: 'var(--font-mono)', whiteSpace: 'nowrap' }}>
+                        {formatTimestamp(entry.timestamp)}
+                      </td>
+                      <td>
+                        <Badge tone={LEVEL_TONE[entry.level] ?? 'neutral'}>{entry.level}</Badge>
+                      </td>
+                      <td style={{ fontFamily: 'var(--font-mono)' }}>{entry.message}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            <div className="ctv-channels-footer">
+              <span>
+                {state.totalCount} entr{state.totalCount === 1 ? 'y' : 'ies'}
+                {filter ? ` matching "${filter}"` : ''}
+              </span>
+              <span className="ctv-channels-spacer" />
+              <IconButton
+                disabled={pageNum === 0}
+                onClick={() => setPageNum((current) => Math.max(0, current - 1))}
+                size="sm"
+                title="Previous page"
+              >
+                <ChevronLeft aria-hidden="true" size={15} />
+              </IconButton>
+              <span>
+                Page <code>{pageNum + 1}</code> of <code>{totalPages}</code>
+              </span>
+              <IconButton
+                disabled={pageNum + 1 >= totalPages}
+                onClick={() => setPageNum((current) => current + 1)}
+                size="sm"
+                title="Next page"
+              >
+                <ChevronRight aria-hidden="true" size={15} />
+              </IconButton>
+            </div>
+          </div>
+        )}
+      </Card>
+
+      <div className="ctv-settings-callout">
+        <Info aria-hidden="true" size={14} />
+        <span>
+          Logs are read from the current server log file. Older, rotated log files aren't available here — check the
+          config folder's <code>logs</code> directory for history.
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/screens/SettingsScreen.tsx b/web/src/screens/SettingsScreen.tsx
index e087cb62f..ec4869acb 100644
--- a/web/src/screens/SettingsScreen.tsx
+++ b/web/src/screens/SettingsScreen.tsx
@@ -854,12 +854,22 @@ function SystemPane({
             Open Dashboard
           </Button>
         </Row>
-        <Row control={220} help="Collections, media browse/search, trakt, filler, watermarks, ffmpeg profiles, blocks/decos/templates, playout editors, logs and troubleshooting still live here." label="Classic UI">
+        <Row control={220} help="Collections, media browse/search, trakt, filler, watermarks, ffmpeg profiles, blocks/decos/templates and playout editors still live here." label="Classic UI">
           <a className="ctv-button ctv-button-secondary ctv-button-sm" href="/system/health">
             <span>Open Classic UI</span>
             <ExternalLink aria-hidden="true" size={13} />
           </a>
         </Row>
+        <Row control={220} help="Recent server log entries with level and free-text filtering." label="Logs">
+          <Button endIcon={<ArrowRight aria-hidden="true" size={13} />} onClick={() => navigateToPath('/app/logs')} size="sm" variant="secondary">
+            Open Logs
+          </Button>
+        </Row>
+        <Row control={220} help="Version, environment, hardware and FFmpeg capability diagnostics." label="Troubleshooting">
+          <Button endIcon={<ArrowRight aria-hidden="true" size={13} />} onClick={() => navigateToPath('/app/troubleshooting')} size="sm" variant="secondary">
+            Open Troubleshooting
+          </Button>
+        </Row>
       </Card>
     </Pane>
   );
diff --git a/web/src/screens/TroubleshootingScreen.tsx b/web/src/screens/TroubleshootingScreen.tsx
new file mode 100644
index 000000000..9036d0822
--- /dev/null
+++ b/web/src/screens/TroubleshootingScreen.tsx
@@ -0,0 +1,160 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Check, Copy, RefreshCw, TriangleAlert } from 'lucide-react';
+import { Button, Card, Spinner, Tabs } from '../components';
+import { getTroubleshootingInfo, messageFromTroubleshootError, type TroubleshootingInfo } from '../api';
+
+interface CapabilitySection {
+  content: string;
+  label: string;
+  value: string;
+}
+
+type TroubleshootingState =
+  | { error: null; info: TroubleshootingInfo; status: 'success' }
+  | { error: string; info: null; status: 'error' }
+  | { error: null; info: null; status: 'loading' };
+
+function prettyPrint(json: string): string {
+  try {
+    return JSON.stringify(JSON.parse(json), null, 2);
+  } catch {
+    return json;
+  }
+}
+
+function capabilitySections(info: TroubleshootingInfo): CapabilitySection[] {
+  const candidates: Array<[string, string, null | string | undefined]> = [
+    ['nvidia', 'NVIDIA', info.nvidiaCapabilities],
+    ['qsv', 'QSV', info.qsvCapabilities],
+    ['vaapi', 'VAAPI', info.vaapiCapabilities],
+    ['videoToolbox', 'VideoToolbox', info.videoToolboxCapabilities]
+  ];
+
+  return candidates
+    .filter((entry): entry is [string, string, string] => Boolean(entry[2] && entry[2].trim().length > 0))
+    .map(([value, label, content]) => ({ content, label, value }));
+}
+
+function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const copy = () => {
+    void navigator.clipboard?.writeText(text).then(() => {
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1500);
+    });
+  };
+
+  return (
+    <Button
+      onClick={copy}
+      size="sm"
+      startIcon={copied ? <Check aria-hidden="true" size={14} /> : <Copy aria-hidden="true" size={14} />}
+      variant="secondary"
+    >
+      {copied ? 'Copied' : 'Copy'}
+    </Button>
+  );
+}
+
+export function TroubleshootingScreen() {
+  const [state, setState] = useState<TroubleshootingState>({ error: null, info: null, status: 'loading' });
+  const [tab, setTab] = useState('general');
+  const activeRef = useRef(true);
+
+  useEffect(() => {
+    activeRef.current = true;
+    return () => {
+      activeRef.current = false;
+    };
+  }, []);
+
+  // Fetch only; state updates happen in the async callbacks (never synchronously in the
+  // effect body) so the initial 'loading' default stands until data resolves.
+  const load = useCallback(() => {
+    getTroubleshootingInfo()
+      .then((info) => {
+        if (activeRef.current) {
+          setState({ error: null, info, status: 'success' });
+        }
+      })
+      .catch((error: unknown) => {
+        if (activeRef.current) {
+          setState({ error: messageFromTroubleshootError(error), info: null, status: 'error' });
+        }
+      });
+  }, []);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const refresh = () => {
+    setState({ error: null, info: null, status: 'loading' });
+    load();
+  };
+
+  if (state.status === 'loading') {
+    return (
+      <div className="ctv-collections-loading" role="status">
+        <Spinner size={18} />
+        <span>Loading troubleshooting info…</span>
+      </div>
+    );
+  }
+
+  if (state.status === 'error') {
+    return (
+      <div className="ctv-collections">
+        <div className="ctv-channels-error" role="alert">
+          <TriangleAlert aria-hidden="true" size={15} />
+          <span>{state.error}</span>
+          <span className="ctv-channels-spacer" />
+          <Button onClick={refresh} size="sm" variant="secondary">
+            Retry
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  const generalJson = prettyPrint(state.info.generalJson);
+  const platforms = capabilitySections(state.info);
+  const tabs = [{ label: 'General', value: 'general' }, ...platforms.map((section) => ({ label: section.label, value: section.value }))];
+  const active = tabs.find((candidate) => candidate.value === tab) ?? tabs[0];
+
+  return (
+    <div className="ctv-collections">
+      <div className="ctv-channels-actionbar">
+        <Tabs onChange={setTab} tabs={tabs} value={active.value} />
+        <span className="ctv-channels-spacer" />
+        <Button onClick={refresh} size="sm" startIcon={<RefreshCw aria-hidden="true" size={14} />} variant="secondary">
+          Refresh
+        </Button>
+      </div>
+
+      {active.value === 'general' ? (
+        <Card actions={<CopyButton text={generalJson} />} subtitle="Version, environment, hardware and FFmpeg settings" title="General">
+          <pre className="ctv-troubleshoot-pre">
+            <code>{generalJson}</code>
+          </pre>
+        </Card>
+      ) : (
+        platforms
+          .filter((section) => section.value === active.value)
+          .map((section) => (
+            <Card
+              actions={<CopyButton text={section.content} />}
+              key={section.value}
+              subtitle="Raw capability probe output"
+              title={section.label}
+            >
+              <pre className="ctv-troubleshoot-pre">
+                <code>{section.content}</code>
+              </pre>
+            </Card>
+          ))
+      )}
+    </div>
+  );
+}
diff --git a/web/src/shell.css b/web/src/shell.css
index 2fdf82614..04045e2e0 100644
--- a/web/src/shell.css
+++ b/web/src/shell.css
@@ -3316,6 +3316,20 @@
   color: var(--text-secondary);
 }
 
+.ctv-troubleshoot-pre {
+  max-height: 60vh;
+  overflow: auto;
+  margin: 0;
+  padding: 12px;
+  border-radius: var(--radius-sm);
+  background: var(--ctv-surface-2);
+  border: 1px solid var(--border-hairline);
+  font: var(--text-xs) / 1.5 var(--font-mono);
+  color: var(--text-secondary);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
 .ctv-settings-flush-row {
   display: flex;
   align-items: center;