release: 4.6.155 aria-live on clipStatus + viewer-modal status fields

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
a11y: aria-live=polite on clipStatus + chatViewer/eventsViewer status
2026-05-11 12:17:04 +02:00 · 2026-05-11 12:16:49 +02:00 · 2026-05-11 12:11:27 +02:00 · 2026-05-11 12:11:13 +02:00 · 2026-05-11 12:06:58 +02:00 · 2026-05-11 12:06:40 +02:00
16 changed files with 343 additions and 227 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,12 @@
 {
  "name": "twitch-vod-manager",
-  "version": "4.6.122",
+  "version": "4.6.155",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "twitch-vod-manager",
-      "version": "4.6.122",
+      "version": "4.6.155",
      "license": "MIT",
      "dependencies": {
        "axios": "^1.6.0",
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "twitch-vod-manager",
-  "version": "4.6.122",
+  "version": "4.6.155",
  "description": "Twitch VOD Manager - Download Twitch VODs easily",
  "main": "dist/main.js",
  "author": "xRangerDE",
--- a/src/index.html
+++ b/src/index.html
@ -10,7 +10,7 @@
 <body class="theme-twitch">
    <div class="update-banner" id="updateBanner">
        <span id="updateText">Neue Version verfügbar!</span>
-        <div id="updateProgress" class="update-banner-progress-wrap" style="display: none;">
+        <div id="updateProgress" class="update-banner-progress-wrap is-hidden">
            <div class="update-banner-progress-track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-label="Update download" id="updateProgressGauge">
                <div id="updateProgressBar" class="update-banner-progress-bar"></div>
            </div>
@ -24,9 +24,9 @@
            <div class="update-modal-eyebrow" id="updateModalEyebrow">Updates</div>
            <h2 id="updateModalTitle">Update verfugbar</h2>
            <p class="update-modal-message" id="updateModalMessage">Version 0.0.0 ist verfugbar. Jetzt herunterladen?</p>
-            <div class="update-modal-meta" id="updateModalMeta" style="display:none;"></div>
+            <div class="update-modal-meta is-hidden" id="updateModalMeta"></div>
-            <div class="update-changelog-card" id="updateChangelogCard" style="display:none;">
+            <div class="update-changelog-card is-hidden" id="updateChangelogCard">
                <div class="update-changelog-header">
                    <span class="update-changelog-label" id="updateChangelogLabel">Changelog</span>
                    <button type="button" class="update-changelog-toggle" id="updateChangelogToggle" onclick="toggleUpdateChangelog()">Changelog anzeigen</button>
@ -99,7 +99,7 @@
                    <span id="formatTemplate" class="clip-radio-label">{date}_{part}.mp4 (benutzerdefiniert)</span>
                </label>
-                <div id="clipFilenameTemplateWrap" class="clip-template-wrap" style="display:none;">
+                <div id="clipFilenameTemplateWrap" class="clip-template-wrap">
                    <input type="text" id="clipFilenameTemplate" value="{date}_{part}.mp4" placeholder="{date}_{part}.mp4" class="clip-modal-template-input" oninput="updateFilenameExamples()">
                    <div id="clipTemplateHelp" class="clip-modal-hint">Platzhalter: {title} {id} {channel} {date} {part} {trim_start} {trim_end} {trim_length} {date_custom="yyyy-MM-dd"}</div>
                    <div id="clipTemplateLint" class="template-lint ok">Template-Check: OK</div>
@ -118,7 +118,7 @@
        <div class="modal viewer-modal viewer-modal-events">
            <button type="button" class="modal-close modal-close-localizable" aria-label="Close" onclick="closeEventsViewer()">x</button>
            <h2 id="eventsViewerTitle" class="viewer-modal-title"></h2>
-            <div id="eventsViewerStatus" class="viewer-modal-status"></div>
+            <div id="eventsViewerStatus" class="viewer-modal-status" role="status" aria-live="polite"></div>
            <div id="eventsViewerList" class="viewer-modal-list"></div>
        </div>
    </div>
@ -130,7 +130,7 @@
            <h2 id="chatViewerTitle" class="viewer-modal-title"></h2>
            <div class="viewer-modal-filter-row">
                <input type="text" id="chatViewerFilter" class="viewer-modal-filter-input" placeholder="Filter..." oninput="onChatViewerFilterChange()">
-                <span id="chatViewerStatus" class="viewer-modal-status viewer-modal-status-inline"></span>
+                <span id="chatViewerStatus" class="viewer-modal-status viewer-modal-status-inline" role="status" aria-live="polite"></span>
            </div>
            <div id="chatViewerList" class="viewer-modal-list viewer-modal-list-chat"></div>
        </div>
@ -221,9 +221,9 @@
                    <span id="streamerSectionTitleText">Streamer</span>
                    <span id="streamerSectionCounter" class="streamer-section-counter"></span>
                </span>
-                <button id="btnStreamerBulkRemove" class="btn-close" type="button" onclick="bulkRemoveStreamers()" title="Bulk remove" style="display:none;">x</button>
+                <button id="btnStreamerBulkRemove" class="btn-close is-hidden" type="button" onclick="bulkRemoveStreamers()" title="Bulk remove">x</button>
            </div>
-            <input type="text" id="streamerListFilter" class="filter-input compact" placeholder="Filter..." oninput="onStreamerListFilterChange()" style="display:none;">
+            <input type="text" id="streamerListFilter" class="filter-input compact is-hidden" placeholder="Filter..." oninput="onStreamerListFilterChange()">
            <div class="streamers" id="streamerList"></div>
            <div class="queue-section">
@ -234,7 +234,7 @@
                <div class="queue-list" id="queueList"></div>
                <div class="queue-actions">
                    <button type="button" class="btn btn-start" id="btnStart" onclick="toggleDownload()">Start</button>
-                    <button type="button" class="btn btn-merge-group" id="btnMergeGroup" onclick="createMergeGroupFromSelection()" style="display:none">Merge &amp; Split</button>
+                    <button type="button" class="btn btn-merge-group is-hidden" id="btnMergeGroup" onclick="createMergeGroupFromSelection()">Merge &amp; Split</button>
                    <button type="button" class="btn btn-retry" id="btnRetryFailed" onclick="retryFailedDownloads()" title="Nur fehlgeschlagene Downloads erneut starten">Wiederholen</button>
                    <button type="button" class="btn btn-clear" id="btnClear" onclick="clearCompleted()">Leeren</button>
                </div>
@ -260,10 +260,10 @@
            <div class="content">
                <!-- VODs Tab -->
                <div class="tab-content active" id="vodsTab">
-                    <div id="streamerProfileHeader" class="streamer-profile-header" style="display:none;"></div>
+                    <div id="streamerProfileHeader" class="streamer-profile-header is-hidden"></div>
                    <div class="vod-filter-row">
                        <input type="text" id="vodFilterInput" class="filter-input" placeholder="Filter VODs..." oninput="onVodFilterInput()">
-                        <button type="button" id="vodFilterClearBtn" class="btn-close" onclick="clearVodFilter()" title="Clear filter" style="display:none;">x</button>
+                        <button type="button" id="vodFilterClearBtn" class="btn-close is-hidden" onclick="clearVodFilter()" title="Clear filter">x</button>
                        <label id="vodSortLabel" for="vodSortSelect" class="form-sublabel vod-sort-label">Sort:</label>
                        <select id="vodSortSelect" class="select-compact" onchange="onVodSortChange()">
                            <option value="date_desc">Newest first</option>
@ -278,7 +278,7 @@
                            <span id="vodHideDownloadedText">Hide downloaded</span>
                        </label>
                    </div>
-                    <div id="vodBulkBar" class="vod-bulk-bar" style="display:none;">
+                    <div id="vodBulkBar" class="vod-bulk-bar is-hidden">
                        <span id="vodBulkCount" class="vod-bulk-count">0 selected</span>
                        <span class="vod-bulk-spacer"></span>
                        <button id="vodBulkAddBtn" class="btn-pill primary" type="button" onclick="bulkAddSelectedVodsToQueue()">+ Queue</button>
@ -301,7 +301,7 @@
                        <h2 id="clipsHeading">Twitch Clip-Download</h2>
                        <input type="text" id="clipUrl" placeholder="https://clips.twitch.tv/... oder https://www.twitch.tv/.../clip/...">
                        <button type="button" class="btn-primary" onclick="downloadClip()" id="btnClip">Clip herunterladen</button>
-                        <div class="clip-status" id="clipStatus"></div>
+                        <div class="clip-status" id="clipStatus" role="status" aria-live="polite"></div>
                    </div>
                    <div class="settings-card centered">
@ -334,7 +334,7 @@
                            </div>
                        </div>
-                        <div class="cutter-info" id="cutterInfo" style="display:none">
+                        <div class="cutter-info" id="cutterInfo">
                            <div class="cutter-info-item">
                                <span class="cutter-info-label" id="cutterInfoDurationLabel">Dauer</span>
                                <span class="cutter-info-value" id="infoDuration">--:--:--</span>
@ -353,7 +353,7 @@
                            </div>
                        </div>
-                        <div class="timeline-container" id="timelineContainer" style="display:none">
+                        <div class="timeline-container" id="timelineContainer">
                            <div class="timeline" id="timeline" onclick="seekTimeline(event)">
                                <div class="timeline-selection" id="timelineSelection"></div>
                                <div class="timeline-current" id="timelineCurrent"></div>
@ -422,7 +422,7 @@
                        <div class="form-row section-header">
                            <h3 id="statsTitle">Archiv-Statistik</h3>
                            <div class="section-header-actions">
-                                <span id="statsLastScannedLabel" class="form-sublabel"></span>
+                                <span id="statsLastScannedLabel" class="form-sublabel" role="status" aria-live="polite"></span>
                                <button type="button" class="btn-secondary" id="btnStatsRefresh" onclick="refreshArchiveStats()">Aktualisieren</button>
                            </div>
                        </div>
@ -455,14 +455,14 @@
                    <div class="settings-card">
                        <h3 id="archiveTitle">Archiv durchsuchen</h3>
                        <p id="archiveIntro" class="card-intro">Suche nach Dateinamen, Streamern oder Datum-Strings. Treffer zeigen Recordings (Live + VOD); zugehoerige Chat- und Events-Dateien werden als Companion-Buttons angeboten.</p>
-                        <div class="form-row" style="gap:8px; margin-bottom: 8px; flex-wrap: wrap; align-items:center;">
+                        <div class="form-row search-bar">
                            <input type="text" id="archiveSearchQuery" class="filter-input flex-1-1-240" placeholder="Suche...">
                            <select id="archiveSearchType" class="select-compact">
                                <option value="all">Alle Typen</option>
                                <option value="live">Live-Aufnahmen</option>
                                <option value="vod">VOD-Downloads</option>
                            </select>
-                            <select id="archiveSearchStreamer" class="select-compact" style="min-width: 160px;">
+                            <select id="archiveSearchStreamer" class="select-compact size-md">
                                <option value="">Alle Streamer</option>
                            </select>
                            <select id="archiveSearchSort" class="select-compact">
@ -474,7 +474,7 @@
                            </select>
                            <button type="button" class="btn-secondary" id="btnArchiveSearch" onclick="performArchiveSearch()">Suchen</button>
                        </div>
-                        <div id="archiveSearchSummary" class="form-sublabel"></div>
+                        <div id="archiveSearchSummary" class="form-sublabel" role="status" aria-live="polite"></div>
                    </div>
                    <div class="settings-card">
                        <div id="archiveSearchResults"></div>
@ -635,7 +635,7 @@
                        </div>
                        <div class="form-group">
                            <div class="form-row" style="align-items:center; margin-bottom: 4px;">
-                                <label id="filenameTemplatesTitle" style="margin: 0;">Dateinamen-Templates</label>
+                                <label id="filenameTemplatesTitle">Dateinamen-Templates</label>
                                <button class="btn-secondary" id="settingsTemplateGuideBtn" type="button" onclick="openTemplateGuide('vod')">Template Guide</button>
                            </div>
                            <div class="form-row" style="gap: 8px; margin: 8px 0 6px;">
@ -695,7 +695,7 @@
                            <button type="button" class="btn-secondary" id="btnRefreshStorage" onclick="refreshStorageStats()">Aktualisieren</button>
                        </div>
                        <p id="storageCardIntro" class="card-intro">Disk-Verbrauch pro Streamer im aktuellen Download-Ordner. Live-Aufnahmen werden separat ausgewiesen.</p>
-                        <div id="storageSummary" class="form-sublabel" style="margin-bottom:8px;"></div>
+                        <div id="storageSummary" class="form-sublabel" style="margin-bottom:8px;" role="status" aria-live="polite"></div>
                        <div id="storageList"></div>
                        <hr>
@ -729,7 +729,7 @@
                            <button type="button" class="btn-secondary" id="btnCleanupDryRun" onclick="runCleanupDryRun()">Vorschau</button>
                            <button type="button" class="btn-secondary" id="btnCleanupRunNow" onclick="runCleanupNow()">Jetzt ausfuehren</button>
                        </div>
-                        <div id="cleanupReport" class="form-note"></div>
+                        <div id="cleanupReport" class="form-note" role="status" aria-live="polite"></div>
                    </div>
                    <div class="settings-card">
--- a/src/renderer-archive.ts
+++ b/src/renderer-archive.ts
@ -2,30 +2,6 @@ let archiveStreamerSelectPopulated = false;
 let archiveSearchInFlight = false;
 let archiveSearchDebounceTimer: number | null = null;
 function applyArchiveHtml(el: HTMLElement, html: string): void {
    const key = 'inner' + 'HTML';
    (el as unknown as Record<string, string>)[key] = html;
 }
 function escapeArchiveHtml(s: string | number | null | undefined): string {
    if (s == null) return '';
    return String(s)
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;');
 }
 function formatBytesForArchive(bytes: number): string {
    if (!Number.isFinite(bytes) || bytes <= 0) return '0 B';
    if (bytes < 1024) return `${bytes} B`;
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
    if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
    if (bytes < 1024 * 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
    return `${(bytes / (1024 * 1024 * 1024 * 1024)).toFixed(2)} TB`;
 }
 function populateArchiveStreamerSelect(): void {
    if (archiveStreamerSelectPopulated) return;
    const select = document.getElementById('archiveSearchStreamer') as HTMLSelectElement | null;
@ -33,8 +9,8 @@ function populateArchiveStreamerSelect(): void {
    const streamers = (config.streamers as string[] | undefined) || [];
    const sorted = [...streamers].sort((a, b) => a.localeCompare(b));
-    const opts = sorted.map((s) => `<option value="${escapeArchiveHtml(s)}">${escapeArchiveHtml(s)}</option>`).join('');
+    const opts = sorted.map((s) => `<option value="${escapeHtml(s)}">${escapeHtml(s)}</option>`).join('');
-    applyArchiveHtml(select, `<option value="">${escapeArchiveHtml(UI_TEXT.static.archiveAllStreamers || 'Alle Streamer')}</option>${opts}`);
+    applyHtml(select, `<option value="">${escapeHtml(UI_TEXT.static.archiveAllStreamers || 'Alle Streamer')}</option>${opts}`);
    archiveStreamerSelectPopulated = true;
 }
@ -81,7 +57,7 @@ async function performArchiveSearch(): Promise<void> {
        renderArchiveSearchResults(result);
    } catch (e) {
        if (summaryEl) summaryEl.textContent = `Fehler: ${String(e)}`;
-        applyArchiveHtml(resultsEl, '');
+        applyHtml(resultsEl, '');
    } finally {
        archiveSearchInFlight = false;
        if (btn) btn.disabled = false;
@ -95,7 +71,7 @@ function renderArchiveSearchResults(result: ArchiveSearchResult): void {
    if (!result.rootExists) {
        if (summaryEl) summaryEl.textContent = UI_TEXT.static.archiveNoRoot;
-        applyArchiveHtml(resultsEl, '');
+        applyHtml(resultsEl, '');
        return;
    }
@ -110,7 +86,7 @@ function renderArchiveSearchResults(result: ArchiveSearchResult): void {
    }
    if (result.hits.length === 0) {
-        applyArchiveHtml(resultsEl, `<div class="archive-no-matches">${escapeArchiveHtml(UI_TEXT.static.archiveNoMatches || 'Keine Treffer.')}</div>`);
+        applyHtml(resultsEl, `<div class="archive-no-matches">${escapeHtml(UI_TEXT.static.archiveNoMatches || 'Keine Treffer.')}</div>`);
        return;
    }
@ -119,25 +95,25 @@ function renderArchiveSearchResults(result: ArchiveSearchResult): void {
        const typeBadge = `<span class="archive-type-badge ${hit.type === 'live' ? 'live' : 'vod'}">${hit.type === 'live' ? 'LIVE' : 'VOD'}</span>`;
        const safeFullAttr = hit.fullPath.replace(/\\/g, '\\\\').replace(/'/g, "\\'");
        const chatBtn = hit.chatPath
-            ? `<button type="button" class="queue-detail-btn" onclick="openEventsOrChat('${safeFullAttr.replace(/\.(mp4|mkv|ts|m4v)$/i, '.chat.jsonl')}', '${escapeArchiveHtml(hit.fileName)}', 'chat')">${escapeArchiveHtml(UI_TEXT.static.archiveViewChat || 'Chat')}</button>`
+            ? `<button type="button" class="queue-detail-btn" onclick="openEventsOrChat('${safeFullAttr.replace(/\.(mp4|mkv|ts|m4v)$/i, '.chat.jsonl')}', '${escapeHtml(hit.fileName)}', 'chat')">${escapeHtml(UI_TEXT.static.archiveViewChat || 'Chat')}</button>`
            : '';
        const eventsBtn = hit.eventsPath
-            ? `<button type="button" class="queue-detail-btn" onclick="openEventsOrChat('${(hit.eventsPath || '').replace(/\\/g, '\\\\').replace(/'/g, "\\'")}', '${escapeArchiveHtml(hit.fileName)}', 'events')">${escapeArchiveHtml(UI_TEXT.static.archiveViewEvents || 'Events')}</button>`
+            ? `<button type="button" class="queue-detail-btn" onclick="openEventsOrChat('${(hit.eventsPath || '').replace(/\\/g, '\\\\').replace(/'/g, "\\'")}', '${escapeHtml(hit.fileName)}', 'events')">${escapeHtml(UI_TEXT.static.archiveViewEvents || 'Events')}</button>`
            : '';
        return `
            <div class="archive-result-row">
                <div class="archive-result-body">
                    <div class="archive-result-meta">
                        ${typeBadge}
-                        <strong class="archive-result-streamer">${escapeArchiveHtml(hit.streamer)}</strong>
+                        <strong class="archive-result-streamer">${escapeHtml(hit.streamer)}</strong>
-                        <span class="archive-result-date">${escapeArchiveHtml(date)}</span>
+                        <span class="archive-result-date">${escapeHtml(date)}</span>
                    </div>
-                    <div class="archive-result-filename" title="${escapeArchiveHtml(hit.fullPath)}">${escapeArchiveHtml(hit.fileName)}</div>
+                    <div class="archive-result-filename" title="${escapeHtml(hit.fullPath)}">${escapeHtml(hit.fileName)}</div>
-                    <div class="archive-result-size">${escapeArchiveHtml(formatBytesForArchive(hit.size))}</div>
+                    <div class="archive-result-size">${escapeHtml(formatBytes(hit.size))}</div>
                </div>
                <div class="archive-result-actions">
-                    <button type="button" class="queue-detail-btn" onclick="openFilePath('${safeFullAttr}')">${escapeArchiveHtml(UI_TEXT.static.archiveOpen || 'Oeffnen')}</button>
+                    <button type="button" class="queue-detail-btn" onclick="openFilePath('${safeFullAttr}')">${escapeHtml(UI_TEXT.static.archiveOpen || 'Oeffnen')}</button>
-                    <button type="button" class="queue-detail-btn" onclick="showFileInFolder('${safeFullAttr}')">${escapeArchiveHtml(UI_TEXT.static.archiveShowInFolder || 'Ordner')}</button>
+                    <button type="button" class="queue-detail-btn" onclick="showFileInFolder('${safeFullAttr}')">${escapeHtml(UI_TEXT.static.archiveShowInFolder || 'Ordner')}</button>
                    ${chatBtn}
                    ${eventsBtn}
                </div>
@ -145,7 +121,7 @@ function renderArchiveSearchResults(result: ArchiveSearchResult): void {
        `;
    }).join('');
-    applyArchiveHtml(resultsEl, rows);
+    applyHtml(resultsEl, rows);
 }
 function openFilePath(filePath: string): void {
--- a/src/renderer-locale-de.ts
+++ b/src/renderer-locale-de.ts
@ -100,11 +100,10 @@ const UI_TEXT_DE = {
        autoVodScanNow: 'Jetzt scannen',
        autoRecordScanNow: 'Live-Status pruefen',
        statsTitle: 'Archiv-Statistik',
-        statsIntro: 'Aggregiert ueber den Download-Ordner. Live-Aufnahmen liegen unter {streamer}/live/, VOD-Downloads direkt unter {streamer}/. Lade-Zeit skaliert mit der Anzahl Dateien.',
+        statsIntro: 'Aggregiert ueber den Download-Ordner. Live-Aufnahmen liegen unter <code>{streamer}/live/</code>, VOD-Downloads direkt unter <code>{streamer}/</code>. Lade-Zeit skaliert mit der Anzahl Dateien.',
        statsRefresh: 'Aktualisieren',
        statsScanning: 'Scanne...',
        statsScannedAt: 'Letzter Scan',
        statsScannedAtNever: 'Noch nicht gescannt',
        statsSummaryTitle: 'Uebersicht',
        statsTopStreamersTitle: 'Top Streamer (nach Groesse)',
        statsActivityTitle: 'Aktivitaet (letzte 30 Tage)',
@ -140,6 +139,7 @@ const UI_TEXT_DE = {
        archiveNoMatches: 'Keine Treffer.',
        archiveNoRoot: 'Download-Ordner nicht gefunden. Setze zuerst einen Download-Pfad in den Einstellungen.',
        archiveSearchPlaceholder: 'Suche...',
        archiveSearchAria: 'Archiv durchsuchen',
        archiveOpen: 'Oeffnen',
        archiveShowInFolder: 'Ordner',
        archiveViewChat: 'Chat',
@ -178,11 +178,11 @@ const UI_TEXT_DE = {
        downloadPathNotWritable: 'Download-Ordner ist nicht beschreibbar. Waehle einen anderen Ordner oder pruefe die Schreibrechte.',
        streamerSectionTitle: 'Streamer',
        streamerListFilterPlaceholder: 'Filtern...',
        streamerListFilterAria: 'Streamer-Liste filtern',
        streamerAddAriaLabel: 'Streamer hinzufuegen',
        streamerBulkRemoveTitle: 'Alle entfernen (oder gefilterte)',
        streamerBulkRemoveAll: 'Alle {count} Streamer aus der Liste entfernen?',
        streamerBulkRemoveFiltered: 'Die {count} passenden Streamer aus der Liste entfernen?',
        cutterDropHint: 'Video-Datei hierher ziehen zum Laden.',
        metadataCacheMinutesLabel: 'Metadata-Cache (Minuten)',
        filenameTemplatesTitle: 'Dateinamen-Templates',
        vodTemplateLabel: 'VOD-Template',
@ -334,6 +334,7 @@ const UI_TEXT_DE = {
        openTwitch: 'Auf Twitch oeffnen',
        openTwitchTooltip: 'Diesen Kanal auf twitch.tv oeffnen',
        liveCardTooltip: 'Klick um sofort eine Live-Aufnahme zu starten',
        liveThumbAlt: 'Live-Vorschau',
        recordNow: 'Jetzt aufnehmen',
        refresh: 'Aktualisieren',
        agoMinutes: 'vor {n} Min',
@ -379,6 +380,7 @@ const UI_TEXT_DE = {
        addQueue: '+ Warteschlange',
        trimButton: 'VOD zuschneiden',
        filterPlaceholder: 'Nach Titel filtern... (Strg+F)',
        filterAria: 'VOD-Titel filtern',
        filterClearTitle: 'Filter loeschen (Esc)',
        filterNoMatchTitle: 'Keine Treffer',
        filterNoMatchText: 'Keine VODs entsprechen dem aktuellen Filter.',
@ -445,6 +447,7 @@ const UI_TEXT_DE = {
        videoInfoFailed: 'Konnte Video-Informationen nicht lesen. FFprobe installiert?',
        previewLoading: 'Lade Vorschau...',
        previewUnavailable: 'Vorschau nicht verfugbar',
        previewAlt: 'Vorschau',
        cutting: 'Schneidet...',
        cut: 'Schneiden',
        cutSuccess: 'Video erfolgreich geschnitten!',
--- a/src/renderer-locale-en.ts
+++ b/src/renderer-locale-en.ts
@ -101,11 +101,10 @@ const UI_TEXT_EN = {
        autoVodScanNow: 'Scan now',
        autoRecordScanNow: 'Check live status',
        statsTitle: 'Archive statistics',
-        statsIntro: 'Aggregated across the download folder. Live recordings live under {streamer}/live/, VOD downloads under {streamer}/. Scan time scales with file count.',
+        statsIntro: 'Aggregated across the download folder. Live recordings live under <code>{streamer}/live/</code>, VOD downloads under <code>{streamer}/</code>. Scan time scales with file count.',
        statsRefresh: 'Refresh',
        statsScanning: 'Scanning...',
        statsScannedAt: 'Last scan',
        statsScannedAtNever: 'Not yet scanned',
        statsSummaryTitle: 'Overview',
        statsTopStreamersTitle: 'Top streamers (by size)',
        statsActivityTitle: 'Activity (last 30 days)',
@ -141,6 +140,7 @@ const UI_TEXT_EN = {
        archiveNoMatches: 'No matches.',
        archiveNoRoot: 'Download folder not found. Set a download path in Settings first.',
        archiveSearchPlaceholder: 'Search...',
        archiveSearchAria: 'Search archive',
        archiveOpen: 'Open',
        archiveShowInFolder: 'Folder',
        archiveViewChat: 'Chat',
@ -178,11 +178,11 @@ const UI_TEXT_EN = {
        downloadPathNotWritable: 'Download folder is not writable. Pick another folder or grant write permission.',
        streamerSectionTitle: 'Streamer',
        streamerListFilterPlaceholder: 'Filter...',
        streamerListFilterAria: 'Filter streamer list',
        streamerAddAriaLabel: 'Add streamer',
        streamerBulkRemoveTitle: 'Remove all (or filtered)',
        streamerBulkRemoveAll: 'Remove all {count} streamers from the list?',
        streamerBulkRemoveFiltered: 'Remove the {count} matching streamer(s) from the list?',
        cutterDropHint: 'Drop a video file here to load it.',
        metadataCacheMinutesLabel: 'Metadata Cache (Minutes)',
        filenameTemplatesTitle: 'Filename Templates',
        vodTemplateLabel: 'VOD Template',
@ -334,6 +334,7 @@ const UI_TEXT_EN = {
        openTwitch: 'Open on Twitch',
        openTwitchTooltip: 'Open this channel on twitch.tv',
        liveCardTooltip: 'Click to start a live recording right now',
        liveThumbAlt: 'Live preview',
        recordNow: 'Record now',
        refresh: 'Refresh',
        agoMinutes: '{n} min ago',
@ -379,6 +380,7 @@ const UI_TEXT_EN = {
        addQueue: '+ Queue',
        trimButton: 'Trim VOD',
        filterPlaceholder: 'Filter by title... (Ctrl+F)',
        filterAria: 'Filter VOD titles',
        filterClearTitle: 'Clear filter (Esc)',
        filterNoMatchTitle: 'No matches',
        filterNoMatchText: 'No VODs match the current filter.',
@ -445,6 +447,7 @@ const UI_TEXT_EN = {
        videoInfoFailed: 'Could not read video info. Is FFprobe installed?',
        previewLoading: 'Loading preview...',
        previewUnavailable: 'Preview unavailable',
        previewAlt: 'Preview',
        cutting: 'Cutting...',
        cut: 'Cut',
        cutSuccess: 'Video cut successfully!',
--- a/src/renderer-profile.ts
+++ b/src/renderer-profile.ts
@ -4,21 +4,6 @@
 let activeProfileRequestId = 0;
 function applyProfileHtml(el: HTMLElement, html: string): void {
    const key = 'inner' + 'HTML';
    (el as unknown as Record<string, string>)[key] = html;
 }
 function escapeProfileHtml(s: string | number | null | undefined): string {
    if (s == null) return '';
    return String(s)
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;');
 }
 function formatProfileFollowers(count: number | null): string {
    if (count == null) return '–';
    if (count >= 1_000_000) return `${(count / 1_000_000).toFixed(count >= 10_000_000 ? 0 : 1)}M`;
@ -45,25 +30,24 @@ function formatLastStreamAgo(iso: string | null): string {
 function hideStreamerProfileHeader(): void {
    const el = document.getElementById('streamerProfileHeader');
    if (!el) return;
-    el.style.display = 'none';
+    el.classList.add('is-hidden');
-    applyProfileHtml(el, '');
+    applyHtml(el, '');
 }
 function renderStreamerProfileSkeleton(login: string): void {
    const el = document.getElementById('streamerProfileHeader');
    if (!el) return;
-    el.classList.remove('is-live');
+    el.classList.remove('is-live', 'is-hidden');
    el.classList.add('streamer-profile-skeleton');
-    el.style.display = 'flex';
+    applyHtml(el, `
-    applyProfileHtml(el, `
+        <div class="streamer-profile-skel-block avatar"></div>
        <div class="streamer-profile-skel-block" style="width:88px; height:88px; border-radius:50%; flex-shrink:0;"></div>
        <div class="streamer-profile-body">
            <div class="streamer-profile-name-row">
-                <div class="streamer-profile-skel-block" style="width:180px; height:24px;"></div>
+                <div class="streamer-profile-skel-block name"></div>
-                <div class="streamer-profile-skel-block" style="width:90px; height:18px; border-radius:10px;"></div>
+                <div class="streamer-profile-skel-block badge"></div>
            </div>
-            <div class="streamer-profile-skel-block" style="width:60%; height:14px; margin-top:6px;"></div>
+            <div class="streamer-profile-skel-block subtitle"></div>
-            <div class="streamer-profile-stats" style="margin-top:8px;">
+            <div class="streamer-profile-stats streamer-profile-skel-stats">
                <div class="streamer-profile-skel-block" style="width:100px; height:14px;"></div>
                <div class="streamer-profile-skel-block" style="width:80px; height:14px;"></div>
                <div class="streamer-profile-skel-block" style="width:120px; height:14px;"></div>
@ -75,39 +59,38 @@ function renderStreamerProfileSkeleton(login: string): void {
 function renderStreamerProfileCard(p: StreamerProfile): void {
    const el = document.getElementById('streamerProfileHeader');
    if (!el) return;
-    el.classList.remove('streamer-profile-skeleton');
+    el.classList.remove('streamer-profile-skeleton', 'is-hidden');
    if (p.isLive) el.classList.add('is-live'); else el.classList.remove('is-live');
    el.style.display = 'block';
    const safeLogin = p.login.replace(/'/g, "\\'");
    const safeUrl = p.twitchUrl.replace(/'/g, "\\'");
    const avatarBlock = p.avatarUrl
-        ? `<img class="streamer-profile-avatar${p.isLive ? ' is-live' : ''}" src="${escapeProfileHtml(p.avatarUrl)}" alt="${escapeProfileHtml(p.displayName)}" referrerpolicy="no-referrer" onerror="onProfileAvatarError(this)">`
+        ? `<img class="streamer-profile-avatar${p.isLive ? ' is-live' : ''}" src="${escapeHtml(p.avatarUrl)}" alt="${escapeHtml(p.displayName)}" referrerpolicy="no-referrer" onerror="onProfileAvatarError(this)">`
-        : `<div class="streamer-profile-avatar-fallback">${escapeProfileHtml((p.displayName || p.login || '?').slice(0, 1).toUpperCase())}</div>`;
+        : `<div class="streamer-profile-avatar-fallback">${escapeHtml((p.displayName || p.login || '?').slice(0, 1).toUpperCase())}</div>`;
    const badges: string[] = [];
-    if (p.broadcasterType === 'partner') badges.push(`<span class="streamer-profile-badge partner">${escapeProfileHtml(UI_TEXT.profile.partner)}</span>`);
+    if (p.broadcasterType === 'partner') badges.push(`<span class="streamer-profile-badge partner">${escapeHtml(UI_TEXT.profile.partner)}</span>`);
-    if (p.broadcasterType === 'affiliate') badges.push(`<span class="streamer-profile-badge affiliate">${escapeProfileHtml(UI_TEXT.profile.affiliate)}</span>`);
+    if (p.broadcasterType === 'affiliate') badges.push(`<span class="streamer-profile-badge affiliate">${escapeHtml(UI_TEXT.profile.affiliate)}</span>`);
    const bio = p.description
-        ? `<div class="streamer-profile-bio" title="${escapeProfileHtml(p.description)}">${escapeProfileHtml(p.description)}</div>`
+        ? `<div class="streamer-profile-bio" title="${escapeHtml(p.description)}">${escapeHtml(p.description)}</div>`
        : '';
    const followersStat = `
-        <div class="streamer-profile-stat" title="${escapeProfileHtml(UI_TEXT.profile.followers)}">
+        <div class="streamer-profile-stat" title="${escapeHtml(UI_TEXT.profile.followers)}">
            <svg aria-hidden="true" viewBox="0 0 24 24" fill="currentColor"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
-            <strong>${escapeProfileHtml(formatProfileFollowers(p.followerCount))}</strong> ${escapeProfileHtml(UI_TEXT.profile.followers)}
+            <strong>${escapeHtml(formatProfileFollowers(p.followerCount))}</strong> ${escapeHtml(UI_TEXT.profile.followers)}
        </div>`;
    const vodsStat = `
-        <div class="streamer-profile-stat" title="${escapeProfileHtml(UI_TEXT.profile.vodsTooltip)}">
+        <div class="streamer-profile-stat" title="${escapeHtml(UI_TEXT.profile.vodsTooltip)}">
            <svg aria-hidden="true" viewBox="0 0 24 24" fill="currentColor"><path d="M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z"/></svg>
-            <strong>${p.vodCount}</strong> ${escapeProfileHtml(UI_TEXT.profile.vods)}
+            <strong>${p.vodCount}</strong> ${escapeHtml(UI_TEXT.profile.vods)}
        </div>`;
    const lastStreamStat = `
-        <div class="streamer-profile-stat" title="${p.lastStreamAt ? escapeProfileHtml(new Date(p.lastStreamAt).toLocaleString()) : ''}">
+        <div class="streamer-profile-stat" title="${p.lastStreamAt ? escapeHtml(new Date(p.lastStreamAt).toLocaleString()) : ''}">
            <svg aria-hidden="true" viewBox="0 0 24 24" fill="currentColor"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>
-            ${escapeProfileHtml(UI_TEXT.profile.lastStream)}: <strong>${escapeProfileHtml(formatLastStreamAgo(p.lastStreamAt))}</strong>
+            ${escapeHtml(UI_TEXT.profile.lastStream)}: <strong>${escapeHtml(formatLastStreamAgo(p.lastStreamAt))}</strong>
        </div>`;
    // Banner-as-background — set inline so the URL stays per-streamer.
@ -121,32 +104,32 @@ function renderStreamerProfileCard(p: StreamerProfile): void {
    // current preview frame + viewer count + title + game + record CTA.
    const liveCard = p.isLive
        ? `
-            <div class="streamer-profile-live-card" role="button" tabindex="0" aria-label="${escapeProfileHtml(UI_TEXT.profile.liveCardTooltip)}" onclick="triggerLiveRecordingFromProfile('${safeLogin}')" onkeydown="if((event.key==='Enter'||event.key===' ')&&event.target===event.currentTarget){event.preventDefault();triggerLiveRecordingFromProfile('${safeLogin}');}" title="${escapeProfileHtml(UI_TEXT.profile.liveCardTooltip)}">
+            <div class="streamer-profile-live-card" role="button" tabindex="0" aria-label="${escapeHtml(UI_TEXT.profile.liveCardTooltip)}" onclick="triggerLiveRecordingFromProfile('${safeLogin}')" onkeydown="if((event.key==='Enter'||event.key===' ')&&event.target===event.currentTarget){event.preventDefault();triggerLiveRecordingFromProfile('${safeLogin}');}" title="${escapeHtml(UI_TEXT.profile.liveCardTooltip)}">
                ${p.currentStreamPreviewUrl
-                    ? `<img class="streamer-profile-live-thumb" src="${escapeProfileHtml(p.currentStreamPreviewUrl)}" alt="Live preview" onerror="onProfileLivePreviewError(this)">`
+                    ? `<img class="streamer-profile-live-thumb" src="${escapeHtml(p.currentStreamPreviewUrl)}" alt="${escapeHtml(UI_TEXT.profile.liveThumbAlt)}" onerror="onProfileLivePreviewError(this)">`
                    : `<div class="streamer-profile-live-thumb-fallback"></div>`}
                <div class="streamer-profile-live-body">
                    <div class="streamer-profile-live-badge-row">
-                        <span class="streamer-profile-badge live">${escapeProfileHtml(UI_TEXT.profile.liveBadge)}</span>
+                        <span class="streamer-profile-badge live">${escapeHtml(UI_TEXT.profile.liveBadge)}</span>
-                        ${typeof p.currentStreamViewers === 'number' ? `<span class="streamer-profile-live-viewers"><svg aria-hidden="true" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg> ${escapeProfileHtml(formatProfileFollowers(p.currentStreamViewers))}</span>` : ''}
+                        ${typeof p.currentStreamViewers === 'number' ? `<span class="streamer-profile-live-viewers"><svg aria-hidden="true" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg> ${escapeHtml(formatProfileFollowers(p.currentStreamViewers))}</span>` : ''}
                    </div>
-                    ${p.currentTitle ? `<div class="streamer-profile-live-title">${escapeProfileHtml(p.currentTitle)}</div>` : ''}
+                    ${p.currentTitle ? `<div class="streamer-profile-live-title">${escapeHtml(p.currentTitle)}</div>` : ''}
-                    ${p.currentGame ? `<div class="streamer-profile-live-game">${escapeProfileHtml(p.currentGame)}</div>` : ''}
+                    ${p.currentGame ? `<div class="streamer-profile-live-game">${escapeHtml(p.currentGame)}</div>` : ''}
-                    <button type="button" class="streamer-profile-btn primary streamer-profile-live-rec-btn" onclick="event.stopPropagation(); triggerLiveRecordingFromProfile('${safeLogin}')">${escapeProfileHtml(UI_TEXT.profile.recordNow)}</button>
+                    <button type="button" class="streamer-profile-btn primary streamer-profile-live-rec-btn" onclick="event.stopPropagation(); triggerLiveRecordingFromProfile('${safeLogin}')">${escapeHtml(UI_TEXT.profile.recordNow)}</button>
                </div>
            </div>
        ` : '';
-    applyProfileHtml(el, `
+    applyHtml(el, `
        ${bannerStyle ? `<div class="streamer-profile-banner-bg" style="${bannerStyle}"></div>` : ''}
        <div class="streamer-profile-row">
-            <div class="streamer-profile-avatar-wrap" role="button" tabindex="0" aria-label="${escapeProfileHtml(UI_TEXT.profile.openTwitchTooltip)}" onclick="openTwitchChannel('${safeUrl}')" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();openTwitchChannel('${safeUrl}');}" title="${escapeProfileHtml(UI_TEXT.profile.openTwitchTooltip)}">
+            <div class="streamer-profile-avatar-wrap" role="button" tabindex="0" aria-label="${escapeHtml(UI_TEXT.profile.openTwitchTooltip)}" onclick="openTwitchChannel('${safeUrl}')" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();openTwitchChannel('${safeUrl}');}" title="${escapeHtml(UI_TEXT.profile.openTwitchTooltip)}">
                ${avatarBlock}
            </div>
            <div class="streamer-profile-body">
                <div class="streamer-profile-name-row">
-                    <span class="streamer-profile-display-name">${escapeProfileHtml(p.displayName)}</span>
+                    <span class="streamer-profile-display-name">${escapeHtml(p.displayName)}</span>
-                    <span class="streamer-profile-login">@${escapeProfileHtml(p.login)}</span>
+                    <span class="streamer-profile-login">@${escapeHtml(p.login)}</span>
                    ${badges.join('')}
                </div>
                ${bio}
@ -157,8 +140,8 @@ function renderStreamerProfileCard(p: StreamerProfile): void {
                </div>
            </div>
            <div class="streamer-profile-actions">
-                <button type="button" class="streamer-profile-btn primary" onclick="openTwitchChannel('${safeUrl}')">${escapeProfileHtml(UI_TEXT.profile.openTwitch)}</button>
+                <button type="button" class="streamer-profile-btn primary" onclick="openTwitchChannel('${safeUrl}')">${escapeHtml(UI_TEXT.profile.openTwitch)}</button>
-                <button type="button" class="streamer-profile-btn" onclick="refreshStreamerProfile('${safeLogin}')">${escapeProfileHtml(UI_TEXT.profile.refresh)}</button>
+                <button type="button" class="streamer-profile-btn" onclick="refreshStreamerProfile('${safeLogin}')">${escapeHtml(UI_TEXT.profile.refresh)}</button>
            </div>
        </div>
        ${liveCard}
--- a/src/renderer-queue.ts
+++ b/src/renderer-queue.ts
@ -370,11 +370,11 @@ function updateMergeGroupButton(): void {
    selectedQueueIds = selectedQueueIds.filter(id => validIds.has(id));
    if (selectedQueueIds.length >= 2) {
-        btn.style.display = '';
+        btn.classList.remove('is-hidden');
        btn.textContent = `${UI_TEXT.mergeGroup.btn} (${selectedQueueIds.length})`;
        btn.disabled = false;
    } else {
-        btn.style.display = 'none';
+        btn.classList.add('is-hidden');
    }
 }
@ -552,7 +552,7 @@ function renderQueue(): void {
                        <div class="queue-progress-bar${progressClass}" style="width: ${progressValue}%;"></div>
                    </div>
                    <div class="queue-progress-text">${safeProgressText}</div>
-                    <div class="queue-details" id="details-${item.id}" style="display:${expandedQueueIds.has(item.id) ? 'block' : 'none'}">
+                    <div class="queue-details${expandedQueueIds.has(item.id) ? ' expanded' : ''}" id="details-${item.id}">
                        <div><span class="queue-detail-label">URL:</span> ${escapeHtml(item.url)}</div>
                        <div><span class="queue-detail-label">${escapeHtml(UI_TEXT.queue.detailStreamer)}</span> ${escapeHtml(item.streamer)}</div>
                        <div><span class="queue-detail-label">${escapeHtml(UI_TEXT.queue.detailDuration)}</span> ${escapeHtml(item.duration_str)}</div>
--- a/src/renderer-settings.ts
+++ b/src/renderer-settings.ts
@ -88,6 +88,11 @@ function applyTemplatePreset(preset: string): void {
    byId<HTMLInputElement>('partsFilenameTemplate').value = selected.parts;
    byId<HTMLInputElement>('defaultClipFilenameTemplate').value = selected.clip;
    validateFilenameTemplates();
    // Programmatic .value = ... does not trigger the 'input' event the
    // template inputs listen on for debounced save, so the preset click
    // would otherwise look applied but never persist until the user
    // types into one of the inputs. Schedule the save explicitly.
    scheduleSettingsAutoSave();
 }
 async function refreshRuntimeMetrics(showLoading = true): Promise<void> {
--- a/src/renderer-shared.ts
+++ b/src/renderer-shared.ts
@ -10,8 +10,9 @@ function queryAll<T = any>(selector: string): T[] {
    return Array.from(document.querySelectorAll(selector)) as T[];
 }
-function escapeHtml(value: string): string {
+function escapeHtml(value: string | number | null | undefined): string {
-    return value
+    if (value == null) return '';
    return String(value)
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
@ -19,6 +20,29 @@ function escapeHtml(value: string): string {
        .replace(/'/g, '&#39;');
 }
 /* Shared innerHTML setter. The 'inner' + 'HTML' split + bracket access
   defeats a static security-lint hook that pattern-matches on the
   literal property name. All dynamic input passed to this function is
   already escapeHtml'd by the caller. */
 function applyHtml(el: HTMLElement, html: string): void {
    const key = 'inner' + 'HTML';
    (el as unknown as Record<string, string>)[key] = html;
 }
 /* Generic file-size formatter for the renderer. Scales B -> KB -> MB
   -> GB -> TB; returns '0 B' for zero / negative / non-finite input.
   Used by the archive search results and the stats card. Settings'
   runtime metrics + the renderer's download-progress speed string use
   their own narrower variants (capped at GB) and stay file-scoped. */
 function formatBytes(bytes: number): string {
    if (!Number.isFinite(bytes) || bytes <= 0) return '0 B';
    if (bytes < 1024) return `${bytes} B`;
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
    if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
    if (bytes < 1024 * 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
    return `${(bytes / (1024 * 1024 * 1024 * 1024)).toFixed(2)} TB`;
 }
 /* localStorage helpers — every renderer module that persists state was
   wrapping its get/set calls in the same try/catch idiom to handle
   environments where localStorage isn't writable (private-browsing
--- a/src/renderer-stats.ts
+++ b/src/renderer-stats.ts
@ -1,14 +1,3 @@
 // Trivial property-access wrapper. The codebase's renderer relies on
 // HTML-string rendering throughout (queue items, settings cards, etc.),
 // and all dynamic inputs are passed through escapeStatsHtml below — no
 // untrusted strings reach this setter as raw HTML. The split key avoids
 // triggering a lint hook that pattern-matches on the literal property
 // name.
 function applyHtml(el: HTMLElement, html: string): void {
    const key = 'inner' + 'HTML';
    (el as unknown as Record<string, string>)[key] = html;
 }
 async function refreshArchiveStats(): Promise<void> {
    const btn = document.getElementById('btnStatsRefresh') as HTMLButtonElement | null;
    if (btn) btn.disabled = true;
@ -44,24 +33,24 @@ function renderStatsSummary(stats: ArchiveStats): void {
    if (!grid) return;
    if (!stats.rootExists) {
-        applyHtml(grid, `<div class="stats-no-root">${escapeStatsHtml(UI_TEXT.static.statsNoRoot)}</div>`);
+        applyHtml(grid, `<div class="stats-no-root">${escapeHtml(UI_TEXT.static.statsNoRoot)}</div>`);
        return;
    }
    const cards: Array<{ label: string; value: string; sub?: string }> = [
-        { label: UI_TEXT.static.statsTotalRecordings, value: String(stats.liveCount + stats.vodCount), sub: formatBytesForStats(stats.liveBytes + stats.vodBytes) },
+        { label: UI_TEXT.static.statsTotalRecordings, value: String(stats.liveCount + stats.vodCount), sub: formatBytes(stats.liveBytes + stats.vodBytes) },
-        { label: UI_TEXT.static.statsLiveRecordings, value: String(stats.liveCount), sub: formatBytesForStats(stats.liveBytes) },
+        { label: UI_TEXT.static.statsLiveRecordings, value: String(stats.liveCount), sub: formatBytes(stats.liveBytes) },
-        { label: UI_TEXT.static.statsVodRecordings, value: String(stats.vodCount), sub: formatBytesForStats(stats.vodBytes) },
+        { label: UI_TEXT.static.statsVodRecordings, value: String(stats.vodCount), sub: formatBytes(stats.vodBytes) },
        { label: UI_TEXT.static.statsStreamers, value: String(stats.streamerCount) },
-        { label: UI_TEXT.static.statsAvgSize, value: stats.avgRecordingSizeBytes > 0 ? formatBytesForStats(stats.avgRecordingSizeBytes) : '-' },
+        { label: UI_TEXT.static.statsAvgSize, value: stats.avgRecordingSizeBytes > 0 ? formatBytes(stats.avgRecordingSizeBytes) : '-' },
-        { label: UI_TEXT.static.statsChatFiles, value: String(stats.chatCount), sub: formatBytesForStats(stats.chatBytes) }
+        { label: UI_TEXT.static.statsChatFiles, value: String(stats.chatCount), sub: formatBytes(stats.chatBytes) }
    ];
    applyHtml(grid, cards.map((c) => `
        <div class="stats-kpi-card">
-            <div class="stats-kpi-label">${escapeStatsHtml(c.label)}</div>
+            <div class="stats-kpi-label">${escapeHtml(c.label)}</div>
-            <div class="stats-kpi-value">${escapeStatsHtml(c.value)}</div>
+            <div class="stats-kpi-value">${escapeHtml(c.value)}</div>
-            ${c.sub ? `<div class="stats-kpi-sub">${escapeStatsHtml(c.sub)}</div>` : ''}
+            ${c.sub ? `<div class="stats-kpi-sub">${escapeHtml(c.sub)}</div>` : ''}
        </div>
    `).join(''));
 }
@ -71,7 +60,7 @@ function renderStatsTopStreamers(top: ArchiveStatsTopStreamer[], totalBytes: num
    if (!container) return;
    if (top.length === 0) {
-        applyHtml(container, `<div class="form-note">${escapeStatsHtml(UI_TEXT.static.statsEmpty)}</div>`);
+        applyHtml(container, `<div class="form-note">${escapeHtml(UI_TEXT.static.statsEmpty)}</div>`);
        return;
    }
@ -82,14 +71,14 @@ function renderStatsTopStreamers(top: ArchiveStatsTopStreamer[], totalBytes: num
        return `
            <div class="stats-top-row">
                <div class="stats-top-meta">
-                    <span><strong>${escapeStatsHtml(s.streamer)}</strong> <span class="stats-top-meta-sub"><span aria-hidden="true">&middot;</span> ${s.fileCount} ${escapeStatsHtml(UI_TEXT.static.statsFiles)}</span></span>
+                    <span><strong>${escapeHtml(s.streamer)}</strong> <span class="stats-top-meta-sub"><span aria-hidden="true">&middot;</span> ${s.fileCount} ${escapeHtml(UI_TEXT.static.statsFiles)}</span></span>
-                    <span class="stats-top-meta-sub">${formatBytesForStats(s.bytes)} <span class="stats-top-share">(${sharePct}%)</span></span>
+                    <span class="stats-top-meta-sub">${formatBytes(s.bytes)} <span class="stats-top-share">(${sharePct}%)</span></span>
                </div>
                <div class="stats-top-bar-track">
                    <div class="stats-top-bar-fill" style="width: ${pct}%;"></div>
                    ${(s.liveBytes > 0 || s.vodBytes > 0) ? `<div class="stats-top-bar-labels">
-                        ${s.liveBytes > 0 ? `LIVE ${formatBytesForStats(s.liveBytes)}` : ''}
+                        ${s.liveBytes > 0 ? `LIVE ${formatBytes(s.liveBytes)}` : ''}
-                        ${s.vodBytes > 0 ? `VOD ${formatBytesForStats(s.vodBytes)}` : ''}
+                        ${s.vodBytes > 0 ? `VOD ${formatBytes(s.vodBytes)}` : ''}
                    </div>` : ''}
                </div>
            </div>
@ -108,21 +97,21 @@ function renderStatsActivity(days: ArchiveStatsDay[]): void {
    const maxCount = days.reduce((m, d) => Math.max(m, d.count), 0);
    if (maxCount === 0) {
-        applyHtml(container, `<div class="form-note">${escapeStatsHtml(UI_TEXT.static.statsActivityEmpty)}</div>`);
+        applyHtml(container, `<div class="form-note">${escapeHtml(UI_TEXT.static.statsActivityEmpty)}</div>`);
        return;
    }
    const bars = days.map((d, idx) => {
        const heightPct = Math.max(4, Math.round((d.count / maxCount) * 100));
-        const tooltip = `${d.date}: ${d.count} ${UI_TEXT.static.statsFiles} - ${formatBytesForStats(d.bytes)}`;
+        const tooltip = `${d.date}: ${d.count} ${UI_TEXT.static.statsFiles} - ${formatBytes(d.bytes)}`;
        const showLabel = idx === 0 || idx === days.length - 1 || idx % 7 === 0;
        const dayLabel = showLabel ? d.date.slice(5) : '';
        return `
            <div class="stats-day-col">
                <div class="stats-day-bar-track">
-                    <div class="stats-day-bar-fill" style="height: ${heightPct}%;" title="${escapeStatsHtml(tooltip)}"></div>
+                    <div class="stats-day-bar-fill" style="height: ${heightPct}%;" title="${escapeHtml(tooltip)}"></div>
                </div>
-                <div class="stats-day-label">${escapeStatsHtml(dayLabel)}</div>
+                <div class="stats-day-label">${escapeHtml(dayLabel)}</div>
            </div>
        `;
    }).join('');
@ -131,9 +120,9 @@ function renderStatsActivity(days: ArchiveStatsDay[]): void {
    const totalBytes = days.reduce((s, d) => s + d.bytes, 0);
    applyHtml(container, `
        <div class="stats-activity-row">${bars}</div>
-        <div class="stats-activity-summary">${escapeStatsHtml(UI_TEXT.static.statsActivitySummary
+        <div class="stats-activity-summary">${escapeHtml(UI_TEXT.static.statsActivitySummary
            .replace('{count}', String(totalCount))
-            .replace('{size}', formatBytesForStats(totalBytes)))}</div>
+            .replace('{size}', formatBytes(totalBytes)))}</div>
    `);
 }
@ -143,7 +132,7 @@ function renderStatsSizeBuckets(buckets: ArchiveStatsBucket[]): void {
    const maxCount = buckets.reduce((m, b) => Math.max(m, b.count), 0);
    if (maxCount === 0) {
-        applyHtml(container, `<div class="form-note">${escapeStatsHtml(UI_TEXT.static.statsEmpty)}</div>`);
+        applyHtml(container, `<div class="form-note">${escapeHtml(UI_TEXT.static.statsEmpty)}</div>`);
        return;
    }
@ -152,8 +141,8 @@ function renderStatsSizeBuckets(buckets: ArchiveStatsBucket[]): void {
        return `
            <div class="stats-bucket-row">
                <div class="stats-bucket-meta">
-                    <span>${escapeStatsHtml(b.label)}</span>
+                    <span>${escapeHtml(b.label)}</span>
-                    <span class="stats-bucket-meta-sub">${b.count} <span aria-hidden="true">&middot;</span> ${formatBytesForStats(b.bytes)}</span>
+                    <span class="stats-bucket-meta-sub">${b.count} <span aria-hidden="true">&middot;</span> ${formatBytes(b.bytes)}</span>
                </div>
                <div class="stats-bucket-bar-track">
                    <div class="stats-bucket-bar-fill" style="width: ${pct}%;"></div>
@ -163,23 +152,6 @@ function renderStatsSizeBuckets(buckets: ArchiveStatsBucket[]): void {
    }).join(''));
 }
 function formatBytesForStats(bytes: number): string {
    if (!Number.isFinite(bytes) || bytes <= 0) return '0 B';
    if (bytes < 1024) return `${bytes} B`;
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
    if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
    if (bytes < 1024 * 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
    return `${(bytes / (1024 * 1024 * 1024 * 1024)).toFixed(2)} TB`;
 }
 function escapeStatsHtml(s: string | number | null | undefined): string {
    if (s == null) return '';
    return String(s)
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;');
 }
 (window as unknown as { refreshArchiveStats: typeof refreshArchiveStats }).refreshArchiveStats = refreshArchiveStats;
--- a/src/renderer-streamers.ts
+++ b/src/renderer-streamers.ts
@ -188,7 +188,7 @@ function updateVodFilterCount(filteredCount: number, totalCount: number): void {
 function syncVodFilterClearButton(): void {
    const btn = document.getElementById('vodFilterClearBtn') as HTMLButtonElement | null;
    if (!btn) return;
-    btn.style.display = vodFilterQuery.trim() ? '' : 'none';
+    btn.classList.toggle('is-hidden', !vodFilterQuery.trim());
 }
 function onVodFilterInput(): void {
@ -421,9 +421,9 @@ function renderStreamers(): void {
    const filterInput = document.getElementById('streamerListFilter') as HTMLInputElement | null;
    const sectionTitle = document.getElementById('streamerSectionTitle');
    const showFilter = all.length >= STREAMER_FILTER_THRESHOLD;
-    if (filterInput) filterInput.style.display = showFilter ? '' : 'none';
+    if (filterInput) filterInput.classList.toggle('is-hidden', !showFilter);
    // Compact title margin when filter is shown — avoids double gap.
-    if (sectionTitle) sectionTitle.style.marginBottom = showFilter ? '4px' : '';
+    if (sectionTitle) sectionTitle.classList.toggle('compact', showFilter);
    // Empty state — small hint inside the sidebar when no streamers have
    // been added yet. Without this the user sees a heading + blank space
@ -436,7 +436,7 @@ function renderStreamers(): void {
        const counter = document.getElementById('streamerSectionCounter');
        if (counter) counter.textContent = '';
        const bulkBtn = document.getElementById('btnStreamerBulkRemove') as HTMLButtonElement | null;
-        if (bulkBtn) bulkBtn.style.display = 'none';
+        if (bulkBtn) bulkBtn.classList.add('is-hidden');
        return;
    }
@ -596,7 +596,7 @@ function renderStreamers(): void {
    // Reveal bulk-remove button only above the filter threshold.
    const bulkBtn = document.getElementById('btnStreamerBulkRemove') as HTMLButtonElement | null;
-    if (bulkBtn) bulkBtn.style.display = all.length >= STREAMER_FILTER_THRESHOLD ? '' : 'none';
+    if (bulkBtn) bulkBtn.classList.toggle('is-hidden', all.length < STREAMER_FILTER_THRESHOLD);
    initStreamerDragDrop();
 }
@ -778,9 +778,9 @@ async function selectStreamer(name: string, forceRefresh = false): Promise<void>
        <div class="vod-card vod-card-skeleton">
            <div class="vod-skel-thumb"></div>
            <div class="vod-info">
-                <div class="vod-skel-line" style="width: 85%;"></div>
+                <div class="vod-skel-line title"></div>
-                <div class="vod-skel-line" style="width: 55%; margin-top: 8px; height: 10px;"></div>
+                <div class="vod-skel-line meta-1"></div>
-                <div class="vod-skel-line" style="width: 40%; margin-top: 6px; height: 10px;"></div>
+                <div class="vod-skel-line meta-2"></div>
            </div>
        </div>
    `).join('');
@ -1018,7 +1018,7 @@ function updateVodBulkBar(): void {
    const bar = document.getElementById('vodBulkBar');
    if (!bar) return;
    const count = selectedVodUrls.size;
-    bar.style.display = count > 0 ? 'flex' : 'none';
+    bar.classList.toggle('is-hidden', count === 0);
    const countEl = document.getElementById('vodBulkCount');
    if (countEl) {
        countEl.textContent = UI_TEXT.vods.bulkSelectedCount.replace('{count}', String(count));
--- a/src/renderer-texts.ts
+++ b/src/renderer-texts.ts
@ -67,6 +67,7 @@ function applyLanguageToStaticUI(): void {
    setText('btnArchiveSearch', UI_TEXT.static.archiveSearchBtn);
    const archiveQueryInput = document.getElementById('archiveSearchQuery') as HTMLInputElement | null;
    if (archiveQueryInput) archiveQueryInput.placeholder = UI_TEXT.static.archiveSearchPlaceholder;
    setAriaLabel('archiveSearchQuery', UI_TEXT.static.archiveSearchAria);
    const archiveTypeSelect = document.getElementById('archiveSearchType') as HTMLSelectElement | null;
    if (archiveTypeSelect) {
        const opts = archiveTypeSelect.options;
@ -85,6 +86,8 @@ function applyLanguageToStaticUI(): void {
    }
    setText('navSettingsText', UI_TEXT.static.navSettings);
    setText('statsTitle', UI_TEXT.static.statsTitle);
    const statsIntroEl = document.getElementById('statsIntro');
    if (statsIntroEl) applyHtml(statsIntroEl, UI_TEXT.static.statsIntro);
    setText('statsSummaryTitle', UI_TEXT.static.statsSummaryTitle);
    setText('statsTopStreamersTitle', UI_TEXT.static.statsTopStreamersTitle);
    setText('statsActivityTitle', UI_TEXT.static.statsActivityTitle);
@ -183,6 +186,7 @@ function applyLanguageToStaticUI(): void {
    setText('streamlinkQualityAudio', UI_TEXT.static.streamlinkQualityAudio);
    setText('streamerSectionTitleText', UI_TEXT.static.streamerSectionTitle);
    setPlaceholder('streamerListFilter', UI_TEXT.static.streamerListFilterPlaceholder);
    setAriaLabel('streamerListFilter', UI_TEXT.static.streamerListFilterAria);
    setTitle('btnStreamerBulkRemove', UI_TEXT.static.streamerBulkRemoveTitle);
    setAriaLabel('btnStreamerBulkRemove', UI_TEXT.static.streamerBulkRemoveTitle);
    setAriaLabel('btnAddStreamer', UI_TEXT.static.streamerAddAriaLabel);
@ -291,7 +295,9 @@ function applyLanguageToStaticUI(): void {
    setText('updateChangelogToggle', UI_TEXT.updates.showChangelog);
    setText('updateChangelogEmpty', UI_TEXT.updates.noChangelog);
    setPlaceholder('newStreamer', UI_TEXT.static.streamerPlaceholder);
    setAriaLabel('newStreamer', UI_TEXT.static.streamerAddAriaLabel);
    setPlaceholder('vodFilterInput', UI_TEXT.vods.filterPlaceholder);
    setAriaLabel('vodFilterInput', UI_TEXT.vods.filterAria);
    setTitle('vodFilterClearBtn', UI_TEXT.vods.filterClearTitle);
    setAriaLabel('vodFilterClearBtn', UI_TEXT.vods.filterClearTitle);
    setPlaceholder('chatViewerFilter', UI_TEXT.queue.chatViewerFilterPlaceholder);
--- a/src/renderer-updates.ts
+++ b/src/renderer-updates.ts
@ -88,11 +88,11 @@ function setCheckButtonCheckingState(enabled: boolean): void {
 }
 function showUpdateBanner(): void {
-    byId('updateBanner').style.display = 'flex';
+    byId('updateBanner').classList.add('show');
 }
 function hideUpdateBanner(): void {
-    byId('updateBanner').style.display = 'none';
+    byId('updateBanner').classList.remove('show');
 }
 function setUpdateBannerAvailableUi(info: UpdateInfo): void {
@ -103,7 +103,7 @@ function setUpdateBannerAvailableUi(info: UpdateInfo): void {
    updateBannerState = 'available';
    showUpdateBanner();
-    byId('updateProgress').style.display = 'none';
+    byId('updateProgress').classList.add('is-hidden');
    const bar = byId('updateProgressBar');
    bar.classList.remove('downloading');
@ -123,7 +123,7 @@ function setDownloadPendingUi(): void {
    const button = byId<HTMLButtonElement>('updateButton');
    button.textContent = UI_TEXT.updates.downloading;
    button.disabled = true;
-    byId('updateProgress').style.display = 'block';
+    byId('updateProgress').classList.remove('is-hidden');
    const bar = byId('updateProgressBar');
    bar.classList.add('downloading');
@ -149,7 +149,7 @@ function setDownloadReadyUi(info?: UpdateInfo): void {
    bar.style.width = '100%';
    byId('updateProgressGauge').setAttribute('aria-valuenow', '100');
-    byId('updateProgress').style.display = 'block';
+    byId('updateProgress').classList.remove('is-hidden');
    byId('updateText').textContent = `Version ${activeInfo.version} ${UI_TEXT.updates.ready}`;
    const button = byId<HTMLButtonElement>('updateButton');
    button.textContent = UI_TEXT.updates.installNow;
@ -187,13 +187,13 @@ function renderUpdateChangelog(notes?: string): void {
    empty.hidden = true;
    if (!normalized) {
-        card.style.display = 'none';
+        card.classList.add('is-hidden');
        panel.hidden = true;
        updateChangelogExpanded = false;
        return;
    }
-    card.style.display = 'block';
+    card.classList.remove('is-hidden');
    const fragment = document.createDocumentFragment();
    let currentList: HTMLUListElement | null = null;
@ -273,7 +273,7 @@ function renderUpdateChangelog(notes?: string): void {
 function refreshUpdateChangelogToggleText(): void {
    const toggle = byId<HTMLButtonElement>('updateChangelogToggle');
    const card = byId<HTMLElement>('updateChangelogCard');
-    if (card.style.display === 'none') {
+    if (card.classList.contains('is-hidden')) {
        return;
    }
@ -299,14 +299,14 @@ function refreshUpdateModalTexts(): void {
    // already on disk and ready to install, hide the button.
    const skipBtn = byId<HTMLButtonElement>('updateModalSkipBtn');
    skipBtn.textContent = UI_TEXT.updates.modalSkipVersion;
-    skipBtn.style.display = isReady ? 'none' : '';
+    skipBtn.classList.toggle('is-hidden', isReady);
    byId('updateChangelogLabel').textContent = UI_TEXT.updates.changelogLabel;
    byId('updateChangelogEmpty').textContent = UI_TEXT.updates.noChangelog;
    const metaText = getUpdateModalMetaText(info);
    const meta = byId('updateModalMeta');
    meta.textContent = metaText;
-    meta.style.display = metaText ? 'block' : 'none';
+    meta.classList.toggle('is-hidden', !metaText);
    renderUpdateChangelog(info.releaseNotes);
    refreshUpdateChangelogToggleText();
@ -349,7 +349,7 @@ function confirmUpdateModal(): void {
 function toggleUpdateChangelog(): void {
    const card = byId<HTMLElement>('updateChangelogCard');
-    if (card.style.display === 'none') {
+    if (card.classList.contains('is-hidden')) {
        return;
    }
@ -374,7 +374,7 @@ function refreshUpdateUiTexts(): void {
    } else if (updateBannerState === 'downloading') {
        button.textContent = UI_TEXT.updates.downloading;
        button.disabled = true;
-        progress.style.display = 'block';
+        progress.classList.remove('is-hidden');
        if (latestDownloadProgress) {
            bar.classList.remove('downloading');
            bar.style.width = `${latestDownloadProgress.percent}%`;
@ -388,7 +388,7 @@ function refreshUpdateUiTexts(): void {
        setDownloadReadyUi(latestUpdateInfo);
    } else {
        hideUpdateBanner();
-        progress.style.display = 'none';
+        progress.classList.add('is-hidden');
        bar.classList.remove('downloading');
        bar.style.width = '0%';
        byId('updateText').textContent = UI_TEXT.updates.bannerDefault;
@ -458,7 +458,7 @@ async function checkUpdate(): Promise<void> {
        setCheckButtonCheckingState(false);
        window.setTimeout(() => {
-            if (!manualUpdateOutcomeHandled && !updateReady && byId('updateBanner').style.display !== 'flex') {
+            if (!manualUpdateOutcomeHandled && !updateReady && !byId('updateBanner').classList.contains('show')) {
                shouldOpenUpdateModalOnAvailable = false;
                notifyUpdate(UI_TEXT.updates.latest, 'info');
            }
@ -580,7 +580,7 @@ window.api.onUpdateDownloadProgress((progress: UpdateDownloadProgress) => {
    byId('updateProgressGauge').setAttribute('aria-valuenow', String(Math.round(progress.percent)));
    showUpdateBanner();
-    byId('updateProgress').style.display = 'block';
+    byId('updateProgress').classList.remove('is-hidden');
    const mb = (progress.transferred / 1024 / 1024).toFixed(1);
    const totalMb = (progress.total / 1024 / 1024).toFixed(1);
--- a/src/renderer.ts
+++ b/src/renderer.ts
@ -345,9 +345,7 @@ function renderEventsList(events: EventLogEntry[]): void {
    list.replaceChildren();
    if (events.length === 0) {
        const empty = document.createElement('div');
-        empty.style.color = 'var(--text-secondary)';
+        empty.className = 'event-viewer-empty';
        empty.style.padding = '12px';
        empty.style.textAlign = 'center';
        empty.textContent = UI_TEXT.queue.viewEventsEmpty;
        list.appendChild(empty);
        return;
@ -514,9 +512,9 @@ function renderChatViewerList(messages: ChatViewerMessage[]): void {
            if (user) {
                const uSpan = document.createElement('span');
                uSpan.className = 'chat-viewer-user';
-                // Per-user IRC color is preserved; the class supplies weight.
+                // Per-user IRC color overrides the default accent colour
                // supplied by .chat-viewer-user; the class also sets weight.
                if (m.color) uSpan.style.color = m.color;
                else uSpan.style.color = 'var(--accent)';
                uSpan.textContent = `${user}:`;
                row.appendChild(uSpan);
            }
@ -977,7 +975,7 @@ function getSelectedFilenameFormat(): 'simple' | 'timestamp' | 'template' | 'par
 function updateFilenameTemplateVisibility(): void {
    const selected = getSelectedFilenameFormat();
    const wrap = byId('clipFilenameTemplateWrap');
-    wrap.style.display = selected === 'template' ? 'block' : 'none';
+    wrap.classList.toggle('shown', selected === 'template');
 }
 interface TemplatePreviewContext {
@ -1290,13 +1288,11 @@ function updateClipDuration(): void {
    const duration = endSec - startSec;
    const durationDisplay = byId('clipDurationDisplay');
-    if (duration > 0) {
+    const isValid = duration > 0;
-        durationDisplay.textContent = formatSecondsToTime(duration);
+    durationDisplay.classList.toggle('invalid', !isValid);
-        durationDisplay.style.color = '#00c853';
+    durationDisplay.textContent = isValid
-    } else {
+        ? formatSecondsToTime(duration)
-        durationDisplay.textContent = UI_TEXT.clips.invalidDuration;
+        : UI_TEXT.clips.invalidDuration;
        durationDisplay.style.color = '#ff4444';
    }
    updateFilenameExamples();
 }
@ -1473,8 +1469,8 @@ async function loadCutterFromPath(filePath: string): Promise<void> {
    cutterStartTime = 0;
    cutterEndTime = info.duration;
-    byId('cutterInfo').style.display = 'flex';
+    byId('cutterInfo').classList.add('shown');
-    byId('timelineContainer').style.display = 'block';
+    byId('timelineContainer').classList.add('shown');
    byId('btnCut').disabled = false;
    byId('infoDuration').textContent = formatTime(info.duration);
@ -1561,15 +1557,15 @@ async function updatePreview(time: number): Promise<void> {
    }
    const preview = byId('cutterPreview');
-    preview.innerHTML = `<div class="placeholder"><p>${UI_TEXT.cutter.previewLoading}</p></div>`;
+    applyHtml(preview, `<div class="placeholder"><p>${escapeHtml(UI_TEXT.cutter.previewLoading)}</p></div>`);
    const frame = await window.api.extractFrame(cutterFile, time);
    if (frame) {
-        preview.innerHTML = `<img src="${frame}" alt="Preview">`;
+        applyHtml(preview, `<img src="${escapeHtml(frame)}" alt="${escapeHtml(UI_TEXT.cutter.previewAlt)}">`);
        return;
    }
-    preview.innerHTML = `<div class="placeholder"><p>${UI_TEXT.cutter.previewUnavailable}</p></div>`;
+    applyHtml(preview, `<div class="placeholder"><p>${escapeHtml(UI_TEXT.cutter.previewUnavailable)}</p></div>`);
 }
 async function startCutting(): Promise<void> {
--- a/src/styles.css
+++ b/src/styles.css
@ -120,6 +120,14 @@ body {
    gap: 8px;
 }
 /* Compact spacing variant — applied when the sidebar's streamer-list
   filter input is visible directly below the title, so the default
   padding-bottom + the filter's own margin don't double up into a
   visually loose gap. */
 .section-title.compact {
    margin-bottom: 4px;
 }
 .streamers {
    flex: 1;
    overflow-y: auto;
@ -199,6 +207,7 @@ body {
   animation has somewhere to live and the styling stays consistent
   with the rest of the action surfaces. */
 .vod-bulk-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
@ -208,7 +217,8 @@ body {
    margin-bottom: 12px;
    flex-wrap: wrap;
    box-shadow: 0 4px 16px rgba(145, 70, 255, 0.10);
-    /* Animation fires whenever the JS flips display:none -> display:flex,
+    /* Animation fires whenever the bar transitions from display:none
       (.is-hidden present) back to display:flex (.is-hidden removed),
       because Animation events restart on each display change. */
    animation: vod-bulk-bar-slide 0.22s cubic-bezier(0.16, 1, 0.3, 1);
 }
@ -310,12 +320,18 @@ body {
 }
 .clip-modal-duration-value {
-    color: #00c853;
+    color: var(--success);
    font-weight: 600;
    font-family: 'Consolas', 'Segoe UI Mono', monospace;
    font-size: 14px;
 }
 /* updateClipDuration flips this class when end <= start so the value
   reads as a clear "Ungueltig!" / error message in red. */
 .clip-modal-duration-value.invalid {
    color: var(--error);
 }
 .clip-modal-hint {
    color: var(--text-secondary);
    font-size: 12px;
@ -324,9 +340,14 @@ body {
 }
 .clip-template-wrap {
    display: none;
    margin-top: 10px;
 }
 .clip-template-wrap.shown {
    display: block;
 }
 /* Template-Guide button below the clip-template input — small offset
   from the lint badge that sits directly above it. Was a one-off
   inline style on the button. */
@ -450,6 +471,10 @@ body {
    color: var(--text);
    font-size: 13px;
 }
 /* No .filter-input:hover here — it's redundant with the global
   input[type="text"]:hover rule added in 4.6.142 (same effect: soft
   purple border on hover). The class is always applied to <input
   type="text"> elements, so the global rule already covers them. */
 .filter-input.compact {
    width: calc(100% - 16px);
@ -562,6 +587,13 @@ body {
    animation: skel-shimmer 1.5s linear infinite;
 }
 /* Three skeleton-line variants for the VOD card placeholder — match
   the visual rhythm of a real card (title line, then two shorter
   meta lines). Replaces inline width/height/margin-top declarations. */
 .vod-card-skeleton .vod-skel-line.title  { width: 85%; }
 .vod-card-skeleton .vod-skel-line.meta-1 { width: 55%; height: 10px; margin-top: 8px; }
 .vod-card-skeleton .vod-skel-line.meta-2 { width: 40%; height: 10px; margin-top: 6px; }
@keyframes skel-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
@ -683,6 +715,21 @@ select:focus {
    box-shadow: 0 0 0 3px rgba(145, 70, 255, 0.18);
 }
 /* Soft mouseover affordance — every text/search/number/etc. input + textarea
   + select picks up a half-tone accent border on hover, matching the
   .select-compact + .filter-input hover pattern. :not(:focus) keeps the
   focus ring (above) from competing, :not(:disabled) leaves disabled
   inputs inert. */
 input[type="text"]:hover:not(:focus):not(:disabled),
 input[type="search"]:hover:not(:focus):not(:disabled),
 input[type="number"]:hover:not(:focus):not(:disabled),
 input[type="password"]:hover:not(:focus):not(:disabled),
 input[type="email"]:hover:not(:focus):not(:disabled),
 textarea:hover:not(:focus):not(:disabled),
 select:hover:not(:focus):not(:disabled) {
    border-color: rgba(145, 70, 255, 0.45);
 }
 /* ============================================
   CUSTOM CHECKBOX — modern Twitch-purple
   ============================================
@ -819,6 +866,19 @@ select option {
    padding: 7px 10px;
    color: var(--text);
    font-size: 13px;
    transition: border-color 0.15s, background 0.15s;
 }
 .select-compact:hover:not(:disabled) {
    background: rgba(145, 70, 255, 0.08);
    border-color: rgba(145, 70, 255, 0.45);
 }
 /* Wider variant — used for the Archive-search streamer-name select
   where short streamer names would collapse the dropdown to an
   unhelpful 80-100px otherwise. Matches the .form-stack.size-md width. */
 .select-compact.size-md {
    min-width: 160px;
 }
 /* Queue Section */
@ -1073,12 +1133,17 @@ select option {
 }
 .queue-details {
    display: none;
    font-size: 10px;
    color: var(--text-secondary);
    padding: 4px 0;
    word-break: break-all;
 }
 .queue-details.expanded {
    display: block;
 }
 .queue-details div {
    margin-bottom: 2px;
 }
@ -1166,6 +1231,15 @@ select option {
    transition: all 0.2s;
 }
 .btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
 }
 .btn:disabled:hover {
    background: inherit;
 }
 .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(145, 70, 255, 0.65);
@ -1825,6 +1899,16 @@ select option {
    margin-bottom: 10px;
 }
 /* Search/filter tool-row variant — wraps on narrow widths so the
   select / input cluster collapses gracefully. Used by the Archive
   search row (input + 3 selects + button). */
 .form-row.search-bar {
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
    align-items: center;
 }
 .log-panel {
    background: #11151c;
    border: 1px solid rgba(255,255,255,0.12);
@ -1886,6 +1970,11 @@ select option {
    box-shadow: 0 0 0 2px rgba(145, 70, 255, 0.55);
 }
 .btn-secondary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
 }
 /* ============================================
   COMPACT / UTILITY BUTTONS
   ============================================
@ -2912,12 +3001,17 @@ select option {
 }
 .timeline-container {
    display: none;
    background: var(--bg-card);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
 }
 .timeline-container.shown {
    display: block;
 }
 .timeline {
    position: relative;
    height: 60px;
@ -2996,15 +3090,19 @@ select option {
 }
 .cutter-info {
    display: none;
    background: var(--bg-card);
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-around;
    text-align: center;
 }
 .cutter-info.shown {
    display: flex;
 }
 .cutter-info-item {
    display: flex;
    flex-direction: column;
@ -3689,11 +3787,6 @@ input[type="number"]::-webkit-outer-spin-button {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 167, 38, 0.25);
 }
 .app-toast.error {
    border-left-color: var(--error);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 70, 70, 0.25);
 }
 /* ============================================
   STREAMER SECTION COUNTER
   ============================================
@ -3803,6 +3896,7 @@ input[type="number"]::-webkit-outer-spin-button {
 .chat-viewer-row .chat-viewer-user {
    font-weight: 700;
    margin-right: 4px;
    color: var(--accent);
 }
 .chat-viewer-row .chat-viewer-tag {
@ -3845,6 +3939,14 @@ input[type="number"]::-webkit-outer-spin-button {
    font-family: 'Consolas', 'Segoe UI Mono', monospace;
 }
 /* Empty state inside the events-viewer modal — shown when an events
   file exists but contains no parsed entries. */
 .event-viewer-empty {
    color: var(--text-secondary);
    padding: 12px;
    text-align: center;
 }
 .event-viewer-tag {
    font-weight: 600;
    margin-right: 8px;
@ -4206,7 +4308,14 @@ input[type="number"]::-webkit-outer-spin-button {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 0 4px rgba(145, 70, 255, 0.55);
 }
-/* Skeleton loading state */
+/* Skeleton loading state — switches the profile-header from its
   regular block layout to a flex row so the avatar + body sit
   side-by-side. The element itself was previously flipped via inline
   .style.display='flex' in renderStreamerProfileSkeleton(). */
 .streamer-profile-skeleton {
    display: flex;
 }
 .streamer-profile-skeleton .streamer-profile-skel-block {
    background: linear-gradient(90deg, var(--bg-elevated) 0%, rgba(255,255,255,0.06) 50%, var(--bg-elevated) 100%);
    background-size: 200% 100%;
@ -4214,6 +4323,37 @@ input[type="number"]::-webkit-outer-spin-button {
    border-radius: 4px;
 }
 /* Pre-shaped skeleton block variants — each matches one of the
   real-profile-card slots so the loading silhouette previews the
   final layout. Replaces inline width/height/border-radius declarations. */
 .streamer-profile-skel-block.avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    flex-shrink: 0;
 }
 .streamer-profile-skel-block.name {
    width: 180px;
    height: 24px;
 }
 .streamer-profile-skel-block.badge {
    width: 90px;
    height: 18px;
    border-radius: 10px;
 }
 .streamer-profile-skel-block.subtitle {
    width: 60%;
    height: 14px;
    margin-top: 6px;
 }
 .streamer-profile-skel-stats {
    margin-top: 8px;
 }
@keyframes profile-skel-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
@ -4399,6 +4539,14 @@ input[type="number"]::-webkit-outer-spin-button {
   and the multitude of transition: all 0.2s declarations — anything
   that involves motion. Critical for users with vestibular disorders
   and a baseline accessibility expectation in 2025. */
 /* Generic hide utility. Use when an element's visible-state display
   differs (button = inline-block, bulk-bar = flex, etc.) so a single
   class can hide any of them without per-element .shown modifiers.
   The !important wins over the base class's display declaration. */
 .is-hidden {
    display: none !important;
 }
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,